Как добавить динамический заголовок сайта и слоган в глобальный заголовок Divi

Как добавить динамический заголовок сайта и слоган в глобальный заголовок Divi

Знание того, как добавить динамический заголовок сайта и слоган в глобальный заголовок Divi, будет полезно при создании веб-сайтов Divi. И для этого есть несколько веских причин. С одной стороны, не все сайты имеют логотип. Заголовок сайта - хорошая замена логотипу. Другая причина - продвигать свой бренд, размещая важную информацию на своем сайте, где ее увидят все.

В этом уроке мы покажем вам, как добавить динамический заголовок и слоган сайта в глобальный заголовок Divi. Это решение будет динамически извлекать заголовок и слоган сайта из серверной части WordPress. Кроме того, у вас будут все мощные возможности дизайна Divi, чтобы настроить заголовок и слоган так, как вы хотите!

Возможный результат

Вот предварительный просмотр дизайна, который мы создадим в этом уроке.

Шаблон глобального заголовка динамического заголовка сайта 6

Обратите внимание на заголовок сайта и слоган в верхней середине заголовка, который отображается динамически.

Пример модификации заголовка Divi

Бесплатная загрузка

Присоединяйтесь к Divi Newlsetter, и мы отправим вам по электронной почте копию Ultimate Divi Landing Page Layout Pack, а также множество других бесплатных и удивительных ресурсов, советов и приемов Divi. Следуйте ему, и вы в кратчайшие сроки станете мастером Divi. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.СКАЧАТЬ

Чтобы импортировать шаблон, перейдите в Divi> Theme generator.

Щелкните значок переносимости в правом верхнем углу страницы.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки с вашего компьютера.

Затем нажмите кнопку импорта.

Выберите шаблон divi

После завершения общий шаблон заголовка будет доступен в Divi Theme Builder.

Изменить глобальный заголовок divi

Далее мы перейдем к дизайну.

Название сайта и слоган на WordPress

У каждого сайта WordPress есть заголовок и слоган. Название сайта - это в основном название сайта, а слоган - это короткая фраза, которая обычно объясняет, что это такое.

Нередко при установке WordPress добавляют заголовок сайта и забывают его.

Настроить заголовок divi

А некоторые люди даже не осознают, что слоган существует, не говоря уже о времени, чтобы обновить его. Кроме того, когда вы используете тему Divi, заголовок и слоган не будут отображаться на вашем сайте по умолчанию, поэтому их легко игнорировать. Однако заголовок и слоган являются важными частями веб-сайта и будут распознаваться поисковыми системами.

Вы можете найти и обновить заголовок и слоган сайта в WordPress в любое время, перейдя на панель управления WordPress и выбрав «Настройки»> «Общие».

Или вы можете выбрать другой маршрут, используя настройщик темы, чтобы обновить заголовок сайта в общих настройках.

Настроить идентичность wordpress

Теперь, когда мы знаем, где находится заголовок сайта и слоган на бэкэнде WordPress, давайте посмотрим, как мы можем добавить их в заголовок Divi!

Как добавить динамический заголовок сайта и слоган в глобальный заголовок в Divi

Импорт предварительно разработанного шаблона глобального заголовка

В этом руководстве мы сосредоточимся на том, как добавить динамический заголовок и слоган сайта в существующий заголовок вместо того, чтобы создавать полный заголовок с нуля. Это сэкономит ваше время и улучшит четкость. Итак, чтобы начать разработку этого заголовка, мы собираемся импортировать предопределенный глобальный шаблон заголовка из нашего четвертый генератор тем .

Когда у вас есть скачал пачку создание тема , разархивируйте файл и найдите JSON-файл шаблона веб-сайта по умолчанию.

Затем перейдите в Divi> Theme Builder.

Щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите файл JSON шаблона веб-сайта по умолчанию и нажмите кнопку «Импорт».

Импорт модели Divi

После добавления шаблона в конструктор тем удалите шаблон нижнего колонтитула и щелкните, чтобы изменить общий заголовок.

Удалить шаблон из нижнего колонтитула

Добавление динамического названия сайта и слогана в заголовок

Внутри редактора макета шаблона вы увидите уже созданный готовый заголовок. Мы можем сразу приступить к настройке.

Переместить логотип

Для начала перетащите модуль изображения, отображающий логотип (динамически) из среднего столбца верхней строки в левый столбец верхней строки.

Добавьте модуль призыва к действию для отображения заголовка и слогана сайта.

Затем добавьте новый модуль призыва к действию в средний столбец верхней строки (там, где был логотип).

Настройте призыв к действию

Мы будем использовать модуль призыва к действию для отображения заголовка и слогана сайта.

Но прежде чем начать добавлять контент, сначала выберите НЕТ, чтобы использовать цвет фона.

Настроить призыв к действию

Добавить динамический заголовок сайта

В настройках содержимого наведите указатель мыши на поле ввода заголовка и щелкните значок «Использовать динамический контент». Затем выберите «Заголовок сайта» из списка.

Добавить динамический слоган сайта

Затем наведите указатель мыши на область тела и выберите значок «Использовать динамическое содержимое». Затем выберите из списка «Слоган сайта».

Добавьте слоган сайта divi

Добавить динамическую ссылку на главную страницу

Обычно заголовок сайта перенаправляется на главную страницу при нажатии, особенно если вы заменяете логотип. Чтобы перенаправить весь курс на домашнюю страницу, добавьте ссылку на домашнюю страницу как динамическое содержимое в URL-адрес ссылки на курс.

Добавьте ссылку на главную страницу

Дизайн текста заголовка и слогана сайта

Теперь заголовок сайта и слоган отображаются в заголовке динамически. Все, что мы должны сделать сейчас, это добавить немного стиля. Помните, нам нужно настроить текст заголовка для оформления заголовка сайта и основной текст для оформления слогана.

Перейдите на вкладку дизайна и обновите следующее:

  • Название шрифта: Heebo
  • Название шрифта Вес: жирный
  • Стиль шрифта заголовка: TT
  • Размер текста заголовка: 32px (рабочий стол), 24px (планшет и телефон)
  • Расстояние между заглавными буквами: 0.3em
  • Body Font: Робото
  • Стиль шрифта тела: курсив
  • Цвет основного текста:
  • Размер основного текста: 13 пикселей
  • Расстояние между буквами тела: 0.1em
  • Высота Линии Тела: 1em
Настроить шрифт заголовка divi

Чтобы помочь с центрированием, уберите отступ по умолчанию под основным текстом, добавив следующий пользовательский CSS в описание промо:

padding-bottom: 0 пикселей
Добавить собственный код divi css

Дополнительные корректировки дизайна

В этой последней части руководства мы собираемся внести некоторые дополнительные изменения в дизайн заголовка, чтобы убедиться, что элементы остаются вертикально центрированными в каждом столбце, и дать кнопке уникальный дизайн. Мы также добавим волнистую линию до и после в слоган (только для ударов ногами).

Вертикальное центрирование столбцов / содержимого

Прямо сейчас в верхнем ряду находится актив «Выровнять высоту столбца», который использует свойство flex. Мы можем извлечь выгоду из этого, добавив небольшой фрагмент кода CSS, чтобы убедиться, что все столбцы остаются вертикально центрированными внутри строки. Для этого откройте настройки для верхней строки и добавьте следующий CSS в основной элемент:

align-items: center;

Обновление столбца с помощью кнопки

Затем откройте настройки для столбца 3 в верхней строке и уберите цвет фона и отступы.

Настроить кнопку контакта divi

Обновление фона кнопки

Затем откройте настройку модуля кнопок и обновите фон новым градиентом фона следующим образом:

  • Цвет градиента слева Цвет: #ffffff
  • Правильный цвет градиента фона: # 1dbf73
  • Направление градиента: 135deg
  • Начальная позиция: 10%
  • Конечная позиция: 0%
Настроить фон кнопки divi

Добавление символов до и после в слоган

Каждый элемент динамического содержимого можно изменить, щелкнув значок шестеренки. Чтобы добавить символы до и после слогана, откройте настройки модуля призыва к действию, содержащего слоган, и щелкните значок редактирования на динамическом содержании слогана сайта. Затем добавьте символы до и после записей.

Покажите лозунг Divi

Конечный результат

Чтобы увидеть результат, откройте любую страницу своего сайта. Вы должны увидеть красиво отображаемый динамический заголовок и слоган!

Конечный результат divi

Заключительные мысли

Очень приятно, что вы можете настроить общий заголовок с динамическим заголовком и слоганом сайта. Это похоже на то, что будет полезно для многих сайтов. Мне также нравится идея включения названия сайта и слогана в дополнение к логотипу для еще более сильного представления бренда.

источник: Элегантная тема

Как создать плавный переход с эффектами прокрутки на Divi

Как создать плавный переход с эффектами прокрутки на Divi

При разработке страницы услуг вы хотите, чтобы посетители заметили все различные услуги, которые вы предоставляете. Во многих случаях это будет только одна конкретная услуга, которую они ищут, но если вы предоставите оптимизированный способ в своей структуре услуг, ваши посетители с большей вероятностью будут обращаться со всеми ними. 

В этом руководстве мы покажем вам, как проявить творческий подход с помощью эффектов прокрутки Divi и создать плавный переход между службами. Вы также можете скачать файл JSON бесплатно!

Пойдем.

Возможный результат

Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.

Переход между разделом divi

1, воссоздать структуру элементов

Добавить раздел № 1

расстояние

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените значения отступов на разных размерах экрана.

  • Верхний отступ: 80px (рабочий стол и планшет), 0px (телефон)
  • Нижняя обивка: 80px
Раздел параметров Divi

Добавить новую строку

Структура столбца

Продолжите добавлять новую строку, используя следующую структуру столбцов:

калибровка

Пока не добавляете модули, откройте параметры линии и примените следующие изменения к параметрам измерения:

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Конфигурация Divi Spacing

расстояние

Затем добавьте пользовательский верхний и нижний поля.

  • Верхнее поле: 200px
  • Нижнее поле: 200px
Конфигурация межстрочного интервала Divi

Добавить текстовый модуль в столбец 1

Добавить контент H2

Пришло время добавить модули, начиная с текстового модуля в столбце 1. Введите любое содержимое H2, которое хотите.

Наши услуги, предлагаемые экспертами на данный момент

Настройки текста H2

Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:

  • Название 2 Полиция: ежеквартально
  • Заголовок 2 Размер текста: 80px (рабочий стол), 50px (планшет), 40px (телефон)
  • Высота линии 2 головы: 1.2em
Главный дивизион полиции

расстояние

Затем добавьте нижнее поле для планшета и телефона.

  • Нижнее поле: 50 пикселей (только для планшета и телефона)
Конфигурация интервалов текста Divi

Добавить текстовый модуль в столбец 2

Добавить контент

Перейдем ко второму столбцу. Здесь первый модуль, который нам нужен, - это текстовый модуль с некоторым описанием.

Текстовое поле divi содержимого

Настройки текста

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

  • Шрифт текста: кабина
  • Стиль шрифта текста: заглавные
  • Цвет текста: # 000000
  • Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
  • Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
  • Высота строки текста: 3em
Текстовый параметр Divi

Добавьте модуль разделения в столбец 2

видимость

Следующий и последний модуль, который нам нужен в этом столбце, - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

  • Показать разделитель: Да
Видимый разделитель

Линия

Затем измените цвет линии модуля.

  • Цвет линии: # 000000
Цвет фона разделителя

калибровка

Затем внесите некоторые изменения в параметры размеров.

  • Вес делителя: 3px
  • Ширина: 28%
Размер разделителя Divi

расстояние

Мы также добавляем верхнее поле.

  • Верхнее поле: 10px
Расстояние между разделительными модулями Divi

Добавить раздел № 2

расстояние

Переходим к следующему регулярному разделу. Удалите верхнее заполнение по умолчанию из раздела.

  • Верхняя обивка: 0px
Раздел 2 divi spacing

переполнение

Также скрыть переполнения.

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Скрыть переполнение модуля divi

Добавить новую строку

Структура столбца

Продолжайте добавлять первую строку, используя следующую структуру столбцов:

Выберите макет divi

калибровка

Не добавляя больше модулей, откройте параметры линии, получите доступ к параметрам определения размера и внесите следующие изменения:

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 1
  • Выровнять высоту столбца: Да
  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Раздел divi конфигурации желоба

расстояние

Затем удалите все верхние и нижние отступы по умолчанию.

  • Верхняя обивка: 0px
  • Нижняя обивка: 0px
Настройки интервала линейного модуля Divi 1

Настройки столбца 1

Фоновый цвет

Затем откройте настройки для столбца 1 и измените цвет фона.

  • Цвет фона: # f7f7f7
Фоновая конфигурация модуля линии Divi

расстояние

Завершите настройки столбца, добавив пользовательские значения заполнения для экрана разных размеров.

  • Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Левый отступ: 8%
  • Правый отступ: 8%
Настройки столбца модуля строки

Настройки столбца 2

расстояние

Продолжите, открыв настройки в столбце 2. Перейдите на вкладку «Дополнительно» и добавьте пользовательские значения заполнения для разных размеров экрана.

  • Верхнее заполнение: 100px (рабочий стол), 50px (планшет и телефон)
  • Нижняя обивка: 200px
  • Отступ слева: 150 пикселей (стол), 0 пикселей (планшет и телефон)
Настройки расстояния между модулями Divi

Добавьте модуль разделения в столбец 1

видимость

В первом столбце первый необходимый нам модуль - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

  • Показать разделитель: Да
Показать разделитель divi 1

Линия

Затем измените цвет линии модуля.

  • Цвет линии: # 000000
Настройки разделителя Divi

калибровка

Также внесите изменения в параметры размеров.

  • Вес делителя: 3px
  • Ширина: 50%
Размер разделителя Divi

Добавить текстовый модуль в столбец 1

Добавить контент H3

Следующий модуль, который нам нужен в столбце 1, - это текстовый модуль с содержимым H3.

Настройка раздела содержимого Divi

Настройки текста H3

Перейдите на вкладку дизайна модуля и измените настройки текста H3:

  • Название 3 Полиция: ежеквартально
  • Цвет текста элемента 3: # 000000
  • Элемент 3 Размер текста: 50px (рабочий стол), 40px (планшет), 35px (телефон)
  • Высота линии 3 головы: 1.1em

Добавить текстовый модуль в столбец 2

Добавить контент

Во втором столбце первый модуль, который нам нужен, это текстовый модуль с некоторым содержанием описания.

Настройка текстового модуля Divi

Настройки текста

Измените настройки текста модуля следующим образом:

  • Шрифт текста: кабина
  • Стиль шрифта текста: заглавные
  • Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
  • Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
  • Высота строки текста: 3em
Настройка шрифта формы текста Divi

Добавить модуль кнопки в столбец 2

Добавить копию

Следующий и последний необходимый нам модуль - это кнопочный модуль. Введите копию по вашему выбору.

Настройка содержимого текстового модуля

Настройки кнопок

Затем стиль кнопки.

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: #ffffff
  • Цвет фона кнопки: # 000000
  • Ширина границы кнопки: 0 пикселей
Настройка стиля кнопки Divi
  • Шрифт кнопки: ежеквартально
  • Вес шрифта кнопки: жирный
