Учебник Divi: как использовать навигационный модуль статьи
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Прежде чем вы сможете добавить модуль Дива статьи на вашу страницу, вы должны сначала перейти в Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
После того, как вы вошли в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите навигационный модуль в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «Навигация в статьях», а затем нажмите «Ввод» для поиска и автоматического добавления модуля навигации. После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавление пользовательских навигационных ссылок в нижней части сообщения в блоге
Наличие ссылок на ссылки на следующие и предыдущие статьи внизу вашей статьи - отличный способ привлечь посетителей к вашему контенту. В этом примере я покажу вам, как использовать фактические названия заголовков публикаций для ваших навигационных ссылок вместо «предыдущих» и «следующих» имен общих ссылок. Я также покажу вам, как добавить границу вокруг ссылок, чтобы дать им больше эффекта.
Давайте начнем.
Используйте визуальный конструктор, чтобы добавить стандартный раздел с макетом полной ширины (столбец 1) в нижней части публикации. Затем добавьте модуль навигации после строки.
WPML, лучший плагин для перевода вашего сайта
Обновите настройки навигации публикации следующим образом:
Контент
Предыдущий текст ссылки:% title (эта переменная вставляет заголовок статьи)
Текст следующей ссылки:% title (эта переменная вставляет заголовок статьи)Закладка
Шрифтовые ссылки: PT Sans
Ссылки Размер шрифта: 20px Ссылки Цвет текста: # 5e95c1 Использовать границу: ДА Цвет рамки: # 5e95c1 Ширина границы: 1px Custom Padding: 20px Top, 20px Right, 20px Bottom, 20px Left
Вот и все! Теперь у вас есть названия публикаций в навигационных ссылках
PEARL: тема WordPress для бизнеса
Параметры содержимого навигационного модуля
На вкладке «Содержание» вы найдете все элементы содержимого модуля, такие как текст, изображения и значки. Все, что контролируеткакиев вашем модуле всегда будет отображаться на этой вкладке.
Текст предыдущей ссылки
Определите пользовательский текст для предыдущей ссылки. Вы можете использовать переменную% title, чтобы включить заголовок статьи. Оставьте поле пустым для значения по умолчанию.
Текст следующей ссылки
Установите собственный текст для следующей ссылки. Вы можете использовать переменную% title, чтобы включить заголовок сообщения. Оставьте поле пустым для значения по умолчанию.
В той же категории
Здесь вы можете определить, должны ли предыдущие и следующие статьи быть в том же таксономии, что и текущая статья.
Название таможенной таксономии
Оставьте этот параметр пустым, если вы используете этот модуль для проекта или статьи. В противном случае введите имя таксономии, чтобы опция «В той же категории» работала правильно.
Скрыть предыдущую ссылку
Вы можете выбрать здесь, чтобы скрыть или показать предыдущую ссылку.
Скрыть следующую ссылку
Вы можете выбрать здесь, чтобы скрыть или показать следующую ссылку.
Значок администратора
Это облегчит идентификацию модуля в конструкторе. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в блоке модуля интерфейса Divi Builder.
Параметры дизайна после навигации
На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать для изменения внешнего вида вашего модуля. Каждый модуль Divi имеет длинный список параметров дизайна, которые вы можете использовать для изменения чего-либо.
Шрифт ссылок
Вы можете изменить шрифт вашего текста ссылки, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете олицетворять стиль вашего текста, используя жирный, курсив, прописные и подчеркнутые параметры.
Размер шрифта Link
Здесь вы можете настроить размер текста вашей ссылки. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста или ввести значение требуемого размера текста непосредственно в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Цвет текста ссылок
По умолчанию все цвета текста Divi отображаются белым или темно-серым цветом. Если вы хотите изменить цвет текста ссылки, выберите нужный цвет в панели выбора цветов, используя эту опцию.
Интервал ссылок
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пространство между каждой буквой в тексте ссылки, используйте ползунок диапазона, чтобы отрегулировать пробел или введите желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Высота линии ссылок
Высота линии влияет на пространство между каждой строкой текста в ваших ссылках. Если вы хотите увеличить пространство между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать пробел или введите требуемый размер интервала в текстовом поле. введенный справа от курсора. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Использовать границу
Включение этой опции будет размещать рамку вокруг вашего модуля. Эта граница может быть настроена с использованием следующих условных параметров.
Цвет границы
Этот параметр влияет на цвет вашей границы. Выберите собственный цвет в подборщике цветов, чтобы применить его к границе.
Ширина границы
По умолчанию границы имеют ширину 1-пикселя. Вы можете увеличить это значение, перетащив ползунок диапазона или введя пользовательское значение в поле ввода справа от ползунка. Пользовательские единицы измерения поддерживаются, что означает, что вы можете изменить блок по умолчанию «px» на что-то еще, например em, vh, vw и т. Д.
Стиль границ
Границы поддерживают восемь разных стилей: сплошной, пунктирный, пунктирный, двойной, паз, гребень, инкрустация и начало. Выберите нужный стиль в раскрывающемся меню, чтобы применить его к границе.
Пользовательская маржа
Маржа - это пространство, добавленное к внешней стороне вашего модуля, между модулем и следующим элементом выше, внизу или слева и справа от него. Вы можете добавить специальные значения полей на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Пользовательское дополнение
Заполнение - это пространство, добавленное внутри вашего модуля, между краем модуля и его внутренними элементами. Вы можете добавить собственные значения заполнения на одну из четырех сторон модуля. Чтобы удалить пользовательский запас, удалите добавленное значение из поля ввода. По умолчанию эти значения измеряются в пикселях, но вы можете вводить собственные единицы измерения в поля ввода.
Расширенные параметры навигационного модуля
На вкладке «Дополнительно» вы найдете варианты, которые могут быть полезны более опытным веб-дизайнерам, например атрибутам CSS и пользовательский HTML. Здесь вы можете применить собственный CSS к одному из многих элементов модуля. Вы также можете применить к модулю пользовательские классы и идентификаторы CSS, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.
CSS-идентификатор
Введите необязательный идентификатор CSS, который будет использоваться для этого модуля. Идентификатор может использоваться для создания пользовательского стиля CSS или для создания ссылок на определенные разделы вашей страницы.
Класс CSS
Введите дополнительные классы CSS, которые будут использоваться для этого модуля. Класс CSS можно использовать для создания пользовательского стиля CSS. Вы можете добавить несколько классов, разделенных пробелом. Эти классы могут использоваться в вашей дочерней теме Divi или в специальной таблице стилей CSS, которую вы добавляете на свою страницу или на веб-сайт, с помощью параметров темы Divi или настроек страницы Divi Builder.
пользовательских CSS
Пользовательский CSS также может применяться к модулю и к одному из внутренних элементов модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавлять собственные таблицы стилей CSS непосредственно к каждому элементу. Элементы CSS в этих параметрах уже завернуты в теги стиля. Поэтому просто введите правила CSS, разделенные точкой с запятой.
видимость
Эта опция позволяет вам управлять устройствами, на которых отображается ваш модуль. Вы можете отключить свой модуль на планшетах, смартфонах или настольных компьютерах по отдельности. Это полезно, если вы хотите использовать разные модули на разных устройствах, или если вы хотите упростить мобильный дизайн, исключив некоторые элементы страницы.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: