Хотите создать раздел отзывов в виде сетки на вашей веб-странице с модулем отзывов Divi ?

Сетчатые макеты идеально подходят для содержание которые необходимо хранить вместе. Отзывы – отличный тому пример. В Divi, отзывы создаются с новым модулем для каждого отзыва. Но, к счастью, отображать их в сетке очень просто. 

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

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

обследование

Вот обзор того, что мы будем делать в этом уроке.

Макет сетки

Модуль отзывов Divi в виде сетки

Альтернативное расположение

Модуль отзывов Divi в виде сетки

Дизайн первого макета с Divi

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

Создать линию

Сначала создайте новую строку и выберите макет в 3 колонки.

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

Выберите вкладку Проект и активировать Использовать пользовательскую ширину желоба и установите его на 1.

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

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

  • Отступы (сверху и снизу): 0 пикселей

Добавьте модуль «Отзывы»

Затем добавьте модуль отзывов в левом столбце.

Добавить модуль отзывов

Настройки содержимого модуля

Затем добавьте содержание показаний. Сюда входят имя автора, должность, название компании, содержание тела и фотографию лица, дающего показания.

  • Автор: имя автора
  • Должность: Занимаемая должность в компании
  • Компания: название компании
  • Содержание тела: отзыв
  • Изображение: выбранное изображение

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

Затем выберите вкладку Проект.

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

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

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

Затем прокрутите вниз до Фото товара и измените следующие настройки:

  • Ширина границы изображения: 4 пикселя
  • Цвет границы изображения: #000645
Основной текст

Затем прокрутите вниз до Основной текст и изменить шрифт

  • Основной шрифт: Roboto Mono
АвторТекст

Затем прокрутите вниз до АвторТекст.

  • Автор шрифта: Освальд
  • Вес шрифта: полужирный
  • Стиль шрифта: ТТ
  • Цвет текста: #fd335a
Позиционировать текст

Затем прокрутите вниз до Позиционировать текст (название должности) и измените шрифт.

  • Позиционный шрифт: Roboto Mono
Текст компании

Затем прокрутите вниз до Текст компании и изменить шрифт, а также.

  • Фирменный шрифт: Roboto Mono
Граница

Наконец, прокрутите вниз до Граница и измените границу следующим образом:

  • Ширина границы: 24px
  • Цвет границы: #000645

Дублируйте модуль отзывов

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

Настройте второй модуль отзывов

Открой их настройки второго модуля Testimonial и изменить содержимое.

Фото товара

Затем выберите вкладку Desing и прокрутите до Фото товара. Измените цвет границы.

  • Цвет границы изображения: #acf8f5
Граница

Наконец, прокрутите вниз до Граница и изменить цвет.

  • Цвет границы: #acf8f5

Настройте третий модуль отзывов

Открой их настройки третьего модуля Testimonial и отредактируйте содержимое.

Фото товара

Затем перейдите на вкладку Проект, прокрутите до Фото товара и изменить цвет границы.

  • Цвет границы изображения: #fccaa0
Граница

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

  • Цвет границы: #fccaa0

Повторяющаяся строка

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

Настройте четвертый модуль отзывов

Открой их настройки второго модуля Testimonial и изменить содержимое.

Фото товара

Затем прокрутите вниз до Фото товара и измените цвет границы на #6eea9d.

  • Цвет границы изображения: #6eea9d
граница

Наконец, прокрутите вниз до Граница и измените цвет границы на #6eea9d, чтобы он соответствовал границе изображения. Закройте настройки модуля.

  • Цвет границы: #6eea9d

Настройте пятый модуль отзывов

Открой их настройки пятого модуля Testimonial и изменить его содержание.

Фото товара

Затем прокрутите вниз до Фото товара и измените цвет границы на #fff67f.

  • Цвет границы изображения: #fff67f
Граница

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

  • Цвет границы: #fff67f

Настройте шестой модуль отзывов

Наконец, откройте настройки шестого модуля Testimonial и заменить содержимое.

Фото товара

Затем прокрутите вниз до Фото товара и измените цвет границы на #593a94.

  • Цвет рамки изображения: #593a94
Граница

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

  • Цвет границы: #593a94

Результат

Вот результат, который мы имеем до сих пор.

Дизайн второго макета с Divi

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

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

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

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

Во-первых, добавить строку в 2 столбца с столбец 1/3 влево и столбец 2/3 справа

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

Затем откройте настройки линии, перейдите на вкладку Проект, прокрутите до Калибровка и выберите Использовать нестандартную ширину желоба. Измените ширину желоба на 1.

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

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

  • Отступы (сверху и снизу): 0 пикселей
Создайте альтернативные линии

то, дубликат линия.

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

Выберите параметры макет второй строки и выберите макет с помощью осталось 2/3 et 1/3 вправо.

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

Добавьте четыре модуля отзывов

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

Модуль отзывов Divi в виде сетки

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

Откройте настройки первого модуля и перейдите на вкладку Проект. Прокрутите до Калибровка и введите 100% для «Высоты». 

Повторите это для каждого модуля .

  • Высота: 100%
Модуль отзывов Divi в виде сетки

Конечные результаты

Макет сетки

Вот посмотрите на нашу сетку. Это прекрасно работает, если отзывы имеют одинаковый размер.

Модуль отзывов Divi в виде сетки

Альтернативное расположение

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

Модуль отзывов Divi в виде сетки

Скачайте DIVI прямо сейчас!!!

Заключение

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

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...