Настройки цвета кнопки Divi

расстояние

Также добавьте пользовательские отступы.

  • Верхняя обивка: 50px
  • Нижняя обивка: 50px
  • Левый отступ: 100px
  • Правый отступ: 100 пикселей
Настройки расстояния между кнопками модуля Divi

Позиция

И переместите кнопку соответственно:

  • Позиция: Абсолют
  • Расположение: внизу слева
Регулировка положения модуля кнопок Divi

Клонируйте линию столько раз, сколько необходимо

После завершения всей строки и всех ее модулей вы можете клонировать всю строку три раза.

Клонировать модуль divi

Изменить весь контент

Не забудьте отредактировать все содержимое в двух строках.

Редактировать содержимое раздела divi

2. Применить эффекты прокрутки

Эффекты прокрутки первого ряда

Горизонтальное движение

После того, как вы завершили все строки в своем разделе, пришло время добавить эффекты прокрутки. Откройте первый ряд секции и добавьте горизонтальное движение.

  • Активировать горизонтальное движение: Да
  • Начальное смещение: -5
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Эффект движения триггера: середина элемента
Применить эффекты прокрутки divi

Исчезать и исчезать

Также используйте входящий и исходящий эффект затухания.

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 100%
  • Средняя непрозрачность: 100% (при 50%)
  • Конечная непрозрачность: 0% (до 53%)
  • Эффект движения триггера: середина элемента
Настроить раздел divi с затухающей анимацией

Эффекты прокрутки среднего ряда

Вертикальное движение

Затем мы добавим эффекты прокрутки ко всем строкам между первой и последней строкой раздела. Сначала используйте вертикальное движение:

  • Активировать вертикальное движение: Да
  • Начальное смещение: -4
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Эффект триггера движения: середина элемента
Конфигурация анимации прокрутки Divi

Исчезать и исчезать

Также активируйте эффект затухания.

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 100% (от 27% до 50%)
  • Конечное смещение: 0 (при 53%)
  • Эффект движения триггера: середина элемента
Анимация затухания линии Divi

Эффекты прокрутки последней строки

Вертикальное движение

Затем откройте последнюю строку раздела и добавьте следующее вертикальное движение:

  • Активировать вертикальное движение: Да
  • Начальное смещение: -4
  • Среднее смещение: 0 (при 26%)
  • Конечное смещение: 0
  • Эффект движения триггера: середина элемента
Модуль анимации прокрутки divi line

Исчезать и исчезать

С входящим и исходящим эффектом исчезновения, и все готово!

  • Активировать постепенное исчезновение: Да
  • Начальная непрозрачность: 0%
  • Средняя непрозрачность: 100% (от 27% до 50%)
  • Конечная непрозрачность: 100% (до 53%)
  • Эффект движения триггера: середина элемента
Настройки анимации внешнего вида модуля Divi Line

Конечный результат

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

Финальная демонстрация

Заключительные мысли

В этой статье мы показали вам, как создать красивый сервисный переход с помощью эффектов прокрутки Divi. Еще до того, как одна подача исчезла, другая начинает появляться, обеспечивая приятный переход, приятный для глаз. Такой подход поможет вам выделить каждую услугу на индивидуальном уровне. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Как создать прокручивающуюся карусель члена команды с помощью Divi

Как создать прокручивающуюся карусель члена команды с помощью Divi

Создавая страницу «О нас», вы, вероятно, также захотите представить членов своей команды. Таким образом, вы позволяете посетителям взаимодействовать с людьми, стоящими за вашим бизнесом. Если вы ищете способ оживить раздел членов вашей команды на свитке, это руководство может быть для вас. Мы создадим карусель для членов команды с автоматической прокруткой, которая перемещается по мере того, как ваши посетители прокручивают страницу. 

демонстрация

Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.

Член команды Scroll Divi

Начало зачатия

Добавить новый раздел

расстояние

Начните с добавления нового обычного раздела на страницу, над которой вы работаете. Откройте настройки раздела и добавьте пользовательские отступы на экранах разных размеров.

  • Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
  • Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
Конфигурация параметров

переполнение

Чтобы убедиться, что в нашем дизайне не появляется горизонтальная полоса прокрутки, мы скроем переполнение разделов на вкладке «Дополнительно».

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
Конфигурация переполнения

Добавить строку № 1

Структура столбца

Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:

Выберите макет divi

калибровка

Еще не добавляя никаких модулей, откройте настройки строк, перейдите на вкладку дизайна и измените ширину и максимальную ширину в настройках размеров.

  • Ширина: 90%
  • Максимальная ширина: 1580 пикселей
Параметр линии Divi

расстояние

Мы также добавляем пользовательские верхний и нижний отступы.

  • Верхняя обивка: 100px
  • Нижняя обивка: 100px
Конфигурация межстрочного интервала divi

Добавить текстовый модуль в столбец

Добавить контент H2

Пришло время добавить модули, начиная с первого текстового модуля. Введите содержание H2 по вашему выбору.

Встретить команду

Настройки текста H2

Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:

  • Название шрифта 2: Зыбучие пески
  • Название шрифта 2: полужирный
  • Цвет текста элемента 2: # 000000
  • Заголовок 2 Размер текста: 70px (рабочий стол), 50px (планшет), 40px (телефон)
Расстояние между текстом Divi

Добавьте модуль разделения в столбец

видимость

Затем добавьте модуль разделения. Убедитесь, что опция «Показать разделитель» включена.

  • Показать разделитель: Да
Показать разделитель divi

Линия

Затем внесите некоторые изменения в настройки линии.

  • Цвет линии: # edf000
  • Стиль линии: сплошная
  • Положение линии: сверху
Стиль интервала Divi

калибровка

И заполните параметры модуля, соответственно изменив параметры размеров:

  • Вес делителя: 20px
  • Ширина: 11%
  • Выравнивание модуля: слева
  • Высота: 20px
Калибровка модуля divi line

Добавить строку № 2

Структура столбца

В следующий ряд! Используйте следующую структуру столбцов:

Конфигурация столбца Divi

калибровка

Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:

  • Использовать произвольную ширину желоба: Да
  • Ширина желоба: 2
  • Ширина: 100%
  • Максимальная ширина: 100%
Конфигурация ширины желоба

расстояние

Затем добавьте левый и правый отступ только на меньших экранах.

  • Левый отступ: 5% (только планшет и телефон)
  • Правый отступ: 5% (только планшет и телефон)
Конфигурация стиля межстрочного интервала

Параметры столбца (5x)

Теперь, в следующих трех шагах этого урока, мы собираемся внести некоторые изменения в столбцы. Примените три шага к каждому столбцу в строке.

Конфигурация строки параметров Divi

Градиентный фон

Сначала добавьте градиентный фон в каждый столбец.

  • 1 цвет: rgba (255,255,255,0)
  • 2 цвет: rgba (0,0,0,0,84)
  • Тип градиента: линейный
  • Начальная позиция: 25%
  • Конечная позиция: 86%
  • Поместите градиент над фоновым изображением: Да
Конфигурация задней стойки Divi

Фоновое изображение

Затем загрузите фоновое изображение по вашему выбору. Это фоновое изображение представляет каждого члена команды, поэтому используйте разные изображения для каждого столбца.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
Добавить фоновое изображение столбца divi

Главный элемент

Завершите настройку столбца, добавив собственный CSS к основному элементу планшета каждого столбца. Эти строки кода CSS помогут нам разместить столбцы на планшете один под другим, вместо того, чтобы располагать два рядом.

ширина: 100%! важно; поле: 50px 0px 50px 0px! важно;
Код столбца css divi

Добавить персональный модуль в столбец

Добавить контент

Чтобы поделиться информацией о членах команды, мы будем использовать модуль Person. Добавьте первый модуль Person в столбец 1 и используйте любое содержимое, которое хотите.

