5 фантастических способов стилизовать модуль отзывов Divi

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Воссоздать пример №1

Подпишитесь на наш канал Youtube

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

Начнем с первого примера! Создайте новую страницу и добавьте обычный раздел.

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

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

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и внесите некоторые изменения в настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Добавить модуль изображения в столбец 1

Загрузить изображение

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

Фильтры

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

• Насыщенность: 40%
• Контрастность: 126%

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

Добавить копию

Второй и последний модуль, который нам понадобится в столбце 1, - это кнопочный модуль. Добавьте какую-нибудь копию по выбору.

Настройки кнопок

Затем перейдите к настройкам кнопки и внесите некоторые изменения в ее внешний вид.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 14 пикселей
• Цвет 1: # 5400ff
• Цвет 2: # 00fff6
• Направление градиента: 100 градусов
• Ширина границы кнопки: 0 пикселей
• Плотность шрифта: Ультра полужирный
• Стиль шрифта: прописные

Интервал

Также добавьте несколько значений пользовательского интервала.

• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Коробка Тень

И закончите с тонкой тенью коробки.

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

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

Добавить содержимое

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

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0.96)

Настройки значка цитаты

Также измените настройки значка цитаты.

• Цвет значка цитаты: # 0c0c0c
• Цвет фона значка цитаты: rgba (245,245,245,0)

Настройки основного текста

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

• Шрифт тела: Verdana
• Высота линии корпуса: 1,7 эм

Интервал

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

• Верхняя маржа: 15vw (ПК и планшет), 0vw (телефон)
• Нижнее поле: 50 пикселей (планшет и телефон)
• Левое поле: -10vw (настольный компьютер и планшет), 0vw (телефон)
• Правое поле: 5vw
• Верхний отступ: 70 пикселей
• Нижний отступ: 70 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Граница

Также добавьте левую границу.

• Ширина левой границы: 7 пикселей
• Цвет левой границы: # 5400ff

Коробка Тень

Наконец, добавьте тонкую тень блока, чтобы сформировать модуль Testimonial.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (0,0,0,0.49)

Клонировать оба модуля и разместить дубликаты в столбцах 3 и 4

После того, как вы закончите изменять модули в столбцах 1 и 2, вы можете клонировать модули и разместить дубликаты в двух оставшихся столбцах.

Изменить изображение

Не забудьте изменить изображение вашего второго отзыва.

Изменить фон градиента кнопки

Также измените фон градиента кнопки.

• Цвет 1: # ff001d
• Цвет 2: # 3700ff
• Направление градиента: 100 градусов

Изменить цвет границы отзыва

И сопоставьте цвет границы с новым градиентным фоном кнопки.

• Цвет левой границы: # ff001d

Воссоздать пример №2

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

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

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

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

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

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Отступ слева: 200 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ справа: 200 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)
• Отступ слева для столбца 1: 5 пикселей (рабочий стол), 0 пикселей (планшет и телефон).
• Отступ справа от столбца 1: 2,5 пикс. (Рабочий стол), 0 пикс. (Планшет и телефон).
• Отступ слева для столбца 2: 2,5 пикселя (рабочий стол), 0 пиксель (планшет и телефон).
• Отступ справа в столбце 2: 2,5 пикс. (Рабочий стол), 0 пикс. (Планшет и телефон).
• Отступ слева в столбце 3: 2,5 пикселя (рабочий стол), 0 пиксель (планшет и телефон).
• Отступ справа в столбце 3: 5 пикселей (рабочий стол), 0 пикселей (планшет и телефон).

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

Ссылка на видео

Первый модуль, который нам понадобится в столбце 1, - это видеомодуль. Свяжите это видео со своим видео с отзывами.

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

Также добавьте наложение изображения.

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

Добавить содержимое

Второй и последний модуль, необходимый в столбце 1, - это модуль отзывов. Начните с добавления деталей отзыва.

Отключить значок цитаты

Затем отключите значок цитаты в настройках элементов.

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

Фоновый цвет

Затем добавьте белый фон.

• Цвет фона: #ffffff

Настройки основного текста

Измените также настройки основного текста.

• Цвет основного текста: # 000000
• Интервал между буквами основного текста: -0,5 пикселей
• Высота линии корпуса: 1,7 эм

Интервал

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

• Нижнее поле: 30 пикселей (планшет и телефон)
• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей
• Отступ слева: 80 пикселей
• Отступ справа: 80 пикселей

Граница

Мы также даем модулю нижний левый и правый закругленные углы на 30 пикселей.

Коробка Тень

И, наконец, чтобы добавить глубины, мы добавляем модулю Testimonial тонкую тень прямоугольника.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Клонировать модули трижды и размещать дубликаты в оставшихся столбцах

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

Изменить ссылки на видео, контент и наложения изображений

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

Воссоздать пример №3

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

К третьему примеру! Добавьте на свою страницу новый регулярный раздел.

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

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

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Цвет фона столбца 1

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

• Цвет фона столбца 1: # f9f9f9

Цвет фона столбца 2

Для второго столбца потребуется белый цвет фона.

• Цвет фона столбца 2: #ffffff

Размеры

Затем перейдите к настройкам размеров и удалите ширину желоба.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Отступ слева: 0 пикселей
• Правый отступ: 0 пикселей
• Отступ сверху столбца 1: 100 пикселей.
• Отступ нижнего столбца 1: 100 пикселей
• Колонка 1, отступ слева: 50 пикселей.
• Колонка 1, отступ справа: 50 пикселей.
• Верхний отступ столбца 2: 100 пикселей.
• Отступ нижнего столбца 2: 100 пикселей
• Колонка 2, отступ слева: 50 пикселей.
• Колонка 2, отступ справа: 50 пикселей.

