Как создать липкий заголовок с помощью липких опций Divi

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

В этом уроке мы покажем вам, как создать липкий заголовок, содержащий следующее:

• Заголовок, который мы создаем, имеет верхнюю панель заголовка + строку меню.
• Мы делаем раздел, содержащий строку меню, липким, когда вы проходите мимо него, как только вы вернетесь наверх, снова появится панель заголовка.
• Мы меняем стили оформления закрепленного раздела (и его элементов), когда этот раздел становится липким.

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите шаблон глобального заголовка БЕСПЛАТНО

Чтобы получить доступ к бесплатному шаблону глобального заголовка, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

1. Построение структуры элемента заголовка внутри нового шаблона заголовка

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

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

Раздел № 1 Настройки

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

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Размеры

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

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

Интервал

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

• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей

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

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

display: flex;

Добавить модуль отслеживания социальных сетей в столбец 1

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

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

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

Затем удалите каждый из цветов фона социальной сети по отдельности.

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

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

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

Интервал

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

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

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

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

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

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

Добавьте ссылку дальше.

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

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

• Расположение кнопок: вправо

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

Мы тоже стилизуем кнопку.

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

• Расстояние между буквами кнопки: 4 пикселя
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные
• Показать кнопку: Да

Интервал

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

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей

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

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

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

• Цвет 1: #ffffff
• Цвет 2: # f7f7f7
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Стартовая позиция: 25%
• Конечная позиция: 25%

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Максимальная ширина: 2580 пикселей

Интервал

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

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей

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

Выберите меню

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

Загрузить логотип

Затем загрузите логотип.

Удалить цвет фона

Затем удалите белый цвет фона модуля по умолчанию.

Настройки текста меню

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

• Толщина шрифта меню: полужирный
• Цвет текста меню: # 002d4c
• Размер текста меню: 15 пикселей
• Расстояние между буквами меню: 4 пикселя
• Выравнивание текста: вправо

Параметры текста раскрывающегося меню

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

• Цвет фона выпадающего меню: #ffffff
• Цвет строки раскрывающегося меню: # 002d4c

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

Вместе с настройками иконок.

• Цвет значка корзины покупок: # 002d4c
• Цвет значка поиска: # 002d4c
• Цвет значка меню гамбургера: # 002d4c

Размеры

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

• Максимальная высота логотипа: 60 ​​пикселей

2. Примените собственные липкие эффекты.

Поверните секцию № 2 липкой

Теперь, когда мы создали структуру элементов нашего заголовка, пришло время закрепить наш второй раздел и изменить его стиль дизайна и его элементы в закрепленном состоянии. Откройте настройки второго раздела и перейдите на вкладку «Дополнительно». Там перейдите к настройкам эффектов прокрутки и примените следующие параметры:

• Липкая позиция: придерживаться верха
• Смещение липкой вершины: 0 пикселей
• Нижний предел липкости: нет
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Изменить градиентный фон раздела в липком состоянии

Теперь, когда наш раздел стал липким, в настройках раздела, строки и модуля появится дополнительная опция; липкий вариант. Щелкнув этот значок, вы сможете создать альтернативный стиль для элемента, который вы выбрали в закрепленном состоянии. Мы собираемся объединить несколько этих липких настроек дизайна, чтобы настроить внешний вид нашего липкого заголовка при прокрутке. Начните с перехода к настройкам фона второго раздела и примените следующий липкий градиентный фон:

• Цвет 1: # 26333a
• Цвет 2: # 1e272f

Растянуть строку в липком состоянии

Затем мы откроем строку, содержащую модуль меню, и изменим ширину в закрепленном состоянии.

• Ширина: 95%

Удалить отступы строк в закрепленном состоянии

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Изменить цвет текста меню в закрепленном состоянии

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

• Цвет текста меню: # ffbd68

Изменение цвета значков меню в закрепленном состоянии

Наряду с цветами значков.

• Цвет значка корзины покупок: #ffffff
• Цвет значка поиска: #ffffff
• Цвет значка меню гамбургера: #ffffff

Удалить высоту логотипа в липком состоянии

И последнее, но не менее важное: мы изменим максимальную высоту логотипа на ноль в липком состоянии. Это полностью удалит логотип из нашего заголовка, как только будут включены закрепленные настройки раздела. Вот и все! Убедитесь, что вы сохранили все изменения Divi Theme Builder после завершения дизайна заголовка и предварительно просмотрите его на своем веб-сайте.

• Максимальная высота логотипа: 0 пикселей

Предварительный просмотр

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

Рабочий стол

Мобильный

Последние мысли

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

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