Divi: как создать липкий глобальный заголовок

Вы хотите создать липкий заголовок с Divi ?

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

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

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

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

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

Создайте структуру элемента заголовка

Создайте новый шаблон глобального заголовка

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

Раздел 1 Параметры

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

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

В редакторе шаблонов вы увидите раздел. Откройте этот раздел и примените градиентный фон.

Цвет 1: #ffba60
Цвет 2: #ffd6a0
Направление градиента: 90 градусов
Исходное положение: 50%
Итоговая позиция: 50%

расстояние

Затем удалите все внутренние поля (сверху и снизу) по умолчанию.

Вершина внутреннего поля: 0px
Нижнее внутреннее поле: 0px

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

Структура колонны

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

калибровка

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

Использовать пользовательскую ширину желоба: Да
Расстояние между столбцами: 1
Максимальная ширина: 95%
Максимальная ширина: 2 пикселей

расстояние

Также добавьте собственные внутренние поля (сверху и снизу).

Вершина внутреннего поля: 15px
Нижнее внутреннее поле: 15px

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

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

display: flex;

Добавьте модуль «Подпишитесь на нас в социальных сетях» в столбец 1.

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

Пришло время добавить модули, начиная с модуля «Следите за нами в социальных сетях» в столбце 1. Добавьте социальные сети по вашему выбору вместе с соответствующими ссылками.

Удалить цвет фона из каждой социальной сети

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

Настройки значка

Затем вернитесь к общим настройкам модуля и измените цвет значка во вкладке дизайна.

Цвет значка: #26333a

расстояние

Также добавьте верхнее поле.

Верхнее поле: 5 пикселей

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

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

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

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

Затем добавьте ссылку.

Выравнивание кнопок

Затем перейдите на вкладку «Стиль» и измените выравнивание кнопок.

Выравнивание кнопок: справа

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

Мы также настраиваем кнопку.

Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 14 пикселей
Цвет текста кнопки: #26333a
Ширина границы кнопки: 2 пикселя
Цвет границы кнопки: #26333a
Радиус границы кнопки: 0 пикселей

Кнопки с интервалом между буквами: 4 пикселя
Кнопка Soft Light: жирный текст
Кнопка копирования стиля: верхний регистр
Показать кнопку: да

расстояние

И мы завершим настройку модуля, добавив внутренние поля (сверху и снизу) в настройки интервалов.

Вершина внутреннего поля: 10px
Нижнее внутреннее поле: 10px