Den måde, du designer din produktside på, har en umiddelbar indflydelse på din adfærd besøgende. Et veldesignet og personligt produktsidedesign kan tillade besøgende nemmere at beslutte, om de vil købe dit produkt. Hvis du leder efter en måde at gøre din produktside mere engagerende på, vil du sandsynligvis kunne lide denne vejledning.
Vi viser dig, hvordan du inkluderer et dynamisk produktfordele-gitter i dit design ved hjælp af Divi og pluginnet Advanced Custom Fields. Vi starter med at oprette en feltgruppe for fordele. Vi vil derefter udfylde de tilpassede felter på vores produktside og inkludere indhold dynamisk i vores produktsideskabelon.
Muligt resultat
Før vi dykker ned i vejledningen, lad os hurtigt se på resultatet på forskellige skærmstørrelser.
1. Installer plug-in-gruppen ACF-plugin og produktfordel
Installer det avancerede tilpassede felt-plugin
For at vise de forskellige produktfordele i backend af vores produkter, vil vi bruge pluginnet gratis Avancerede brugerdefinerede felter. Få adgang til din WordPress-backend> Plugins> Tilføj nyt> Find ACF-plugin> Installer> Aktivér .
Gå til brugerdefinerede felter, og tilføj en ny gruppe af felter
Når du har installeret og aktiveret ACF-plugin, vil du kunne få adgang til dine brugerdefinerede felter og tilføje en ny gruppe af felter.
Feltgruppeindstillinger
Giv din nye feltgruppe en titel, og lad den kun vises på produktsider.
- "Meddelelsestype" er lig med "Produkt"
Tilføj et første felt
Fortsæt ved at tilføje et nyt felt til titlen på din første produktfordel.
- Feltetiket: Fordelens titel 1
- Felttype: tekst
Gentag trinnet for de resterende felter
Gør det samme for de andre fordele ved produktet og deres beskrivelser. Alle disse felter kræver den "tekst" -feltype, der er tildelt dem.
- Tjenestens titel 1
- Beskrivelse af fordelene 1
- Tjenestens titel 2
- Beskrivelse af fordelene 2
- Tjenestens titel 3
- Beskrivelse af fordelene 3
- Tjenestens titel 4
- Beskrivelse af fordelene 4
2. Tilføj fordele til produkter
Åbn eller tilføj et nyt produkt
Når din feltgruppe og felter er oprettet, kan du tilføje produktfordelene til dine produkter på et individuelt niveau. Åbn et produkt efter eget valg, eller opret et nyt.
Udfyld felterne Produktfordele
Og opfyld fordelene ved produktet.
3. Opret en produktsideskabelon i Divi Theme Builder
Gå til Divi Theme Builder, og tilføj en ny skabelon
Det er tid til at starte med Divi! For at oprette en ny skabelon skal du gå til Divi Theme Builder og klikke på "Tilføj en ny skabelon".
Brug en skabelon på alle produkter
Vi bruger denne skabelon på alle produkter, men du er velkommen til at vælge produkter med en bestemt kategori eller etiket i stedet.
Indtast model body model skabelon editor
Indtast derefter modellen på modellen ved at klikke på "Tilføj et brugerdefineret organ" og vælge "Opret et brugerdefineret organ".
Rediger sektion # 1
Baggrundsfarve
Når du er inde i skabelonditoren, vil du bemærke et afsnit. Åbn det afsnit, og skift baggrundsfarve til sort.
- Baggrundsfarve: # 000000
afstand
Gå videre til sektionens designfane, og tilføj nogle brugerdefinerede polstring af top og bund.
- Top polstring: 10px
- Bund polstring: 10px
Tilføj en ny linje
Kolonnestruktur
Lad os fortsætte med at tilføje en ny linje til det afsnit, der har følgende struktur:
afstand
Uden at tilføje nogen mods, lad os åbne rækkeindstillingerne og foretage nogle justeringer i afstanden.
- Brug personlig tagrender: Ja
- Tagrendebredde: 1
- Bredde: 90%
- Maksimal bredde: 100%
afstand
Fjern al indvendig afstand i top og bund.
- Høj intern margen: 0 px
- Lav intern margen: 0px
Føj Woo Cart Notice-modulet til kolonnen
Dynamisk indhold
Det eneste modul, vi har brug for på denne linje og dette afsnit, er Woo Cart Notice-modulet. Sørg for, at "Dette produkt" er valgt i det dynamiske afsnit.
- Produkt: Dette produkt
Farvebaggrund
Åbn derefter modulindstillingerne og brug en gennemsigtig baggrund.
- Baggrundsfarve: rgba (0,0,0,0)
Tekstindstillinger
Skift til fanen "Design", og skift tekstskrifttypen.
- Tekstskrift: Karla
Knapindstilling
Afslut plugin-indstillingerne ved at definere stilindstillingerne:
- Brug brugerdefinerede stilarter til knap: Ja
- Knaptekststørrelse: 20px
- Knaptekstfarve: # 000000
- Knapbaggrund: # ffd623
- Knapkantbredde: 0px
- Afrundet kantknap: 0px
- Knapfont: Oswald
- Knap skrifttype: Skift
- Høj intern margen: 20 px
- Lav intern margen: 20px
- Venstre indre margen: 50px
- Intern højre margen: 50px
Tilføj sektion # 2
Gradient baggrund
Tilføj et andet regelmæssigt afsnit under det foregående. Åbn derefter indstillingerne og brug en gradientbaggrund som følger:
- Farve 1: # 000000
- Farve 2: #ffffff
- Startposition:
- Desktop: 30 %
- Tablet: 57 %
- Telefon: 54%
- Slutposition:
- Desktop: 30 %
- Tablet: 57 %
- Telefon: 54%
afstand
Lad os gå til fanen Design og tilføje en høj intern margen.
- Top polstring: 150px
Tilføj en ny linje
Kolonnestruktur
Fortsæt med at tilføje en ny linje med samme struktur som vist nedenfor:
dimensionering
Uden at tilføje nogen mods endnu, åbner vi indstillingerne og ændrer afstanden som følger:
- Brug tilpassede tagrender: Ja
- Tagrendeplads: 1
- Bredde: 95%
- Maksimal bredde: 2560px
- Liniejustering: Center
Mellemrum
Vi fjerner også den øverste interne margen.
- Top polstring: 0px
Hovedelement
Og at centrere indhold kolonne på DeskTop, vil vi bruge to linjer CSS-kode i hovedelementet af modullinjen.
Desktop:
display: flex; align-elementer: center;
Tablet og telefon:
display: block;
Føj Woo Image-modulet til kolonne 1
Dynamisk indhold
Det er tid til at tilføje moduler, vi starter med Woo Images-modulet i kolonne 1. Sørg for, at "Dette produkt" er valgt.
- Produkt: Dette produkt
Lodret rullende animationseffekt
Vi tilføjer subtil bevægelse til billedet ved hjælp af den vandrette bevægelsesrulningseffekt i den avancerede fane.
- Aktivér lodret bevægelse: Ja
- Start offset:
- Kontor: -4
- Tablet og telefon: 0
- Gennemsnitlig forskydning: 0
- Slutforskydning: 0
- Trigger bevægelseseffekt: midten af elementet
Føj Woo-titelmodulet til kolonne 2
Dynamisk indhold
I kolonne 2 er det første modul, vi skal bruge, et Woo-titelmodul. Sørg for, at "Dette produkt" er valgt i boksen indhold dynamisk.
- Produkt: Dette produkt
Titeltekstindstillinger
Gå derefter til fanen design, og stil titelteksten som følger:
- Titeltype: Oswald
- Titelskrifttype: store bogstaver
- Titelfarvefarve: # ffd623
- Titeltekststørrelse: 80px
afstand
Fuldfør Woo-titelmodulet ved at tilføje venstre og højre marginer.
- Venstre margen: 5%
- Højre margen: 5%
Føj Woo-beskrivelsesmodulet til kolonne 2
Dynamisk indhold
Lad os gå videre til det næste modul, som er et Woo-beskrivelsesmodul. Vi bruger følgende dynamiske indhold til dette:
- Produkt: Dette produkt
- Beskrivelsestype: Kort beskrivelse
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekstskrift: Karla
- Tekstfarve: #dbdbdb
- Tekststørrelse: 17 px (desktop og tablet), 15 px (telefon)
- Tekstlinjehøjde: 1,9 em
dimensionering
Skift derefter bredden på forskellige skærmstørrelser.
- Bredde: 59% (desktop), 82% (tablet og telefon)
afstand
Fuldfør Woo-beskrivelsesmodulet ved at tilføje tilpassede margenværdier i afstandsindstillingerne.
- Øvre margen: 50px
- Nederste margin: 100px
- Venstre margen: 5%
- Højre margen: 5%
Føj Blurb-modulet til 2-kolonnen
Dynamisk indhold
For at vise de produktfordele, vi tilføjede i den første del af denne tutorial, bruger vi Blurb-modulerne. Tilføj et første Blurb-modul, og brug det dynamiske indhold i den første fordel, der er produceret til titlen og kroppen.
- Titel: Fordel Titel 1
- Organ: Fordel Beskrivelse 1
Upload billede
Upload et billede eller brug et ikon efter eget valg næste. Du kan finde dem, vi har brugt i hele denne tutorial i den downloadmappe, du var i stand til at downloade i begyndelsen af denne tutorial.
Indstillinger for billede / ikon
Gå videre til modulets designfane og ændre billed / ikonindstillingerne som følger:
- Placering af billede / ikon: Øverst
- Billed / ikon Justering: Venstre
Titeltekstindstillinger
Vi ændrer titeltekstindstillingerne næste.
- Titeltype: Oswald
- Titel Font Style: Store bogstaver
- Titeltekststørrelse: 25px
Indstillinger for kropstekst
Sammen med kropstekstindstillingerne.
- Kropsskrifttype: Karla
- Tekststørrelse: 17 px (desktop og tablet), 15 px (telefon)
- Kropslinjens højde: 1,9 em
dimensionering
Gå derefter til størrelsesindstillingerne, og skift bredderne. Det er vigtigt at bruge en hovedbredde mindre end 50%, så vi kan vise to Blurb-moduler side om side i de næste trin.
- Billedbredde: 25%
- Bredde: 49%
afstand
Vi tilføjer også mellemrum omkring Blurb-modulet ved hjælp af tilpassede polstringsværdier på forskellige skærmstørrelser.
- Øvre polstring: 8%
- Nedre polstring: 8%
- Venstre polstring: 8% (desktop og tablet), 2% (telefon)
- Høj polstring: 8% (desktop og tablet) 2% (telefon)
Hovedelement
Nu skal vi sikre os, at modulet Oversigt viser teksten ved siden af hinanden i to trin. Først skal vi sikre os, at modulbredden er mindre end 50% (som vi gjorde i det foregående trin). Dernæst bruger vi ejendommen på rækken. Vi tilføjer denne CSS-egenskab på hovedelementet i det avancerede afsnit.
display: inline-block;
Klon oversigtsmodulet 3 gange
Når du har gennemført den første Blurb-mod, kan du klone den tre gange. Du vil automatisk bemærke, at Blurb-modulerne vises i et gitter.
Rediger Blurb-modulbillederne
Rediger billedet i hver duplikat af Blurb-pod. Du kan finde dem i downloadmappen, som du muligvis har downloadet i begyndelsen af denne artikel.
Rediger det dynamiske indhold i Blurb-modulet
Rediger også det dynamiske indhold i hvert duplikat Blurb-modul.
- Titel: Tjenestens titel (2,3 eller 4)
- Organ: beskrivelse af fordelene (2,3 eller 4)
Tilføj rammer til Blurb-moduler individuelt
Blurb-modul 1 kantindstillinger
For at afslutte designet af vores gitter skal vi tilføje grænser til Blurb-modulerne på et individuelt niveau. Åbn den første Blurb-mod, og brug en lige kant.
- Højre kantbredde: 1 stk
- Højre kantfarve: # ffd623
Tilføj også en bundkant til det første Blurb-modul.
- Nederste kantbredde: 1 stk
- Nederste kantfarve: # 000000
Blurb-modul 2 kantindstillinger
Åbn derefter det andet Blurb-modul og brug en bundkant.
- Nederste kantbredde: 1 stk
- Nederste kantfarve: # 000000
Blurb-modul 3 kantindstillinger
Udfør gitterdesignet ved at tilføje en lige kant til det tredje Blurb-modul.
- Højre kantbredde: 1 stk
- Højre kantfarve: # ffd623
Tilføj Woo Læg i kurv Modul i kolonne 2
Dynamisk indhold
Det sidste modul, vi har brug for i vores design, er et Woo Add to Cart-modul. Sørg for, at "Dette produkt" er valgt i området med dynamisk indhold.
- Produkt: Dette produkt
Feltindstillinger
Gå til næste designfane, og skift feltindstillinger.
- Felter baggrundsfarve: #ffffff
- Felttekstfarve: # 000000
- Rundede felter: 0px (alle hjørner)
- Bredden af markens nedre kant: 1 stk
- Farve på markens nederste kant: # 000000
Knapindstillinger
Stil derefter knappen tilsvarende:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 20 pixels
- Knaptekstfarve: # 000000
- Knappens baggrundsfarve: # ffd623
- Knapkantbredde: 0px
- Knapgrænseradius: 0px
- Knapfont: Oswald
- Knap skrifttype: store bogstaver
- Øvre polstring: 20px
- Bundpolstring: 20px
- Venstre polstring: 50px
- Højre polstring: 50px
afstand
Og fuldfør modulparametrene ved at tilføje tilpassede marginværdier.
- Øvre margen: 100px
- Venstre margen: 5%
3. Gem ændringerne af temageneratoren, og se resultatet af resultatet
Når du er færdig med at designe produktsideskabelonen, kan du gemme alle dine Theme Builder-ændringer og vise resultaterne på dine produkter!
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
endelige tanker
I denne artikel har vi vist dig, hvordan du bliver kreativ med din næste Divi-produktsideskabelon. Specifikt har vi vist dig, hvordan du inkluderer et dynamisk produktfordelgitter for at tilføje yderligere fordele til din produktside. Vi oprettede denne tutorial ved hjælp af Divi i kombination med Advanced Custom Fields plugin. Du kan også downloade JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
