Gå til hovedindhold

Oprettelse af et dynamisk fordelingsnet for WooCommerce-produkter

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Den måde, du designer din produktside på, har en øjeblikkelig indflydelse på dine besøgendes adfærd. Et veludformet og personlig produktsidesign kan gøre det lettere for besøgende at beslutte, om de vil købe dit produkt. Hvis du leder efter en måde at gøre din produktside mere engagerende, vil du sandsynligvis lide denne vejledning. 

Vi viser dig, hvordan du inkluderer et dynamisk produktfordelingsgitter i dit design ved hjælp af Divi og Advanced Custom Fields-pluginnet. Vi starter med at oprette en gruppe felter til fordele. Vi udfylder derefter de brugerdefinerede felter på vores produktside og inkluderer det dynamiske indhold i vores produktsideskabelon. 

Muligt resultat

Før vi dykker ned i vejledningen, lad os hurtigt se på resultatet på forskellige skærmstørrelser.

Muligt resultat divi

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 bruger vi det gratis Advanced Custom Fields-plugin. Få adgang til din WordPress-backend> Plugins> Tilføj nyt> Find ACF-plugin> Installer> Aktivér .

Installer adavanced tilpasset felt plugin

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.

Opret ACF-felter

Feltgruppeindstillinger

Giv din nye feltgruppe en titel, og lad den kun vises på produktsider.

  • "Meddelelsestype" er lig med "Produkt"
Tilføj regler

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
Tilføj AC-felt
Divi felt tilpasning

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
Konfigurer ACF-felter

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.

Divi produkt oprettelse

Udfyld felterne Produktfordele

Og opfyld fordelene ved produktet.

Udfyld felterne med divi-fordele

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".

Divi tema bygherre

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.

Tilføj alle woocommerce-produkter

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".

Bygger divi krop

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
Divi sektion baggrundskonfiguration

afstand

Gå videre til sektionens designfane, og tilføj nogle brugerdefinerede polstring af top og bund.

  • Top polstring: 10px
  • Bund polstring: 10px
Konfiguration af afstand for divisektion

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:

Konfiguration af linjemodullayout

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%
Indstillinger for linjemodulafstand

afstand

Fjern al indvendig afstand i top og bund.

  • Høj intern margen: 0 px
  • Lav intern margen: 0px
Indstillinger for afstand til Divi Line-modul

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.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

  • Produkt: Dette produkt
Indstillinger woo cart meddelelsesmodul divi

Farvebaggrund

Åbn derefter modulindstillingerne og brug en gennemsigtig baggrund.

  • Baggrundsfarve: rgba (0,0,0,0)
Woo cart modul divi indstillinger

Tekstindstillinger

Skift til fanen "Design", og skift tekstskrifttypen.

  • Tekstskrift: Karla
Divi-modul skrifttypeindstillinger

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
Farveindstillinger for Woo-varselmodul
  • Knapfont: Oswald
  • Knap skrifttype: Skift
Woo vognens varselmodul justering af farvedesign
  • Høj intern margen: 20 px
  • Lav intern margen: 20px
  • Venstre indre margen: 50px
  • Intern højre margen: 50px
Konfigurationsdesign modul woo vogn meddelelse

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%
Divi line modul bagjustering

afstand

Lad os gå til fanen Design og tilføje en høj intern margen.

  • Top polstring: 150px
Konfiguration af afstand for Divi Line-modul

Tilføj en ny linje

Kolonnestruktur

Fortsæt med at tilføje en ny linje med samme struktur som vist nedenfor:

Divi linjestil konfiguration

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
Divi-modul til tagrendekonfiguration

Mellemrum

Vi fjerner også den øverste interne margen.

  • Top polstring: 0px
Divi-modulafstandskonfiguration

Hovedelement

Og for at centrere indholdet af kolonnen på skrivebordet skal vi bruge to linjer CSS-kode i hovedelementet i række-modulet.

Desktop:

display: flex; align-elementer: center;