Divi имя человека

Удалить изображение

Затем удалите изображение. Вместо этого мы используем фоновое изображение столбца.

Удалить изображение divi

Фоновое изображение

Затем мы добавим наложение изображения в качестве фонового изображения модуля. Вы можете найти тот, который мы используем, загрузив папку в начале этого руководства.

  • Размер фонового изображения: обложка
  • Положение фонового изображения: Центр
Фоновая конфигурация модуля Person

Настройки текста заголовка

Перейдите на вкладку дизайна модуля и измените настройки текста заголовка следующим образом:

  • Уровень заголовка: H3
  • Заголовок шрифта
  • Вес шрифта заголовка: жирный
  • Цвет текста заголовка: #ffffff
  • Размер текста заголовка: 230%
Настройка названия модуля Divi

Настройки основного текста

Также измените настройки основного текста.

  • Шрифт для тела: Open Sans
  • Цвет основного текста: #ffffff
  • Высота линии тела: 2,2 em
Настройка тела Divi

Настройки текста положения

Затем внесите некоторые изменения в настройки текста позиции.

  • Положение шрифта: Open Sans
  • Цвет текста позиции: # edf000
Диви позиция

расстояние

И завершите настройки модуля, добавив пользовательские значения отступов в настройки интервала.

  • Верхняя обивка: 70%
  • Нижняя прокладка: 10%
  • Левый отступ: 10%
  • Правый отступ: 10%
Расстояние между модулями Divi Person

Дублировать модуль "Человек" 4 раза

После того, как вы завершили модуль Person, вы можете клонировать весь модуль четыре раза.

Поместите дубликаты в оставшиеся столбцы

Поместите повторяющиеся модули в оставшиеся четыре столбца ряда. Не забудьте также отредактировать контент.

Преврати ряд в карусель с автопрокруткой

Измените размер строки № 2

Теперь, чтобы превратить эту строку в карусель членов команды с автоматической прокруткой, нам нужно повторно открыть настройки строки и изменить ширину и максимальную ширину в настройках размера.

  • Ширина: 180%
  • Максимальная ширина: 220% (рабочий стол), 100% (планшет и телефон)
Межстрочный интервал модификации деления

Добавьте горизонтальное движение линии № 2

Завершите настройку линии, добавив горизонтальное движение к настройкам эффекта прокрутки на вкладке «Дополнительно», и все готово!

  • Активировать горизонтальное движение: Да
  • Начальное смещение:
    • Офис: 2,5
    • Планшет и телефон: 0
  • Среднее смещение: 0 (при 40%)
  • Конечное смещение:
    • Офис: -25 (на 62%)
    • Планшет и телефон: 0
  • Эффект движения триггера: середина элемента
Конфигурация анимации прокрутки Divi

обследование

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

офис

Член команды Scroll Divi

Заключительные мысли

В этом уроке мы показали вам, как проявить творческий подход с помощью встроенных эффектов прокрутки Divi. В частности, мы воссоздали красивую карусель для членов команды с автоматической прокруткой. Когда посетители прокручивают страницу вниз, появляется другая часть карусели.

Как добавить больше иконок социальных сетей в Divi

Как добавить больше иконок социальных сетей в Divi

Divi позволяет вам контролировать и проектировать каждую деталь вашего сайта, от верхнего до нижнего колонтитула. Один из самых популярных элементов любого веб-сайта - это значки социальных сетей. Заинтересованная аудитория хочет найти вас в другом месте и узнать вас лучше. Очевидно, вам захочется сделать это как можно проще. 

Итак, мы покажем вам, как активировать дополнительные значки социальных сетей в параметрах темы Divi, как использовать Divi Builder для вставки значков социальных сетей в любом месте страницы или публикации и как воспользоваться этой мощью. темы Divi Builder, чтобы добавить значки социальных сетей в каждый уголок вашего сайта.

Как легко активировать дополнительные иконки социальных сетей в нижнем колонтитуле Divi

Самый простой способ добавить больше значков социальных сетей на свой сайт Divi - перейти на панель Варианты темы , активируя опции для Facebook, Twitter, Instagram и RSS. Затем все, что вам нужно сделать, это ввести URL-адреса вашего профиля в поля. Когда вы это сделаете, вы увидите, что они отображаются в виде значков ссылок в нижнем колонтитуле вашего сайта:

Социальные иконки divi

В меню панели инструментов WordPress перейдите к Divi - Параметры темы и щелкните вкладку общий . Прокрутите вниз, чтобы увидеть сетевой переключатель. Кроме того, прямо под этими переключателями обязательно введите URL-адреса для каждого активированного значка социальной сети Divi. В противном случае значок появится, но, нажав на него, пользователь никуда не попадет. Используя # вместо URL-адреса будет удерживать пользователя на странице, а не перенаправлять его на 404 страница .

Варианты темы Divi

Прокрутите список параметров темы до конца и нажмите Сохранить изменения . Теперь вы можете перейти в нижний колонтитул вашего сайта и нажать на значки социальных сетей, чтобы проверить их!

Если вы не видите значки в нижнем колонтитуле, обязательно проверьте настройщик темы в разделе Внешний вид - настроить и убедитесь, что Показать социальные иконки проверяется под опциями нижнего колонтитула.

Диви вордпресс

Однако, если вам нужно еще больше вариантов значков нижнего колонтитула социальных сетей, продолжайте прокручивать вниз до нашего раздела в Divi Theme Builder, где мы обсуждаем как настраиваемые шаблоны, так и общие значения по умолчанию.

Как использовать Divi Builder для добавления трекеров социальных сетей на страницу или публикации контента

Иногда размещение дополнительных значков социальных сетей между блоками текста, изображений или другого контента в теле страниц или публикаций может иметь большой смысл. Например, ваша целевая страница или страница «О нас» может стать хорошим местом для добавления дополнительных значков социальных сетей, чтобы посетители знали, как с вами связаться. Они определенно будут выделяться больше, чем просто ссылки на ваши социальные профили с помощью обычного текста. К тому же люди ищут узнаваемые значки.

Вы можете использовать Divi Builder для вставки значков социальных сетей прямо на свои страницы или сообщения с помощью отслеживание в социальных сетях .

Каждый раз, когда вы создаете или открываете существующую страницу или статью на своей панели инструментов WordPress, вы увидите большую фиолетовую кнопку с вопросом, хотите ли вы использовать Divi Builder или нет.

Создание статьи Divi

И, конечно же, есть. Просто нажмите Использовать Divi Builder чтобы начать создавать свою страницу или публиковать сообщения с нуля (или с одного из наших предопределенные макеты ). Кроме того, вы можете включить значки социальных сетей Divi, если используете редактор WordPress по умолчанию. Все, что вам нужно сделать, это вставить блок Диви макет и выполните те же действия, что и ниже.

Макет Divi Gutenberg

Вы можете использовать этот инструмент для создания своей страницы или публикации по своему усмотрению, используя доступные модули компоновщика страниц. Если вы впервые используете Divi Builder, вы можете сначала ознакомиться с этим обзором, чтобы получить четкое представление о том, как он работает.

Когда вы будете готовы добавить значки социальных сетей на свою страницу, нажмите черный круг + в разделе, в котором вы хотите разместить значки социальных сетей, и прокрутите до поля отслеживание в социальных сетях появляется.

Размещение модуля подписки в социальных сетях

Вам будет предложено выбрать нужные социальные сети, прежде чем вы сможете приступить к их настройке. Нажмите на Добавить новую социальную сеть .

Добавить социальную сеть социальный модуль divi

Затем выберите один из выпадающего списка.

Добавить новую социальную сеть

