Bij het maken van een productpagina in Divi kunnen we de accordeonmodule gebruiken om productinformatie weer te geven met dynamische inhoud. Dit geeft u een uniek ontwerp voor de productpagina's, terwijl waardevolle ruimte op de pagina behouden blijft.
In deze zelfstudie laten we u zien hoe u de dynamische inhoudfunctie van Divi kunt gebruiken om een ​​accordeon met productinformatie te maken, en hoe u de accordeon (en de inhoud ervan) kunt ontwerpen met Divi Visual Builder.
Laten we beginnen.
overzicht
Hier is een voorbeeld van het ontwerp dat we in deze tutorial zullen bouwen.
Houd er rekening mee dat u een productconfiguratie moet hebben zoals beschreven in deze tutorial om dezelfde resultaten te bereiken.
Commencer
Om te beginnen, moet u het volgende doen:
- Installeer en activeer de . als u dat nog niet hebt gedaan Divi-thema geïnstalleerd (of de Divi Builder-plug-in als u de Divi-thema).
- Installeer en activeer de plug-in WooCommerce. Als u configureert: WooCommerce voor de eerste keer moet u de basisinstallatiewizard uitvoeren om uw winkel voor te bereiden. Als u klaar bent, bent u klaar om uw nieuwe producten toe te voegen.
- Maak een nieuw product zoals hieronder weergegeven.
Het monsterproduct instellen
Ga naar Producten> Nieuw toevoegen om het voorbeeldproduct voor deze tutorial te configureren. Geef het product de titel "Massage (enkele sessie)" en klik om Divi Builder te gebruiken.
Werk vervolgens de volgende productpagina-instellingen en productinformatie bij:
1. Selecteer onder Divi-pagina-instellingen de lay-out Geen zijbalk.
2. Voeg een productcategorie toe / selecteer
3. Voeg productafbeelding toe
4. Voeg de inhoud van de beschrijving toe.
5. Sous Gegevens van het product wijzigt u het producttype in Variabel product.
6. Voeg een attribuut toe met de naam "Type" met de volgende waarden: Zweeds | Hete steen | Aromatherapie | Diep weefsel. Zorg ervoor dat u "Gebruikt voor variaties" selecteert.
7. Vervolgens op het tabblad Variaties onder de schakelaar van donnees van het product, gebruikt u de vervolgkeuzelijst om variaties van alle attributen te maken.
8. Selecteer "Regelmatige prijzen instellen" in het vervolgkeuzemenu om de normale prijs voor de drie variabelen in te stellen.
9. Voer in het dialoogvenster de waarde "50" in en selecteer OK.
10. een Sla het product op of publiceer het als u klaar bent.
U bent nu klaar om uw lay-out te ontwerpen met een aangepaste productaccordeon.
Creatie van de Product Info-accordeon met dynamische inhoud in Divi
De standaard productlay-out geeft productinformatie weer met behulp van verschillende Woo-modules. Voor dit voorbeeld willen we de accordeon gebruiken om drie belangrijke informatie over het product weer te geven: productbeschrijving, aanvullende productinformatie en productrecensies. Deze drie stukken inhoud worden momenteel weergegeven in de module woo-tabbladen. Het enige wat we hoeven te doen is de woo tabs-module verwijderen en deze vervangen door een accordeonmodule met dezelfde informatie die is geïntroduceerd via dynamische inhoud.
Hier is hoe het te doen.
Klik eerst om Divi op het front-end-systeem te gebruiken om de visuele generator te implementeren. Verwijder vervolgens de Woo Tabs-module.
Voeg vervolgens een nieuwe accordeonmodule toe om de tabbladen te vervangen.
Klik in het pop-upvenster Accordeoninstellingen op het tandwielpictogram op de eerste accordeon om de individuele accordeoninstellingen te openen.
Voer de titel "Over het product" in.
Beweeg vervolgens de muisaanwijzer over het invoervak ​​voor de inhoud van de body en klik op het pictogram voor dynamische inhoud.
Selecteer "Productbeschrijving" in de lijst met dynamische inhoud.
Dit geeft de lange beschrijving weer van het product dat we hebben gedefinieerd voor het product op de backend.
Zodra de eerste accordeoninhoud is geplaatst, opent u de tweede accordeoninstellingen en werkt u het volgende bij:
- Titel: Specificaties
Voeg vervolgens de dynamische inhoud "Aanvullende productinformatie" toe aan de body.
Zodra de tweede accordeoninhoud klaar is, voegt u een nieuw accordeonelement toe en werkt u de accordeoninstellingen als volgt bij:
- Titel: Aanvullende informatie
Voeg vervolgens dynamische inhoud "Productrecensies" toe aan de hoofdtekst om het item / de inhoud van de productrecensie in te sluiten.
OPMERKING: zorg ervoor dat u ten minste één productrecensie heeft toegevoegd om de inhoud op de live-pagina te zien.
Ontwerp van de product- en inhoudsovereenkomst met Divi
Nu onze productinformatie-accordeon de dynamische inhoud heeft om productinformatie weer te geven, zijn we klaar om deze aan te passen met de instellingen van de ingebouwde accordeonmodule.
Open de accordeonmodule-instellingen en update het volgende:
- Pictogramkleur: # ff9375
- Gebruik de lettergrootte van het pictogram: JA
- Pictogramlettergrootte: 26px
- Wissel achtergrondkleur: #ffffff
- Teksttekst openen Kleur: #ff9375
- Teksttitel: #222222
- Titellettertype: Lato
- Titellettertype: Vet
- Titel Fontstijl: TT
- Tekst Titel Grootte: 20px
- Spatie van de letters van de titel: 0.2em
- Hoogte van de titelregel: 2em
- Lichaamslettertype: Lato
- Hoofdtekstgrootte: 16px
- Lichaamslengte: 1.8em
- Tekstkleur koppeling: #ff9375
Hiermee worden alle koppelingen in de dynamische inhoud voor elke accordeon getarget, zoals de sterbeoordeling.
- Tekstkleur van de ongeordende lijst: # ff9375
- Type ongeordende lijststijl: Cirkel
- Ongeordende inspringing van lijstitems: 5%
- Breedte van de rand: 0px
- Breedte van de bovenrand: 1px
- Kleur van de bovenrand: #222222
En voor de laatste stap, laten we een klein CSS-extract toevoegen om de standaardmarge tussen de accordeonschalen te extraheren.
Voeg op het tabblad Geavanceerd de volgende CSS toe aan het Toggle-element:
margin-bottom: 0px;
Laten we nu eens kijken naar het uiteindelijke ontwerp van de productinfo-accordeon.
Laatste aanpassingen aan de lay-out
Er kunnen een paar aanpassingen aan de lay-out worden gemaakt om bij het ontwerp van de accordeon te passen. We kunnen bijvoorbeeld het lettertype van elk van de modules aanpassen aan Lato, een aangepaste rand en randstraal toevoegen rond de vervolgkeuzelijst met variabelen en de knop Toevoegen aan winkelwagentje bijwerken met een effen achtergrondkleur die past bij hem.
Eenmaal gedaan, hier is het eindresultaat.
Ik heb dit ontwerp hierboven als gratis download opgenomen. Voel je vrij om het zelf te bekijken. Houd er rekening mee dat u de productconfiguratie moet hebben die in deze tutorial wordt beschreven om dezelfde resultaten te bereiken.
OPMERKING: De standaardkleur voor de meeste artikelen WooCommerce van een product in Divi wordt overgenomen van de secundaire kleurwaarde van de thema-aanpassingsinstellingen. Het kan gemakkelijker zijn om deze secundaire kleur bij te werken zodra de kleurenmodule door woo is geïnstalleerd.
Final gedachten
Zoals we hebben geleerd, zijn Woo Mods niet de enige dingen die kunnen worden gebruikt om dynamische productinformatie te extraheren. De productinformatie-accordeon is een goed voorbeeld van hoe u elke Divi-module kunt gebruiken om productinformatie op een unieke en beknopte manier weer te geven. Voel je vrij om nieuwe, opwindende accordeonontwerpen voor je productpagina's te ontdekken. En u kunt natuurlijk meerdere rockermodules gebruiken in plaats van een accordeon om vergelijkbare resultaten te bereiken.
