Når vi oppretter en produktside i Divi, kan vi bruke trekkspillmodulen til å vise produktinformasjon ved hjelp av dynamisk innhold. Dette vil gi deg et unikt design for produktsidene, mens du beholder verdifull plass på siden.
I denne opplæringen viser vi deg hvordan du bruker Divis dynamiske innholdsfunksjon for å lage et produktinformasjonsspill, samt hvordan du designer trekkspillet (og dets innhold) ved hjelp av Divi Visual Builder.
La oss begynne.
undersøkelsen
Her er en forhåndsvisning av designet vi skal bygge i denne opplæringen.
Husk at du må ha et produktoppsett som beskrevet i denne opplæringen for å oppnå de samme resultatene.
Commencer
For å begynne, må du gjøre følgende:
- Hvis du ikke allerede har gjort det, installer og aktiver Divi-tema installert (eller Divi Builder-plugin hvis du ikke bruker Divi-tema).
- Installer og aktiver plugin WooCommerce. Hvis du konfigurerer WooCommerce for første gang må du kjøre den grunnleggende oppsettsveiviseren for å forberede butikken din. Når du er ferdig, er du klar til å legge til dine nye produkter.
- Lag et nytt produkt som vist nedenfor.
Sette opp prøveproduktet
For å konfigurere prøveproduktet for denne opplæringen, gå til Produkter> Legg til nytt. Gi produktet tittelen “Massasje (enkelt økt)” og klikk for å bruke Divi Builder.
Oppdater deretter følgende produktsideinnstillinger og produktinformasjon:
1. Under Oppsett av divisjonsside velger du Layout uten sidepanel.
2. Legg til / velg en produktkategori
3. Legg til produktbilde
4. Legg til innholdet i beskrivelsen.
5. Sous Data av produktet, endre produkttypen til Variabelt produkt.
6. Legg til et attributt med navnet “Type” med følgende verdier: Svensk | Varm stein | Aromaterapi | Dypt vev. Sørg for å velge “Brukt for varianter”.
7. Deretter i Varianter-fanen under veksle mellom données av produktet, bruk rullegardinoppføringen for å lage variasjoner fra alle attributter.
8. Velg "Angi vanlige priser" fra rullegardinmenyen for å angi den vanlige prisen for de tre variablene.
9. Skriv inn verdien "50" i dialogboksen og velg OK.
10. en Når du er ferdig, lagrer eller publiser produktet.
Du er nå klar til å begynne å designe oppsettet ditt med en tilpasset produkt-trekkspill.
Opprettelse av Produktinfo trekkspill med dynamisk innhold i Divi
Standard produktoppsett viser produktinformasjon ved hjelp av forskjellige Woo-moduler. For dette eksemplet ønsker vi å bruke trekkspillet til å vise tre hovedinformasjoner om produktet: produktbeskrivelse, tilleggsinformasjon og produktanmeldelser. Disse tre delene vises for øyeblikket i woo-fanemodulen. Alt vi trenger å gjøre er å fjerne woo tabs-modulen og erstatte den med en trekkspillmodul med samme informasjon introdusert via dynamisk innhold.
Slik gjør du det.
Klikk først for å bruke Divi på front-end-systemet for å distribuere den visuelle generatoren. Fjern deretter Woo Tabs-modulen.
Legg deretter til en ny trekkspillmodul for å erstatte fanene.
I hurtigvinduet for trekkspillinnstillinger klikker du på tannhjulikonet på det første trekkspillet for å åpne de enkelte trekkspillinnstillingene.
Skriv inn tittelen "Om produktet".
Hold deretter markøren over inntaksboksen for kroppsinnhold og klikk på ikonet for dynamisk innhold.
Velg "Produktbeskrivelse" fra listen over dynamiske innhold.
Dette vil vise den lange beskrivelsen av produktet vi har definert for produktet på backend.
Når det første trekkspillinnholdet er på plass, åpner du de andre trekkspillinnstillingene og oppdater følgende:
- Tittel: Spesifikasjoner
Legg deretter til det dynamiske innholdet "Tilleggsinformasjon om produktet" til kroppen.
Når det andre trekkspillinnholdet er klart, legger du til et nytt trekkspillelement og oppdaterer trekkspillinnstillingene som følger:
- Tittel: Tilleggsinformasjon
Deretter legger du til det dynamiske innholdet "Produktanmeldelser" i kroppen for å legge inn varen / innholdet i produktanmeldelsen.
MERKNAD: Forsikre deg om at du har lagt til minst en produktanmeldelse for å se innholdet på direktesiden.
Design av produkt- og innholdsavtalen med Divi
Nå som trekkspillet vårt har det dynamiske innholdet som viser produktinformasjon, er vi klare til å tilpasse det ved hjelp av innstillingene til den innebygde trekkspillmodulen.
Åpne innstillingene for trekkspillmodulen og oppdater følgende:
- Ikonfarge: # ff9375
- Bruk ikonstørrelse på ikonet: JA
- Ikon Fontstørrelse: 26px
- Bytt bakgrunnsfarge: #ffffff
- Åpen teksttittel Farge: #ff9375
- Teksttittel: #222222
- Tittel Font: Lato
- Tittel Police: Bold
- Tittel Font Style: TT
- Tekst Tittel Størrelse: 20px
- Plass på bokstavene i tittelen: 0.2em
- Høyden på tittellinjen: 2em
- Body font: Lato
- Kropps tekststørrelse: 16px
- Kroppshøyde: 1.8em
- Link tekstfarge: #ff9375
Dette vil målrette alle koblingene du har i det dynamiske innholdet for hvert trekkspill, for eksempel stjerneklassifisering.
- Tekstfarge på den uordnede listen: # ff9375
- Uordnet listetype: Circle
- Ubestilt innrykk på listeelement: 5%
- Bredde på grensen: 0px
- Bredde på øverste kant: 1px
- Farge på øverste kant: #222222
Og for det siste trinnet, la oss legge til et lite css-ekstrakt for å trekke ut standardmarginen mellom trekkspillskalaene.
I kategorien Avansert legger du til følgende CSS i Toggle-elementet:
margin-bottom: 0px;
La oss nå ta en titt på den endelige utformingen av trekkspillet for produktinformasjon.
Endelige justeringer av oppsettet
Noen justeringer kan gjøres i oppsettet for å matche designet til trekkspillet. For eksempel kan vi justere skrifttypen til hver av modulene til Lato, legge til en egendefinert kant- og kantradius rundt rullegardinlisten for variabler, og oppdatere Legg i handlekurven-knappen med en solid bakgrunnsfarge som passer ham.
Når dette er gjort, er her det endelige resultatet.
Jeg har tatt med dette designet som en gratis nedlasting ovenfor. Ta gjerne en titt på det selv. Merk at du må ha produktkonfigurasjonen beskrevet i denne opplæringen for å oppnå de samme resultatene.
MERK: Standardfargen for de fleste elementer WooCommerce av et produkt i Divi er arvet fra den sekundære fargeverdien til tematilpasningsinnstillingene. Det kan være lettere å oppdatere denne sekundærfargen når fargemodulen er blitt besvart.
avslutt~~POS=TRUNC tanker
Som vi har lært, er Woo Mods ikke de eneste tingene som kan brukes til å hente ut dynamisk produktinformasjon. Produktinformasjonsspillet er et godt eksempel på hvordan du kan bruke hvilken som helst Divi-modul til å vise produktinformasjon på en unik og kortfattet måte. Utforsk gjerne nye og spennende trekkspilldesign for produktsidene dine. Og selvfølgelig kan du bruke flere vippemoduler i stedet for et trekkspill for å oppnå lignende resultater.
