Создание динамической таблицы преимуществ продукта для шаблона страницы вашего продукта с помощью Divi & ACF

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон страницы продукта БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Установите подключаемый модуль ACF и добавьте группу полей "Преимущества продукта".

Установите плагин Advanced Custom Fields

Чтобы отобразить различные преимущества продукта в серверной части наших продуктов, мы будем использовать бесплатный плагин Advanced Custom Fields. Перейдите в бэкэнд WordPress> Плагины> Добавить> Найдите плагин ACF> Установить> Активировать .

Перейти к настраиваемым полям и добавить новую группу полей

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

Настройки группы полей

Дайте вашей новой группе полей заголовок и позвольте ей отображаться только на страницах продуктов.

• "Тип сообщения" равен "Продукт".

Добавить первое поле

Продолжите, добавив новое поле для заголовка вашего первого преимущества продукта.

• Ярлык поля: Название преимущества 1
• Тип поля: текст

Повторите шаг для оставшихся полей

Проделайте то же самое с остальными преимуществами продукта и их описаниями. Всем этим полям необходимо присвоить тип поля «Текст».

• Название преимущества 1
• Описание преимущества 1
• Название преимущества 2
• Описание преимущества 2
• Название преимущества 3
• Описание преимущества 3
• Название преимущества 4
• Описание преимущества 4

2. Добавьте преимущества продукта к продуктам

Открыть или добавить новый продукт

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

Заполните поля преимуществ продукта

И заполните преимущества продукта.

3. Создайте шаблон страницы продукта в Divi Theme Builder.

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

Пора начать работу с Divi! Чтобы создать новый шаблон, перейдите к Divi Theme Builder и нажмите «Добавить новый шаблон».

Использовать шаблон для всех продуктов

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

Войдите в редактор шаблона тела шаблона

Затем введите тело шаблона, нажав «Добавить пользовательское тело» и выбрав «Создать пользовательское тело».

Изменить раздел № 1

Фоновый цвет

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

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

Интервал

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

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

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 90%
• Максимальная ширина: 100%

Интервал

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

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

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

Динамический контент

Единственный модуль, который нам нужен в этой строке и разделе, - это модуль уведомлений о корзине Woo. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.

• Продукт: Этот продукт

Фоновый цвет

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

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

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

Перейдите на вкладку дизайна и затем измените шрифт текста в настройках текста.

• Шрифт текста: Karla

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: # ffd623
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Освальд
• Стиль шрифта кнопок: прописные

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

Добавить раздел # 2

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

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

• Цвет 1: # 000000
• Цвет 2: #ffffff
• Стартовая позиция:
  • ПК: 30%
  • Таблетка: 57%
  • Телефон: 54%
• Конечная позиция:
  • ПК: 30%
  • Таблетка: 57%
  • Телефон: 54%

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

Главный элемент

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

Рабочий стол:

display: flex;
align-items: center;

Планшет и телефон:

display: block;

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

Динамический контент

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

• Продукт: Этот продукт

Эффект вертикальной прокрутки движения

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

• Включить вертикальное движение: Да
• Начальное смещение:
  • Рабочий стол: -4
  • Планшет и телефон: 0
• Среднее смещение: 0
• Конечное смещение: 0
• Триггер эффекта движения: середина элемента

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

Динамический контент

В столбце 2 первый модуль, который нам нужен, - это Woo Title Module. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.

• Продукт: Этот продукт

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

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

• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: прописные
• Цвет текста заголовка: # ffd623
• Размер текста заголовка: 80 пикселей

Интервал

Завершите модуль заголовка Woo, добавив левое и правое поле.

• Левая маржа: 5%
• Правая маржа: 5%

Добавить модуль описания Woo в столбец 2

Динамический контент

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

• Продукт: Этот продукт
• Тип описания: Краткое описание

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

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

• Шрифт текста: Karla
• Цвет текста: #dbdbdb
• Размер текста: 17 пикселей (компьютер и планшет), 15 пикселей (телефон)
• Высота текстовой строки: 1.9em

Размеры

Затем измените ширину для разных размеров экрана.

• Ширина: 59% (компьютер), 82% (планшет и телефон)

Интервал

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

• Верхнее поле: 50 пикселей
• Нижнее поле: 100 пикселей
• Левая маржа: 5%
• Правая маржа: 5%

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

Динамический контент

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

• Название: Название преимущества 1
• Тело: Описание преимущества 1

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

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

Настройки изображения / значка

Перейдите на вкладку дизайна модуля и измените настройки изображения / значка следующим образом:

• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: влево

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

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

• Шрифт заголовка: Oswald
• Стиль шрифта заголовка: прописные
• Размер текста заголовка: 25 пикселей

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

Наряду с настройками основного текста.

• Шрифт тела: Karla
• Размер основного текста: 17 пикселей (компьютер и планшет), 15 пикселей (телефон)
• Высота линии корпуса: 1.9em

Размеры

Затем перейдите к настройкам размеров и измените ширину. Важно использовать основную ширину менее 50%, это позволит нам показать два модуля Blurb рядом друг с другом на следующих этапах.

• Ширина изображения: 25%
• Ширина: 49%

Интервал

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

• Верхняя набивка: 8%
• Нижняя обивка: 8%
• Левое заполнение: 8% (компьютер и планшет), 2% (телефон)
• Правое заполнение: 8% (настольный компьютер и планшет) 2% (телефон)

Главный элемент

Теперь, чтобы убедиться, что два модуля Blurb отображаются рядом друг с другом, необходимо выполнить два важных шага. Первый - убедиться, что ширина модуля меньше 50% (как мы это делали на одном из предыдущих шагов). Второй использует свойство встроенного отображения. Мы добавим это свойство CSS к основному элементу модуля Blurb на расширенной вкладке.

display: inline-block;

Клонировать модуль Blurb три раза

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

Изменить изображения модуля Blurb

Измените изображение в каждом дублирующем модуле Blurb. Вы можете найти их в папке загрузки, которую вы смогли скачать в начале этого поста.

Изменение динамического содержимого модуля Blurb

Также измените динамический контент для каждого дублирующего модуля Blurb.

• Название: Название пособия (2, 3 или 4)
• Текст: описание преимущества (2, 3 или 4)

Добавление границ к модулям Blurb по отдельности

Параметры границы модуля Blurb 1

Теперь, чтобы завершить дизайн нашей сетки, мы добавим некоторые границы к модулям Blurb на отдельном уровне. Откройте первый модуль Blurb и используйте правую границу.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # ffd623

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

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 000000

Настройки границ модуля Blurb Module 2

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

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 000000

Параметры границы модуля Blurb 3

Завершите дизайн сетки, добавив правую границу к третьему модулю Blurb.

• Ширина правой границы: 1 пикс.
• Цвет правой границы: # ffd623

Добавить модуль Woo Add to Cart в столбец 2

Динамический контент

Последний модуль, который нам нужен в нашем дизайне, - это модуль Woo Add to Cart. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.

• Продукт: Этот продукт

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

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

• Цвет фона полей: #ffffff
• Цвет текста поля: # 000000

• Поля со скругленными углами: 0 пикселей (все углы)
• Ширина нижней границы поля: 1px
• Цвет нижней границы полей: # 000000

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 20 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: # ffd623
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Освальд
• Стиль шрифта кнопок: прописные

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

Интервал

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

• Верхнее поле: 100 пикселей
• Левая маржа: 5%

3. Сохранение изменений в построителе тем и предварительный просмотр результатов.

Завершив разработку шаблона страницы продукта, вы можете сохранить все изменения, сделанные в построителе тем, и просмотреть результат для своих продуктов!

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

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

Рабочий стол

Мобильный

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

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

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