Единственное, что посетителей всегда ищет Веб-сайт, это показания. Они вызывают доверие и влияют на процесс принятия решений потенциальными клиентами при посещении вашего сайта. Веб-сайт.
Наряду с тем, что у вас есть убедительные отзывы, которыми вы можете поделиться, их визуальная привлекательность также играет важную роль. В этом уроке мы покажем вам 3 фантастических способа настроить модуль отзывов Divi, используя только встроенные параметры.
обследование
Прежде чем мы углубимся в руководство, давайте посмотрим на конечный результат на экранах разных размеров.
офис
Мобильный телефон
Воссоздать пример №1
Добавить новый раздел
Начнем с первого примера! Создайте новую страницу и добавьте обычный раздел.
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя больше модулей, откройте параметры линии и внесите некоторые изменения в параметры размеров.
- Сделать эту строку полной шириной: Да
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
Добавьте модуль изображения в столбец 1
Загрузить изображение
Пора начинать добавлять модули! Первый мод, который нам понадобится, - это мод Image в столбце 1. Загрузите квадратное изображение по вашему выбору.
фильтры
Затем перейдите в настройки фильтра и поиграйте с различными эффектами.
- Насыщенность: 40%
- Контрастность: 126%
Добавить модуль кнопки в столбец 1
Добавить копию
Второй и последний модуль, который нам понадобится в столбце 1, - это кнопочный модуль. Добавьте копию по выбору.
Настройки кнопок
Затем перейдите к настройкам кнопки и измените внешний вид кнопки.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 14px
- Цвет 1: # 5400ff
- Цвет 2: # 00fff6
- Направление градиента: 100deg
- Ширина границы кнопки: 0px
- Вес шрифта: Ultra Bold
- Стиль шрифта: верхний регистр
расстояние
Также добавьте собственные значения интервала.
- Верхняя обивка: 10px
- Нижняя обивка: 10px
- Левый отступ: 30px
- Обивка справа: 30px
Shadow box
И закончите с тонким оттенком коробки.
- Box Shadow Blur Force: 80px
- Цвет тени: rgba (0,0,0,0,3)
Добавьте рекомендательный модуль в столбец 2
Добавить контент
Во втором столбце нам понадобится единственный модуль — модуль отзывов. Добавь немного содержание в различные области и области содержание.
Цвет фона
Затем добавьте немного прозрачного фона.
- Цвет фона: rgba (255,255,255,0.96)
Настройки значка отзыва
Также измените настройки для значка отзыва.
- Цвет значка отзыва: # 0c0c0c
- Цвет фона значка отзыва: rgba (245,245,245,0)
Настройки основного текста
Затем измените настройки основного текста.
- Body Font: Вердана
- Рост тела: 1.7em
расстояние
Продолжите, добавив различные значения настраиваемых полей и отступов в настройках интервалов.
- Верхнее поле: 15vw (рабочий стол и планшет), 0vw (телефон)
- Нижнее поле: 50px (планшет и телефон)
- Левое поле: -10vw (рабочий стол и планшет), 0vw (телефон)
- Правое поле: 5vw
- Верхняя обивка: 70px
- Нижняя обивка: 70px
- Левый отступ: 50px
- Обивка справа: 50px
Граница
Также добавьте левую границу.
- Ширина левой границы: 7px
- Цвет левой границы: # 5400ff
Shadow box
Наконец, добавьте тонкую тень для формы модуля показаний.
- Box Shadow Blur Force: 80px
- Сила распространения тени коробки: -10 пикселей
- Цвет тени: rgba (0,0,0,0,49)
Клонируйте оба модуля и поместите дубликаты в столбцы 3 и 4.
Закончив редактирование модулей в столбцах 1 и 2, вы можете их клонировать и поместить дубликаты в два оставшихся столбца.
Изменить изображение
Не забудьте изменить изображение вашего второго отзыва.
Изменить градиентный фон
Также измените градиентный фон кнопки.
- Цвет 1: # ff001d
- Цвет 2: # 3700ff
- Направление градиента: 100deg
Изменить цвет границы показаний
И связать цвет границы с градиентным фоном новой кнопки.
- Цвет левой границы: # ff001d
Воссоздать пример №2
Добавить новый раздел
Перейдем ко второму примеру! Добавьте на свою страницу новый регулярный раздел.
Добавить новую строку
Структура столбца
Не внося никаких изменений в раздел, добавьте новую строку, используя следующую структуру столбцов:
калибровка
Продолжите, открыв параметры линии и изменив параметры размеров.
- Сделать эту строку полной шириной: Да
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
расстояние
Затем добавьте пользовательские значения заполнения в строку и столбцы.
- Отступ слева: 200px (рабочий стол), 30px (планшет), 25px (телефон)
- Обивка справа: 200px (рабочий стол), 30px (планшет), 25px (телефон)
- Колонка 1 Обивка слева: 5px (рабочий стол), 0px (планшет и телефон)
- Столбец 1 Обивка справа: 2.5px (рабочий стол), 0px (планшет и телефон)
- Колонка 2 Обивка слева: 2.5px (рабочий стол), 0px (планшет и телефон)
- Столбец 2 Обивка справа: 2.5px (рабочий стол), 0px (планшет и телефон)
- Колонка 3 Обивка слева: 2.5px (рабочий стол), 0px (планшет и телефон)
- Столбец 3 Обивка справа: 5px (рабочий стол), 0px (планшет и телефон)
Добавьте видео модуль в столбец 1
Ссылка на видео
Первый модуль, который нам понадобится в столбце 1, - это видеомодуль. Свяжите это видео со своим видео с отзывами.
Наложение изображения
Также добавьте наложение изображения.
Добавьте рекомендательный модуль в столбец 1
Добавить контент
Второй и последний модуль, необходимый в столбце 1, - это модуль отзывов. Начните с добавления деталей отзыва.
Отключить значок отзыва
Затем отключите значок отзыва в настройках элемента.
- Показать значок характеристики: Нет
Цвет фона
Затем добавьте белый фон.
- Цвет фона: #ffffff
Настройки основного текста
Также измените настройки основного текста.
- Основной текст: # 000000
- Интервал между буквами тела: -0.5px
- Рост тела: 1.7em
расстояние
И добавьте настраиваемые значения полей и отступов в настройках интервала.
- Нижнее поле: 30px (планшет и телефон)
- Обивка: 50px
- Нижняя обивка: 50px
- Левый отступ: 80px
- Обивка справа: 80px
Граница
Мы также даем модулю закругленные углы слева и справа внизу на 30 пикселей.
Shadow box
Наконец, чтобы придать глубину, мы даем модулю Testimonial тонкую тень от рамки.
- Box Shadow Blur Force: 80px
- Сила распространения тени коробки: -10 пикселей
- Цвет тени: rgba (0,0,0,0,3)
Клонируйте модули три раза и поместите дубликаты в оставшиеся столбцы.
Закончив редактирование двух модулей в столбце 1, дважды клонируйте их и поместите дубликаты в два оставшихся столбца.
Редактировать ссылки на видео, контент и наложения изображений
Не забудьте изменить ссылку на видео, содержание и наложение изображений ваших новых отзывов.
Воссоздать пример №3
Добавить новый раздел
Перейдем к третьему примеру! Добавьте на свою страницу новый регулярный раздел.
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
Цвет столбца 1
Затем перейдите к настройкам фона и добавьте цвет фона в первый столбец.
- Цвет фона столбца 1: # f9f9f9
Цвет столбца 2
Для второго столбца потребуется белый фон.
- Цвет фона столбца 2: #ffffff
калибровка
Затем перейдите к параметрам размеров и удалите ширину желоба.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
расстояние
Затем добавьте настраиваемые значения интервала.
- Лучший отступ: 0px
- Нижняя часть обивки: 0px
- Левый отступ: 0px
- Обивка справа: 0px
- Столбец 1 Верхний отступ: 100px
- Колонка 1 Нижняя обивка: 100px
- Столбец 1 Заполнение слева: 50px
- Столбец 1 Заполнение справа: 50px
- Столбец 2 Верхний отступ: 100px
- Нижний отступ столбца 2: 100px
- Столбец 2 Заполнение слева: 50px
- Столбец 2 Заполнение справа: 50px
Граница
И задайте каждой из границ «20 пикселей».
Shadow box
И последнее, но не менее важное: дайте вашей линии тень от рамки.
- Box Shadow Blur Force: 80px
Добавьте рекомендательный модуль в столбец 1
Добавить контент
Пора начинать добавлять модули! Первый модуль, который нам понадобится в столбце 1, - это модуль свидетельских показаний. Добавить содержание.
Загрузить изображение
Продолжите загрузку изображения в настройках изображения.
Отключить значок отзыва
Затем выключите значок отзыва.
- Показать значок характеристики: Нет
Отключить цвет фона
Также отключите цвет фона.
- Использовать цвет фона: нет
Настройки основного текста
Перейдите на вкладку Дизайн и внесите некоторые изменения в настройки основного текста.
- Полицейский корпус: Абриль Фатфейс
- Основной текст: # 000000
- Размер основного текста: 20px
Добавить текстовый модуль в столбец 1
Добавить контент
Второй модуль, который нам понадобится в столбце 1, - это текстовый модуль. Добавьте копию отзыва в область содержимого.
расстояние
Затем перейдите на вкладку «Дизайн» и добавьте настраиваемые верхнее и нижнее поля.
- Верхнее поле: 50px
- Нижнее поле: 50px
Добавьте модуль изображения в столбец 1
Скачать логотип компании
Третий и последний модуль, который нам понадобится в первом столбце, - это модуль изображения. Вы можете использовать этот модуль, чтобы добавить логотип компании, связанный с характеристикой.
Клонировать все модули и поместить дубликаты в столбец 2
Когда вы закончите редактировать все модули в столбце 1, вы можете скопировать и скопировать их. Как только вы это сделаете, поместите дубликаты во второй столбец.
Измените изображение и копию отзыва
Обязательно измените содержание показаний с картинки.
в конце концов
Это все для этого урока, я надеюсь, что он позволит вам предложить несколько вариантов
