Gå till innehållet

Hur man lägger till ett informationsspel på en WooCommerce-produkt med Divi

Divi: det enklaste WordPress-temat att använda

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. [Rekommenderas]

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.

Divi dragspel design

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 har gjort det ännu, installera och aktivera det installerade Divi-temat (eller Divi Builder-plugin-programmet om du inte använder Divi-temat).
  • Installera och aktivera WooCommerce-plugin. Om det här är första gången du konfigurerar WooCommerce 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.

Skapa en divi 1 woocommerce-produkt

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

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Divi-modell i full bredd

7. Använd sedan rullgardinsmenyn på fliken Variationer under Produktdata-växlingen för att skapa variationer från alla attribut.

Skapa woocommerce-variationer
Woocommerce produktvariationer

8. Välj "Ställ in vanliga priser" i listrutan för att ställa in det vanliga priset för de tre variablerna.

Definiera vanliga prisvariationer woocommerce

9. Ange värdet "50" i dialogrutan och välj OK.

Ange ett pris för woocommerce

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.

Ta bort woocommerce-modulen

Lägg sedan till en ny dragspelmodul för att ersätta flikarna.

Woocommerce dragspel

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.

Accordeon och divi parametrar

Ange titeln "Om produkten".

Håll sedan muspekaren över inmatningsrutan för kroppsinnehåll och klicka på ikonen för dynamiskt innehåll.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Använd dynamiskt wordpress woocommerce-innehåll

Välj "Produktbeskrivning" i den dynamiska innehållslistan.

Produktbeskrivning woocommerce

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
Konfigurationssymbol för dragspel
  • 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
Woocommerce-panelkonfiguration
  • Body Font: Lato
  • Kroppstextstorlek: 16px
  • Kroppshöjd: 1.8em
Konfiguration av typsnitt för Woocommerce-dragspel
  • 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.

Woocommerce-länkfärgkonfiguration
  • 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
Harmonika gränskonfiguration divi woocommerce

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Produktinformation divisions 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.

Produktinformation divisions dragspel

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer