При создании страницы продукта в Divi мы можем использовать модуль аккордеона для отображения информации о продукте с использованием динамического контента. Это даст вам уникальный дизайн для страниц продукта, сохранив ценное пространство на странице.
В этом руководстве мы покажем вам, как использовать функцию динамического содержимого Divi для создания аккордеона с информацией о продукте, а также как разработать аккордеон (и его содержимое) с помощью Divi Visual Builder.
Давайте начнем.
обследование
Вот предварительный просмотр дизайна, который мы создадим в этом уроке.
Помните, что для достижения тех же результатов у вас должна быть настройка продукта, как описано в этом руководстве.
Commencer
Для начала вам нужно будет сделать следующее:
- Если вы еще этого не сделали, установите и активируйте Диви тема установлен (или плагин Divi Builder, если вы не используете Диви тема).
- Установите и активируйте плагин WooCommerce. Если вы настроите WooCommerce в первый раз вам нужно будет запустить мастер базовой настройки, чтобы подготовить ваш магазин. После этого вы готовы добавить свои новые продукты.
- Создайте новый продукт, как показано ниже.
Настройка образца товара
Чтобы настроить образец продукта для этого руководства, перейдите в раздел «Продукты»> «Добавить новый». Дайте продукту название «Массаж (один сеанс)» и нажмите, чтобы использовать Divi Builder.
Затем обновите следующие параметры страницы продукта и информацию о продукте:
1. В разделе Параметры страницы Divi выберите макет Без боковой панели.
2. Добавить / выбрать категорию продукта
3. Добавить изображение продукта
4. Добавьте содержание описания.
5. Sous Данные продукта, измените тип продукта на Variable Product.
6. Добавьте атрибут с именем «Тип» со следующими значениями: Шведский | Горячий камень | Ароматерапия | Глубокая ткань. Обязательно выберите «Используется для вариантов».
7. Затем на вкладке «Вариации» под переключателем данные продукта, используйте раскрывающийся список, чтобы создать варианты из всех атрибутов.
8. Выберите «Установить обычные цены» в раскрывающемся меню, чтобы установить обычную цену для трех переменных.
9. В диалоговом окне введите значение «50» и выберите «ОК».
10. По завершении сохраните или опубликуйте продукт.
Теперь вы готовы приступить к разработке макета с пользовательским аккордеоном.
Создание аккордеона Product Info с динамическим контентом в Divi
В макете продукта по умолчанию отображается информация о продукте с использованием различных модулей Woo. В этом примере мы хотим использовать гармошку для отображения трех основных сведений о продукте: описания продукта, дополнительной информации о продукте и обзоров продукта. Эти три части контента в настоящее время отображаются в модуле вкладок woo. Все, что нам нужно сделать, это удалить модуль вкладок woo и заменить его модулем аккордеона с той же информацией, представленной через динамический контент.
Вот как это сделать.
Сначала щелкните, чтобы использовать Divi во внешней системе для развертывания визуального генератора. Затем удалите модуль Woo Tabs.
Затем добавьте новый модуль Accordion, чтобы заменить вкладки.
Во всплывающем окне «Настройки аккордеона» щелкните значок шестеренки на первом аккордеоне, чтобы открыть индивидуальные настройки аккордеона.
Введите название «О товаре».
Затем наведите указатель мыши на поле ввода основного содержимого и щелкните значок динамического содержимого.
Выберите «Описание продукта» из списка динамического содержимого.
Это отобразит подробное описание продукта, которое мы определили для продукта на серверной части.
Как только содержимое первого аккордеона будет установлено, откройте настройки второго аккордеона и обновите следующее:
- Название: Технические характеристики
Затем добавьте динамическое содержимое «Дополнительная информация о продукте» в тело.
Как только содержание второго аккордеона будет готово, добавьте новый элемент аккордеона и обновите настройки аккордеона следующим образом:
- Название: Дополнительная информация
Затем добавьте динамическое содержимое «Обзоры продуктов» в тело, чтобы встроить элемент / содержимое обзора продукта.
ПРИМЕЧАНИЕ. Убедитесь, что вы добавили хотя бы один обзор продукта, чтобы увидеть контент на действующей странице.
Соглашение о дизайне продукта и содержании с Divi
Теперь, когда наш аккордеон с информацией о продукте имеет динамическое содержимое для отображения информации о продукте, мы готовы настроить его, используя настройки встроенного модуля аккордеона.
Откройте настройки модуля Accordion и обновите следующее:
- Цвет значка: # ff9375
- Использовать размер шрифта значка: ДА
- Размер шрифта иконки: 26px
- Переключить цвет фона: #ffffff
- Открыть текстовое название Цвет: #ff9375
- Название текста: #222222
- Название шрифта: Лато
- Название шрифта: жирный
- Стиль шрифта заголовка: TT
- Размер текста заголовка: 20px
- Пространство букв заголовка: 0.2em
- Высота строки заголовка: 2em
- Body Font: Лато
- Размер основного текста: 16px
- Рост тела: 1.8em
- Цвет текста ссылки: #ff9375
Это будет нацелено на все ссылки, которые у вас есть в динамическом контенте для каждого аккордеона, например звездный рейтинг.
- Цвет текста неупорядоченного списка: # ff9375
- Тип неупорядоченного списка: Круг
- Отступ элементов неупорядоченного списка: 5%
- Ширина границы: 0px
- Ширина верхней границы: 1px
- Цвет верхней границы: #222222
И для последнего шага, давайте добавим небольшой экстракт CSS, чтобы извлечь поле по умолчанию между аккордеонными шкалами.
На вкладке Advanced добавьте следующий CSS в элемент Toggle:
margin-bottom: 0px;
Теперь посмотрим на окончательный дизайн аккордеона с информацией о продукте.
Окончательные корректировки макета
В макет можно внести несколько изменений, чтобы он соответствовал дизайну аккордеона. Например, мы можем настроить шрифт каждого из модулей на Lato, добавить настраиваемую границу и радиус границы вокруг раскрывающегося списка переменных и обновить кнопку «Добавить в корзину» с помощью сплошного цвета фона, который ему подходит.
После того, как сделано, вот окончательный результат.
Я включил этот дизайн для бесплатной загрузки выше. Пожалуйста, убедитесь в этом сами. Обратите внимание, что для достижения тех же результатов у вас должна быть конфигурация продукта, описанная в этом руководстве.
ПРИМЕЧАНИЕ. Цвет по умолчанию для большинства предметов. WooCommerce продукта в Divi наследуется от значения вторичного цвета в настройках настройки темы. Возможно, будет проще обновить этот вторичный цвет, как только модуль цветов будет создан woo.
Заключительные мысли
Как мы узнали, Woo Mods - не единственное, что можно использовать для извлечения динамической информации о продукте. Аккордеон с информацией о продукте - отличный пример того, как вы можете использовать любой модуль Divi для отображения информации о продукте уникальным и кратким образом. Не стесняйтесь исследовать новые захватывающие дизайны аккордеонов для страниц ваших продуктов. И, конечно же, вы можете использовать несколько рокер-модулей вместо аккордеона для достижения аналогичных результатов.
