Как стилизовать модуль комментариев Divi в шаблоне сообщения в блоге

Создать шаблон сообщения в блоге довольно просто с помощью конструктора тем Divi. Но есть одна вещь, которую часто упускают из виду при разработке шаблонов блогов, - это раздел комментариев. К счастью, Divi имеет настраиваемый модуль комментариев, который можно легко добавить в шаблон сообщения в блоге. В этом посте мы покажем вам, как создать два пользовательских дизайна раздела комментариев, которые вы можете включить в любой шаблон блога. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

Давайте посмотрим, как макеты комментариев выглядят на экранах разных размеров. Первый дизайн выполнен в минималистичном черно-белом стиле, а второй - более красочен.

Рабочий стол

Планшет

Телефон

Рабочий стол

Планшет

Мобильный

Скачайте БЕСПЛАТНО шаблоны модуля комментариев

Чтобы получить доступ к шаблонам модулей бесплатных комментариев, вам сначала необходимо загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Давайте воссоздадим дизайн модуля комментариев №1

Создать дизайн фона

Первым шагом к воссозданию шаблона макета черно-белых комментариев является создание фона из точек. Один для рабочего стола, другой для адаптивных экранов. Если вы хотите создать это самостоятельно, вам понадобится инструмент для создания узоров Adobe Illustrator. В противном случае вы можете получить аналогичный шаблон из Интернета или использовать тот, который включен в загружаемый файл .zip выше.

1. В Adobe Illustrator создайте пустую монтажную область размером около 1920 пикселей в высоту + 670 пикселей в ширину.
2. Создайте черный круг внутри белого квадрата с полями примерно в половину размера круга.
3. Выделите обе формы и сделайте узор, щелкнув объект> узор> сделать.
4. В создателе узоров выберите «кирпичик за столбцом» и сохраните как образец узора.
5. Создайте фигуру размером с монтажную область и примените узор.
6. Для адаптивного экрана уменьшите фигуру вдвое. Нажмите Shift, чтобы сохранить пропорции кругов.
7. Скопируйте и вставьте узорчатую форму рядом с первой, и теперь у вас есть тот же узор с меньшими кругами.
8. Скачайте оба по отдельности.

Откройте конструктор тем и добавьте новый шаблон

Пришло время открыть конструктор тем. Добавьте новый шаблон.

Выберите шаблон для всех сообщений

Используйте новый шаблон для всех сообщений.

Добавить собственное тело и построить с нуля

И последнее, но не менее важное: начните создавать собственное тело шаблона.

Добавить новый раздел

Фон

Теперь мы можем приступить к созданию дизайна для макета комментариев. Внутри редактора шаблонов вы заметите раздел. Откройте настройки раздела и загрузите фоновые изображения выкройки. Также добавьте наложение градиента.

• Фон: Градиент
• Цвет 1: полупрозрачный белый rgba (255,255,255,0.96)
• Цвет 2: белый #ffffff
• Поместите градиент над фоновым изображением: Да
• Изображение:
  • Рабочий стол: изображение с узором в виде точек 1
  • Планшет и телефон: изображение с рисунком в виде точек 2

Добавить новую строку

Структура столбца

Теперь добавьте новую строку с двумя столбцами.

Размеры

Затем отрегулируйте размер ряда.

• Пользовательская ширина желоба: 2
• Ширина: 80%
• Максимальная ширина: 100%

Столбец 2 Настройки

Граница

В настройках столбцов добавьте верхнюю границу ко второму столбцу.

• Стиль: только топ
• Ширина: 3 пикселя
• Цвет: черный #ffffff

Добавить текстовый модуль в столбец 1

Содержание

Добавьте первый текстовый модуль в столбец 1 с некоторым содержимым H3 по вашему выбору.

• Текст: абзац

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

Затем на вкладке «Дизайн» измените стиль текста заголовка.

• Уровень заголовка: H3
• Шрифт: GFS Didot
• Цвет: черный # 000000
• Размер:
  • Рабочий стол: 5vw
  • Таблетка: 9vw
  • Телефон: 13vw