Выбрав это, добавьте URL-адрес вашего профиля. При желании вы можете выбрать цвет, градиент, фон и т. Д. специфичен для его значка.

Настроить кнопку социальной сети

После того, как вы добавили свою первую социальную сеть, вы можете продолжить добавление других сетей, выполнив те же действия. Все они будут перечислены на вкладке Содержание из настройки отслеживания в социальных сетях . Вы можете редактировать, копировать или переупорядочивать их, перетаскивая их на место.

Настроить значки социальных сетей

После того, как вы добавили свои социальные сети, перейдите на вкладки Содержание et Дизайн поиграть с другими вариантами настройки. Вы можете изменить все, от тени блока, радиуса границы, интервала, фильтров и даже вступительной анимации для модуля значков. У вас также есть возможность добавить кнопку Отследить для всех ваших иконок, чтобы привлечь к ним больше внимания. Когда вы закончите, нажмите зеленая галочка .

Подписывайтесь на нас кнопка divi

Затем вы можете перемещать значки по странице, работая над их расположением и расположением по своему усмотрению. (The Варианты трансформации Divi кстати, это удивительно.) Когда вы будете удовлетворены всеми своими решениями, нажмите зеленая кнопка Сохранить (или Опубликовать) в правом нижнем углу, чтобы зарегистрировать новый модуль значков социальных сетей. Если вы не видите кнопку Опубликовать / Сохранить, нажмите фиолетовый многоточие (три точки) внизу по центру экрана, чтобы развернуть меню.

Кнопка Divi подписывайтесь на нас

После этого ваши иконки социальных сетей будут жить на вашем сайте.

Использование Divi Theme Builder для добавления значков социальных сетей

Как мы упоминали выше, Divi Theme Builder - это мощный инструмент, который дает вам полный контроль практически над каждым аспектом вашего сайта. Так что, если вы хотите добавить значки социальных сетей где угодно, генератор тем поможет вам.

Чтобы начать с генератора тем, перейдите в Divi - генератор тем в панели управления WordPress.

Divi строитель

Речь идет о добавлении значков социальных сетей в существующий макет конструктора тем Divi. Или к новому! Неважно, добавляете ли вы заголовок, нижний колонтитул или все тело своего сайта - или даже определенные категории или другие специализированные типы страниц. Вы будете следовать тому же процессу.

Сначала мы найдем раздел, который хотим добавить. Опять же, он может быть глобальным или персонализированным. Если вы никогда раньше не использовали конструктор тем, это просто. Мы будем добавлять значки социальных сетей в отдельные сообщения. Поэтому вы можете начать, нажав на Добавить новую модель и выбрав Все сообщения ou Сообщения в определенных категориях . Затем отметьте категории, которые хотите включить. Затем нажмите на Создать шаблон .

Добавить модель divi

Если вы уже настроили шаблоны, просто нажмите на Редактировать карандаш или дважды щелкните по разделу, который вы хотите изменить.

Макет Divi

Процесс добавления значков социальных сетей здесь такой же, как описано выше в генераторе. Однако, поскольку вы используете построитель тем, а не просто редактируете одну страницу, значки не будут отображаться только там, где вы выберете. Шаблоны можно добавлять в верхние и нижние колонтитулы и глобальные шаблоны. И вы можете выбрать, как и когда они появятся, не настраивая их один раз. Не постранично, как было бы выше.

Например, если мы хотим включить значки социальных сетей под заголовком поста, но над содержанием поста в каждый пост в блоге, который мы публикуем, мы просто добавим модуль в следовать социальные сети. Нажмите на кружок Noir + и выберите его в диалоге Вставить модуль .

Выберите социальный модуль

Затем просто перетащите модуль туда, где вы хотите, чтобы значки социальных сетей отображались. (Мы используем каркасный режим для этого размещения). Затем вам просто нужно добавить социальные сети, которые вы хотите отображать. Затем вы настраиваете размер и цвет, как и выше.

Социальный значок медиа модуль divi

И вот так вы добавили несколько иконок социальных сетей в генератор тем Divi. Они будут отображаться в любом сообщении блога, которое вы создаете (в этом примере).

Внешний вид на divi с кнопкой поделиться

А если вам не нравится, как они выглядят, генератор тем легко настроить. Просто перетащите их в другое место, например в верхнюю часть боковой панели.

Перенос модуля социального обмена Divi

Убедитесь, что нажали зеленую кнопку Регистрация в углу. Теперь каждое сообщение в блоге с этим шаблоном на сайте будет загружаться с вашими значками социальных сетей в верхней части боковой панели.

значки боковой панели

Добавление значков социальных сетей в верхний и нижний колонтитулы с помощью Divi Theme Builder

Возможно, значки социальных сетей по умолчанию в настройках Divi не работали для вас или не предлагали достаточную настройку. В этом случае вы всегда можете использовать конструктор тем, чтобы настроить его более полно. 

В любой шаблон можно добавить собственный нижний колонтитул. Это заменит Divi по умолчанию. Любой шаблон без настраиваемого шаблона будет отображать элемент темы по умолчанию. Иконки социальных сетей могут отличаться от публикации к архиву страницы, в зависимости от потребностей ваших пользователей.

Макет divi темы персонализации

Вы также можете добавить глобальный нижний колонтитул, который заменит все другие созданные вами нижние колонтитулы. (Это также относится к глобальным телам и заголовкам). 

Если вы разработали 4 настраиваемых нижних колонтитула для сообщений, страниц, проектов и категорий, но затем вы создали глобальный нижний колонтитул, будет отображаться только глобальный нижний колонтитул. 

Глобальные шаблоны отлично подходят для значков социальных сетей на всем сайте, например, для газеты или бренда. В то время как персонализированные шаблоны с социальными значками могут быть лучшими для отдельных авторов, которые являются частью сети.

Добавить глобальный нижний колонтитул divi

Используя Divi Builder для настраиваемых заголовков, нижних колонтитулов и шаблонов тела, вы можете добавлять значки социальных сетей практически в любую часть Divi, какую захотите. Вы не ограничены дизайном по умолчанию или вам нужно копаться в файловой системе WordPress. Кроме того, с генератором тем вы можете использовать любые варианты дизайна Divi, чтобы украсить значки социальных сетей и выделить их правильным образом для каждой конкретной аудитории.

Заключение

Когда у вас есть параметры нижнего колонтитула Divi по умолчанию, инструмент Divi Builder для сообщений и страниц, мощь Divi Theme Builder, нет причин, по которым вам нужно устанавливать плагин для добавления значков социальных сетей на ваш сайт. Divi дает вам полный контроль над тем, как выглядят ваши социальные иконки и где они находятся. 

Если вам нужно продвигать бренд, приглашенного автора, группу создателей контента или просто места, где вас можно найти в Интернете, у Divi есть способ сделать это. Мы односторонни, но считаем, что это самый простой, самый простой и стильный способ добавить значки социальных сетей на ваш сайт.

Создание динамической сетки преимуществ для продуктов WooCommerce

Создание динамической сетки преимуществ для продуктов WooCommerce

То, как вы создаете страницу продукта, сразу же влияет на поведение ваших посетителей. Хорошо продуманный и персонализированный дизайн страницы продукта может помочь посетителям решить, хотят ли они приобрести ваш продукт. Если вы ищете способ сделать страницу вашего продукта более интересной, вам, вероятно, понравится этот урок. 

Мы покажем вам, как включить динамическую сетку преимуществ продукта в ваш дизайн с помощью Divi и плагина Advanced Custom Fields. Начнем с создания группы полей для пособий. Затем мы заполним настраиваемые поля на странице нашего продукта и включим динамическое содержимое в шаблон страницы продукта. 

Возможный результат

Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.

Возможный результат divi

