Знание того, как добавить динамический заголовок сайта и слоган в глобальный заголовок Divi, будет полезно при создании веб-сайтов Divi. И для этого есть несколько веских причин. С одной стороны, не все сайты имеют логотип. Заголовок сайта - хорошая замена логотипу. Другая причина - продвигать свой бренд, размещая важную информацию на своем сайте, где ее увидят все.
В этом уроке мы покажем вам, как добавить динамический заголовок и слоган сайта в глобальный заголовок Divi. Это решение будет динамически извлекать заголовок и слоган сайта из серверной части WordPress. Кроме того, у вас будут все мощные возможности дизайна Divi, чтобы настроить заголовок и слоган так, как вы хотите!
Возможный результат
Вот предварительный просмотр дизайна, который мы создадим в этом уроке.
Обратите внимание на заголовок сайта и слоган в верхней середине заголовка, который отображается динамически.
Бесплатная загрузка
Присоединяйтесь к Divi Newlsetter, и мы отправим вам по электронной почте копию Ultimate Divi Landing Page Layout Pack, а также множество других бесплатных и удивительных ресурсов, советов и приемов Divi. Следуйте ему, и вы в кратчайшие сроки станете мастером Divi. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.СКАЧАТЬ
Чтобы импортировать шаблон, перейдите в Divi> Theme generator.
Щелкните значок переносимости в правом верхнем углу страницы.
Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки с вашего компьютера.
Затем нажмите кнопку импорта.
После завершения общий шаблон заголовка будет доступен в Divi Theme Builder.
Далее мы перейдем к дизайну.
Название сайта и слоган на WordPress
У каждого сайта WordPress есть заголовок и слоган. Название сайта - это в основном название сайта, а слоган - это короткая фраза, которая обычно объясняет, что это такое.
Нередко при установке WordPress добавляют заголовок сайта и забывают его.
А некоторые люди даже не осознают, что слоган существует, не говоря уже о времени, чтобы обновить его. Кроме того, когда вы используете тему Divi, заголовок и слоган не будут отображаться на вашем сайте по умолчанию, поэтому их легко игнорировать. Однако заголовок и слоган являются важными частями веб-сайта и будут распознаваться поисковыми системами.
Вы можете найти и обновить заголовок и слоган сайта в WordPress в любое время, перейдя на панель управления WordPress и выбрав «Настройки»> «Общие».
Или вы можете выбрать другой маршрут, используя настройщик темы, чтобы обновить заголовок сайта в общих настройках.
Теперь, когда мы знаем, где находится заголовок сайта и слоган на бэкэнде WordPress, давайте посмотрим, как мы можем добавить их в заголовок Divi!
Как добавить динамический заголовок сайта и слоган в глобальный заголовок в Divi
В этом руководстве мы сосредоточимся на том, как добавить динамический заголовок и слоган сайта в существующий заголовок вместо того, чтобы создавать полный заголовок с нуля. Это сэкономит ваше время и улучшит четкость. Итак, чтобы начать разработку этого заголовка, мы собираемся импортировать предопределенный глобальный шаблон заголовка из нашего четвертый генератор тем .
Когда у вас есть скачал пачку создание тема , разархивируйте файл и найдите JSON-файл шаблона веб-сайта по умолчанию.
Затем перейдите в Divi> Theme Builder.
Щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите файл JSON шаблона веб-сайта по умолчанию и нажмите кнопку «Импорт».
После добавления шаблона в конструктор тем удалите шаблон нижнего колонтитула и щелкните, чтобы изменить общий заголовок.
Добавление динамического названия сайта и слогана в заголовок
Внутри редактора макета шаблона вы увидите уже созданный готовый заголовок. Мы можем сразу приступить к настройке.
Переместить логотип
Для начала перетащите модуль изображения, отображающий логотип (динамически) из среднего столбца верхней строки в левый столбец верхней строки.
Добавьте модуль призыва к действию для отображения заголовка и слогана сайта.
Затем добавьте новый модуль призыва к действию в средний столбец верхней строки (там, где был логотип).
Мы будем использовать модуль призыва к действию для отображения заголовка и слогана сайта.
Но прежде чем начать добавлять контент, сначала выберите НЕТ, чтобы использовать цвет фона.
Добавить динамический заголовок сайта
В настройках содержимого наведите указатель мыши на поле ввода заголовка и щелкните значок «Использовать динамический контент». Затем выберите «Заголовок сайта» из списка.
Добавить динамический слоган сайта
Затем наведите указатель мыши на область тела и выберите значок «Использовать динамическое содержимое». Затем выберите из списка «Слоган сайта».
Добавить динамическую ссылку на главную страницу
Обычно заголовок сайта перенаправляется на главную страницу при нажатии, особенно если вы заменяете логотип. Чтобы перенаправить весь курс на домашнюю страницу, добавьте ссылку на домашнюю страницу как динамическое содержимое в URL-адрес ссылки на курс.
Дизайн текста заголовка и слогана сайта
Теперь заголовок сайта и слоган отображаются в заголовке динамически. Все, что мы должны сделать сейчас, это добавить немного стиля. Помните, нам нужно настроить текст заголовка для оформления заголовка сайта и основной текст для оформления слогана.
Перейдите на вкладку дизайна и обновите следующее:
Название шрифта: Heebo
Название шрифта Вес: жирный
Стиль шрифта заголовка: TT
Размер текста заголовка: 32px (рабочий стол), 24px (планшет и телефон)
Расстояние между заглавными буквами: 0.3em
Body Font: Робото
Стиль шрифта тела: курсив
Цвет основного текста:
Размер основного текста: 13 пикселей
Расстояние между буквами тела: 0.1em
Высота Линии Тела: 1em
Чтобы помочь с центрированием, уберите отступ по умолчанию под основным текстом, добавив следующий пользовательский CSS в описание промо:
padding-bottom: 0 пикселей
Дополнительные корректировки дизайна
В этой последней части руководства мы собираемся внести некоторые дополнительные изменения в дизайн заголовка, чтобы убедиться, что элементы остаются вертикально центрированными в каждом столбце, и дать кнопке уникальный дизайн. Мы также добавим волнистую линию до и после в слоган (только для ударов ногами).
Вертикальное центрирование столбцов / содержимого
Прямо сейчас в верхнем ряду находится актив «Выровнять высоту столбца», который использует свойство flex. Мы можем извлечь выгоду из этого, добавив небольшой фрагмент кода CSS, чтобы убедиться, что все столбцы остаются вертикально центрированными внутри строки. Для этого откройте настройки для верхней строки и добавьте следующий CSS в основной элемент:
align-items: center;
Обновление столбца с помощью кнопки
Затем откройте настройки для столбца 3 в верхней строке и уберите цвет фона и отступы.
Обновление фона кнопки
Затем откройте настройку модуля кнопок и обновите фон новым градиентом фона следующим образом:
Цвет градиента слева Цвет: #ffffff
Правильный цвет градиента фона: # 1dbf73
Направление градиента: 135deg
Начальная позиция: 10%
Конечная позиция: 0%
Добавление символов до и после в слоган
Каждый элемент динамического содержимого можно изменить, щелкнув значок шестеренки. Чтобы добавить символы до и после слогана, откройте настройки модуля призыва к действию, содержащего слоган, и щелкните значок редактирования на динамическом содержании слогана сайта. Затем добавьте символы до и после записей.
Конечный результат
Чтобы увидеть результат, откройте любую страницу своего сайта. Вы должны увидеть красиво отображаемый динамический заголовок и слоган!
Заключительные мысли
Очень приятно, что вы можете настроить общий заголовок с динамическим заголовком и слоганом сайта. Это похоже на то, что будет полезно для многих сайтов. Мне также нравится идея включения названия сайта и слогана в дополнение к логотипу для еще более сильного представления бренда.
При разработке страницы услуг вы хотите, чтобы посетители заметили все различные услуги, которые вы предоставляете. Во многих случаях это будет только одна конкретная услуга, которую они ищут, но если вы предоставите оптимизированный способ в своей структуре услуг, ваши посетители с большей вероятностью будут обращаться со всеми ними.
В этом руководстве мы покажем вам, как проявить творческий подход с помощью эффектов прокрутки Divi и создать плавный переход между службами. Вы также можете скачать файл JSON бесплатно!
Пойдем.
Возможный результат
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
1, воссоздать структуру элементов
Добавить раздел № 1
расстояние
Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и измените значения отступов на разных размерах экрана.
Верхний отступ: 80px (рабочий стол и планшет), 0px (телефон)
Нижняя обивка: 80px
Добавить новую строку
Структура столбца
Продолжите добавлять новую строку, используя следующую структуру столбцов:
калибровка
Пока не добавляете модули, откройте параметры линии и примените следующие изменения к параметрам измерения:
Использовать произвольную ширину желоба: Да
Ширина желоба: 1
Ширина: 90%
Максимальная ширина: 1580 пикселей
расстояние
Затем добавьте пользовательский верхний и нижний поля.
Верхнее поле: 200px
Нижнее поле: 200px
Добавить текстовый модуль в столбец 1
Добавить контент H2
Пришло время добавить модули, начиная с текстового модуля в столбце 1. Введите любое содержимое H2, которое хотите.
Настройки текста H2
Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:
Затем добавьте нижнее поле для планшета и телефона.
Нижнее поле: 50 пикселей (только для планшета и телефона)
Добавить текстовый модуль в столбец 2
Добавить контент
Перейдем ко второму столбцу. Здесь первый модуль, который нам нужен, - это текстовый модуль с некоторым описанием.
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
Шрифт текста: кабина
Стиль шрифта текста: заглавные
Цвет текста: # 000000
Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
Высота строки текста: 3em
Добавьте модуль разделения в столбец 2
видимость
Следующий и последний модуль, который нам нужен в этом столбце, - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.
Показать разделитель: Да
Линия
Затем измените цвет линии модуля.
Цвет линии: # 000000
калибровка
Затем внесите некоторые изменения в параметры размеров.
Вес делителя: 3px
Ширина: 28%
расстояние
Мы также добавляем верхнее поле.
Верхнее поле: 10px
Добавить раздел № 2
расстояние
Переходим к следующему регулярному разделу. Удалите верхнее заполнение по умолчанию из раздела.
Верхняя обивка: 0px
переполнение
Также скрыть переполнения.
Горизонтальное переполнение: скрыто
Вертикальный перелив: скрытый
Добавить новую строку
Структура столбца
Продолжайте добавлять первую строку, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии, получите доступ к параметрам определения размера и внесите следующие изменения:
Использовать произвольную ширину желоба: Да
Ширина желоба: 1
Выровнять высоту столбца: Да
Ширина: 90%
Максимальная ширина: 1580 пикселей
расстояние
Затем удалите все верхние и нижние отступы по умолчанию.
Верхняя обивка: 0px
Нижняя обивка: 0px
Настройки столбца 1
Фоновый цвет
Затем откройте настройки для столбца 1 и измените цвет фона.
Цвет фона: # f7f7f7
расстояние
Завершите настройки столбца, добавив пользовательские значения заполнения для экрана разных размеров.
Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
Левый отступ: 8%
Правый отступ: 8%
Настройки столбца 2
расстояние
Продолжите, открыв настройки в столбце 2. Перейдите на вкладку «Дополнительно» и добавьте пользовательские значения заполнения для разных размеров экрана.
Верхнее заполнение: 100px (рабочий стол), 50px (планшет и телефон)
Нижняя обивка: 200px
Отступ слева: 150 пикселей (стол), 0 пикселей (планшет и телефон)
Добавьте модуль разделения в столбец 1
видимость
В первом столбце первый необходимый нам модуль - это модуль разделения. Убедитесь, что опция «Показать разделитель» включена.
Показать разделитель: Да
Линия
Затем измените цвет линии модуля.
Цвет линии: # 000000
калибровка
Также внесите изменения в параметры размеров.
Вес делителя: 3px
Ширина: 50%
Добавить текстовый модуль в столбец 1
Добавить контент H3
Следующий модуль, который нам нужен в столбце 1, - это текстовый модуль с содержимым H3.
Настройки текста H3
Перейдите на вкладку дизайна модуля и измените настройки текста H3:
Название 3 Полиция: ежеквартально
Цвет текста элемента 3: # 000000
Элемент 3 Размер текста: 50px (рабочий стол), 40px (планшет), 35px (телефон)
Высота линии 3 головы: 1.1em
Добавить текстовый модуль в столбец 2
Добавить контент
Во втором столбце первый модуль, который нам нужен, это текстовый модуль с некоторым содержанием описания.
Настройки текста
Измените настройки текста модуля следующим образом:
Шрифт текста: кабина
Стиль шрифта текста: заглавные
Размер текста: 18px (рабочий стол), 15px (планшет), 13px (телефон)
Интервал между текстовыми буквами: 3px (рабочий стол), 1px (планшет и телефон)
Высота строки текста: 3em
Добавить модуль кнопки в столбец 2
Добавить копию
Следующий и последний необходимый нам модуль - это кнопочный модуль. Введите копию по вашему выбору.
Настройки кнопок
Затем стиль кнопки.
Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 20 пикселей
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 000000
Ширина границы кнопки: 0 пикселей
Шрифт кнопки: ежеквартально
Вес шрифта кнопки: жирный
расстояние
Также добавьте пользовательские отступы.
Верхняя обивка: 50px
Нижняя обивка: 50px
Левый отступ: 100px
Правый отступ: 100 пикселей
Позиция
И переместите кнопку соответственно:
Позиция: Абсолют
Расположение: внизу слева
Клонируйте линию столько раз, сколько необходимо
После завершения всей строки и всех ее модулей вы можете клонировать всю строку три раза.
Изменить весь контент
Не забудьте отредактировать все содержимое в двух строках.
2. Применить эффекты прокрутки
Эффекты прокрутки первого ряда
Горизонтальное движение
После того, как вы завершили все строки в своем разделе, пришло время добавить эффекты прокрутки. Откройте первый ряд секции и добавьте горизонтальное движение.
Активировать горизонтальное движение: Да
Начальное смещение: -5
Среднее смещение: 0 (при 26%)
Конечное смещение: 0
Эффект движения триггера: середина элемента
Исчезать и исчезать
Также используйте входящий и исходящий эффект затухания.
Активировать постепенное исчезновение: Да
Начальная непрозрачность: 100%
Средняя непрозрачность: 100% (при 50%)
Конечная непрозрачность: 0% (до 53%)
Эффект движения триггера: середина элемента
Эффекты прокрутки среднего ряда
Вертикальное движение
Затем мы добавим эффекты прокрутки ко всем строкам между первой и последней строкой раздела. Сначала используйте вертикальное движение:
Активировать вертикальное движение: Да
Начальное смещение: -4
Среднее смещение: 0 (при 26%)
Конечное смещение: 0
Эффект триггера движения: середина элемента
Исчезать и исчезать
Также активируйте эффект затухания.
Активировать постепенное исчезновение: Да
Начальная непрозрачность: 0%
Средняя непрозрачность: 100% (от 27% до 50%)
Конечное смещение: 0 (при 53%)
Эффект движения триггера: середина элемента
Эффекты прокрутки последней строки
Вертикальное движение
Затем откройте последнюю строку раздела и добавьте следующее вертикальное движение:
Активировать вертикальное движение: Да
Начальное смещение: -4
Среднее смещение: 0 (при 26%)
Конечное смещение: 0
Эффект движения триггера: середина элемента
Исчезать и исчезать
С входящим и исходящим эффектом исчезновения, и все готово!
Активировать постепенное исчезновение: Да
Начальная непрозрачность: 0%
Средняя непрозрачность: 100% (от 27% до 50%)
Конечная непрозрачность: 100% (до 53%)
Эффект движения триггера: середина элемента
Конечный результат
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этой статье мы показали вам, как создать красивый сервисный переход с помощью эффектов прокрутки Divi. Еще до того, как одна подача исчезла, другая начинает появляться, обеспечивая приятный переход, приятный для глаз. Такой подход поможет вам выделить каждую услугу на индивидуальном уровне. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Создавая страницу «О нас», вы, вероятно, также захотите представить членов своей команды. Таким образом, вы позволяете посетителям взаимодействовать с людьми, стоящими за вашим бизнесом. Если вы ищете способ оживить раздел членов вашей команды на свитке, это руководство может быть для вас. Мы создадим карусель для членов команды с автоматической прокруткой, которая перемещается по мере того, как ваши посетители прокручивают страницу.
демонстрация
Прежде чем мы углубимся в руководство, давайте посмотрим на результат на экранах разных размеров.
Начало зачатия
Добавить новый раздел
расстояние
Начните с добавления нового обычного раздела на страницу, над которой вы работаете. Откройте настройки раздела и добавьте пользовательские отступы на экранах разных размеров.
Верхняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
Нижняя обивка: 200 пикселей (рабочий стол), 100 пикселей (планшет и телефон)
переполнение
Чтобы убедиться, что в нашем дизайне не появляется горизонтальная полоса прокрутки, мы скроем переполнение разделов на вкладке «Дополнительно».
Горизонтальное переполнение: скрыто
Вертикальный перелив: скрытый
Добавить строку № 1
Структура столбца
Продолжайте добавлять новую строку в раздел, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строк, перейдите на вкладку дизайна и измените ширину и максимальную ширину в настройках размеров.
Ширина: 90%
Максимальная ширина: 1580 пикселей
расстояние
Мы также добавляем пользовательские верхний и нижний отступы.
Верхняя обивка: 100px
Нижняя обивка: 100px
Добавить текстовый модуль в столбец
Добавить контент H2
Пришло время добавить модули, начиная с первого текстового модуля. Введите содержание H2 по вашему выбору.
Настройки текста H2
Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:
Затем добавьте модуль разделения. Убедитесь, что опция «Показать разделитель» включена.
Показать разделитель: Да
Линия
Затем внесите некоторые изменения в настройки линии.
Цвет линии: # edf000
Стиль линии: сплошная
Положение линии: сверху
калибровка
И заполните параметры модуля, соответственно изменив параметры размеров:
Вес делителя: 20px
Ширина: 11%
Выравнивание модуля: слева
Высота: 20px
Добавить строку № 2
Структура столбца
В следующий ряд! Используйте следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и измените параметры размеров следующим образом:
Использовать произвольную ширину желоба: Да
Ширина желоба: 2
Ширина: 100%
Максимальная ширина: 100%
расстояние
Затем добавьте левый и правый отступ только на меньших экранах.
Левый отступ: 5% (только планшет и телефон)
Правый отступ: 5% (только планшет и телефон)
Параметры столбца (5x)
Теперь, в следующих трех шагах этого урока, мы собираемся внести некоторые изменения в столбцы. Примените три шага к каждому столбцу в строке.
Градиентный фон
Сначала добавьте градиентный фон в каждый столбец.
1 цвет: rgba (255,255,255,0)
2 цвет: rgba (0,0,0,0,84)
Тип градиента: линейный
Начальная позиция: 25%
Конечная позиция: 86%
Поместите градиент над фоновым изображением: Да
Фоновое изображение
Затем загрузите фоновое изображение по вашему выбору. Это фоновое изображение представляет каждого члена команды, поэтому используйте разные изображения для каждого столбца.
Размер фонового изображения: обложка
Положение фонового изображения: Центр
Главный элемент
Завершите настройку столбца, добавив собственный CSS к основному элементу планшета каждого столбца. Эти строки кода CSS помогут нам разместить столбцы на планшете один под другим, вместо того, чтобы располагать два рядом.
Чтобы поделиться информацией о членах команды, мы будем использовать модуль Person. Добавьте первый модуль Person в столбец 1 и используйте любое содержимое, которое хотите.
Удалить изображение
Затем удалите изображение. Вместо этого мы используем фоновое изображение столбца.
Фоновое изображение
Затем мы добавим наложение изображения в качестве фонового изображения модуля. Вы можете найти тот, который мы используем, загрузив папку в начале этого руководства.
Размер фонового изображения: обложка
Положение фонового изображения: Центр
Настройки текста заголовка
Перейдите на вкладку дизайна модуля и измените настройки текста заголовка следующим образом:
Уровень заголовка: H3
Заголовок шрифта
Вес шрифта заголовка: жирный
Цвет текста заголовка: #ffffff
Размер текста заголовка: 230%
Настройки основного текста
Также измените настройки основного текста.
Шрифт для тела: Open Sans
Цвет основного текста: #ffffff
Высота линии тела: 2,2 em
Настройки текста положения
Затем внесите некоторые изменения в настройки текста позиции.
Положение шрифта: Open Sans
Цвет текста позиции: # edf000
расстояние
И завершите настройки модуля, добавив пользовательские значения отступов в настройки интервала.
Верхняя обивка: 70%
Нижняя прокладка: 10%
Левый отступ: 10%
Правый отступ: 10%
Дублировать модуль "Человек" 4 раза
После того, как вы завершили модуль Person, вы можете клонировать весь модуль четыре раза.
Поместите дубликаты в оставшиеся столбцы
Поместите повторяющиеся модули в оставшиеся четыре столбца ряда. Не забудьте также отредактировать контент.
Преврати ряд в карусель с автопрокруткой
Измените размер строки № 2
Теперь, чтобы превратить эту строку в карусель членов команды с автоматической прокруткой, нам нужно повторно открыть настройки строки и изменить ширину и максимальную ширину в настройках размера.
Ширина: 180%
Максимальная ширина: 220% (рабочий стол), 100% (планшет и телефон)
Добавьте горизонтальное движение линии № 2
Завершите настройку линии, добавив горизонтальное движение к настройкам эффекта прокрутки на вкладке «Дополнительно», и все готово!
Активировать горизонтальное движение: Да
Начальное смещение:
Офис: 2,5
Планшет и телефон: 0
Среднее смещение: 0 (при 40%)
Конечное смещение:
Офис: -25 (на 62%)
Планшет и телефон: 0
Эффект движения триггера: середина элемента
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
офис
Заключительные мысли
В этом уроке мы показали вам, как проявить творческий подход с помощью встроенных эффектов прокрутки Divi. В частности, мы воссоздали красивую карусель для членов команды с автоматической прокруткой. Когда посетители прокручивают страницу вниз, появляется другая часть карусели.
Divi позволяет вам контролировать и проектировать каждую деталь вашего сайта, от верхнего до нижнего колонтитула. Один из самых популярных элементов любого веб-сайта - это значки социальных сетей. Заинтересованная аудитория хочет найти вас в другом месте и узнать вас лучше. Очевидно, вам захочется сделать это как можно проще.
Итак, мы покажем вам, как активировать дополнительные значки социальных сетей в параметрах темы Divi, как использовать Divi Builder для вставки значков социальных сетей в любом месте страницы или публикации и как воспользоваться этой мощью. темы Divi Builder, чтобы добавить значки социальных сетей в каждый уголок вашего сайта.
Как легко активировать дополнительные иконки социальных сетей в нижнем колонтитуле Divi
Самый простой способ добавить больше значков социальных сетей на свой сайт Divi - перейти на панель Варианты темы , активируя опции для Facebook, Twitter, Instagram и RSS. Затем все, что вам нужно сделать, это ввести URL-адреса вашего профиля в поля. Когда вы это сделаете, вы увидите, что они отображаются в виде значков ссылок в нижнем колонтитуле вашего сайта:
В меню панели инструментов WordPress перейдите к Divi - Параметры темы и щелкните вкладку общий . Прокрутите вниз, чтобы увидеть сетевой переключатель. Кроме того, прямо под этими переключателями обязательно введите URL-адреса для каждого активированного значка социальной сети Divi. В противном случае значок появится, но, нажав на него, пользователь никуда не попадет. Используя # вместо URL-адреса будет удерживать пользователя на странице, а не перенаправлять его на 404 страница .
Прокрутите список параметров темы до конца и нажмите Сохранить изменения . Теперь вы можете перейти в нижний колонтитул вашего сайта и нажать на значки социальных сетей, чтобы проверить их!
Если вы не видите значки в нижнем колонтитуле, обязательно проверьте настройщик темы в разделе Внешний вид - настроить и убедитесь, что Показать социальные иконки проверяется под опциями нижнего колонтитула.
Однако, если вам нужно еще больше вариантов значков нижнего колонтитула социальных сетей, продолжайте прокручивать вниз до нашего раздела в Divi Theme Builder, где мы обсуждаем как настраиваемые шаблоны, так и общие значения по умолчанию.
Как использовать Divi Builder для добавления трекеров социальных сетей на страницу или публикации контента
Иногда размещение дополнительных значков социальных сетей между блоками текста, изображений или другого контента в теле страниц или публикаций может иметь большой смысл. Например, ваша целевая страница или страница «О нас» может стать хорошим местом для добавления дополнительных значков социальных сетей, чтобы посетители знали, как с вами связаться. Они определенно будут выделяться больше, чем просто ссылки на ваши социальные профили с помощью обычного текста. К тому же люди ищут узнаваемые значки.
Вы можете использовать Divi Builder для вставки значков социальных сетей прямо на свои страницы или сообщения с помощью отслеживание в социальных сетях .
Каждый раз, когда вы создаете или открываете существующую страницу или статью на своей панели инструментов WordPress, вы увидите большую фиолетовую кнопку с вопросом, хотите ли вы использовать Divi Builder или нет.
И, конечно же, есть. Просто нажмите Использовать Divi Builder чтобы начать создавать свою страницу или публиковать сообщения с нуля (или с одного из наших предопределенные макеты ). Кроме того, вы можете включить значки социальных сетей Divi, если используете редактор WordPress по умолчанию. Все, что вам нужно сделать, это вставить блок Диви макет и выполните те же действия, что и ниже.
Вы можете использовать этот инструмент для создания своей страницы или публикации по своему усмотрению, используя доступные модули компоновщика страниц. Если вы впервые используете Divi Builder, вы можете сначала ознакомиться с этим обзором, чтобы получить четкое представление о том, как он работает.
Когда вы будете готовы добавить значки социальных сетей на свою страницу, нажмите черный круг + в разделе, в котором вы хотите разместить значки социальных сетей, и прокрутите до поля отслеживание в социальных сетях появляется.
Вам будет предложено выбрать нужные социальные сети, прежде чем вы сможете приступить к их настройке. Нажмите на Добавить новую социальную сеть .
Затем выберите один из выпадающего списка.
Выбрав это, добавьте URL-адрес вашего профиля. При желании вы можете выбрать цвет, градиент, фон и т. Д. специфичен для его значка.
После того, как вы добавили свою первую социальную сеть, вы можете продолжить добавление других сетей, выполнив те же действия. Все они будут перечислены на вкладке Содержание из настройки отслеживания в социальных сетях . Вы можете редактировать, копировать или переупорядочивать их, перетаскивая их на место.
После того, как вы добавили свои социальные сети, перейдите на вкладки Содержание et Дизайн поиграть с другими вариантами настройки. Вы можете изменить все, от тени блока, радиуса границы, интервала, фильтров и даже вступительной анимации для модуля значков. У вас также есть возможность добавить кнопку Отследить для всех ваших иконок, чтобы привлечь к ним больше внимания. Когда вы закончите, нажмите зеленая галочка .
Затем вы можете перемещать значки по странице, работая над их расположением и расположением по своему усмотрению. (The Варианты трансформации Divi кстати, это удивительно.) Когда вы будете удовлетворены всеми своими решениями, нажмите зеленая кнопка Сохранить (или Опубликовать) в правом нижнем углу, чтобы зарегистрировать новый модуль значков социальных сетей. Если вы не видите кнопку Опубликовать / Сохранить, нажмите фиолетовый многоточие (три точки) внизу по центру экрана, чтобы развернуть меню.
После этого ваши иконки социальных сетей будут жить на вашем сайте.
Использование Divi Theme Builder для добавления значков социальных сетей
Как мы упоминали выше, Divi Theme Builder - это мощный инструмент, который дает вам полный контроль практически над каждым аспектом вашего сайта. Так что, если вы хотите добавить значки социальных сетей где угодно, генератор тем поможет вам.
Чтобы начать с генератора тем, перейдите в Divi - генератор тем в панели управления WordPress.
Речь идет о добавлении значков социальных сетей в существующий макет конструктора тем Divi. Или к новому! Неважно, добавляете ли вы заголовок, нижний колонтитул или все тело своего сайта - или даже определенные категории или другие специализированные типы страниц. Вы будете следовать тому же процессу.
Сначала мы найдем раздел, который хотим добавить. Опять же, он может быть глобальным или персонализированным. Если вы никогда раньше не использовали конструктор тем, это просто. Мы будем добавлять значки социальных сетей в отдельные сообщения. Поэтому вы можете начать, нажав на Добавить новую модель и выбрав Все сообщения ou Сообщения в определенных категориях . Затем отметьте категории, которые хотите включить. Затем нажмите на Создать шаблон .
Если вы уже настроили шаблоны, просто нажмите на Редактировать карандаш или дважды щелкните по разделу, который вы хотите изменить.
Процесс добавления значков социальных сетей здесь такой же, как описано выше в генераторе. Однако, поскольку вы используете построитель тем, а не просто редактируете одну страницу, значки не будут отображаться только там, где вы выберете. Шаблоны можно добавлять в верхние и нижние колонтитулы и глобальные шаблоны. И вы можете выбрать, как и когда они появятся, не настраивая их один раз. Не постранично, как было бы выше.
Например, если мы хотим включить значки социальных сетей под заголовком поста, но над содержанием поста в каждый пост в блоге, который мы публикуем, мы просто добавим модуль в следовать социальные сети. Нажмите на кружок Noir + и выберите его в диалоге Вставить модуль .
Затем просто перетащите модуль туда, где вы хотите, чтобы значки социальных сетей отображались. (Мы используем каркасный режим для этого размещения). Затем вам просто нужно добавить социальные сети, которые вы хотите отображать. Затем вы настраиваете размер и цвет, как и выше.
И вот так вы добавили несколько иконок социальных сетей в генератор тем Divi. Они будут отображаться в любом сообщении блога, которое вы создаете (в этом примере).
А если вам не нравится, как они выглядят, генератор тем легко настроить. Просто перетащите их в другое место, например в верхнюю часть боковой панели.
Убедитесь, что нажали зеленую кнопку Регистрация в углу. Теперь каждое сообщение в блоге с этим шаблоном на сайте будет загружаться с вашими значками социальных сетей в верхней части боковой панели.
Добавление значков социальных сетей в верхний и нижний колонтитулы с помощью Divi Theme Builder
Возможно, значки социальных сетей по умолчанию в настройках Divi не работали для вас или не предлагали достаточную настройку. В этом случае вы всегда можете использовать конструктор тем, чтобы настроить его более полно.
В любой шаблон можно добавить собственный нижний колонтитул. Это заменит Divi по умолчанию. Любой шаблон без настраиваемого шаблона будет отображать элемент темы по умолчанию. Иконки социальных сетей могут отличаться от публикации к архиву страницы, в зависимости от потребностей ваших пользователей.
Вы также можете добавить глобальный нижний колонтитул, который заменит все другие созданные вами нижние колонтитулы. (Это также относится к глобальным телам и заголовкам).
Если вы разработали 4 настраиваемых нижних колонтитула для сообщений, страниц, проектов и категорий, но затем вы создали глобальный нижний колонтитул, будет отображаться только глобальный нижний колонтитул.
Глобальные шаблоны отлично подходят для значков социальных сетей на всем сайте, например, для газеты или бренда. В то время как персонализированные шаблоны с социальными значками могут быть лучшими для отдельных авторов, которые являются частью сети.
Используя Divi Builder для настраиваемых заголовков, нижних колонтитулов и шаблонов тела, вы можете добавлять значки социальных сетей практически в любую часть Divi, какую захотите. Вы не ограничены дизайном по умолчанию или вам нужно копаться в файловой системе WordPress. Кроме того, с генератором тем вы можете использовать любые варианты дизайна Divi, чтобы украсить значки социальных сетей и выделить их правильным образом для каждой конкретной аудитории.
Заключение
Когда у вас есть параметры нижнего колонтитула Divi по умолчанию, инструмент Divi Builder для сообщений и страниц, мощь Divi Theme Builder, нет причин, по которым вам нужно устанавливать плагин для добавления значков социальных сетей на ваш сайт. Divi дает вам полный контроль над тем, как выглядят ваши социальные иконки и где они находятся.
Если вам нужно продвигать бренд, приглашенного автора, группу создателей контента или просто места, где вас можно найти в Интернете, у Divi есть способ сделать это. Мы односторонни, но считаем, что это самый простой, самый простой и стильный способ добавить значки социальных сетей на ваш сайт.
То, как вы создаете страницу продукта, сразу же влияет на поведение ваших посетителей. Хорошо продуманный и персонализированный дизайн страницы продукта может помочь посетителям решить, хотят ли они приобрести ваш продукт. Если вы ищете способ сделать страницу вашего продукта более интересной, вам, вероятно, понравится этот урок.
Мы покажем вам, как включить динамическую сетку преимуществ продукта в ваш дизайн с помощью Divi и плагина Advanced Custom Fields. Начнем с создания группы полей для пособий. Затем мы заполним настраиваемые поля на странице нашего продукта и включим динамическое содержимое в шаблон страницы продукта.
Возможный результат
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.
1. Установите плагин ACF Plugin и группу преимуществ продукта.
Установите плагин Advanced Custom Fields
Чтобы отобразить различные преимущества продукта в серверной части наших продуктов, мы будем использовать бесплатный плагин Advanced Custom Fields. Доступ к вашему Бэкэнд WordPress> Плагины> Добавить> Найти плагин ACF> Установить> Активировать .
Перейти к настраиваемым полям и добавить новую группу полей
После того, как вы установили и активировали плагин ACF, вы сможете получить доступ к вашим настраиваемым полям и добавить новую группу полей.
Настройки группы полей
Дайте вашей новой группе полей заголовок и позвольте ей появляться только на страницах продуктов.
«Тип сообщения» равняется «Продукту»
Добавить первое поле
Продолжите, добавив новое поле для названия вашего первого преимущества продукта.
Ярлык поля: Название преимущества 1
Тип поля: текст
Повторите шаг для остальных полей.
Проделайте то же самое с другими преимуществами продукта и их описаниями. Все эти поля требуют присвоенного им типа поля «Текст».
Название услуги 1
Описание преимуществ 1
Название услуги 2
Описание преимуществ 2
Название услуги 3
Описание преимуществ 3
Название услуги 4
Описание преимуществ 4
2. Добавьте преимущества к продуктам
Откройте или добавьте новый продукт
После создания группы полей и полей вы можете добавлять преимущества продукта к своим продуктам на индивидуальном уровне. Откройте продукт по вашему выбору или создайте новый.
Заполните поля Преимущества продукта
И выполнить преимущества продукта.
3. Создайте шаблон страницы продукта в Divi Theme Builder.
Зайдите в Divi Theme Builder и добавьте новый шаблон
Пора начинать с Divi! Чтобы создать новый шаблон, перейдите в Divi Theme Builder и нажмите «Добавить новый шаблон».
Используйте шаблон на всех продуктах
Мы используем этот шаблон для всех продуктов, но не стесняйтесь выбирать продукты с определенной категорией или ярлыком.
Войдите в редактор шаблона тела модели
Затем введите тело модели, нажав «Добавить собственное тело» и выбрав «Создать собственное тело».
Редактировать раздел # 1
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел. Откройте этот раздел и измените цвет фона на черный.
Цвет фона: # 000000
расстояние
Перейдите на вкладку дизайна раздела и добавьте несколько пользовательских верхних и нижних отступов.
Верхняя обивка: 10px
Нижняя обивка: 10px
Добавить новую строку
Структура столбца
Давайте продолжим, добавив в раздел новую строку, которая имеет следующую структуру:
расстояние
Не добавляя никаких модификаций, давайте откроем настройки строк и внесем некоторые изменения в интервал.
Использовать персонализированный желоб: Да
Ширина желоба: 1
Ширина: 90%
Максимальная ширина: 100%
расстояние
Удалите все внутренние промежутки сверху и снизу.
Высокая внутренняя маржа: 0px
Низкая внутренняя маржа: 0px
Добавьте модуль Woo Cart Notice в столбец
Динамический контент
Единственный модуль, который нам нужен в этой строке и разделе, - это модуль Woo Cart Notice. Убедитесь, что в динамическом разделе выбран «Этот продукт».
Продукт: этот продукт
Цвет фона
Затем откройте настройки модуля и используйте прозрачный фон.
Цвет фона: rgba (0,0,0,0)
Настройки текста
Перейдите на вкладку «Дизайн» и измените шрифт текста.
Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 20 пикселей
Цвет текста кнопки: # 000000
Фон кнопки: # ffd623
Ширина границы кнопки: 0 пикселей
Кнопка с закругленными краями: 0px
Шрифт кнопки: Освальд
Стиль шрифта кнопки: Shift
Высокая внутренняя маржа: 20px
Низкая внутренняя маржа: 20px
Левая внутренняя маржа: 50px
Внутренняя правая маржа: 50px
Добавить раздел № 2
Градиентный фон
Добавьте еще один регулярный раздел ниже предыдущего. Затем откройте настройки и используйте градиентный фон следующим образом:
Цвет 1: # 000000
Цвет 2: #ffffff
Начальная позиция:
Рабочий стол: 30%
Таблетка: 57%
Телефон: 54%
Конечная позиция:
Рабочий стол: 30%
Таблетка: 57%
Телефон: 54%
расстояние
Переходим на вкладку «Дизайн» и добавляем высокий внутренний запас.
Верхняя обивка: 150px
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку с такой же структурой, как показано ниже:
калибровка
Пока не добавляя никаких модов, мы откроем настройки и изменим интервал следующим образом:
Использовать нестандартные желоба: Да
Водосточное пространство: 1
Ширина: 95%
Максимальная ширина: 2560 пикселей
Выравнивание линии: центр
Расстояние
Мы также удалим верхнюю внутреннюю маржу.
Верхняя обивка: 0px
Главный элемент
А чтобы центрировать содержимое столбца на рабочем столе, мы будем использовать две строки кода CSS в основном элементе модуля строки.
Desktop:
дисплей: гибкий; выровнять элементы: центр;
Планшет и телефон:
Дисплей: блок;
Добавьте модуль Woo Image в столбец 1
Динамический контент
Пришло время добавить модули, мы начнем с модуля Woo Images в столбце 1. Убедитесь, что выбран «Этот продукт».
Продукт: этот продукт
Эффект анимации вертикальной прокрутки
Мы добавляем легкое движение к изображению, используя эффект горизонтальной прокрутки движения на расширенной вкладке.
Активировать вертикальное движение: Да
Начальное смещение:
Офис: -4
Планшет и телефон: 0
Среднее смещение: 0
Конечное смещение: 0
Эффект движения триггера: середина элемента
Добавьте модуль заголовка Woo в столбец 2
Динамический контент
В столбце 2 первый мод, который нам нужен, - это заголовочный мод Woo. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.
Продукт: этот продукт
Настройки текста заголовка
Затем перейдите на вкладку дизайна и стилизуйте текст заголовка следующим образом:
Название шрифта: Освальд
Стиль шрифта заголовка: заглавные
Цвет текста заголовка: # ffd623
Размер текста заголовка: 80 пикселей
расстояние
Заполните модуль Woo title, добавив левые и правые поля.
Левое поле: 5%
Правое поле: 5%
Добавьте модуль описания Woo в столбец 2
Динамический контент
Перейдем к следующему модулю, который представляет собой модуль описания Woo. Для этого мы используем следующий динамический контент:
Продукт: этот продукт
Тип описания: Краткое описание
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
Шрифт текста: Карла
Цвет текста: #dbdbdb
Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
Высота строки текста: 1,9 em
калибровка
Затем измените ширину на разных размерах экрана.
Ширина: 59% (рабочий стол), 82% (планшет и телефон)
расстояние
Завершите модуль описания Woo, добавив пользовательские значения полей в настройках интервалов.
Верхнее поле: 50px
Нижнее поле: 100px
Левое поле: 5%
Правое поле: 5%
Добавьте модуль Blurb в столбец 2
Динамический контент
Чтобы отобразить преимущества продукта, которые мы добавили в первой части этого руководства, мы будем использовать модули Blurb. Добавьте первый модуль Blurb и используйте динамическое содержимое первой выгоды, созданной для заголовка и тела.
Название: Название пособия 1
Кузов: Описание преимущества 1
Загрузить изображение
Загрузите изображение или используйте значок по вашему выбору. Вы можете найти те, которые мы использовали в этом руководстве, в папке загрузки, которую вы смогли загрузить в начале этого руководства.
Настройки изображения / значка
Перейдите на вкладку дизайна модуля и измените настройки изображения / значка следующим образом:
Размещение изображения / иконки: вверху
Выравнивание изображения / значка: слева
Настройки текста заголовка
Мы изменяем настройки текста заголовка дальше.
Название шрифта: Освальд
Стиль шрифта заголовка: верхний регистр
Размер текста заголовка: 25 пикселей
Настройки основного текста
Наряду с настройками основного текста.
Body Шрифт: Карла
Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
Высота линии тела: 1,9 em
калибровка
Затем перейдите к настройкам размеров и измените ширину. Важно использовать основную ширину менее 50%, это позволит нам показать два модуля Blurb бок о бок на следующих шагах.
Ширина изображения: 25%
Ширина: 49%
расстояние
Мы также добавим пробелы вокруг модуля Blurb, используя настраиваемые значения заполнения для разных размеров экрана.
Верхняя обивка: 8%
Нижняя прокладка: 8%
Левый отступ: 8% (рабочий стол и планшет), 2% (телефон)
Правый отступ: 8% (рабочий стол и планшет) 2% (телефон)
Основной элемент
Теперь мы собираемся убедиться, что модуль Summary отображает текст рядом друг с другом, в два этапа. Сначала мы убедимся, что ширина модуля меньше 50% (как мы это делали на предыдущем шаге). Далее мы будем использовать свойство в строке. Мы добавим это свойство CSS к основному элементу в расширенном разделе.
Дисплей: встроенный блок;
Клонировать итоговый модуль 3 раза
После того, как вы завершите первый мод Blurb, вы можете клонировать его три раза. Вы автоматически заметите, что модули Blurb появляются в сетке.
Редактировать изображения модуля Blurb
Отредактируйте изображение в каждом дублирующем модуле Blurb. Вы можете найти их в папке загрузки, которую вы, возможно, скачали в начале этой статьи.
Изменить динамический контент модуля Blurb
Также измените динамическое содержимое каждого дублирующего модуля Blurb.
Название: Название услуги (2,3 или 4)
Кузов: описание достоинств (2,3 или 4)
Добавить границы для модулей Blurb индивидуально
Настройки границы модуля Blurb 1
Теперь, чтобы закончить проектирование нашей сетки, мы собираемся добавить границы к модулям Blurb на отдельном уровне. Откройте первый мод Blurb и используйте прямую границу.
Ширина правой границы: 1px
Цвет правой границы: # ffd623
Также добавьте нижнюю границу к первому модулю Blurb.
Ширина нижней границы: 1 пикс.
Цвет нижней границы: # 000000
Настройки границы модуля Blurb 2
Затем откройте второй модуль Blurb и используйте нижнюю границу.
Ширина нижней границы: 1 пикс.
Цвет нижней границы: # 000000
Настройки границы модуля Blurb 3
Завершите дизайн сетки, добавив прямую границу к третьему модулю Blurb.
Ширина правой границы: 1px
Цвет правой границы: # ffd623
Добавить Woo Добавить в корзину Модуль в столбце 2
Динамический контент
Последний модуль, который нам нужен в нашем дизайне, - это модуль Woo Add to Cart. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.
Продукт: этот продукт
Настройки поля
Перейдите на следующую вкладку дизайна и измените настройки поля.
Цвет фона полей: #ffffff
Цвет текста поля: # 000000
Округлые поля: 0px (все углы)
Ширина нижней границы полей: 1px
Цвет нижней границы полей: # 000000
Настройки кнопок
Затем стилизуйте кнопку соответственно:
Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 20 пикселей
Цвет текста кнопки: # 000000
Цвет фона кнопки: # ffd623
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 0 пикселей
Шрифт кнопки: Освальд
Стиль шрифта кнопки: заглавные
Верхняя обивка: 20px
Нижняя обивка: 20px
Левый отступ: 50px
Правый отступ: 50 пикселей
расстояние
И заполните параметры модуля, добавив пользовательские значения полей.
Верхнее поле: 100px
Левое поле: 5%
3. Сохраните модификации генератора тем и просмотрите результат.
Завершив разработку шаблона страницы продукта, вы можете сохранить все изменения Theme Builder и отобразить результаты на своих продуктах!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этой статье мы показали вам, как проявить творческий подход к следующему шаблону страницы продукта Divi. В частности, мы показали вам, как включить динамическую сетку преимуществ продукта, чтобы добавить дополнительные преимущества на страницу вашего продукта. Мы создали это руководство, используя Divi в сочетании с плагином Advanced Custom Fields. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Темный режим продолжает набирать популярность как удобный вариант, позволяющий пользователям работать в Интернете с меньшей нагрузкой на глаза. Посмотрим правде в глаза, мы все склонны проводить больше времени, глядя на экраны, чем следовало бы, поэтому любое дополнительное удобство для пользователя (например, темный режим) может иметь большое значение.
Операционные системы, программы и браузеры обычно включают встроенные возможности темного режима, но некоторые разработчики переходят на другой уровень, добавляя настраиваемый темный режим для своего веб-сайта. Идея состоит в том, чтобы лучше контролировать то, как их веб-сайт выглядит в темном режиме, без ущерба для брендинга и / или дизайна.
В этом уроке мы покажем вам, как создать пользовательский переключатель темного режима в Divi с нуля без плагина. С помощью этой функции переключения темного режима вы сможете контролировать дизайн темного режима и улучшать пользовательский интерфейс, адаптированный к вашему бренду.
Давайте начнем!
обследование
Вот предварительный просмотр дизайна, который мы создадим в этом уроке.
Вот пользовательский переключатель темного режима, который мы собираемся создать.
А вот до и после темного режима, примененного к одному из наших предопределенных макетов.
А вот переключатель темного режима, добавленный в глобальный заголовок. Обратите внимание, как остается светлый / темный режим при просмотре сайта.
Часть 1: Построение переключателя из темного режима
В этой первой части урока мы собираемся создать переключатель темного режима со страницей в Divi. После создания переключателя с кодом вы сможете сохранить его в библиотеке Divi и добавить в любое место на своем веб-сайте.
Для начала добавьте строку из одного столбца в раздел по умолчанию при создании с нуля с Divi на передней панели.
Добавить сводный модуль
Чтобы создать собственный переключатель, мы собираемся разработать модуль Blurb с небольшим количеством специального CSS.
Добавьте новый текстовый модуль презентации в строку.
Содержание
Удалите фиктивное содержимое по умолчанию для заголовка и тела. Затем добавьте квадратный значок вместо изображения.
Дизайн
Перейдите в настройки дизайна и обновите следующее:
Цвет значка: # 666666
Выравнивание изображения / значка: слева
Размер шрифта иконки: 22 пикселей
Ширина: 50px
Выравнивание модуля: центр
Высота: 25px
Маржа: минимум 0px
Закругленные углы: 4px
Ширина границы: 2 пикселя
Цвет границы: # 666666
Пользовательский CSS
Как только дизайн будет готов, перейдите на вкладку «Дополнительно». В разделе «Пользовательский CSS» добавьте следующий пользовательский CSS-код к основному элементу, чтобы убедиться, что переполнение не закрывается стилем закругленных углов.
переполнение: видимое! важное;
Затем добавьте следующий настраиваемый CSS в элемент After:
Это добавляет метку к модулю Blurb, который мы изменим с «светлого» на «темный» при нажатии.
Дизайн основного текста
Поскольку текст псевдоэлемента сообщения наследует стили основного текста, мы можем добавить стили основного текста, используя параметры 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, этот элемент унаследует пользовательский CSS «темного режима» в коде, который мы добавили после включения темного режима. Этот метод дает нам больше контроля над дизайном в темном режиме, поскольку некоторые элементы могут не требовать стилизации в темном режиме.
Для начала мы можем добавить темный режим в раздел, содержащий наш переключатель темного режима.
Откройте параметры раздела и добавьте следующий класс CSS:
Класс CSS: поддержка et-dark-mode
Часть 2: Добавление функций темного режима на страницу Divi
Теперь, когда у нас есть код и классы CSS, мы готовы применить функциональность и дизайн темного режима ко всей странице в Divi. Для этого мы собираемся использовать готовый макет целевой страницы мобильного приложения.
Чтобы добавить макет, откройте меню настроек в нижней части визуального конструктора и щелкните значок «Добавить новый макет».
Затем выберите макет целевой страницы мобильного приложения на вкладке «Предварительно определенные макеты».
Убедитесь, что параметр «Заменить существующий контент» НЕ выбран. Вы не хотите очищать раздел переключателем темного режима.
Поскольку стиль темного режима будет применяться только к элементам с CSS-классом «способный и темный режим», мы можем добавить на страницу разные способы.
Мы можем добавить класс CSS к каждому элементу страницы в отдельности.
Мы могли бы расширить класс CSS для элементов по всей странице (это было бы быстрее, чем делать это вручную). Например, мы могли бы открыть настройки раздела для верхнего раздела и расширить класс CSS для этого раздела на все разделы страницы.
Мы можем добавить класс CSS к глобальным значениям по умолчанию для элемента. Это применит класс CSS ко всем элементам всего сайта, добавив возможность темного режима по всему сайту. Например, мы могли бы открыть настройки раздела и щелкнуть глобальный значок по умолчанию, чтобы изменить глобальные настройки раздела по умолчанию. Затем мы можем добавить класс CSS и зарегистрировать его как класс CSS для всех разделов сайта.
Добавление класса CSS к элементам страницы
В этом примере мы обновим элементы страницы, добавив класс CSS к глобальным значениям по умолчанию для разделов и текстовых модулей. По мере продвижения мы также будем вносить некоторые дополнения в другие элементы страницы.
Все разделы
Чтобы добавить класс CSS во все разделы, откройте настройки верхнего раздела, в котором есть переключатель темного режима. Затем измените глобальные значения по умолчанию для раздела и добавьте следующий класс CSS к глобальным значениям по умолчанию для раздела:
Класс CSS: поддержка et-dark-mode
Все специализированные разделы
Также добавьте класс CSS к глобальным значениям по умолчанию в специализированном разделе.
Текстовые модули
Затем откройте настройки одного из текстовых модулей на странице и добавьте тот же класс CSS к глобальным текстовым значениям по умолчанию.
Чтобы проверить результат, перейдите на страницу в реальном времени и нажмите на переключатель темного режима в верхней части страницы.
Вот как должна выглядеть страница в чистом режиме.
А вот как должна выглядеть страница в темном режиме.
Дополнительные ресурсы
Вот еще несколько ресурсов, которые могут вас заинтересовать.
Оснащение вашего сайта Divi настраиваемым переключателем темного режима может стать отличным способом улучшить пользовательский опыт и создать совершенно новый дизайн, который радует и успокаивает глаза. Надеюсь, это будет вам полезно.
Конфиденциальность и файлы cookie: этот сайт использует файлы cookie. Продолжая просматривать этот сайт, вы соглашаетесь на его использование.
Чтобы узнать больше, в том числе о том, как управлять файлами cookie, см. Следующее:
Политика в отношении файлов cookie