Интервал

Также отрегулируйте интервал.

• Нижняя обивка
  • Рабочий стол: 3vw
  • Планшет и телефон: 7vw

Добавить модуль отзывов в столбец 1

Содержание

Теперь добавьте модуль отзывов в столбец 1 с некоторым содержанием по вашему выбору. Также загрузите изображение.

• Автор: Лояльный читатель
• Должность: Сотрудник по контент-маркетингу
• Компания: Tiger Media Company
• Тело: текст абзаца
• Изображение: портретное фото

Фон

Убедитесь, что фон прозрачный

• Цвет фона: прозрачный

Элементы

На вкладке элементов выберите отображение значка цитаты.

• Показать значок цитаты: Да

Значок цитаты

Затем измените стиль значка цитаты следующим образом.

• Цвет: черный # 000000
• Фон: белый #ffffff
• Размер шрифта значка:
  • Рабочий стол: 2vw
  • Таблетка: 5vw
  • Телефон: 9vw

Изображение

Затем измените настройки изображения.

• Ширина и высота:
  • Рабочий стол: 110 пикселей
  • Планшет и телефон: 90 пикселей
• Закругленные углы: 90 пикселей
• Цвет границы: прозрачный

Текст

Также измените выравнивание текста.

• Выравнивание: по центру

Основной текст

Затем стилизуйте основной текст.

• Шрифт: Verdana
• Черный цвет
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2vw
  • Телефон: 3vw

Текст автора

Продолжайте стилизовать авторский текст.

• Шрифт: GFS Didot
• Вес: жирный
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 1.2vw
  • Таблетка: 2,5 ВВт
  • Телефон: 4vw
• Расстояние между буквами: 1 пиксель

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

Затем текст позиции.

• Шрифт: GFS Didot
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 0.9vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Высота линии: 2em

Текст компании

А также фирменный текст.

• Шрифт: GFS Didot
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2vw
  • Телефон: 3vw
• Высота линии: 2em

Размеры

Продолжайте регулировать размер модуля.

• Ширина:
  • Рабочий стол: 60%
  • Таблетка: 65%
  • Телефон: 75%
• Выравнивание модуля: по центру

Интервал

Также отрегулируйте интервал.

• Верхняя обивка:
  • Рабочий стол: 1.5vw
  • Таблетка: 5vw
  • Телефон: 6vw

Граница

Наконец, добавьте к модулю верхнюю границу.

• Стили границ: только верх
• Ширина: 2 пикселя
• Цвет: черный #ffffff

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

Элементы

Переходя к столбцу 2, добавьте модуль комментариев. Измените настройки элементов следующим образом.

• Показать Аватар Аватар: Нет
• Показать кнопку ответа: Да
• Показать количество комментариев: нет

Поля

Перейдите на вкладку дизайна модуля и измените настройки полей.

• Цвет текста: черный #oooooo
• Цвет фона: бледно-серый # f7f7f7
• Цвет текста фокуса: черный #oooooo
• Цвет фона фокуса: бледно-серый # f7f7f7
• Шрифт: GFS Didot
• Размер текста:
  • Рабочий стол: 0.9vw
  • Таблетка: 1.5vw
  • Телефон: 2.5vw
• Расстояние между буквами: 1 пиксель

Текст заголовка формы

Затем измените настройки текста заголовка формы.

• Шрифт: GFS Didot
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 0.9vw
  • Таблетка: 2,5 ВВт
  • Шрифт: 3.5vw

Мета-текст

Продолжайте стилизовать метатекст.

• Шрифт: GFS Didot
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 1.3vw
  • Таблетка: 3vw
  • Телефон: 4vw

Текст комментария

Также текст комментария.

• Шрифт: Verdana
• Цвет: черный #ffffff
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 1.7vw
  • Телефон: 2.7vw
• Расстояние между буквами: 1 пиксель
• Высота линии: 1,8 м

Кнопка

Двигаясь дальше, стилизуйте кнопки.

• Размер текста:
  • Рабочий стол: 0.9vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Цвет текста: белый # 000000