1. Установите плагин ACF Plugin и группу преимуществ продукта.

Установите плагин Advanced Custom Fields

Чтобы отобразить различные преимущества продукта в серверной части наших продуктов, мы будем использовать бесплатный плагин Advanced Custom Fields. Доступ к вашему Бэкэнд WordPress> Плагины> Добавить> Найти плагин ACF> Установить> Активировать .

Установите расширенный плагин настраиваемого поля

Перейти к настраиваемым полям и добавить новую группу полей

После того, как вы установили и активировали плагин ACF, вы сможете получить доступ к вашим настраиваемым полям и добавить новую группу полей.

Создать поля acf

Настройки группы полей

Дайте вашей новой группе полей заголовок и позвольте ей появляться только на страницах продуктов.

  • «Тип сообщения» равняется «Продукту»
Добавить правила

Добавить первое поле

Продолжите, добавив новое поле для названия вашего первого преимущества продукта.

  • Ярлык поля: Название преимущества 1
  • Тип поля: текст
Добавить поле переменного тока
Настройка поля Divi

Повторите шаг для остальных полей.

Проделайте то же самое с другими преимуществами продукта и их описаниями. Все эти поля требуют присвоенного им типа поля «Текст».

  • Название услуги 1
  • Описание преимуществ 1
  • Название услуги 2
  • Описание преимуществ 2
  • Название услуги 3
  • Описание преимуществ 3
  • Название услуги 4
  • Описание преимуществ 4
Настроить поля acf

2. Добавьте преимущества к продуктам

Откройте или добавьте новый продукт

После создания группы полей и полей вы можете добавлять преимущества продукта к своим продуктам на индивидуальном уровне. Откройте продукт по вашему выбору или создайте новый.

Создание продукта Divi

Заполните поля Преимущества продукта

И выполнить преимущества продукта.

Заполните поля преимуществ divi

3. Создайте шаблон страницы продукта в Divi Theme Builder.

Зайдите в Divi Theme Builder и добавьте новый шаблон

Пора начинать с Divi! Чтобы создать новый шаблон, перейдите в Divi Theme Builder и нажмите «Добавить новый шаблон».

Конструктор тем Divi

Используйте шаблон на всех продуктах

Мы используем этот шаблон для всех продуктов, но не стесняйтесь выбирать продукты с определенной категорией или ярлыком.

Добавить все продукты woocommerce

Войдите в редактор шаблона тела модели

Затем введите тело модели, нажав «Добавить собственное тело» и выбрав «Создать собственное тело».

Строительный корпус divi

Редактировать раздел # 1

Фоновый цвет

Оказавшись в редакторе шаблонов, вы заметите раздел. Откройте этот раздел и измените цвет фона на черный.

  • Цвет фона: # 000000
Конфигурация фона раздела Divi

расстояние

Перейдите на вкладку дизайна раздела и добавьте несколько пользовательских верхних и нижних отступов.

  • Верхняя обивка: 10px
  • Нижняя обивка: 10px
Конфигурация расстояния между секциями Divi

Добавить новую строку

Структура столбца

Давайте продолжим, добавив в раздел новую строку, которая имеет следующую структуру:

Конфигурация компоновки линейного модуля

расстояние

Не добавляя никаких модификаций, давайте откроем настройки строк и внесем некоторые изменения в интервал.

  • Использовать персонализированный желоб: Да
  • Ширина желоба: 1
  • Ширина: 90%
  • Максимальная ширина: 100%
Настройки интервала линейного модуля

расстояние

Удалите все внутренние промежутки сверху и снизу.

  • Высокая внутренняя маржа: 0px
  • Низкая внутренняя маржа: 0px
Настройки расстояния между модулями Divi Line

Добавьте модуль Woo Cart Notice в столбец

Динамический контент

Единственный модуль, который нам нужен в этой строке и разделе, - это модуль Woo Cart Notice. Убедитесь, что в динамическом разделе выбран «Этот продукт».

  • Продукт: этот продукт
Настройки woo cart модуль уведомления о корзине divi

Цвет фона

Затем откройте настройки модуля и используйте прозрачный фон.

  • Цвет фона: rgba (0,0,0,0)
Настройки divi для модуля Woo Cart

Настройки текста

Перейдите на вкладку «Дизайн» и измените шрифт текста.

  • Шрифт текста: Карла
Настройки шрифта модуля Divi

Настройка кнопок

Завершите настройки плагина, определив настройки стиля:

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: # 000000
  • Фон кнопки: # ffd623
  • Ширина границы кнопки: 0 пикселей
  • Кнопка с закругленными краями: 0px
Настройки цвета модуля уведомления корзины Woo
  • Шрифт кнопки: Освальд
  • Стиль шрифта кнопки: Shift
Регулировка цветового оформления модуля уведомлений Woo Cart
  • Высокая внутренняя маржа: 20px
  • Низкая внутренняя маржа: 20px
  • Левая внутренняя маржа: 50px
  • Внутренняя правая маржа: 50px
Модуль проектирования конфигурации woo cart уведомление

Добавить раздел № 2

Градиентный фон

Добавьте еще один регулярный раздел ниже предыдущего. Затем откройте настройки и используйте градиентный фон следующим образом:

  • Цвет 1: # 000000
  • Цвет 2: #ffffff
  • Начальная позиция:
    • Рабочий стол: 30%
    • Таблетка: 57%
    • Телефон: 54%
  • Конечная позиция:
    • Рабочий стол: 30%
    • Таблетка: 57%
    • Телефон: 54%
Регулировка задней части модуля Divi Line

расстояние

Переходим на вкладку «Дизайн» и добавляем высокий внутренний запас.

  • Верхняя обивка: 150px
Конфигурация расстояния между модулями Divi Line

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку с такой же структурой, как показано ниже:

Конфигурация стиля линии Divi

калибровка

Пока не добавляя никаких модов, мы откроем настройки и изменим интервал следующим образом:

  • Использовать нестандартные желоба: Да
  • Водосточное пространство: 1
  • Ширина: 95%
  • Максимальная ширина: 2560 пикселей
  • Выравнивание линии: центр
Модуль divi конфигурации желоба

Расстояние

Мы также удалим верхнюю внутреннюю маржу.

  • Верхняя обивка: 0px
Конфигурация расстояния между модулями Divi

Главный элемент

А чтобы центрировать содержимое столбца на рабочем столе, мы будем использовать две строки кода CSS в основном элементе модуля строки.

Desktop:

дисплей: гибкий; выровнять элементы: центр;

Планшет и телефон:

Дисплей: блок;
Настройки стиля модуля Divi Line

Добавьте модуль Woo Image в столбец 1

Динамический контент

Пришло время добавить модули, мы начнем с модуля Woo Images в столбце 1. Убедитесь, что выбран «Этот продукт».

  • Продукт: этот продукт
Настройки модуля изображения продукта Woocommerce

Эффект анимации вертикальной прокрутки

Мы добавляем легкое движение к изображению, используя эффект горизонтальной прокрутки движения на расширенной вкладке.

  • Активировать вертикальное движение: Да
  • Начальное смещение:
    • Офис: -4
    • Планшет и телефон: 0
  • Среднее смещение: 0
  • Конечное смещение: 0
  • Эффект движения триггера: середина элемента
Настройка модуля изображения Divi

Добавьте модуль заголовка Woo в столбец 2

Динамический контент

В столбце 2 первый мод, который нам нужен, - это заголовочный мод Woo. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.

  • Продукт: этот продукт
сетка преимуществ продукта

Настройки текста заголовка

Затем перейдите на вкладку дизайна и стилизуйте текст заголовка следующим образом:

  • Название шрифта: Освальд
  • Стиль шрифта заголовка: заглавные
  • Цвет текста заголовка: # ffd623
  • Размер текста заголовка: 80 пикселей
