Divi: как создать липкую панель навигации

Хотели бы вы создать панель навигации между сообщениями, которая будет закреплена в Divi?

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

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

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

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

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

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

Что нужно для начала

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

Импортируйте шаблон записи блога «Набор для еды» в конструктор тем Divi.

Для начала скачайте бесплатный шаблон сообщения в блоге для набора макетов Divi's Meal Kit Layout Pack . Для этого перейдите в сообщение в блоге .

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

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

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

1. Перейдите в Divi > Конструктор тем.
2. Нажмите на значок переносимости.
3. Во всплывающем окне «Переносимость» выберите вкладку «Импорт».
4. Выберите ранее загруженный разархивированный файл для импорта.
5. Cliquez-сюр- « Импорт конструктора тем Divi Шаблоны ».
6. Щелкните значок редактирования, чтобы изменить импортированную модель.

Создайте липкую панель навигации в Divi

Часть 1: Создание липкой линии

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

Читайте также: Divi: как использовать опцию «Повторение градиента» для создания пользовательских фоновых рисунков

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

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

Откройте настройки линии.

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

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

• Липкое положение: придерживайтесь верха и низа
• Верхний липкий предел: Раздел
• Нижний липкий предел: площадь тела

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

display:flex;
flex-wrap:nowrap;
align-items:center;

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

• фон: нет
• Bakground: #ffffff (липкий)

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

• Использовать пользовательскую ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Отступ: 0px (сверху и снизу)

Скрыть средний столбец на планшете и телефоне

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

• Отключить на: телефоне, планшете

Часть 2. Создание ссылок для навигации по статьям

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

Ссылка на предыдущий пост

В столбце 1 добавьте новый модуль навигации по записям.

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

• Предыдущая ссылка (текст): Предыдущий пост
• Показать ссылку на предыдущий пост: ДА
• Показать ссылку на следующий пост: НЕТ
• Фон: #000000

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

• Шрифт ссылок: Kumbh Sans
• Вес шрифта ссылок: полужирный
• Стиль шрифта: ТТ
• Цвет текста ссылок: #ffffff
• Размер текста ссылок: 26 пикселей (для ПК), 16 пикселей (для планшетов и телефонов)
• Высота строки: 1,3 см
• Отступы: 0,9 см (сверху), 0,7 см (снизу), 2 см (слева и справа)

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

Смотрите также: Divi: Как изменить стиль нескольких элементов при наведении или после клика

Чтобы навигационная ссылка занимала 50 % области просмотра, добавьте следующий пользовательский CSS в поле «Ссылки CSS» для просмотра на планшете:

display:block;
width:50vw;
text-align:center;
float:none;

Создание ссылки на следующий пост

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

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

• Следующая ссылка: Следующий пост
• Показать ссылку на предыдущий пост: НЕТ
• Показать ссылку на следующую публикацию: ДА

• Фон: #ffb100

Под вкладкой Проект, обновить цвет текста ссылки:

• Цвет текста ссылок: #000000

Часть 3: Создание динамического заголовка сообщения

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

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

В средней колонке добавьте новый текстовый модуль.

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

После добавления динамического заголовка сообщения откройте настройки Заголовок сообщения / архива и обновить содержимое до:

• До чтения

Затем сохраните изменения.

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

• Шрифт текста: Кумбх Санс
• Вес шрифта текста: полужирный
• Стиль шрифта: ТТ
• Цвет текста текста: прозрачный (рабочий стол), #000000 (липкий)
• Размер текста: 16 пикселей
• Расстояние между буквами: 1px
• Высота строки: 1,3 см
• Выравнивание текста: по центру

• Максимальная ширина: 96%
• Модуль выравнивания: по центру
• Отступы: 0,5 см (сверху и снизу)

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

Скачайте DIVI прямо сейчас!!!

Заключение

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

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...