Tworząc stronę produktu w Divi, możemy użyć modułu akordeonu do wyświetlania informacji o produkcie za pomocą dynamicznej zawartości. Zapewni to unikalny wygląd stron produktów, zachowując jednocześnie cenne miejsce na stronie.
W tym samouczku pokażemy, jak używać funkcji zawartości dynamicznej Divi do tworzenia akordeonu z informacjami o produkcie, a także jak zaprojektować akordeon (i jego zawartość) za pomocą Divi Visual Builder.
Zacznijmy.
badanie
Oto podgląd projektu, który zbudujemy w tym samouczku.
Pamiętaj, że aby osiągnąć te same wyniki, musisz skonfigurować produkt zgodnie z opisem w tym samouczku.
Commencer
Aby rozpocząć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj Motyw Divi zainstalowany (lub wtyczka Divi Builder, jeśli nie używasz Motyw Divi).
- Zainstaluj i aktywuj wtyczkę WooCommerce . Jeśli skonfigurujesz WooCommerce po raz pierwszy będziesz musiał uruchomić kreatora podstawowej konfiguracji, aby przygotować swój sklep. Po zakończeniu możesz dodać nowe produkty.
- Utwórz nowy produkt, jak pokazano poniżej.
Konfigurowanie przykładowego produktu
Aby skonfigurować przykładowy produkt dla tego samouczka, przejdź do pozycji Produkty> Dodaj nowy. Nadaj produktowi tytuł „Masaż (pojedyncza sesja)” i kliknij, aby skorzystać z Divi Builder.
Następnie zaktualizuj następujące ustawienia strony produktu i informacje o produkcie:
1. W obszarze Ustawienia strony Divi wybierz układ Bez paska bocznego.
2. Dodaj / wybierz kategorię produktu
3. Dodaj zdjęcie produktu
4. Dodaj treść opisu.
5. Sous Dane produktu, zmień typ produktu na Produkt zmienny.
6. Dodaj atrybut o nazwie „Typ” z następującymi wartościami: szwedzki | Gorący kamień | Aromaterapia | Głęboka tkanka. Upewnij się, że wybrałeś „Używany dla odmian”.
7. Następnie w zakładce Wariacje pod przełącznikiem données produktu, użyj listy rozwijanej, aby utworzyć wariacje ze wszystkich atrybutów.
8. Wybierz „Ustaw regularne ceny” z menu rozwijanego, aby ustawić zwykłą cenę dla trzech zmiennych.
9. W oknie dialogowym wprowadź wartość „50” i wybierz OK.
10. Po zakończeniu zapisz lub opublikuj produkt.
Teraz możesz rozpocząć projektowanie swojego układu z niestandardowym akordeonem produktu.
Stworzenie akordeonu z informacjami o produkcie z dynamiczną zawartością w Divi
Domyślny układ produktu wyświetla informacje o produkcie za pomocą różnych modułów Woo. W tym przykładzie chcemy użyć akordeonu, aby wyświetlić trzy główne informacje o produkcie: opis produktu, dodatkowe informacje o produkcie i recenzje produktów. Te trzy elementy treści są obecnie wyświetlane w module woo tabs. Wszystko, co musimy zrobić, to usunąć moduł woo tabs i zastąpić go modułem akordeonowym z tymi samymi informacjami wprowadzonymi przez zawartość dynamiczną.
Oto jak to zrobić.
Najpierw kliknij, aby użyć Divi w systemie front-end, aby wdrożyć generator wizualny. Następnie usuń moduł Woo Tabs.
Następnie dodaj nowy moduł akordeonu, aby zastąpić tabulatory.
W wyskakującym oknie Ustawienia akordeonu kliknij ikonę koła zębatego na pierwszym akordeonie, aby otworzyć indywidualne ustawienia akordeonu.
Wpisz tytuł „Informacje o produkcie”.
Następnie najedź kursorem na pole wprowadzania treści i kliknij ikonę zawartości dynamicznej.
Wybierz „Opis produktu” z dynamicznej listy treści.
Spowoduje to wyświetlenie długiego opisu produktu, który zdefiniowaliśmy dla produktu na zapleczu.
Po wprowadzeniu zawartości pierwszego akordeonu otwórz ustawienia drugiego akordeonu i zaktualizuj następujące elementy:
- Tytuł: specyfikacje
Następnie dodaj do treści dynamiczną treść „Dodatkowe informacje o produkcie”.
Gdy zawartość drugiego akordeonu będzie gotowa, dodaj nowy element akordeonu i zaktualizuj ustawienia akordeonu w następujący sposób:
- Tytuł: Informacje dodatkowe
Następnie dodaj dynamiczną zawartość „Recenzje produktów” do treści, aby osadzić element / treść recenzji produktu.
UWAGA: Upewnij się, że dodałeś co najmniej jedną recenzję produktu, aby zobaczyć zawartość strony na żywo.
Projekt produktu i umowa dotycząca zawartości z Divi
Teraz, gdy nasz akordeon informacji o produkcie ma dynamiczną zawartość do wyświetlania informacji o produkcie, jesteśmy gotowi dostosować go za pomocą ustawień wbudowanego modułu akordeonu.
Otwórz ustawienia modułu Akordeon i zaktualizuj następujące elementy:
- Kolor ikony: # ff9375
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 26px
- Przełącz kolor tła: #ffffff
- Otwórz tytuł tekstu Kolor: #ff9375
- Tytuł tekstu: #222222
- Czcionka tytułu: Lato
- Czcionka tytułu: Bold
- Styl czcionki tytułu: TT
- Rozmiar tytułu tekstu: 20px
- Odstępy liter tytułu: 0.2em
- Wysokość linii tytułowej: 2em
- Body Font: Lato
- Rozmiar tekstu podstawowego: 16px
- Wysokość ciała: 1.8em
- Kolor tekstu linku: #ff9375
Spowoduje to skierowanie na wszystkie linki w treści dynamicznej każdego akordeonu, takie jak ocena w gwiazdkach.
- Kolor tekstu listy nieuporządkowanej: # ff9375
- Nieuporządkowany styl listy: Okrąg
- Wcięcie nieuporządkowanej pozycji listy: 5%
- Szerokość obramowania: 0px
- Szerokość górnej granicy: 1px
- Kolor górnej granicy: #222222
I dla ostatniego kroku dodajmy mały ekstrakt css, aby wyodrębnić domyślny margines między skalami akordeonu.
Na karcie Zaawansowane dodaj następujący kod CSS do elementu Przełącz:
margin-bottom: 0px;
Zobaczmy teraz ostateczny projekt akordeonu informacyjnego o produkcie.
Ostateczne poprawki w układzie
Można wprowadzić kilka zmian w układzie, aby dopasować go do projektu akordeonu. Na przykład możemy dostosować czcionkę każdego z modułów do Lato, dodać niestandardową ramkę i promień obramowania wokół rozwijanej listy zmiennych i zaktualizować przycisk Dodaj do koszyka jednolitym kolorem tła, który pasuje do niego.
Po zakończeniu, oto wynik końcowy.
Powyżej zamieściłem ten projekt jako darmowy plik do pobrania. Zapraszam do samodzielnego sprawdzenia. Zauważ, że musisz mieć konfigurację produktu opisaną w tym samouczku, aby osiągnąć te same wyniki.
UWAGA: Domyślny kolor większości elementów WooCommerce produktu w Divi jest dziedziczona z wartości koloru dodatkowego w ustawieniach dostosowywania motywu. Aktualizacja tego koloru dodatkowego może być łatwiejsza, gdy moduł kolorów zostanie utworzony przez woo.
końcowe przemyślenia
Jak się dowiedzieliśmy, moduły Woo to nie jedyne rzeczy, których można użyć do wyodrębnienia dynamicznych informacji o produkcie. Akordeon informacji o produkcie jest doskonałym przykładem tego, jak można użyć dowolnego modułu Divi do wyświetlania informacji o produkcie w wyjątkowy i zwięzły sposób. Zapraszam do odkrywania nowych i ekscytujących projektów akordeonów na stronach produktów. I oczywiście można użyć wielu modułów rocker zamiast akordeonu, aby osiągnąć podobne rezultaty.
