Når vi opretter en produktside i Divi, kan vi bruge harmonika-modulet til at vise produktinformation ved hjælp af dynamisk indhold. Dette giver dig et unikt design til produktsiderne, mens du bevarer værdifuld plads på siden.
I denne vejledning viser vi dig, hvordan du bruger Divis dynamiske indholdsfunktion til at skabe et produktinformationsspil, samt hvordan du designer harmonika (og dets indhold) ved hjælp af Divi Visual Builder.
Lad os starte.
undersøgelse
Her er en forhåndsvisning af designet, vi vil bygge i denne tutorial.
Husk at du skal have en produktkonfiguration som beskrevet i denne vejledning for at opnå de samme resultater.
Commencer
For at begynde skal du gøre følgende:
- Hvis du ikke allerede har gjort det, skal du installere og aktivere Divi-tema installeret (eller Divi Builder-pluginnet, hvis du ikke bruger Divi-tema).
- Installer og aktiver plugin'et WooCommerce. Hvis du konfigurerer WooCommerce for første gang skal du køre den grundlæggende opsætningsguide for at forberede din butik. Når du er færdig, er du klar til at tilføje dine nye produkter.
- Opret et nyt produkt som vist nedenfor.
Opsætning af prøveprodukt
For at konfigurere prøveproduktet til denne vejledning skal du gå til Produkter> Tilføj nyt. Giv produktet titlen “Massage (single session)”, og klik for at bruge Divi Builder.
Opdater derefter de følgende produktsideindstillinger og produktinformation:
1. Under Indstillinger for Divi-side skal du vælge layoutet Ingen sidepanel.
2. Tilføj / vælg en produktkategori
3. Tilføj produktbillede
4. Tilføj indholdet af beskrivelsen.
5. under Data af produktet skal du ændre produkttypen til Variabelt produkt.
6. Tilføj en attribut med navnet "Type" med følgende værdier: Svensk | Varm sten | Aromaterapi | Dybt væv. Sørg for at vælge "Brugt til variationer".
7. Derefter på fanen Variationer under til/fra données af produktet skal du bruge rullemenuen til at oprette variationer fra alle attributter.
8. Vælg "Angiv almindelige priser" i rullemenuen for at indstille den normale pris for de tre variabler.
9. Indtast værdien "50" i dialogboksen og vælg OK.
10. en Når du er færdig, skal du gemme eller offentliggøre produktet.
Du er nu klar til at begynde at designe dit layout med en brugerdefineret produktakkordeion.
Oprettelse af produktinfo harmonika med dynamisk indhold i Divi
Standardproduktlayoutet viser produktoplysninger ved hjælp af forskellige Woo-moduler. I dette eksempel ønsker vi at bruge trekkspillet til at vise tre hovedproduktoplysninger: produktbeskrivelse, yderligere produktinformation og produktanmeldelser. Disse tre indholdstykker vises i øjeblikket i woo-fanemodulet. Alt, hvad vi skal gøre er at fjerne woo-fanemodulet og erstatte det med et harmonika-modul med de samme oplysninger, der er introduceret via dynamisk indhold.
Sådan gør du det.
Klik først for at bruge Divi på front-end-systemet til at implementere den visuelle generator. Fjern derefter Woo Tabs-modulet.
Tilføj derefter et nyt Accordion-modul for at erstatte fanerne.
I pop op-vinduet til harmonikaindstillinger skal du klikke på tandhjulsikonet på det første harmonika for at åbne de individuelle harmonikaindstillinger.
Indtast titlen "Om produktet".
Hold derefter markøren over indtastningsfeltet for kropsindhold, og klik på ikonet for dynamisk indhold.
Vælg "Produktbeskrivelse" på listen over dynamiske indhold.
Dette viser den lange beskrivelse af det produkt, vi har defineret for produktet på backend.
Når det første harmonikaindhold er på plads, skal du åbne de andet harmonikaindstillinger og opdatere følgende:
- Titel: Specifikationer
Tilføj derefter det dynamiske indhold "Yderligere produktinformation" til kroppen.
Når det andet harmonikaindhold er klar, skal du tilføje et nyt harmonikaelement og opdatere harmonikaindstillingerne som følger:
- Titel: Yderligere oplysninger
Tilføj derefter dynamisk indhold "Produktanmeldelser" til kroppen for at integrere varen / indholdet af produktanmeldelsen.
BEMÆRK: Sørg for, at du har tilføjet mindst en produktanmeldelse for at se indholdet på live-siden.
Design af produkt- og indholdsaftalen med Divi
Nu hvor vores produktinformation harmonika har det dynamiske indhold til at vise produktinformation, er vi klar til at tilpasse dem ved hjælp af indstillingerne i det indbyggede harmonika-modul.
Åbn indstillingerne for Accordion-modulet, og opdater følgende:
- Ikonfarve: # ff9375
- Brug ikonets skriftstørrelse: JA
- Ikon Skriftstørrelse: 26px
- Skift baggrundsfarve: #ffffff
- Åben teksttitel Farve: #ff9375
- Teksttitel: #222222
- Titeltype: Lato
- Titel Politi: Fed
- Titel skrifttype: TT
- Tekst Titel Størrelse: 20px
- Plads af bogstaver i titlen: 0.2em
- Højde på titellinjen: 2em
- Kropsskrifttype: Lato
- Krops tekststørrelse: 16px
- Kropshøjde: 1.8em
- Link tekstfarve: #ff9375
Dette målretter sig mod alle de links, du har i det dynamiske indhold til hver trekkspil, som stjernebedømmelsen.
- Tekstfarve på den uordnede liste: # ff9375
- Uordnet listetype: Cirkel
- Uordnet indrykning på listen: 5%
- Bredde på grænsen: 0px
- Bredde på øverste kant: 1px
- Farve på øverste kant: #222222
Og til det sidste trin, lad os tilføje et lille css-ekstrakt for at udtrække standardmargenen mellem harmonika skalaer.
På fanen Avanceret skal du tilføje følgende CSS til Toggle-elementet:
margin-bottom: 0px;
Lad os nu se på det endelige design af produktinfo harmonika.
Endelige justeringer af layoutet
Et par justeringer kan foretages i layoutet for at matche designet af harmonikaen. For eksempel kan vi justere skrifttypen for hvert af modulerne til Lato, tilføje en brugerdefineret kant og kantradius omkring rullelisten med variabler og opdatere knappen Tilføj til indkøbskurv med en solid baggrundsfarve, der passer ham.
Når dette er gjort, er her det endelige resultat.
Jeg har inkluderet dette design som en gratis download ovenfor. Du er velkommen til at tjekke det ud selv. Bemærk, at du skal have produktkonfigurationen beskrevet i denne vejledning for at opnå de samme resultater.
BEMÆRK: Standardfarven for de fleste elementer WooCommerce af et produkt i Divi er nedarvet fra den sekundære farveværdi af indstillingerne for tematilpasning. Det kan være nemmere at opdatere denne sekundære farve, når først farvemodulet bejler.
endelige tanker
Som vi har lært, er Woo Mods ikke de eneste ting, der kan bruges til at udtrække dynamisk produktinformation. Product Information Accordion er et godt eksempel på, hvordan du kan bruge ethvert Divi-modul til at vise produktinformation på en unik og kortfattet måde. Du er velkommen til at udforske nye, spændende harmonika-design til dine produktsider. Og selvfølgelig kan du bruge flere rockermoduler i stedet for et harmonika for at opnå lignende resultater.
