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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметры содержимого

Сообщений: 6
Узнать больше Кнопка: ON
Показать разбивку на страницы: НЕТ
Цвет фона сетки: #ffffff

Варианты дизайна

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

Опции avancées

Пользовательский CSS (кнопка «Подробнее»):

цвет: # e09900;
блок просмотра;
выравнивания текста: центр;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
Трансформация текста: заглавная;
интервал между буквами: 1px;

Усовершенствованная пользовательская кнопка CSS для кнопки «Подробнее» создает пользовательский внешний вид, соответствующий дизайну.

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

Вот так!

Параметры содержимого блога

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

Номер позиции (количество позиций)

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

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

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

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

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

Установите здесь формат даты, который вы хотите отображать в своих сообщениях в блоге. Макет по умолчанию - формат M j, Y (6 января 2014 г.) См. WordPress codex о форматах даты для получения дополнительных опций.

Содержание

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

Смещение номера

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

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

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

Подробнее кнопка

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

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

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

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

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

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

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

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

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

Просмотр разбивки на страницы

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

Ярлык администрации

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

Варианты дизайна блога

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

Предоставление

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

Наложенное изображение

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

Цвет значка наложения

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

Цвет крышки

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

Иконка

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

Цвет текста

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

Шрифт заголовка

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

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

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

Высота строки заголовка

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

Шрифт тела

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

Размер шрифта тела

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

Цвет текста тела

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

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

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

Высота линии тела

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

Шрифт Metas

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

Размер шрифта Metas

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

Цвет текста для мета

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

Интервал мета-букв

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

Высота линии Meta

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

Использовать границу

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

Цвет границы

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

Ширина границы

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

Стиль границ

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

Расширенные настройки блога

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

CSS-идентификатор

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

Класс CSS

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

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

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

видимость

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

Это все для этого урока.