Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Lors de la création d’une page de produit dans Divi, nous pouvons utiliser le module accordéon pour afficher des informations sur le produit à l’aide d’un contenu dynamique. Cela vous donnera un design unique pour les pages de produits, tout en préservant un espace précieux sur la page.

Dans ce didacticiel, nous allons vous montrer comment utiliser la fonctionnalité de contenu dynamique de Divi pour créer un accordéon d’informations sur le produit, ainsi que comment concevoir l’accordéon (et son contenu) à l’aide de 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).
  • Installez et activez le plugin WooCommerce. Si vous configurez WooCommerce pour la première fois, vous devrez exécuter l’assistant de configuration de base pour préparer votre boutique. Une fois cela fait, vous êtes prêt à ajouter vos nouveaux produits.
  • 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. Under Produktdata ä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”.

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

7. Använd sedan rullgardinsmenyn på fliken Variationer under Produktdata-växlingen för att skapa variationer från 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.

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

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 på de flesta WooCommerce-elementen i en produkt i Divi ärvs från det sekundära färgvärdet i temat anpassningsinställningar. Det kan vara lättare att uppdatera den här sekundära färgen när färgerna mod by woo.

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.

%d bloggare som denna sida: