То, как вы оформляете страницу продукта, сразу же влияет на поведение ваших клиентов. посетителей. Хорошо продуманный и персонализированный дизайн страницы продукта может позволить посетителей чтобы легче решить, хотят ли они купить ваш продукт. Если вы ищете способ сделать страницу продукта более привлекательной, вам, вероятно, понравится это руководство.
Мы покажем вам, как включить динамическую сетку преимуществ продукта в ваш дизайн с помощью Divi и плагина Advanced Custom Fields. Начнем с создания группы полей для преимуществ. Затем мы заполним настраиваемые поля на странице нашего продукта и добавим содержание динамический в нашем шаблоне страницы продукта.
Возможный результат
Прежде чем мы углубимся в руководство, давайте быстро взглянем на результат на экранах разных размеров.
1. Установите плагин ACF Plugin и группу преимуществ продукта.
Установите плагин Advanced Custom Fields
Чтобы отобразить различные преимущества продукта в серверной части наших продуктов, мы будем использовать плагин бесплатно Расширенные пользовательские поля. Получите доступ к своему Бэкэнд WordPress> Плагины> Добавить> Найти плагин ACF> Установить> Активировать .
Перейти к настраиваемым полям и добавить новую группу полей
После того, как вы установили и активировали плагин ACF, вы сможете получить доступ к вашим настраиваемым полям и добавить новую группу полей.
Настройки группы полей
Дайте вашей новой группе полей заголовок и позвольте ей появляться только на страницах продуктов.
- «Тип сообщения» равняется «Продукту»
Добавить первое поле
Продолжите, добавив новое поле для названия вашего первого преимущества продукта.
- Ярлык поля: Название преимущества 1
- Тип поля: текст
Повторите шаг для остальных полей.
Проделайте то же самое с другими преимуществами продукта и их описаниями. Все эти поля требуют присвоенного им типа поля «Текст».
- Название услуги 1
- Описание преимуществ 1
- Название услуги 2
- Описание преимуществ 2
- Название услуги 3
- Описание преимуществ 3
- Название услуги 4
- Описание преимуществ 4
2. Добавьте преимущества к продуктам
Откройте или добавьте новый продукт
После создания группы полей и полей вы можете добавлять преимущества продукта к своим продуктам на индивидуальном уровне. Откройте продукт по вашему выбору или создайте новый.
Заполните поля Преимущества продукта
И выполнить преимущества продукта.
3. Создайте шаблон страницы продукта в Divi Theme Builder.
Зайдите в Divi Theme Builder и добавьте новый шаблон
Пора начинать с Divi! Чтобы создать новый шаблон, перейдите в Divi Theme Builder и нажмите «Добавить новый шаблон».
Используйте шаблон на всех продуктах
Мы используем этот шаблон для всех продуктов, но не стесняйтесь выбирать продукты с определенной категорией или ярлыком.
Войдите в редактор шаблона тела модели
Затем введите тело модели, нажав «Добавить собственное тело» и выбрав «Создать собственное тело».
Редактировать раздел # 1
Фоновый цвет
Оказавшись в редакторе шаблонов, вы заметите раздел. Откройте этот раздел и измените цвет фона на черный.
- Цвет фона: # 000000
расстояние
Перейдите на вкладку дизайна раздела и добавьте несколько пользовательских верхних и нижних отступов.
- Верхняя обивка: 10px
- Нижняя обивка: 10px
Добавить новую строку
Структура столбца
Давайте продолжим, добавив в раздел новую строку, которая имеет следующую структуру:
расстояние
Не добавляя никаких модификаций, давайте откроем настройки строк и внесем некоторые изменения в интервал.
- Использовать персонализированный желоб: Да
- Ширина желоба: 1
- Ширина: 90%
- Максимальная ширина: 100%
расстояние
Удалите все внутренние промежутки сверху и снизу.
- Высокая внутренняя маржа: 0px
- Низкая внутренняя маржа: 0px
Добавьте модуль Woo Cart Notice в столбец
Динамический контент
Единственный модуль, который нам нужен в этой строке и разделе, - это модуль Woo Cart Notice. Убедитесь, что в динамическом разделе выбран «Этот продукт».
- Продукт: этот продукт
Цвет фона
Затем откройте настройки модуля и используйте прозрачный фон.
- Цвет фона: rgba (0,0,0,0)
Настройки текста
Перейдите на вкладку «Дизайн» и измените шрифт текста.
- Шрифт текста: Карла
Настройка кнопок
Завершите настройки плагина, определив настройки стиля:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 20 пикселей
- Цвет текста кнопки: # 000000
- Фон кнопки: # ffd623
- Ширина границы кнопки: 0 пикселей
- Кнопка с закругленными краями: 0px
- Шрифт кнопки: Освальд
- Стиль шрифта кнопки: Shift
- Высокая внутренняя маржа: 20px
- Низкая внутренняя маржа: 20px
- Левая внутренняя маржа: 50px
- Внутренняя правая маржа: 50px
Добавить раздел № 2
Градиентный фон
Добавьте еще один регулярный раздел ниже предыдущего. Затем откройте настройки и используйте градиентный фон следующим образом:
- Цвет 1: # 000000
- Цвет 2: #ffffff
- Начальная позиция:
- Рабочий стол: 30%
- Таблетка: 57%
- Телефон: 54%
- Конечная позиция:
- Рабочий стол: 30%
- Таблетка: 57%
- Телефон: 54%
расстояние
Переходим на вкладку «Дизайн» и добавляем высокий внутренний запас.
- Верхняя обивка: 150px
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку с такой же структурой, как показано ниже:
калибровка
Пока не добавляя никаких модов, мы откроем настройки и изменим интервал следующим образом:
- Использовать нестандартные желоба: Да
- Водосточное пространство: 1
- Ширина: 95%
- Максимальная ширина: 2560 пикселей
- Выравнивание линии: центр
Расстояние
Мы также удалим верхнюю внутреннюю маржу.
- Верхняя обивка: 0px
Главный элемент
И чтобы центрировать содержание столбец на DeskTop, мы будем использовать две строки кода CSS в главном элементе строки модуля.
Desktop:
дисплей: гибкий; выровнять элементы: центр;
Планшет и телефон:
Дисплей: блок;
Добавьте модуль Woo Image в столбец 1
Динамический контент
Пришло время добавить модули, мы начнем с модуля Woo Images в столбце 1. Убедитесь, что выбран «Этот продукт».
- Продукт: этот продукт
Эффект анимации вертикальной прокрутки
Мы добавляем легкое движение к изображению, используя эффект горизонтальной прокрутки движения на расширенной вкладке.
- Активировать вертикальное движение: Да
- Начальное смещение:
- Офис: -4
- Планшет и телефон: 0
- Среднее смещение: 0
- Конечное смещение: 0
- Эффект движения триггера: середина элемента
Добавьте модуль заголовка Woo в столбец 2
Динамический контент
В столбце 2 первый модуль, который нам нужен, — это модуль Woo Title. Убедитесь, что в поле выбран «Этот продукт». содержание динамический.
- Продукт: этот продукт
Настройки текста заголовка
Затем перейдите на вкладку дизайна и стилизуйте текст заголовка следующим образом:
- Название шрифта: Освальд
- Стиль шрифта заголовка: заглавные
- Цвет текста заголовка: # ffd623
- Размер текста заголовка: 80 пикселей
расстояние
Заполните модуль Woo title, добавив левые и правые поля.
- Левое поле: 5%
- Правое поле: 5%
Добавьте модуль описания Woo в столбец 2
Динамический контент
Перейдем к следующему модулю, который представляет собой модуль описания Woo. Для этого мы используем следующий динамический контент:
- Продукт: этот продукт
- Тип описания: Краткое описание
Настройки текста
Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:
- Шрифт текста: Карла
- Цвет текста: #dbdbdb
- Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
- Высота строки текста: 1,9 em
калибровка
Затем измените ширину на разных размерах экрана.
- Ширина: 59% (рабочий стол), 82% (планшет и телефон)
расстояние
Завершите модуль описания Woo, добавив пользовательские значения полей в настройках интервалов.
- Верхнее поле: 50px
- Нижнее поле: 100px
- Левое поле: 5%
- Правое поле: 5%
Добавьте модуль Blurb в столбец 2
Динамический контент
Чтобы отобразить преимущества продукта, которые мы добавили в первой части этого руководства, мы будем использовать модули Blurb. Добавьте первый модуль Blurb и используйте динамическое содержимое первой выгоды, созданной для заголовка и тела.
- Название: Название пособия 1
- Кузов: Описание преимущества 1
Загрузить изображение
Загрузите изображение или используйте значок по вашему выбору. Вы можете найти те, которые мы использовали в этом руководстве, в папке загрузки, которую вы смогли загрузить в начале этого руководства.
Настройки изображения / значка
Перейдите на вкладку дизайна модуля и измените настройки изображения / значка следующим образом:
- Размещение изображения / иконки: вверху
- Выравнивание изображения / значка: слева
Настройки текста заголовка
Мы изменяем настройки текста заголовка дальше.
- Название шрифта: Освальд
- Стиль шрифта заголовка: верхний регистр
- Размер текста заголовка: 25 пикселей
Настройки основного текста
Наряду с настройками основного текста.
- Body Шрифт: Карла
- Размер текста: 17 пикселей (рабочий стол и планшет), 15 пикселей (телефон)
- Высота линии тела: 1,9 em
калибровка
Затем перейдите к настройкам размеров и измените ширину. Важно использовать основную ширину менее 50%, это позволит нам показать два модуля Blurb бок о бок на следующих шагах.
- Ширина изображения: 25%
- Ширина: 49%
расстояние
Мы также добавим пробелы вокруг модуля Blurb, используя настраиваемые значения заполнения для разных размеров экрана.
- Верхняя обивка: 8%
- Нижняя прокладка: 8%
- Левый отступ: 8% (рабочий стол и планшет), 2% (телефон)
- Правый отступ: 8% (рабочий стол и планшет) 2% (телефон)
Основной элемент
Теперь мы собираемся убедиться, что модуль Summary отображает текст рядом друг с другом, в два этапа. Сначала мы убедимся, что ширина модуля меньше 50% (как мы это делали на предыдущем шаге). Далее мы будем использовать свойство в строке. Мы добавим это свойство CSS к основному элементу в расширенном разделе.
Дисплей: встроенный блок;
Клонировать итоговый модуль 3 раза
После того, как вы завершите первый мод Blurb, вы можете клонировать его три раза. Вы автоматически заметите, что модули Blurb появляются в сетке.
Редактировать изображения модуля Blurb
Отредактируйте изображение в каждом дублирующем модуле Blurb. Вы можете найти их в папке загрузки, которую вы, возможно, скачали в начале этой статьи.
Изменить динамический контент модуля Blurb
Также измените динамическое содержимое каждого дублирующего модуля Blurb.
- Название: Название услуги (2,3 или 4)
- Кузов: описание достоинств (2,3 или 4)
Добавить границы для модулей Blurb индивидуально
Настройки границы модуля Blurb 1
Теперь, чтобы закончить проектирование нашей сетки, мы собираемся добавить границы к модулям Blurb на отдельном уровне. Откройте первый мод Blurb и используйте прямую границу.
- Ширина правой границы: 1px
- Цвет правой границы: # ffd623
Также добавьте нижнюю границу к первому модулю Blurb.
- Ширина нижней границы: 1 пикс.
- Цвет нижней границы: # 000000
Настройки границы модуля Blurb 2
Затем откройте второй модуль Blurb и используйте нижнюю границу.
- Ширина нижней границы: 1 пикс.
- Цвет нижней границы: # 000000
Настройки границы модуля Blurb 3
Завершите дизайн сетки, добавив прямую границу к третьему модулю Blurb.
- Ширина правой границы: 1px
- Цвет правой границы: # ffd623
Добавить Woo Добавить в корзину Модуль в столбце 2
Динамический контент
Последний модуль, который нам нужен в нашем дизайне, - это модуль Woo Add to Cart. Убедитесь, что «Этот продукт» выбран в области динамического содержимого.
- Продукт: этот продукт
Настройки поля
Перейдите на следующую вкладку дизайна и измените настройки поля.
- Цвет фона полей: #ffffff
- Цвет текста поля: # 000000
- Округлые поля: 0px (все углы)
- Ширина нижней границы полей: 1px
- Цвет нижней границы полей: # 000000
Настройки кнопок
Затем стилизуйте кнопку соответственно:
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 20 пикселей
- Цвет текста кнопки: # 000000
- Цвет фона кнопки: # ffd623
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 0 пикселей
- Шрифт кнопки: Освальд
- Стиль шрифта кнопки: заглавные
- Верхняя обивка: 20px
- Нижняя обивка: 20px
- Левый отступ: 50px
- Правый отступ: 50 пикселей
расстояние
И заполните параметры модуля, добавив пользовательские значения полей.
- Верхнее поле: 100px
- Левое поле: 5%
3. Сохраните модификации генератора тем и просмотрите результат.
Завершив разработку шаблона страницы продукта, вы можете сохранить все изменения Theme Builder и отобразить результаты на своих продуктах!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Заключительные мысли
В этой статье мы показали вам, как проявить творческий подход к следующему шаблону страницы продукта Divi. В частности, мы показали вам, как включить динамическую сетку преимуществ продукта, чтобы добавить дополнительные преимущества на страницу вашего продукта. Мы создали это руководство, используя Divi в сочетании с плагином Advanced Custom Fields. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.