• Фон: черный #ffffff
• Расстояние между буквами: 1 пиксель
• Шрифт: GFS Didot

Размеры

Затем настройте параметры размера модуля.

• Ширина: 90%
• Выравнивание модуля: по центру

Интервал

Наконец, интервал тоже.

• Верхняя обивка:
  • Рабочий стол: 4vw
  • Планшет и телефон: 8vw
• Левый и правый отступ: 3vw

Давайте воссоздадим дизайн модуля комментариев №2

Создать дизайн фона

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

1. Создайте холст шириной 1800 пикселей и высотой около 1800 пикселей.
2. Добавьте два круга, один больше другого.
3. Раскрасьте круги и добавьте прозрачности.
4. Поместите два круга в левом верхнем углу холста, немного перекрывая друг друга.
5. Сгруппируйте круги как один объект и продублируйте их.
6. Переверните круги и разместите их по диагонали вниз и вправо от первых двух.
7. Обязательно оставьте пространство вверху и внизу. Когда комментариев много, изображение будет повторяться и мозаично расположиться по вертикали.

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

Откройте конструктор тем и добавьте новый шаблон

Пришло время открыть конструктор тем. Добавьте новый шаблон.

Выберите шаблон для всех сообщений

Примените шаблон ко всем сообщениям.

Добавить собственное тело и построить с нуля

И начните создавать собственное тело шаблона.

Добавить новый раздел

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

Фон

• Фон: Градиент
• Цвет градиента 1: прозрачный белый rgba (255,255,255,0,55)
• Цвет градиента 2: прозрачный белый rgba (255,255,255,0,55)
• Изображение: Фон кругов

Интервал

Кроме того, перед добавлением строки отрегулируйте интервал между секциями.

• Отступ сверху и снизу: 200 пикселей

Добавить новую строку

Структура столбца

Теперь добавьте строку с тремя столбцами.

Размеры

Перед добавлением модулей отрегулируйте размер строки.

• Пользовательская ширина желоба: 2
• Ширина: 80%
• Максимальная ширина: 100%

Столбец 2 Настройки

Фон

Теперь стилизуйте второй столбец, добавив синий фон.

• Цвет фона: Синий # 51a2ff

Граница

Продолжайте округлять границы.

• Закругленные углы: 1vw все четыре угла

Коробка Тень

Наконец, добавьте тень коробки.

• Тень: Третий вариант
• Сила размытия: 80 пикселей
• Цвет: rgba (0,0,0,0.13)

Добавить модуль Person в столбец 1

Содержание

Пора добавить модули. Начните с персонального модуля в столбце 1 и добавьте контент.

• Имя: Дженни МакАби
• Должность: постоянный участник
• Тело: текст абзаца
• Изображение: портретное фото

Фон

Добавьте к модулю белый фон.

• Цвет фона: белый # 000000

Изображение

На вкладке «Дизайн» задайте стиль границы изображения следующим образом.

• Закругленные углы: 0,5vw вверху слева и вверху справа
• Стили границы: нижняя граница
  • Ширина: 5 пикселей
  • Цвет: синий # 51a2ff

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

Продолжайте стилизовать текст заголовка.

• Уровень заголовка: H4
• Шрифт: Alegreya Sans SC
• Стиль: TT
• Цвет: # 021859
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 3vw
  • Телефон: 5vw
• Расстояние между буквами: 1 пиксель
• Высота линии: 1,6 мм

Основной текст

Затем также основной текст.

• Шрифт: Lato
• Цвет: Синий # 1a1f73
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2vw
  • Телефон: 3vw
• Высота линии: 2em

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

Продолжайте с позиции текста.

• Шрифт: Lato
• Стиль: Курсив
• Цвет: # 021859
• Размер:
  • Рабочий стол: 0.8vw
  • Таблетка: 3vw
  • Телефон: 3.5vw

Размеры

Затем отрегулируйте размер.

• Ширина:
  • Рабочий стол: 100%
  • Таблетка: 50%
  • Телефон: 70%
• Выравнивание модуля: по центру