Корректировка дизайна модуля заголовка Divi

расстояние

Заполните модуль Woo title, добавив левые и правые поля.

  • Левое поле: 5%
  • Правое поле: 5%
Настройка модуля заголовка Divi

Добавьте модуль описания Woo в столбец 2

Динамический контент

Перейдем к следующему модулю, который представляет собой модуль описания Woo. Для этого мы используем следующий динамический контент:

  • Продукт: этот продукт
  • Тип описания: Краткое описание
Настройки модуля описания продукта

Настройки текста

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

  • Шрифт текста: Карла
  • Цвет текста: #dbdbdb
  • Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
  • Высота строки текста: 1,9 em
Описание модуля настройки цвета divi

калибровка

Затем измените ширину на разных размерах экрана.

  • Ширина: 59% (рабочий стол), 82% (планшет и телефон)
Регулировка ширины сводного модуля Divi

расстояние

Завершите модуль описания Woo, добавив пользовательские значения полей в настройках интервалов.

  • Верхнее поле: 50px
  • Нижнее поле: 100px
  • Левое поле: 5%
  • Правое поле: 5%
Модуль описания продукта Divi

Добавьте модуль Blurb в столбец 2

Динамический контент

Чтобы отобразить преимущества продукта, которые мы добавили в первой части этого руководства, мы будем использовать модули Blurb. Добавьте первый модуль Blurb и используйте динамическое содержимое первой выгоды, созданной для заголовка и тела.

  • Название: Название пособия 1
  • Кузов: Описание преимущества 1
Настройка текста модуля сводки Divi

Загрузить изображение

Загрузите изображение или используйте значок по вашему выбору. Вы можете найти те, которые мы использовали в этом руководстве, в папке загрузки, которую вы смогли загрузить в начале этого руководства.

Сводная конфигурация divi модуля изображения

Настройки изображения / значка

Перейдите на вкладку дизайна модуля и измените настройки изображения / значка следующим образом:

  • Размещение изображения / иконки: вверху
  • Выравнивание изображения / значка: слева
Модуль настройки Divi

Настройки текста заголовка

Мы изменяем настройки текста заголовка дальше.

  • Название шрифта: Освальд
  • Стиль шрифта заголовка: верхний регистр
  • Размер текста заголовка: 25 пикселей
Настроить шрифт модуля сводки divi

Настройки основного текста

Наряду с настройками основного текста.

  • Body Шрифт: Карла
  • Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
  • Высота линии тела: 1,9 em
Настроить сводку текстового модуля div i

калибровка

Затем перейдите к настройкам размеров и измените ширину. Важно использовать основную ширину менее 50%, это позволит нам показать два модуля Blurb бок о бок на следующих шагах.

  • Ширина изображения: 25%
  • Ширина: 49%
Настроить размер модуля сводки divi

расстояние

Мы также добавим пробелы вокруг модуля Blurb, используя настраиваемые значения заполнения для разных размеров экрана.

  • Верхняя обивка: 8%
  • Нижняя прокладка: 8%
  • Левый отступ: 8% (рабочий стол и планшет), 2% (телефон)
  • Правый отступ: 8% (рабочий стол и планшет) 2% (телефон)
Настройте интервал модуля сводки divi

Основной элемент

Теперь мы собираемся убедиться, что модуль Summary отображает текст рядом друг с другом, в два этапа. Сначала мы убедимся, что ширина модуля меньше 50% (как мы это делали на предыдущем шаге). Далее мы будем использовать свойство в строке. Мы добавим это свойство CSS к основному элементу в расширенном разделе.

Дисплей: встроенный блок;
Добавить модуль divi кода css

Клонировать итоговый модуль 3 раза

После того, как вы завершите первый мод Blurb, вы можете клонировать его три раза. Вы автоматически заметите, что модули Blurb появляются в сетке.

Название продукта раздел divi

Редактировать изображения модуля Blurb

Отредактируйте изображение в каждом дублирующем модуле Blurb. Вы можете найти их в папке загрузки, которую вы, возможно, скачали в начале этой статьи.

Изображение модуля сводки Divi

Изменить динамический контент модуля Blurb

Также измените динамическое содержимое каждого дублирующего модуля Blurb.

  • Название: Название услуги (2,3 или 4)
  • Кузов: описание достоинств (2,3 или 4)
Правила модуля сводки Divi

Добавить границы для модулей Blurb индивидуально

Настройки границы модуля Blurb 1

Теперь, чтобы закончить проектирование нашей сетки, мы собираемся добавить границы к модулям Blurb на отдельном уровне. Откройте первый мод Blurb и используйте прямую границу.

  • Ширина правой границы: 1px
  • Цвет правой границы: # ffd623
Модуль сводки divi конфигурации с закругленными границами

Также добавьте нижнюю границу к первому модулю Blurb.

  • Ширина нижней границы: 1 пикс.
  • Цвет нижней границы: # 000000
Настройте нижнее поле divi
Настройки границы модуля Blurb 2

Затем откройте второй модуль Blurb и используйте нижнюю границу.

  • Ширина нижней границы: 1 пикс.
  • Цвет нижней границы: # 000000
Сводка по модулю границы конфигурации divi
Настройки границы модуля Blurb 3

Завершите дизайн сетки, добавив прямую границу к третьему модулю Blurb.

  • Ширина правой границы: 1px
  • Цвет правой границы: # ffd623
сетка преимуществ продукта

Добавить Woo Добавить в корзину Модуль в столбце 2

Динамический контент

Последний модуль, который нам нужен в нашем дизайне, - это модуль Woo Add to Cart. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.

  • Продукт: этот продукт
Добавить в настройки модуля divi карты

Настройки поля

Перейдите на следующую вкладку дизайна и измените настройки поля.

  • Цвет фона полей: #ffffff
  • Цвет текста поля: # 000000
Настроить цвет модуля стиля добавить в корзину divi
  • Округлые поля: 0px (все углы)
  • Ширина нижней границы полей: 1px
  • Цвет нижней границы полей: # 000000
Настроить интервал между разделами divi

Настройки кнопок

Затем стилизуйте кнопку соответственно:

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: # 000000
  • Цвет фона кнопки: # ffd623
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 0 пикселей
Настроить дизайн кнопки divi
  • Шрифт кнопки: Освальд
  • Стиль шрифта кнопки: заглавные
Настроить кнопку divi
  • Верхняя обивка: 20px
  • Нижняя обивка: 20px
  • Левый отступ: 50px
  • Правый отступ: 50 пикселей
Настроить размер модуля divi

расстояние

И заполните параметры модуля, добавив пользовательские значения полей.

  • Верхнее поле: 100px
  • Левое поле: 5%
Настроить интервал divi

3. Сохраните модификации генератора тем и просмотрите результат.

Завершив разработку шаблона страницы продукта, вы можете сохранить все изменения Theme Builder и отобразить результаты на своих продуктах!

Сохранить дизайн divi
Сохранить модификации divi

обследование

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.

Демо результат

Заключительные мысли

В этой статье мы показали вам, как проявить творческий подход к следующему шаблону страницы продукта Divi. В частности, мы показали вам, как включить динамическую сетку преимуществ продукта, чтобы добавить дополнительные преимущества на страницу вашего продукта. Мы создали это руководство, используя Divi в сочетании с плагином Advanced Custom Fields. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Как реализовать тёмный режим на вашем сайте с Divi

Как реализовать тёмный режим на вашем сайте с Divi

Темный режим продолжает набирать популярность как удобный вариант, позволяющий пользователям работать в Интернете с меньшей нагрузкой на глаза. Посмотрим правде в глаза, мы все склонны проводить больше времени, глядя на экраны, чем следовало бы, поэтому любое дополнительное удобство для пользователя (например, темный режим) может иметь большое значение. 

