Когато създаваме продуктова страница в Divi, можем да използваме модула акордеон за показване на информация за продукта, използвайки динамично съдържание. Това ще ви даде уникален дизайн на продуктовите страници, като същевременно запазите ценно място на страницата.

В този урок ще ви покажем как да използвате функцията за динамично съдържание на Divi, за да създадете хармоника с информация за продукта, както и как да проектирате акордеона (и неговото съдържание) с помощта на Divi Visual Builder.

Нека да започнем.

изследване

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

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

Commencer

За да започнете, ще трябва да направите следното:

• Ако още не сте го направили, инсталирайте и активирайте Тема на Divi инсталиран (или приставката Divi Builder, ако не използвате Тема на Divi).
• Инсталирайте и активирайте приставката WooCommerce. Ако конфигурирате WooCommerce за първи път ще трябва да стартирате съветника за основна настройка, за да подготвите магазина си. След като сте готови, вие сте готови да добавите новите си продукти.
• Създайте нов продукт, както е показано по-долу.

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

За да конфигурирате примерния продукт за този урок, отидете на Продукти> Добавяне на нов. Дайте на продукта заглавието „Масаж (единична сесия)“ и кликнете, за да използвате Divi Builder.

След това актуализирайте следните настройки на продуктовата страница и информация за продукта:

1. Под Настройки на страницата на Divi изберете оформлението без странична лента.

2. Добавете / изберете категория на продукта

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

4. Добавете съдържанието на описанието.

5. Под „Данни за продукта“ променете типа на продукта на „Променлив продукт“.

6. Добавете атрибут с име „Тип“ със следните стойности: шведски | Горещ камък | Ароматерапия | Дълбока тъкан. Не забравяйте да изберете „Използва се за вариации“.

7. След това, в раздела „Вариации“ под превключвателя за данни за продукта, използвайте падащото меню за въвеждане, за да създадете вариации от всички атрибути.

8. Изберете „Задаване на редовни цени“ от падащото меню, за да зададете редовната цена за трите променливи.

9. В диалоговия прозорец въведете стойността "50" и изберете OK.

10. а След като приключите, запазете или публикуйте продукта.

Вече сте готови да започнете да проектирате оформлението си с персонализиран акордеон на продукта.

Създаване на акордеон Product Info с динамично съдържание в Divi

Продуктовото оформление по подразбиране показва информация за продукта, използвайки различни модули Woo. За този пример искаме да използваме акордеона, за да покажем три основни данни за продукта: описание на продукта, допълнителна информация за продукта и отзиви за продукти. Тези три части съдържание в момента се показват в модула woo tabs. Всичко, което трябва да направим, е да премахнем модула woo tabs и да го заменим с модул акордеон със същата информация, въведена чрез динамично съдържание.

Ето как да го направите.

Първо щракнете, за да използвате Divi във фронталната система, за да разположите визуалния генератор. След това премахнете модула Woo Tabs.

След това добавете нов модул Акордеон, за да замените раздели.

В изскачащия прозорец Настройки на акордеона щракнете върху иконата на зъбно колело на първия акордеон, за да отворите индивидуалните настройки на акордеона.

Въведете заглавието „За продукта“.

След това задръжте курсора на мишката върху полето за въвеждане на съдържание на тялото и кликнете върху иконата за динамично съдържание.

Изберете „Описание на продукта“ от списъка с динамично съдържание.

Това ще покаже дългото описание на продукта, който сме дефинирали за продукта в бекенда.

След като съдържа първото съдържание на акордеон, отворете настройките на втория акордеон и актуализирайте следното:

• Заглавие: Спецификации

След това добавете към тялото динамичното съдържание „Допълнителна информация за продукта“.

След като второто съдържание на акордеона е готово, добавете нов елемент на акордеона и актуализирайте настройките на акордеона, както следва:

• Заглавие: Допълнителна информация

След това добавете динамичното съдържание „Прегледи на продукти“ към тялото, за да вградите елемента / съдържанието на прегледа на продукта.

ЗАБЕЛЕЖКА: Уверете се, че сте добавили поне един отзив за продукт, за да видите съдържанието на страницата на живо.

Дизайн на продукта и споразумение за съдържанието с Divi

Сега, когато нашата хармоника с информация за продукта има динамично съдържание за показване на информация за продукта, ние сме готови да я персонализираме, като използваме настройките на вградения модул за акордеон.

Отворете настройките на модула Accordion и актуализирайте следното:

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

• Превключване на цвета на фона: #ffffff
• Отворете заглавието на текста Цвят: #ff9375
• Заглавие на текста: #222222
• Заглавие шрифт: Lato
• Шрифт на заглавието: Bold
• Заглавие Шрифт Стил: TT
• Размер на заглавието на текста: 20px
• Пробел на буквите на заглавието: 0.2em
• Височина на заглавния ред: 2em

• Шрифт на тялото: Lato
• Размер на основния текст: 16px
• Височина на тялото: 1.8em

• Цвят на текста на връзката: #ff9375

Това ще бъде насочено към всички връзки, които имате в динамичното съдържание за всеки акордеон, като оценката на звездите.

• Цвят на текста на непоредния списък: # ff9375
• Неподреден тип стил на списъка: Кръг
• Неуредено отстъп на елемент от списъка: 5%

• Ширина на границата: 0px
• Ширина на горната граница: 1px
• Цвят на горната граница: #222222

И за последната стъпка, нека добавим малък екстракт от css, за да извлечем полето по подразбиране между скалите на акордеона.

В раздела Разширени добавете следния CSS към елемента Превключване:

margin-bottom: 0px;

Сега нека видим окончателния дизайн на хармониката с информация за продукта.

Последни корекции в оформлението

Няколко корекции могат да бъдат направени в оформлението, за да съответстват на дизайна на акордеона. Например, можем да настроим шрифта на всеки от модулите към Lato, да добавим персонализирана граница и радиус на границата около падащия списък с променливи и да актуализираме бутона Добавяне в кошницата с плътен цвят на фона, който го устройва.

След като сте готови, ето и крайният резултат.

Включих този дизайн като безплатно изтегляне по-горе. Моля, не се колебайте да го проверите сами. Имайте предвид, че трябва да имате конфигурацията на продукта, описана в този урок, за да постигнете същите резултати.

ЗАБЕЛЕЖКА: Цветът по подразбиране за повечето елементи WooCommerce на продукт в Divi се наследява от стойността на вторичния цвят на настройките за персонализиране на темата. Може да е по-лесно да актуализирате този вторичен цвят, след като цветовете се модулират от woo.

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

Както разбрахме, Woo Mods не са единствените неща, които могат да се използват за извличане на динамична информация за продукта. Акордеонът с информация за продукта е чудесен пример за това как можете да използвате всеки модул Divi за показване на информация за продукта по уникален и кратък начин. Чувствайте се свободни да изследвате нови и вълнуващи дизайни на акордеон за вашите продуктови страници. И, разбира се, можете да използвате множество рокерски модули вместо акордеон, за да постигнете подобни резултати.