Модуль Навигация Поста Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Навигация поста.

Как добавить модуль Навигация поста на свою страницу

Прежде чем вы сможете добавить модуль навигация поста на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

Найдите модуль навигация поста в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «навигация поста», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

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

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

Используя Visual Builder, добавьте новый раздел с строкой в полную ширину (1 столбец). Затем вставьте модуль навигация поста в новую строку.

В настройках модуля обновите следующие параметры:

Вкладка Контент

Предыдущая ссылка: %title (Эта переменная подставляет название поста)
Следующая ссылка: %title (Эта переменная подставляет название поста)

Вкладка Дизайн

Ссылки шрифт: PT Sans
Ссылки размер текста: 20px
Ссылки цвет текста: #5e95c1
Включить рамку: YES
Цвет рамки: #5e95c1
Ширина рамки: 1px
Рамка. Внутренний отступ: 20px Верх, 20px право, 20px Низ, 20px Лево

Сохраните настройки слайда

Теперь у вас есть заголовки сообщений для переходу по сообщениям.

Вкладка Контент модуля Навигация поста

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

Предыдущая ссылка

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

Следующая ссылка

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

Навигация внутри текущей категории

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

Специальное название классификации

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

Скрыть предыдущую ссылку поста

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

Скрыть следующую ссылку поста

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

Метка администратора

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Навигация поста

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

Ссылки шрифт

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

Ссылки размер текста

Здесь вы можете настроить размер текста ваших ссылок. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Ссылки цвет текста

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

Ссылки расстояние между буквами

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

Ссылки высота строки

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

Рамка

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

Цвет рамки

Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в палитре цветов, чтобы применить его к границе.

Ширина рамки

По умолчанию границы имеют ширину 1 пиксель. Вы можете увеличить это значение, перетащив ползунок диапазона или введя настраиваемое значение в поле ввода справа от ползунка. Пользовательские единицы измерения поддерживаются, что означает, что вы можете изменить единицу измерения по умолчанию с «px» на что-то другое, например em, vh, vw и т. Д.

Стиль рамки

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

Расстояние

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

Внутренний отступ

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

Вкладка Расширенный модуля Навигация поста

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

Пользовательский CSS

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