Модуль Блог Divi

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

С Divi даже блоги являются модулем, и ваш «блог» можно разместить где угодно на вашем веб-сайте и в различных форматах. Вы можете комбинировать модули блога и боковой панели для создания классического дизайна блога. Блоги с 1, 2 или 3 столбцами могут быть созданы с использованием модулей блога и боковой панели.

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

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

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

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

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

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

Вот как выглядит примерная страница.

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

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

Используйте визуальный конструктор, чтобы добавить специальный раздел со следующим макетом:

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

Затем добавьте модуль блога в строку.

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

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

Количество сообщений: 6
Показать кнопку «Читать дальше»: ВКЛ.
Показать номера страниц: НЕТ
Фон: #ffffff

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

Макет: сетка
Использовать Dropshadow: ВКЛ.
Overlay цвет иконки: #ffffff
Цвет фона наложения: rgba (224,153,0,0.51)
Заголовок шрифт: по умолчанию
Заголовок размер шрифта: 21 пикс.
Заголовок цвет текста: # 333333
Заголовок расстояние между букв: 1 пиксель
Заголовок высота строки: 1,2 мм
Рамка: ДА
Цвет рамки: # f0f0f0
Ширина рамки: 1 пикс.
Стиль рамки: сплошной

Вкладка Расширенные

Пользовательский CSS (Кнопка читать далее):

color: #e09900;
display: block;
text-align:center;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
text-transform: capitalize;
letter-spacing: 1px;

Расширенный настраиваемый CSS для кнопки «Читать дальше» создает индивидуальный вид, который хорошо вписывается в дизайн.

В правой части боковой панели макета Специального раздела вам нужно будет добавить модуль боковой панели, который вытаскивает виджет последних сообщений. Ниже вам нужно будет добавить модуль подписки на электронную почту. А затем под Email Optin вам нужно добавить модуль Person с информацией об авторе.

Готово!

Вкладка Контент модуля Блог

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

Количество сообщений

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

Включенные категории

Выберите, какие категории вы хотите включить в ленту.

Формат мета даты

Определите здесь формат даты, который вы хотите отображать в своих сообщениях в блоге. Макет по умолчанию — формат M j, Y (6 января 2014 г.) Дополнительные параметры см. В Кодексе WordPress по форматам даты.

Содержание

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

Номер смещения

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

Показать избранное изображение

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

Кнопка «Читать дальше»

Здесь вы можете указать, показывать ли ссылку «читать дальше» после отрывка или нет.

Показать автора

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

Показать дату

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

Показать категории

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

Показать количество комментариев

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

Показать разбиение на страницы

Выберите, хотите ли вы отображать нумерацию страниц для этого канала. Чтобы включить нумерованную нумерацию страниц, вам необходимо установить плагин WP Page Navi.

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

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

Вкладка Дизайн модуля Блог

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

Макет

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

Overlay главного изображения

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

Overlay цвет иконки

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

Цвет фона наложения

Здесь вы можете определить собственный цвет для наложения.

Наложение значка

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

Цвет текста

Если ваш блог размещается на светлом фоне, цвет текста должен быть установлен на «Темный». И наоборот, если ваш блог размещается на темном фоне, цвет текста должен быть установлен на «Светлый».

Заголовок шрифт

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

Заголовок размер текста

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

Заголовок цвет текста

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

Заголовок Расстояние между буквами

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

Заголовок высота строки

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

Body шрифт

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

Body размерт текста

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

Body цвет текста

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

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

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

Body высота букв

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

Meta шрифт

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

Meta размер букв

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

Meta цвет текста

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

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

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

Meta высота строки

Высота строки влияет на расстояние между каждой строкой вашего метатекста. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «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, разделенные точкой с запятой.

Отключить на:

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