Хотели бы вы создать панель навигации между сообщениями, которая будет закреплена в Divi?
Панель навигации по записям — эффективный способ улучшить пользовательский опыт на любом блоге. В дополнение к основной навигации вашего сайта, ссылки в панели навигации по записям позволяют пользователям легко переходить к предыдущей или следующей записи в вашем блоге. Добавление этих ссылок в закрепленную панель делает их видимыми и более доступными.
В этом уроке мы создадим навигационную панель между липкой публикацией в DiviДля этого мы воспользуемся встроенными функциями Divi, чтобы превратить строку в фиксированную панель. Затем мы используем модуль навигации по записям, чтобы создать ссылки «предыдущая запись» и «следующая запись».
Кроме того, мы добавим заголовок поста в качестве динамического контента в центре панели, который будет напоминать пользователям о просматриваемом ими посте, что придаст навигационной панели приятный элемент "прошлое, настоящее и будущее".
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Что нужно для начала
Хотя вы можете добавить эту фиксированную панель навигации к любому макету или шаблону записи блога в Divi, мы воспользуемся готовым шаблоном записи блога, чтобы ускорить процесс и быстро начать разработку дизайна.
Импортируйте шаблон записи блога "Набор продуктов" в конструктор тем Divi.
Для начала скачайте Бесплатный шаблон для постов в блоге на основе набора готовых наборов продуктов Divi. . Для этого перейдите в пост в блоге .
Затем введите свой адрес электронной почты, чтобы загрузить zip-файл.
После этого распакуйте файл, чтобы он был готов к импорту.
Для импорта файла в редактор тем выполните следующие действия:
- Перейдите в Divi > Конструктор тем.
- Нажмите на значок портативности.
- В появившемся окне «Переносимость» выберите вкладку «Импорт».
- Выберите ранее загруженный разархивированный файл для импорта.
- Cliquez-сюр- «Импорт шаблонов Divi Theme Builder».
- Нажмите на значок редактирования, чтобы изменить импортированный шаблон.
Создайте липкую панель навигации в 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...