Как создать динамические модули отзывов с помощью Divi и ACF

Опубликовано: 2022-04-17

Divi хорошо работает с динамическим контентом. Динамический контент можно использовать для отображения текста, заголовков и многого другого. Его можно даже использовать в модуле отзывов Divi, объединив его с плагином Advanced Custom Fields. В этом посте мы увидим, как создавать динамические модули отзывов с помощью Divi и ACF. Divi и ACF очень хорошо работают вместе, и этот пост поможет вам понять, как!

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

Расширенная настройка пользовательских полей

Во-первых, нам нужно установить бесплатную версию плагина Advanced Custom Fields.

Установить расширенные настраиваемые поля

Чтобы установить его в WordPress, перейдите в « Плагины » > « Добавить новый » на панели управления WordPress. Найдите дополнительные настраиваемые поля и нажмите « Установить сейчас» .

  1. Плагины
  2. Добавить новое
  3. Поиск
  4. Установить сейчас

Установить расширенные настраиваемые поля

После завершения установки нажмите « Активировать ».

  1. Активировать

Установить расширенные настраиваемые поля

Теперь мы готовы настроить настраиваемые поля для нашего отзыва Divi.

Создать новую группу полей

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

Чтобы создать группу полей, перейдите в « Пользовательские поля» > « Добавить новое » на панели управления WordPress.

  1. Настраиваемые поля
  2. Добавить новое

Создать новую группу полей

Создайте группу полей для отзыва 1

Сначала добавьте заголовок и нажмите « Добавить поле ».

  1. Добавить заголовок
  2. Нажмите Добавить поле

Создайте группу полей для отзыва

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

Отзыв 1 Описание

Введите метку поля и имя поля . Щелкните раскрывающийся список « Тип поля», чтобы просмотреть параметры. В этом поле используется другой тип поля, чем в трех других полях.

  • Метка поля: Отзыв 1 Описание
  • Имя поля: Отзыв 1 Описание

Создайте группу полей для отзыва

Выберите Текстовая область из списка.

  • Тип поля: текстовая область

Создайте группу полей для отзыва

Отзыв 1 Имя

Затем прокрутите вниз и нажмите «Добавить поле ».

Создайте группу полей для отзыва

Затем введите Testimonial 1 Name в поля Name и Field Label . Оставьте тип поля по умолчанию (текст).

  • Имя поля: Отзыв 1 Имя
  • Метка поля: Отзыв 1 Имя

Создайте группу полей для отзыва

Отзыв 1 Должность

Затем нажмите « Добавить поле » и введите Testimonial 1 Job Position для имени поля и метки поля .

  • Имя поля: Отзыв 1 Должность
  • Метка поля: Отзыв 1 Должность

Создайте группу полей для отзыва

Отзыв 1 Компания

Затем нажмите « Добавить поле » и введите Testimonial 1 Company в поле «Имя поля» и « Ярлык поля ».

  • Имя поля: Отзыв 1 Компания
  • Метка поля: Отзыв 1 Компания

Создайте группу полей для отзыва

Место нахождения

Далее мы установим правила расположения . Мы выберем страницу или страницы, на которых мы хотим использовать отзыв. У него есть правило, что Тип сообщения равен Странице по умолчанию. Мы сохраним это правило и добавим еще одно. Щелкните Добавить группу правил .

Место нахождения

Выберите раскрывающийся список « Тип публикации » для нового правила и выберите «Страница». Выберите раскрывающийся список Опубликовать для нового правила и выберите страницу, которую хотите использовать. Если вы хотите использовать несколько страниц, добавьте новое правило для каждой страницы.

  • Первое поле: Страница
  • Второе поле: название вашей страницы

Место нахождения

Опубликуйте новую группу полей

Наконец, нажмите кнопку « Опубликовать » в правом верхнем углу редактора, чтобы опубликовать новую группу полей.

Опубликуйте новую группу полей

После публикации группы полей вы увидите список полей и правил.

Опубликуйте новую группу полей

Клонировать группу полей отзыва

Далее мы клонируем группу полей отзывов. Это позволит нам создать еще один отзыв. Нам нужно будет повторить это для каждого отзыва, который мы хотим создать. На панели инструментов WordPress перейдите в « Пользовательское поле » > « Группы полей ». Наведите указатель мыши на группу полей, которую хотите клонировать, и нажмите Дублировать .

  1. Настраиваемые поля
  2. Группы полей
  3. Дублировать

Клонировать группу полей отзыва

Затем нажмите « Изменить », чтобы открыть новую группу полей и изменить имена группы и каждого поля внутри группы.

Клонировать группу полей отзыва

Измените заголовок, выберите каждое поле и измените 1 на 2. Нажмите « Обновить» , когда будете готовы.

Клонировать группу полей отзыва

Затем выберите страницу, на которой вы хотите разместить этот отзыв.

Клонировать группу полей отзыва

Теперь у вас есть группа полей для вашего второго отзыва.

Клонировать группу полей отзыва

Создайте отзыв

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

Создайте отзыв

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

Создайте отзыв

Создайте модуль отзывов Dynamic Divi

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

Создайте модуль отзывов Dynamic Divi

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

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

Добавьте новый обычный раздел под вторым разделом макета.

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

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

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

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

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

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

Создайте динамический отзыв

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

Создайте динамический отзыв

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

Сначала наведите указатель мыши на поле «Автор » и щелкните значок динамического содержимого .

Создайте динамический отзыв

Вы увидите параметры ACF в нижней части списка. Это метки, которые мы дали полям при создании группы полей. Выберите Отзыв 1 Имя .

Создайте динамический отзыв

Если вам нужен текст до или после имени, добавьте его в поля «До» или «После». Вы также можете добавить HTML, если хотите включить его. Нажмите зеленую галочку , когда закончите.

Создайте динамический отзыв

В поле «Автор» теперь отображается имя динамического содержимого. Текст, который вы ввели в поле, теперь отображается как имя автора.

Создайте динамический отзыв

Динамическое название должности

Затем наведите указатель мыши на поле Должность и щелкните значок динамического содержимого.

Создайте динамический отзыв

Выберите Отзыв 1 Должность из списка.

Создайте динамический отзыв

Добавьте в поля любой текст «До» или «После» и выберите зеленую галочку.

Создайте динамический отзыв

Динамическое название компании

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

Создайте динамический отзыв

Выберите Testimonial 1 Company из списка.

Создайте динамический отзыв

Добавьте текст «До» и «После», если хотите, и щелкните зеленую галочку.

Создайте динамический отзыв

Динамическое описание

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

Создайте динамический отзыв

Выберите « Описание отзыва 1 » из списка.

Создайте динамический отзыв

Затем добавьте текст «До» и «После», если хотите, и щелкните зеленую галочку. Выйдите из модуля и сохраните свою страницу.

Создайте динамический отзыв

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

Создайте динамический отзыв

Редактирование содержимого динамического отзыва

Любое из полей отзыва можно обновить, не открывая конструктор Divi. Чтобы отредактировать динамическое содержимое, просто перейдите в редактор страниц и измените содержимое в полях внизу страницы. В этом примере я добавляю свою фамилию в поле Testimonial 1 Name.

Редактирование содержимого динамического отзыва

Имя автоматически обновляется в модуле.

Редактирование содержимого динамического отзыва

Стиль модуля динамических отзывов

Далее давайте стилизуем модуль отзывов в соответствии с шаблоном страницы.

Изображение содержимого

На вкладке «Контент» прокрутите вниз до « Изображение » и добавьте изображение человека из своей медиатеки.

  • Изображение: фото человека

Стиль модуля динамических отзывов

Иконка Цитата

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

  • Цвет: #000000

Стиль модуля динамических отзывов

Изображение

Затем прокрутите вниз до изображения . Установите Ширину и Высоту на 150 пикселей. Измените Закругленные углы на 0px.

  • Ширина: 150 пикселей
  • Высота: 150 пикселей
  • Закругленные углы: 0px

Стиль модуля динамических отзывов

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

Прокрутите вниз до основного текста . Выберите Монтсеррат в качестве шрифта. Измените Цвет на черный.

  • Шрифт: Монтсеррат
  • Цвет: #000000

Стиль модуля динамических отзывов

Установите Размер рабочего стола на 16 пикселей, Размер телефона на 14 пикселей и Высоту линии на 1,8 em.

  • Размер: 16 пикселей, 14 пикселей
  • Высота строки: 1,8 см

Стиль модуля динамических отзывов

Текст автора

Прокрутите вниз до текста автора . Измените шрифт на Montserrat и измените цвет на черный. Установите Размер рабочего стола на 20 пикселей, Размер планшета на 18 пикселей и Размер телефона на 16 пикселей.

  • Шрифт: Монтсеррат
  • Цвет: #000000
  • Размер: 20 пикселей, 18 пикселей, 16 пикселей

Стиль модуля динамических отзывов

Текст позиции

Затем прокрутите вниз до пункта « Позиция текста » и измените шрифт на Montserrat.

  • Шрифт: Монтсеррат

Стиль модуля динамических отзывов

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

Наконец, прокрутите вниз до текста компании и установите шрифт Montserrat. Закройте модуль и сохраните свою страницу.

  • Шрифт: Монтсеррат

Стиль модуля динамических отзывов

Результат динамического модуля отзывов

Вот законченный вид динамического модуля отзывов Divi.

Результат динамического модуля отзывов

Вот как это выглядит в макете страницы.

Результат динамического модуля отзывов

Завершающие мысли

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

Ждем вашего ответа. Используете ли вы динамический контент отзывов с Divi и ACF? Дайте нам знать об этом в комментариях.