Tablet og telefon:

display: block;
Indstillinger for Divi Line-modulstil

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
Woocommerce produktbillede modulindstillinger

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
Divi-billedmoduljustering

Føj Woo-titelmodulet til kolonne 2

Dynamisk indhold

I kolonne 2 er den første mod, vi har brug for, en Woo-titelmod. Sørg for, at "Dette produkt" er valgt i området med dynamisk indhold.

  • Produkt: Dette produkt
produkt fordel net

Titeltekstindstillinger

Gå derefter til fanen design, og stil titelteksten som følger:

  • Titeltype: Oswald
  • Titelskrifttype: store bogstaver
  • Titelfarvefarve: # ffd623
  • Titeltekststørrelse: 80px
Divi titel modul design justering

afstand

Fuldfør Woo-titelmodulet ved at tilføje venstre og højre marginer.

  • Venstre margen: 5%
  • Højre margen: 5%
Divi titel modul indstilling

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
Produktbeskrivelse modulindstillinger

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
Farvejusteringsmodul beskrivelse divi

dimensionering

Skift derefter bredden på forskellige skærmstørrelser.

  • Bredde: 59% (desktop), 82% (tablet og telefon)
Divi opsummeringsmodul breddejustering

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%
Divi produktbeskrivelsesmodul

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
Divi-opsummeringsmodulets tekstindstilling

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.

Billedmodul opsummering divi konfiguration

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
Divi-justeringsmodul

Titeltekstindstillinger

Vi ændrer titeltekstindstillingerne næste.

  • Titeltype: Oswald
  • Titel Font Style: Store bogstaver
  • Titeltekststørrelse: 25px
Konfigurer divi resume modul skrifttype

Indstillinger for kropstekst

Sammen med kropstekstindstillingerne.

  • Kropsskrifttype: Karla
  • Tekststørrelse: 17 px (desktop og tablet), 15 px (telefon)
  • Kropslinjens højde: 1,9 em
Konfigurer tekstmoduloversigt div

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%
Konfigurer dimensionering af divi-opsummeringsmodul

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)
Konfigurer afstanden til divi-opsummeringsmodul

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;
Tilføj CSS kode divi modul

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.

Produktnavn divi sektion

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.

Divi-opsummeringsmodulbillede

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)
Divi resume modul regler

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
Afrundet opsætningsmodul med afrundet kantkonfiguration

Tilføj også en bundkant til det første Blurb-modul.

  • Nederste kantbredde: 1 stk
  • Nederste kantfarve: # 000000
Konfigurer divi-bundmargenen
Blurb-modul 2 kantindstillinger

Åbn derefter det andet Blurb-modul og brug en bundkant.

  • Nederste kantbredde: 1 stk
  • Nederste kantfarve: # 000000
Oversigt divi for konfigurationsgrænsemodul
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
produkt fordel net

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
Føj til kortinddelingsmodulindstillinger

Feltindstillinger

Gå til næste designfane, og skift feltindstillinger.

  • Felter baggrundsfarve: #ffffff
  • Felttekstfarve: # 000000
Konfigurer farve stil tilføj til kurv divi modul
  • Rundede felter: 0px (alle hjørner)
  • Bredden af ​​markens nedre kant: 1 stk
  • Farve på markens nederste kant: # 000000
Konfigurer afstand for divisionssnit

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
Konfigurer divi-knapdesign
  • Knapfont: Oswald
  • Knap skrifttype: store bogstaver
Konfigurer divi-knap
  • Øvre polstring: 20px
  • Bundpolstring: 20px
  • Venstre polstring: 50px
  • Højre polstring: 50px
Konfigurer dimensionering af divi-modul

afstand

Og fuldfør modulparametrene ved at tilføje tilpassede marginværdier.

  • Øvre margen: 100px
  • Venstre margen: 5%
Konfigurer divi-afstand

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!

Gem divi design
Gem divi-ændringer

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.

Demoresultat

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.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld