När vi skapar en produktsida i Divi kan vi använda dragspelmodulen för att visa produktinformation med dynamiskt innehåll. Detta ger dig en unik design för produktsidorna, samtidigt som du sparar värdefullt utrymme på sidan.
I den här handledningen visar vi dig hur du använder Divis dynamiska innehållsfunktion för att skapa ett produktinformationsspel, samt hur du utformar dragspel (och dess innehåll) med Divi Visual Builder.
Låt oss börja.
undersökningen
Här är en förhandsgranskning av designen vi kommer att bygga i denna handledning.
Tänk på att du måste ha en produktkonfiguration enligt beskrivningen i denna handledning för att uppnå samma resultat.
Commencer
För att börja måste du göra följande:
- Om du inte redan har gjort det, installera och aktivera Divi-tema installerat (eller Divi Builder-plugin om du inte använder Divi-tema).
- Installera och aktivera plugin-programmet WooCommerce. Om du konfigurerar WooCommerce för första gången måste du köra den grundläggande installationsguiden för att förbereda din butik. När du är klar är du redo att lägga till dina nya produkter.
- Skapa en ny produkt som visas nedan.
Ställa in provprodukten
För att konfigurera exempelprodukten för den här självstudien, gå till Produkter> Lägg till ny. Ge produkten titeln "Massage (enstaka session)" och klicka för att använda Divi Builder.
Uppdatera sedan följande produktsidan och produktinformation:
1. Under Divi-sidinställningar väljer du Layout för ingen sidopanel.
2. Lägg till / välj en produktkategori
3. Lägg till produktbild
4. Lägg till innehållet i beskrivningen.
5. Sous Data av produkten ändrar du produkttypen till Variabel produkt.
6. Lägg till ett attribut med namnet “Typ” med följande värden: svenska | Het sten | Aromaterapi | Djupvävnad. Se till att välja ”Används för variationer”.
7. Sedan på fliken Variationer under växlingen av uppgifter av produkten, använd rullgardinsmenyn för att skapa varianter av alla attribut.
8. Välj "Ställ in vanliga priser" i listrutan för att ställa in det vanliga priset för de tre variablerna.
9. Ange värdet "50" i dialogrutan och välj OK.
10. en När du är klar, spara eller publicera produkten.
Nu är du redo att börja designa din layout med en anpassad produktakkordion.
Skapande av produktinfo dragspel med dynamiskt innehåll i Divi
Standardproduktlayouten visar produktinformation med olika Woo-moduler. I det här exemplet vill vi använda dragspel för att visa tre huvudinformation om produkten: produktbeskrivning, ytterligare produktinformation och produktrecensioner. Dessa tre innehållsdelar visas för närvarande i woo-flikmodulen. Allt vi behöver göra är att ta bort woo-flikmodulen och ersätta den med en dragspelmodul med samma information som introduceras via dynamiskt innehåll.
Så här gör du det.
Klicka först för att använda Divi på front-end-systemet för att distribuera den visuella generatorn. Ta sedan bort Woo Tabs-modulen.
Lägg sedan till en ny dragspelmodul för att ersätta flikarna.
I popup-fönstret för dragspelinställningar klickar du på kugghjulsikonen på det första dragspelet för att öppna de individuella dragspelinställningarna.
Ange titeln "Om produkten".
Håll sedan muspekaren över inmatningsrutan för kroppsinnehåll och klicka på ikonen för dynamiskt innehåll.
Välj "Produktbeskrivning" i den dynamiska innehållslistan.
Detta visar den långa beskrivningen av den produkt vi har definierat för produkten på backend.
När det första dragspelinnehållet är på plats öppnar du de andra dragspelinställningarna och uppdaterar följande:
- Titel: Specifikationer
Lägg sedan till det dynamiska innehållet "Ytterligare produktinformation" till kroppen.
När det andra dragspelinnehållet är klart lägger du till ett nytt dragspelelement och uppdaterar dragspelinställningarna enligt följande:
- Titel: Ytterligare information
Lägg sedan till det dynamiska innehållet "Produktrecensioner" i kroppen för att bädda in artikeln / innehållet i produktrecensionen.
OBS: Se till att du har lagt till minst en produktrecension för att se innehållet på livesidan.
Design av produkt- och innehållsavtalet med Divi
Nu när vår produktinformation dragspel har det dynamiska innehållet för att visa produktinformation är vi redo att anpassa den med inställningarna för den inbyggda dragspelmodulen.
Öppna inställningarna för dragspelmodulen och uppdatera följande:
- Ikonfärg: # ff9375
- Använd ikonstorlek: JA
- Ikon Fontstorlek: 26px
- Växla bakgrundsfärg: #ffffff
- Öppen texttitel Färg: #ff9375
- Texttitel: #222222
- Titel Typsnitt: Lato
- Titel Polis: Bold
- Titel Typsnitt: TT
- Textstitelstorlek: 20px
- Utrymmet på bokstäverna i titeln: 0.2em
- Titelradens höjd: 2em
- Body Font: Lato
- Kroppstextstorlek: 16px
- Kroppshöjd: 1.8em
- Länktextfärg: #ff9375
Detta kommer att rikta in sig på alla länkar du har i det dynamiska innehållet för varje dragspel, som stjärnbetyg.
- Textfärg på den oordnade listan: # ff9375
- Oordnad listtypstyp: Cirkel
- Obeställd indragning av listobjekt: 5%
- Breddens bredd: 0px
- Bredden på den övre gränsen: 1px
- Färg på den övre gränsen: #222222
Och för det sista steget, låt oss lägga till ett litet css-extrakt för att extrahera standardmarginalen mellan dragspelskalorna.
På fliken Avancerat lägger du till följande CSS i Toggle-elementet:
margin-bottom: 0px;
Låt oss nu se den slutliga utformningen av produktinfo dragspel.
Slutliga justeringar av layouten
Vissa justeringar kan göras i layouten för att matcha dragspelets design. Vi kan till exempel justera teckensnittet för var och en av modulerna till Lato, lägga till en anpassad kant och kantradie runt den nedrullningsbara listan och uppdatera knappen Lägg i varukorg med en solid bakgrundsfärg som passar honom.
När detta är gjort är det slutliga resultatet.
Jag har inkluderat denna design som en gratis nedladdning ovan. Tveka inte att kolla in det själv. Observera att du måste ha den produktkonfiguration som beskrivs i denna handledning för att uppnå samma resultat.
OBS: Standardfärgen för de flesta objekt WooCommerce för en produkt i Divi ärvs från det sekundära färgvärdet för temaanpassningsinställningarna. Det kan vara lättare att uppdatera den här sekundära färgen när färgmodulen har uppvaktats.
Avslutande tankar
Som vi har lärt oss är Woo-moduler inte det enda som kan användas för att extrahera dynamisk produktinformation. Produktinformationsspelet är ett utmärkt exempel på hur du kan använda vilken Divi-modul som helst för att visa produktinformation på ett unikt och koncist sätt. Utforska gärna nya och spännande dragspeldesigner för dina produktsidor. Och naturligtvis kan du använda flera rockermoduler istället för ett dragspel för att uppnå liknande resultat.
