Как использовать динамический контент для создания аккордеона информации о продукте WooCommerce в Divi

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

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

Давайте начнем.

Sneak Peek

Вот краткий обзор дизайна, который мы создадим в этом уроке.

Загрузите макет аккордеона с информацией о продукте БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

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

Давайте перейдем к руководству, ладно?

Начиная

Для начала вам необходимо сделать следующее:

Настройка примера продукта

Чтобы настроить пример продукта для этого руководства, перейдите в раздел «Продукты»> «Добавить новый». Дайте продукту название «Массаж (один сеанс)» и щелкните, чтобы использовать Divi Builder.

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

1. В разделе «Настройки страницы Divi» выберите макет страницы без боковой панели.

2. Добавьте / выберите категорию продукта.

3. Добавьте изображение продукта.

4. Добавьте следующее длинное описание продукта:

<h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

5. В разделе «Данные продукта» измените тип продукта на «Переменный продукт».

6. Добавьте атрибут с именем «Тип» со следующими значениями: Шведский | Горячий камень | Ароматерапия | Глубокая ткань. Обязательно выберите «Используется для вариаций».

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

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

9. Во всплывающем окне введите значение «50» и нажмите OK.

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

Теперь вы готовы приступить к разработке макета с помощью настраиваемого аккордеона с информацией о продукте.

Создание аккордеона информации о продукте с динамическим контентом в Divi

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

Вот как это сделать.

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

Затем добавьте новый модуль «Аккордеон», чтобы заменить вкладки.

Во всплывающем окне «Настройки аккордеона» щелкните значок шестеренки на первом аккордеоне, чтобы открыть индивидуальные настройки аккордеона.

Введите заголовок «О продукте».

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

Выберите «Описание продукта» из списка динамического содержимого.

Это приведет к появлению подробного описания продукта, которое мы установили для продукта на бэкэнде.

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

• Название: Технические характеристики

Затем добавьте в тело динамическое содержимое «Дополнительная информация о продукте».

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

• Название: Обзоры

Затем добавьте динамический контент «Обзоры продуктов» в тело, чтобы вывести элемент / контент обзора продукта.

ПРИМЕЧАНИЕ. Убедитесь, что вы добавили хотя бы один отзыв о продукте, чтобы его содержимое отображалось на действующей странице.

Разработка аккордеона и контента с информацией о продукте с Divi

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

Откройте настройки модуля «Аккордеон» и обновите следующее:

• Цвет значка: # ff9375
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 26 пикселей

• Цвет фона закрытого переключателя: #ffffff
• Цвет текста открытого заголовка: # ff9375
• Цвет текста заголовка: # 222222
• Шрифт заголовка: Lato
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Размер текста заголовка: 20 пикселей
• Интервал между заглавными буквами: 0.2em
• Высота строки заголовка: 2em

• Шрифт тела: Lato
• Размер основного текста: 16 пикселей
• Высота линии корпуса: 1,8 м

• Цвет текста ссылки: # ff9375

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

• Цвет текста неупорядоченного списка: # ff9375
• Тип стиля неупорядоченного списка: круг
• Отступ неупорядоченного элемента списка: 5%

• Ширина границы: 0 пикселей
• Ширина верхней границы: 1 пикс.
• Цвет верхней границы: # 222222.

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

На вкладке Advanced добавьте следующий CSS к элементу Toggle:

margin-bottom: 0px;

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

Окончательные корректировки макета

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

Когда все будет готово, вот и окончательный результат.

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

ПРИМЕЧАНИЕ. Цвет по умолчанию для многих элементов WooCommerce для продукта в Divi наследуется от значения вторичного цвета из настроек настройщика темы. Возможно, будет проще обновить этот вторичный цвет один раз вместо обновления цветов для каждого модуля woo.

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

Как мы узнали, модули Woo - не единственные элементы, которые можно использовать для получения динамической информации о продукте. Аккордеон с информацией о продукте - отличный пример того, как вы можете использовать любой модуль Divi для отображения информации о продукте уникальным и кратким образом. Не стесняйтесь исследовать новые интересные дизайны аккордеонов для страниц ваших продуктов. И, конечно же, вы можете использовать несколько модулей переключения вместо гармошки для достижения аналогичных результатов.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!