Пропустить

Как использовать модуль блога в Divi Builder

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Предварительный просмотр блога divi module blog.png

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

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

кнопка divi builder module blog divi.png

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

добавить модуль блога divi builder.png

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

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

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

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

пример страницы divi.jpg

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

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

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

специальность макета divi.png

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

seletion zone divi builder.png

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

используйте модуль blog.png

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

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

Сообщений: 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;

Настройки блога divi.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

блочные дизайнерские статьи divi.jpg

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

Вот так!

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

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

блог-модуль divi.png

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

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

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

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

элементы для отображения модуля divi blog.png

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

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

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

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

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

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

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

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

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

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

дизайн divi builder module blog.png

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

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

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

Цвет крышки

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

Иконка

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

Цвет текста

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

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

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

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

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

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

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

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

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

заголовок интервала конфигурации divi.png

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

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

Шрифт тела

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

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

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

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

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

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

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

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

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

Шрифт Metas

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

раздел метаданных diiv builder.png

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

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

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

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

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

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

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

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

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

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

Цвет границы

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

Стиль границ

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

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

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

расширенный раздел модуля blog.png

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

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

Класс CSS

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

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

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

видимость

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

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

Эта статья содержит 1 комментарий

  1. Привет,
    Вы знаете, как изменить направление нумерации страниц? Я хочу представить свои статьи от самых последних до самых старых.
    Merci влить Votre réponse.
    Manolita

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
10 акции
доля4
чирикать2
Регистрация4