Интервал

Также интервал.

• Верхняя и нижняя обивка: 4vw

Граница

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

• Закругленные углы: o.5vw на всех четырех углах
• Стили границ: 24 пикселя со всех четырех сторон.
  • Цвет: белый #ffffff

Коробка Тень

Наконец, добавьте тень блока.

• Тень: Третий вариант
• Сила размытия: 80 пикселей
• Цвет: rgba (0,0,0,0.13)

Добавить модуль отслеживания социальных сетей в столбец 1

Сети

Под модулем человека добавьте модуль подписки в социальных сетях с тремя социальными сетями.

• Facebook
• Linkedin
• Твиттер

Настройки сети

Примените прозрачный цвет фона к каждой социальной сети. Делать это нужно по одному.

• Фон: Прозрачный

Выравнивание

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

• Выравнивание модуля: по центру

Значок

Наконец, раскрасьте значки в синий цвет.

• Цвет: синий # 51a2ff
• Размер:
  • Рабочий стол: 1vw
  • Планшет и телефон: 4vw

Добавить текстовый модуль в столбец 2

Содержание

Перейдите к столбцу 2. Добавьте текстовый модуль с любым содержимым h3 по вашему выбору.

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

Фон

Добавьте белый фон.

• Цвет фона: белый #ffffff

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

Затем перейдите на вкладку «Дизайн» и задайте стиль для текста заголовка.

• Уровень заголовка: H3
• Шрифт: Alegreya Sans SC
• Вес: жирный
• Стиль шрифта: TT
• Цвет: Синий # 021859
• Размер:
  • Рабочий стол: 2vw
  • Планшет и телефон: 5,5 Вт

Интервал

Наконец, отрегулируйте интервал.

• Верхняя обивка:
  • Рабочий стол: 3vw
  • Таблетка: 2vw
  • Телефон: 6vw
• Нижняя обивка
  • Настольный компьютер и планшет: 3vw
• Отступ слева и справа:
  • Настольный компьютер и планшет: 1vw

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

Элементы

Теперь добавьте модуль комментариев в столбец 2. Включите все элементы.

• Показать аватар автора: Да
• Показать кнопку ответа: Да
• Показать количество комментариев: Да

Фон

Добавьте белый фон в модуль комментариев.

• Цвет фона: белый #ffffff

Поля

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

• Цвет фона: белый #ffffff
• Цвет текста: синий # 1a1f73
• Цвет фона фокуса: белый #ffffff
• Цвет текста фокуса: синий # 1a1f73
• Шрифт: Alegreya Sans SC
• Стиль: TT
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 3vw
  • Телефон: 4vw
• Закругленные углы: 5 пикселей по всем углам.

Изображение

Измените также настройки изображения.

• Закругленные углы: 5 пикселей
• Стиль границы: со всех сторон
• Ширина: 3 пикселя
• Цвет: Синий # 1a1f73

Текст счетчика комментариев

Затем текст количества комментариев.

• Уровень заголовка: H3
• Шрифт: Alegreya Sans SC
• Стиль шрифта: TT
• Цвет: Синий # 021859
• Размер:
  • Рабочий стол: 1.3vw
  • Таблетка: 3vw
  • Телефон: 5vw
• Высота линии: 2 см

Текст заголовка формы

Кроме того, стилизуйте текст заголовка формы.

• Уровень заголовка: H3
• Шрифт: Alegreya Sans SC
• Стиль шрифта: TT
• Цвет: Синий # 021859
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 3vw
  • Телефон: 5vw
• Высота линии: 2 см

Мета-текст

Перейдите к метатексту и стилю следующим образом.

• Шрифт: Lato
• Цвет: # 021859
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 2.7vw
  • Телефон: 3.5vw

Текст комментария

Затем текст комментария.

• Шрифт: Lato
• Цвет: # 021859
• Размер:
  • Рабочий стол: 0.9vw
  • Таблетка: 1.8vw
  • Телефон: 2.5vw

Кнопка

Не забудьте также стилизовать кнопки.