Операционные системы, программы и браузеры обычно включают встроенные возможности темного режима, но некоторые разработчики переходят на другой уровень, добавляя настраиваемый темный режим для своего веб-сайта. Идея состоит в том, чтобы лучше контролировать то, как их веб-сайт выглядит в темном режиме, без ущерба для брендинга и / или дизайна.

В этом уроке мы покажем вам, как создать пользовательский переключатель темного режима в Divi с нуля без плагина. С помощью этой функции переключения темного режима вы сможете контролировать дизайн темного режима и улучшать пользовательский интерфейс, адаптированный к вашему бренду.

Давайте начнем!

обследование

Вот предварительный просмотр дизайна, который мы создадим в этом уроке.

Вот пользовательский переключатель темного режима, который мы собираемся создать.

Включить темный режим

А вот до и после темного режима, примененного к одному из наших предопределенных макетов.

А вот переключатель темного режима, добавленный в глобальный заголовок. Обратите внимание, как остается светлый / темный режим при просмотре сайта.

Часть 1: Построение переключателя из темного режима

В этой первой части урока мы собираемся создать переключатель темного режима со страницей в Divi. После создания переключателя с кодом вы сможете сохранить его в библиотеке Divi и добавить в любое место на своем веб-сайте.

Для начала добавьте строку из одного столбца в раздел по умолчанию при создании с нуля с Divi на передней панели.

Раздел Divi

Добавить сводный модуль

Чтобы создать собственный переключатель, мы собираемся разработать модуль Blurb с небольшим количеством специального CSS.

Добавьте новый текстовый модуль презентации в строку.

Содержание

Удалите фиктивное содержимое по умолчанию для заголовка и тела. Затем добавьте квадратный значок вместо изображения.

Модуль сводки Divi

Дизайн

Перейдите в настройки дизайна и обновите следующее:

  • Цвет значка: # 666666
  • Выравнивание изображения / значка: слева
  • Размер шрифта иконки: 22 пикселей
Конфигурация значка Divi
  • Ширина: 50px
  • Выравнивание модуля: центр
  • Высота: 25px
Конфигурация размеров Divi
  • Маржа: минимум 0px
  • Закругленные углы: 4px
  • Ширина границы: 2 пикселя
  • Цвет границы: # 666666
Конфигурация границы Divi

Пользовательский CSS

Как только дизайн будет готов, перейдите на вкладку «Дополнительно». В разделе «Пользовательский CSS» добавьте следующий пользовательский CSS-код к основному элементу, чтобы убедиться, что переполнение не закрывается стилем закругленных углов.

переполнение: видимое! важное;

Затем добавьте следующий настраиваемый CSS в элемент After:

содержимое: "light"; позиция: абсолютная; слева: -35px; верх: 0px;

Это добавляет метку к модулю Blurb, который мы изменим с «светлого» на «темный» при нажатии.

Кнопка переключения Divi

Дизайн основного текста

Поскольку текст псевдоэлемента сообщения наследует стили основного текста, мы можем добавить стили основного текста, используя параметры Divi следующим образом:

  • Body Font: Робото
  • Цвет основного текста: # 666666
  • Размер основного текста: 13px
  • Интервал букв тела: 1px
Кнопка переключения шрифта

Добавление пользовательского кода с помощью модуля кода

Чтобы добавить необходимый код (CSS / JQuery) для переключения темного режима, мы будем использовать модуль кода.

Создайте новый модуль кода под модулем Blurb в том же столбце.

Добавить модуль кода

Затем вставьте следующий код в область кода:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Добавление пользовательских классов CSS

Пользовательский код требует, чтобы пользовательский класс CSS был добавлен в модуль или переключатель Blurb. Это позволит рекламному объявлению активировать переключение темного режима и функциональность по щелчку.

Blurb модуль класса

Откройте настройки модуля Blurb и добавьте пользовательский класс CSS следующим образом:

  • Класс CSS: et-dark-toggle
Код css divi

Класс способен на темный режим

Нам также необходимо добавить собственный класс CSS к каждому элементу Divi, для которого мы хотим иметь возможность темного режима. Как только элемент имеет класс CSS, этот элемент унаследует пользовательский CSS «темного режима» в коде, который мы добавили после включения темного режима. Этот метод дает нам больше контроля над дизайном в темном режиме, поскольку некоторые элементы могут не требовать стилизации в темном режиме.

Для начала мы можем добавить темный режим в раздел, содержащий наш переключатель темного режима.

Откройте параметры раздела и добавьте следующий класс CSS:

  • Класс CSS: поддержка et-dark-mode
Раздел divi селектора CSS

Часть 2: Добавление функций темного режима на страницу Divi

Теперь, когда у нас есть код и классы CSS, мы готовы применить функциональность и дизайн темного режима ко всей странице в Divi. Для этого мы собираемся использовать готовый макет целевой страницы мобильного приложения.

Чтобы добавить макет, откройте меню настроек в нижней части визуального конструктора и щелкните значок «Добавить новый макет».

Затем выберите макет целевой страницы мобильного приложения на вкладке «Предварительно определенные макеты».

Убедитесь, что параметр «Заменить существующий контент» НЕ выбран. Вы не хотите очищать раздел переключателем темного режима.

Выберите макет divi 1

Поскольку стиль темного режима будет применяться только к элементам с CSS-классом «способный и темный режим», мы можем добавить на страницу разные способы.

  1. Мы можем добавить класс CSS к каждому элементу страницы в отдельности.
  2. Мы могли бы расширить класс CSS для элементов по всей странице (это было бы быстрее, чем делать это вручную). Например, мы могли бы открыть настройки раздела для верхнего раздела и расширить класс CSS для этого раздела на все разделы страницы.
  3. Мы можем добавить класс CSS к глобальным значениям по умолчанию для элемента. Это применит класс CSS ко всем элементам всего сайта, добавив возможность темного режима по всему сайту. Например, мы могли бы открыть настройки раздела и щелкнуть глобальный значок по умолчанию, чтобы изменить глобальные настройки раздела по умолчанию. Затем мы можем добавить класс CSS и зарегистрировать его как класс CSS для всех разделов сайта.

Добавление класса CSS к элементам страницы

В этом примере мы обновим элементы страницы, добавив класс CSS к глобальным значениям по умолчанию для разделов и текстовых модулей. По мере продвижения мы также будем вносить некоторые дополнения в другие элементы страницы.

Все разделы

Чтобы добавить класс CSS во все разделы, откройте настройки верхнего раздела, в котором есть переключатель темного режима. Затем измените глобальные значения по умолчанию для раздела и добавьте следующий класс CSS к глобальным значениям по умолчанию для раздела:

  • Класс CSS: поддержка et-dark-mode

Все специализированные разделы

Также добавьте класс CSS к глобальным значениям по умолчанию в специализированном разделе.

Добавить во все специализированные разделы

Текстовые модули

Затем откройте настройки одного из текстовых модулей на странице и добавьте тот же класс CSS к глобальным текстовым значениям по умолчанию.

Добавить в текстовые модули

Чтобы проверить результат, перейдите на страницу в реальном времени и нажмите на переключатель темного режима в верхней части страницы.

Вот как должна выглядеть страница в чистом режиме.

Очистить режим

А вот как должна выглядеть страница в темном режиме.

Темный режим

Дополнительные ресурсы

Вот еще несколько ресурсов, которые могут вас заинтересовать.

Заключительные мысли

Оснащение вашего сайта Divi настраиваемым переключателем темного режима может стать отличным способом улучшить пользовательский опыт и создать совершенно новый дизайн, который радует и успокаивает глаза. Надеюсь, это будет вам полезно.