Граница

И задайте каждой из границ «20 пикселей».

Коробка Тень

И последнее, но не менее важное: придайте строке тень прямоугольника.

• Сила размытия тени коробки: 80 пикселей

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

Добавить содержимое

Пора начинать добавлять модули! Первый модуль, который нам понадобится в столбце 1, - это модуль отзывов. Добавьте контент.

Загрузить изображение

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

Отключить значок цитаты

Затем отключите значок цитаты.

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

Отключить цвет фона

Также отключите цвет фона.

• Использовать цвет фона: нет

Настройки основного текста

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

• Шрифт: Abril Fatface
• Цвет основного текста: # 000000
• Размер основного текста: 20 пикселей

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

Добавить содержимое

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

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 50 пикселей

Добавить модуль изображения в столбец 1

Загрузить логотип компании

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

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

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

Изменить изображение и копию отзыва

Убедитесь, что вы изменили содержание отзыва вместе с изображениями.

Воссоздать пример # 4

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

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

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

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

Продолжите, добавив новую строку в свой раздел, используя следующую структуру столбцов:

Фоновое изображение столбца 1

Откройте настройки строки и добавьте фоновое изображение в первый столбец.

• Столбец 1: повторение фонового изображения: без повтора

Фоновое изображение столбца 3

Проделайте то же самое с третьим столбцом.

• Столбец 3: повторение фонового изображения: без повтора

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Затем удалите верхнее и нижнее отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

Добавить содержимое

Продолжите, добавив модуль отзывов в первый столбец. Как только вы это сделаете, добавьте детали отзыва.

Градиентный фон

Также задайте модулю градиентный фон.

• Цвет 1: # 8b32ff
• Цвет 2: # ff35ae
• Направление градиента: 120 градусов

Настройки значка цитаты

Затем внесите некоторые изменения в настройки значка.

• Цвет значка цитаты: # 000000
• Цвет фона значка цитаты: #ffffff

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

И измените цвет текста в настройках текста.

• Цвет текста: светлый

Интервал

Чтобы придать модулю квадратную форму, мы собираемся добавить несколько пользовательских отступов в настройках интервалов.

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 100 пикселей
• Отступ справа: 100 пикселей

Коробка Тень

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

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: # ff35ae

Фильтр по умолчанию

Идея этого отзыва заключается в том, что как только вы наводите на него курсор, отзыв исчезает и появляется изображение. Чтобы добиться этого эффекта, мы собираемся использовать фильтр непрозрачности в настройках фильтров. Убедитесь, что непрозрачность по умолчанию равна «100%».

• Непрозрачность: 100%

Фильтр наведения

И удалите всю непрозрачность при наведении.

• Непрозрачность: 0%

Клонировать модуль отзывов в столбец 3

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

Изменить градиентный фон

Затем измените градиентный фон дубликата.

• Цвет 1: # 32b0ff
• Цвет 2: # 89009e
• Направление градиента: 120 градусов

Clone Row

И клонируем всю строку.

Удалить фон с градиентом отзыва и изменить цвет фона

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

• Цвет фона: #ffffff

Изменить настройки текста отзыва

После того, как вы удалили градиентный фон, вы можете изменить цвет текста в настройках текста.

• Цвет текста: темный

Воссоздать пример # 5

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

Переходим к следующему и последнему примеру этого урока! Добавьте на свою страницу новый регулярный раздел.

Фоновый цвет

Измените цвет фона раздела.

• Цвет фона: #ededed

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

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

Затем добавьте новую строку, используя следующую структуру столбцов:

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2

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

Добавить содержимое

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

Фоновый цвет

И измените цвет фона модуля.

• Цвет фона: #ffffff

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

Затем перейдите на вкладку дизайна и измените ориентацию текста в настройках текста.

• Ориентация текста: по центру

Интервал

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

• Левое поле: 50 пикселей (компьютер и планшет), 20 пикселей (телефон)
• Правое поле: 50 пикселей (компьютер и планшет), 20 пикселей (телефон)

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

Добавить содержимое

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

Загрузить изображение

Загрузите изображение также в настройках изображения.

Градиентный фон

И добавляем градиентный фон.

• Цвет 1: # 5b32ff
• Цвет 2: # 32e5f2
• Направление градиента: 100 градусов

Настройки значка цитаты

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

• Цвет значка цитаты: # 000000
• Цвет фона значка цитаты: #ffffff

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

Также измените ориентацию текста в настройках текста.

• Ориентация текста: по центру
• Цвет текста: светлый

Настройки основного текста

Затем поиграйте с настройками основного текста.

• Плотность основного шрифта: Ультра полужирный
• Стиль основного шрифта: прописные
• Размер основного текста: 15 пикселей
• Интервал между буквами основного текста: -0,5 пикселей
• Высота линии корпуса: 2,1 м

Интервал

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

• Верхнее поле: -25 пикселей

Коробка Тень

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

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

Клонировать оба модуля дважды и поместить дубликаты в оставшиеся столбцы

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

Изменение содержания отзывов и изображений

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

Изменить фон с градиентом отзывов

Наряду с градиентным фоном.

• Цвет 1: # a632ff
• Цвет 2: # f7a131

• Цвет 1: # 3281ff
• Цвет 2: # 2cf483

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

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

Рабочий стол

Мобильный

Последние мысли

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