• Размер текста:
  • Рабочий стол: 0.9vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Цвет текста: белый #ffffff
• Радиус границы: 5 пикселей
• Шрифт: Lato

Интервал

Также интервал в модуле комментариев.

• Верхнее поле:
  • Рабочий стол: -1vw
  • Планшет и телефон: -3,3 ВВт
• Верхняя обивка:
  • Настольный компьютер и планшет: 3vw
  • Телефон: 4vw
• Нижняя обивка:
  • Рабочий стол: 3vw
  • Телефон и планшет: 0vw
• Отступ слева и справа:
  • Рабочий стол: 2vw
  • Таблетка: 4vw
  • Телефон: 7vw

Граница

Наконец, добавьте закругленные углы к модулю комментариев.

• Стили границ: 2 пикселя со всех четырех сторон.
• Цвет: Синий # 1a1f73

Добавить модуль подписки по электронной почте в столбец 3

Содержание

Перейдите к столбцу 3 и модулю подписки по электронной почте. Дайте модулю название.

• Текст: Получайте регулярные обновления
• Тело: текст абзаца

Адрес электронной почты

Настройте провайдера электронной почты на вкладке учетной записи электронной почты. Выберите список и добавьте свой ключ API.

• Провайдер электронной почты
  • Список
  • Ключ API

Поля

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

• Использовать одно поле имени: Да

Фон

Добавьте к модулю белый фон.

• Цвет фона: белый

Макет

Перейдите к дизайну ta и измените настройки макета следующим образом.

• Макет: тело слева, форма справа
• Полная ширина имени: Да
• Полная ширина имени: Да
• Полная ширина фамилии: Да
• Полная ширина электронной почты: Да

Поля

Затем задайте стиль для параметров полей.

• Цвет текста: синий # 1a1f73
• Цвет фона: белый #ffff
• Цвет текста фокуса: синий # 1a1f73
• Цвет фона фокуса: белый #ffff
• Шрифт: Lato
• Размер текста:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2.2vw
  • Телефон: 3.2vw
• Расстояние между буквами: 1 пиксель
• Закругленные углы: 0,2 Вт по всем углам
• Стили границ: все четыре стороны
  • Ширина: 2 пикселя
  • Цвет: Синий # 1a1f73

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

За ним следует текст заголовка.

• Уровень заголовка: H4
• Шрифт: Alegreya Sans SC
• Вес: средний
• Стиль шрифта: TT
• Цвет: Синий # 1a1f73
• Размер:
  • Рабочий стол: 1vw
  • Таблетка: 4vw
  • Телефон: 5vw
• Расстояние между буквами: 1 пиксель

Основной текст

Также основной текст.

• Шрифт: Lato
• Цвет: Синий # 1a1f73
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2.3vw
  • Телефон: 3vw

Текст сообщения с результатами

Не забудьте текст сообщения с результатом.

• Шрифт: Lato
• Цвет: Синий # 1a1f73
• Размер:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2.3vw
  • Телефон: 3vw

Кнопка

Кроме того, стилизуйте кнопку.

• Размер текста:
  • Рабочий стол: 0,7 МВт
  • Таблетка: 2.3vw
  • Телефон: 3vw
• Цвет текста: белый #ffffff
• Цвет фона: Синий # 51a2ff
• Шрифт: Lato

Интервал

Отрегулируйте интервал.

• Верхняя и нижняя обивка: 4vw

Граница

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

• Закругленные углы: o.5vw на всех четырех углах

Коробка Тень

Наконец, добавьте тень блока.

• Тень: Третий вариант
• Сила размытия: 80 пикселей
• Цвет: rgba (0,0,0,0.13)

Предварительный просмотр

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

Рабочий стол

Планшет

Телефон

Рабочий стол

Планшет

Мобильный

Это обертка модуля комментариев!

Вот и все! Вы только что добавили настраиваемый раздел комментариев в свой шаблон сообщения в блоге. Мы надеемся, что эти дизайны вдохновят вас на создание создателей тем Divi. Вы смогли загрузить файлы JSON обоих дизайнов в начале этого урока. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже!