Пропустить

Создание динамической сетки преимуществ для продуктов WooCommerce

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Возможный результат

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

Возможный результат divi

1. Установите плагин ACF Plugin и группу преимуществ продукта.

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

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

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

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

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

Создать поля acf

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

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

  • «Тип сообщения» равняется «Продукту»
Добавить правила

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

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

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

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

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

  • Название услуги 1
  • Описание преимуществ 1
  • Название услуги 2
  • Описание преимуществ 2
  • Название услуги 3
  • Описание преимуществ 3
  • Название услуги 4
  • Описание преимуществ 4
Настроить поля acf

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

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

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

Создание продукта Divi

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

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

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

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

Зайдите в Divi Theme Builder и добавьте новый шаблон

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

Конструктор тем Divi

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

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

Добавить все продукты woocommerce

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

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

Строительный корпус divi

Редактировать раздел # 1

Фоновый цвет

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

  • Цвет фона: # 000000
Конфигурация фона раздела Divi

расстояние

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

  • Верхняя обивка: 10px
  • Нижняя обивка: 10px
Конфигурация расстояния между секциями Divi

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

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

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

Конфигурация компоновки линейного модуля

расстояние

Не добавляя никаких модификаций, давайте откроем настройки строк и внесем некоторые изменения в интервал.

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

расстояние

Удалите все внутренние промежутки сверху и снизу.

  • Высокая внутренняя маржа: 0px
  • Низкая внутренняя маржа: 0px
Настройки расстояния между модулями Divi Line

Добавьте модуль Woo Cart Notice в столбец

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Продукт: этот продукт
Настройки woo cart модуль уведомления о корзине divi

Цвет фона

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

  • Цвет фона: rgba (0,0,0,0)
Настройки divi для модуля Woo Cart

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

Перейдите на вкладку «Дизайн» и измените шрифт текста.

  • Шрифт текста: Карла
Настройки шрифта модуля Divi

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

Завершите настройки плагина, определив настройки стиля:

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: # 000000
  • Фон кнопки: # ffd623
  • Ширина границы кнопки: 0 пикселей
  • Кнопка с закругленными краями: 0px
Настройки цвета модуля уведомления корзины Woo
  • Шрифт кнопки: Освальд
  • Стиль шрифта кнопки: Shift
Регулировка цветового оформления модуля уведомлений Woo Cart
  • Высокая внутренняя маржа: 20px
  • Низкая внутренняя маржа: 20px
  • Левая внутренняя маржа: 50px
  • Внутренняя правая маржа: 50px
Модуль проектирования конфигурации woo cart уведомление

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

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

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

  • Цвет 1: # 000000
  • Цвет 2: #ffffff
  • Начальная позиция:
    • Рабочий стол: 30%
    • Таблетка: 57%
    • Телефон: 54%
  • Конечная позиция:
    • Рабочий стол: 30%
    • Таблетка: 57%
    • Телефон: 54%
Регулировка задней части модуля Divi Line

расстояние

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

  • Верхняя обивка: 150px
Конфигурация расстояния между модулями Divi Line

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

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

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

Конфигурация стиля линии Divi

калибровка

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

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

Расстояние

Мы также удалим верхнюю внутреннюю маржу.

  • Верхняя обивка: 0px
Конфигурация расстояния между модулями Divi

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

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

Desktop:

дисплей: гибкий; выровнять элементы: центр;

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

Дисплей: блок;
Настройки стиля модуля Divi Line

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

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

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

  • Продукт: этот продукт
Настройки модуля изображения продукта Woocommerce

Эффект анимации вертикальной прокрутки

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

  • Активировать вертикальное движение: Да
  • Начальное смещение:
    • Офис: -4
    • Планшет и телефон: 0
  • Среднее смещение: 0
  • Конечное смещение: 0
  • Эффект движения триггера: середина элемента
Настройка модуля изображения Divi

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

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

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

  • Продукт: этот продукт
сетка преимуществ продукта

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

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

  • Название шрифта: Освальд
  • Стиль шрифта заголовка: заглавные
  • Цвет текста заголовка: # ffd623
  • Размер текста заголовка: 80 пикселей
Корректировка дизайна модуля заголовка Divi

расстояние

Заполните модуль Woo title, добавив левые и правые поля.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

  • Левое поле: 5%
  • Правое поле: 5%
Настройка модуля заголовка Divi

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

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

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

  • Продукт: этот продукт
  • Тип описания: Краткое описание
Настройки модуля описания продукта

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

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

  • Шрифт текста: Карла
  • Цвет текста: #dbdbdb
  • Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
  • Высота строки текста: 1,9 em
Описание модуля настройки цвета divi

калибровка

Затем измените ширину на разных размерах экрана.

  • Ширина: 59% (рабочий стол), 82% (планшет и телефон)
Регулировка ширины сводного модуля Divi

расстояние

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

  • Верхнее поле: 50px
  • Нижнее поле: 100px
  • Левое поле: 5%
  • Правое поле: 5%
Модуль описания продукта Divi

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

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

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

  • Название: Название пособия 1
  • Кузов: Описание преимущества 1
Настройка текста модуля сводки Divi

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

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

Сводная конфигурация divi модуля изображения

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

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

  • Размещение изображения / иконки: вверху
  • Выравнивание изображения / значка: слева
Модуль настройки Divi

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

Мы изменяем настройки текста заголовка дальше.

  • Название шрифта: Освальд
  • Стиль шрифта заголовка: верхний регистр
  • Размер текста заголовка: 25 пикселей
Настроить шрифт модуля сводки divi

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

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

  • Body Шрифт: Карла
  • Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
  • Высота линии тела: 1,9 em
Настроить сводку текстового модуля div i

калибровка

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

  • Ширина изображения: 25%
  • Ширина: 49%
Настроить размер модуля сводки divi

расстояние

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

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

Основной элемент

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

Дисплей: встроенный блок;
Добавить модуль divi кода css

Клонировать итоговый модуль 3 раза

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

Название продукта раздел divi

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

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

Изображение модуля сводки Divi

Изменить динамический контент модуля Blurb

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

  • Название: Название услуги (2,3 или 4)
  • Кузов: описание достоинств (2,3 или 4)
Правила модуля сводки Divi

Добавить границы для модулей Blurb индивидуально

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

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

  • Ширина правой границы: 1px
  • Цвет правой границы: # ffd623
Модуль сводки divi конфигурации с закругленными границами

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

  • Ширина нижней границы: 1 пикс.
  • Цвет нижней границы: # 000000
Настройте нижнее поле divi
Настройки границы модуля Blurb 2

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

  • Ширина нижней границы: 1 пикс.
  • Цвет нижней границы: # 000000
Сводка по модулю границы конфигурации divi
Настройки границы модуля Blurb 3

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

  • Ширина правой границы: 1px
  • Цвет правой границы: # ffd623
сетка преимуществ продукта

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

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

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

  • Продукт: этот продукт
Добавить в настройки модуля divi карты

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

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

  • Цвет фона полей: #ffffff
  • Цвет текста поля: # 000000
Настроить цвет модуля стиля добавить в корзину divi
  • Округлые поля: 0px (все углы)
  • Ширина нижней границы полей: 1px
  • Цвет нижней границы полей: # 000000
Настроить интервал между разделами divi

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

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

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 20 пикселей
  • Цвет текста кнопки: # 000000
  • Цвет фона кнопки: # ffd623
  • Ширина границы кнопки: 0 пикселей
  • Радиус границы кнопки: 0 пикселей
Настроить дизайн кнопки divi
  • Шрифт кнопки: Освальд
  • Стиль шрифта кнопки: заглавные
Настроить кнопку divi
  • Верхняя обивка: 20px
  • Нижняя обивка: 20px
  • Левый отступ: 50px
  • Правый отступ: 50 пикселей
Настроить размер модуля divi

расстояние

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

  • Верхнее поле: 100px
  • Левое поле: 5%
Настроить интервал divi

3. Сохраните модификации генератора тем и просмотрите результат.

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

Сохранить дизайн divi
Сохранить модификации divi

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

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

Демо результат

Заключительные мысли

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация