Модуль комментариев позволяет размещать форма комментарии в любом месте на вашей странице. Если вы используете стандартную страницу или публикацию без Divi Builder, комментарии все равно будут отображаться под содержимым вашего сообщения.

После активации Divi Builder вы можете разместить модуль комментариев в любом месте на своей странице и форма комментарии появятся в месте расположения модуля. Это дает вам гораздо больше контроля над вашими комментариями!

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

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

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

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

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

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

В этом примере я покажу вам, как легко вставить и отформатировать модуль комментариев в вашем сообщении с помощью Visual Builder.

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

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

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

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

Цвет фона полей: #ffffff

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

Цвет текста: Темный
Комментарий Полиция: PT Sans
Комментарий Размер шрифта: 20px
Комментарий Цвет текста:
Полицейское поле: PT Sans
Размер шрифта поля: 20px
Мета-шрифт: PT Sans, Italic, Uppercase
Размер шрифта Meta: 16px
Пограничный радиус поля: 0px
Использовать границу: ДА
Цвет границы: #aaaaaa
Ширина границы: 1px
Использовать пользовательские стили для кнопки: ДА
Кнопка размера текста: 20
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 02b875
Ширина границы
Кнопка: 3px

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

Вот и все. Прелесть этого модуля в том, что вы можете добавить дополнительный контент после раздела комментариев (например, призыв к действию или Контактная форма), что непросто сделать с WordPress по умолчанию.

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

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

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

Отключение этой опции удалит аватар автора комментария из списка комментариев.

Показать кнопку ответа

Когда кнопка Показать ответ отключена, пользователи не смогут отвечать на комментарии в списке комментариев.

Просмотреть комментарии

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

Цвет фона полей

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

Значок администратора

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

Возможности дизайна комментариев

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

Цвет текста

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

Шрифт комментария

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

Мета-шрифт

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

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

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

Цвет метатекста

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

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

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

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

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

Пограничный радиус поля

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

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

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

Цвет границы

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

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

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

Стиль границ

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

Таможенная маржа

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

Custom Padding

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

Используйте пользовательские стили для кнопок

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

Размер текста кнопки

Этот параметр можно использовать для увеличения или уменьшения размера текста на кнопке. Кнопка будет масштабироваться по мере увеличения и уменьшения размера текста.

Цвет текста кнопки

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

Цвет фона кнопки

По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в палитре цветов.

Ширина границы кнопки

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

Цвет рамки кнопки

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

Кнопка «Радиус границы»

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

Интервал букв кнопок

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

Полицейская кнопка

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

Добавить значок кнопки

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi при наведении курсора отображают значок стрелки.

Значок кнопки

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

Цвет значка кнопки

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

Расположение значка кнопки

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

Показывать только значок наведения для кнопки

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

Цвет текста кнопки перехода

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

Цвет фона мыши

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

Цвет рамки наведения

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

Кнопка наведения курсора

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

Прокручивающие буквы интервальной кнопки

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

Комментарии Дополнительные параметры

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

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

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

Класс CSS

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

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

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

видимость

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

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