Måten du designer produktsiden din på har en umiddelbar innvirkning på oppførselen til din Besøkende. Et godt designet og personlig produktsidedesign kan tillate Besøkende lettere å bestemme om de vil kjøpe produktet ditt. Hvis du leter etter en måte å gjøre produktsiden din mer engasjerende på, vil du sannsynligvis like denne opplæringen. 

Vi viser deg hvordan du inkluderer et dynamisk produktfordeler-rutenett i designet ditt ved hjelp av Divi og Advanced Custom Fields-plugin. Vi starter med å opprette en feltgruppe for fordeler. Vi vil deretter fylle ut de tilpassede feltene på produktsiden vår og inkludere innhold dynamisk i vår produktsidemal. 

Mulig utfall

Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.

Mulig resultat divi

1. Installer plugin-modulen ACF-plugin og produktfordel

Installer avanserte tilpassede felt-plugin

For å vise de forskjellige produktfordelene i bakenden av produktene våre, vil vi bruke plugin gratis Avanserte egendefinerte felt. Få tilgang til din WordPress-backend> Plugins> Legg til ny> Finn ACF-plugin> Installer> Aktiver .

Installer avansert tilpasset feltplugin

Gå til tilpassede felt og legg til en ny gruppe felt

Når du har installert og aktivert ACF-plugin, vil du kunne få tilgang til dine tilpassede felt og legge til en ny gruppe felt.

Lag ACF-felt

Innstillinger for feltgruppe

Gi den nye feltgruppen en tittel, og la den bare vises på produktsidene.

  • "Meldingstype" tilsvarer "Produkt"
Legg til regler

Legg til et første felt

Fortsett med å legge til et nytt felt for tittelen på den første produktfordelen.

  • Feltetikett: Tittel på fordel 1
  • Felttype: tekst
Legg til AC-felt
Divi felttilpasning

Gjenta trinnet for de gjenværende feltene

Gjør det samme for de andre fordelene med produktet og beskrivelsene av dem. Alle disse feltene krever "Tekst" -feltypen som er tildelt dem.

  • Tittel på tjenesten 1
  • Beskrivelse av fordelene 1
  • Tittel på tjenesten 2
  • Beskrivelse av fordelene 2
  • Tittel på tjenesten 3
  • Beskrivelse av fordelene 3
  • Tittel på tjenesten 4
  • Beskrivelse av fordelene 4
Konfigurer ACF-felt

2. Legg fordeler til produktene

Åpne eller legg til et nytt produkt

Når feltgruppen og feltene er opprettet, kan du legge til produktfordelene i produktene dine på individuelt nivå. Åpne et produkt du ønsker, eller lag et nytt.

Divi produktoppretting

Fullfør produktfordelene

Og oppfylle fordelene med produktet.

Fyll ut divi fordeler felt

3. Lag en produktsidemal i Divi Theme Builder

Gå til Divi Theme Builder og legg til en ny mal

Det er på tide å starte med Divi! For å opprette en ny mal, gå til Divi Theme Builder og klikk på "Legg til en ny mal".

Divi temabygger

Bruk en mal på alle produktene

Vi bruker denne malen på alle produkter, men velg gjerne produkter med en bestemt kategori eller etikett i stedet.

Legg til alle woocommerce-produkter

Gå inn i modellens kroppsredigeringsprogram

Skriv deretter inn kroppen på modellen ved å klikke på "Legg til et tilpasset organ" og velge "Opprett et tilpasset organ".

Bygge divi kropp

Rediger seksjon 1

Bakgrunnsfarge

Når du er inne i maleditoren, vil du legge merke til en seksjon. Åpne den delen og endre bakgrunnsfargen til svart.

  • Bakgrunnsfarge: # 000000
Divi seksjon bakgrunn konfigurasjon

avstanden

Gå videre til seksjonens designfane og legg til noe tilpasset topp- og bunnpolstring.

  • Topp polstring: 10px
  • Bunn polstring: 10px
Konfigurasjon av avstand mellom divisjoner

Legg til en ny linje

Kolonnestruktur

La oss fortsette med å legge til en ny linje til delen som har følgende struktur:

Konfigurasjon av linjemoduloppsett

avstanden

Uten å legge til noen mods, la oss åpne radinnstillingene og gjøre noen avstandsjusteringer.

  • Bruk personlig takrenne: Ja
  • Rennebredde: 1
  • Bredde: 90%
  • Maksimal bredde: 100%
Innstillinger for linjemodulavstand

avstanden

Fjern alt topp- og bunnavstand.

  • Høy intern margin: 0px
  • Lav intern margin: 0px
Avstandsinnstillinger for divi-linjemodul

Legg til Woo Cart Notice-modulen i kolonnen

Dynamisk innhold

Den eneste modulen vi trenger på denne linjen og delen er Woo Cart Notice-modulen. Forsikre deg om at “Dette produktet” er valgt i den dynamiske delen.

  • Produkt: Dette produktet
Innstillinger woo cart varselmodul divi

Fargebakgrunn

Åpne deretter modulinnstillingene og bruk en gjennomsiktig bakgrunn.

  • Bakgrunnsfarge: rgba (0,0,0,0)
Woo cart modul divi innstillinger

Tekstinnstillinger

Bytt til "Design" -fanen og endre tekstfonten.

  • Tekstskrift: Karla
Divi-modul skriftinnstillinger

Knappinnstilling

Fullfør plugin-innstillingene ved å definere stilinnstillingene:

  • Bruk egendefinerte stiler for knapp: Ja
  • Knapptekststørrelse: 20px
  • Tekstfarge på knapp: # 000000
  • Knappbakgrunn: # ffd623
  • Knappens bredde: 0px
  • Avrundet kantknapp: 0px
Woo cart varsel modul fargeinnstillinger
  • Knappefont: Oswald
  • Knapp Font Style: Shift
Woo cart varselmodul fargedesignjustering
  • Høy intern margin: 20px
  • Lav intern margin: 20px
  • Venstre indre margin: 50px
  • Intern høyre marg: 50px
Konfigurasjonsdesignmodul woo-varsel

Legg til del 2

Gradient bakgrunn

Legg til en annen vanlig seksjon under den forrige. Åpne deretter innstillingene og bruk en gradientbakgrunn som følger:

  • Farge 1: # 000000
  • Farge 2: #ffffff
  • Startposisjon:
    • Skrivebord: 30%
    • Nettbrett: 57%
    • Telefon: 54%
  • Sluttposisjon:
    • Skrivebord: 30%
    • Nettbrett: 57%
    • Telefon: 54%
Divi linjemodul bakjustering

avstanden

La oss gå til Design-fanen og legge til en høy intern margin.

  • Topp polstring: 150px
Divi line modulavstandskonfigurasjon

Legg til en ny linje

Kolonnestruktur

Fortsett med å legge til en ny linje med samme struktur som vist nedenfor:

Divi linjestil konfigurasjon

dimensjonering

Uten å legge til noen mods ennå, åpner vi innstillingene og endrer avstanden på følgende måte:

  • Bruk egendefinerte takrenner: Ja
  • Rennestein: 1
  • Bredde: 95%
  • Maksimal bredde: 2560px
  • Line Alignment: Center
Divi-modul for takrennekonfigurasjon

Mellomrom

Vi fjerner også den øverste indre marginen.

  • Topp polstring: 0px
Divi-modulavstandskonfigurasjon

Hovedelement

Og å sentrere innhold kolonne på DeskTop, vil vi bruke to linjer med CSS-kode i hovedelementet i modullinjen.

Desktop:

display: flex; align-items: center;

Nettbrett og telefon:

skjerm: blokk;
Innstillinger for stillinjemodulstil

Legg til Woo Image-modulen i kolonne 1

Dynamisk innhold

Det er på tide å legge til moduler. Vi starter med Woo Images-modulen i kolonne 1. Kontroller at “Dette produktet” er valgt.

  • Produkt: Dette produktet
Woocommerce produktbildemodulinnstillinger

Vertikal rullende animasjonseffekt

Vi legger til subtil bevegelse i bildet ved å bruke den horisontale bevegelsesrulleeffekten i den avanserte fanen.

  • Aktiver vertikal bevegelse: Ja
  • Start forskyvning:
    • Kontor: -4
    • Nettbrett og telefon: 0
  • Gjennomsnittlig offset: 0
  • Sluttforskyvning: 0
  • Trigger bevegelseseffekt: midten av elementet
Divi image module justering

Legg til Woo-tittelmodulen i kolonne 2

Dynamisk innhold

I kolonne 2 er den første modulen vi trenger en Woo-tittelmodul. Sørg for at "Dette produktet" er valgt i boksen innhold dynamisk.

  • Produkt: Dette produktet
produktfordeler nett

Tekstinnstillinger for tittel

Gå deretter til designfanen og stil tittelteksten slik:

  • Tittel font: Oswald
  • Tittel font stil: store bokstaver
  • Tekstfarge på tittelen: # ffd623
  • Tittelstørrelse: 80px
Divi tittelmodul designjustering

avstanden

Fullfør Woo-tittelmodulen ved å legge til venstre og høyre marg.

  • Venstre margin: 5%
  • Høyre margin: 5%
Divi title module setting

Legg til Woo-beskrivelsesmodulen i kolonne 2

Dynamisk innhold

La oss gå videre til neste modul, som er en Woo-beskrivelsesmodul. Vi bruker følgende dynamiske innhold til dette:

  • Produkt: Dette produktet
  • Beskrivelsestype: Kort beskrivelse
Produktbeskrivelse modulinnstillinger

Tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

  • Tekstskrift: Karla
  • Tekstfarge: #dbdbdb
  • Tekststørrelse: 17 px (stasjonær og nettbrett), 15 px (telefon)
  • Tekstlinje høyde: 1,9 em
Fargejusteringsmodul beskrivelse div

dimensjonering

Endre deretter bredden på forskjellige skjermstørrelser.

  • Bredde: 59% (stasjonær), 82% (nettbrett og telefon)
Divi sammendragsmodul breddejustering

avstanden

Fullfør Woo-beskrivelsesmodulen ved å legge til egendefinerte marginverdier i avstandsinnstillingene.

  • Øvre margin: 50px
  • Bunnmargin: 100px
  • Venstre margin: 5%
  • Høyre margin: 5%
Divi produktbeskrivelsesmodul

Legg til Blurb-modulen i 2-kolonnen

Dynamisk innhold

For å vise produktfordelene som vi la til i den første delen av denne opplæringen, bruker vi Blurb-modulene. Legg til en første Blurb-modul og bruk det dynamiske innholdet i den første fordelen som er produsert for tittelen og kroppen.

  • Tittel: Fordel Tittel 1
  • Kropp: Fordel Beskrivelse 1
Divi sammendrag modul tekstinnstilling

Last opp bilde

Last opp et bilde eller bruk et ikon etter eget valg. Du kan finne de vi har brukt gjennom denne opplæringen i nedlastingsmappen du kunne laste ned i begynnelsen av denne opplæringen.

Bildemodul sammendrag divi konfigurasjon

Innstillinger for bilde / ikon

Gå videre til modulens designfane og endre innstillingene for bilde / ikon som følger:

  • Bilde / ikonplassering: Topp
  • Bilde / ikon Justering: Venstre
Divi justeringsmodul

Innstillinger for titteltekst

Vi endrer innstillingene for titteltekst neste.

  • Tittel Font: Oswald
  • Tittel Font Style: Store bokstaver
  • Tittel Tekststørrelse: 25px
Konfigurer font for divi-sammendragsmodul

Innstillinger for kroppstekst

Sammen med tekstinnstillingene.

  • Body font: Karla
  • Tekststørrelse: 17 px (stasjonær og nettbrett), 15 px (telefon)
  • Linjehøyde: 1,9 em
Konfigurer tekstmodul sammendrag div i

dimensjonering

Gå deretter til størrelsesinnstillingene og endre bredden. Det er viktig å bruke en hovedbredde på mindre enn 50%, slik at vi kan vise to Blurb-moduler side om side i de neste trinnene.

  • Bildebredde: 25%
  • Bredde: 49%
Konfigurer størrelsen på divi-sammendragsmodulen

avstanden

Vi vil også legge til mellomrom rundt Blurb-modulen ved å bruke egendefinerte polstringsverdier på forskjellige skjermstørrelser.

  • Øvre polstring: 8%
  • Nedre polstring: 8%
  • Venstre polstring: 8% (stasjonær og nettbrett), 2% (telefon)
  • Høyre polstring: 8% (stasjonær og nettbrett) 2% (telefon)
Konfigurer avstand for divi-sammendragsmodul

Hovedelement

Nå skal vi sørge for at Sammendrag-modulen viser teksten ved siden av hverandre, i to trinn. Først skal vi sørge for at modulbredden er mindre enn 50% (som vi gjorde i forrige trinn). Deretter bruker vi eiendommen på raden. Vi vil legge til denne CSS-egenskapen på hovedelementet i den avanserte delen.

display: inline-block;
Legg til CSS-divi-modul

Klone sammendragsmodulen 3 ganger

Når du har fullført den første Blurb-moden, kan du klone den tre ganger. Du vil automatisk merke at Blurb-modulene vises i et rutenett.

Produktnavn diviseksjon

Rediger Blurb-modulbildene

Rediger bildet i hver dupliserte Blurb-pod. Du finner dem i nedlastingsmappen du kanskje har lastet ned i begynnelsen av denne artikkelen.

Divi sammendragsmodulbilde

Endre det dynamiske innholdet i Blurb-modulen

Endre også det dynamiske innholdet i hver dupliserte Blurb-modul.

  • Tittel: Tittel på tjenesten (2,3 eller 4)
  • Karosseri: beskrivelse av fordelene (2,3 eller 4)
Divi oppsummeringsmodul regler

Legg grenser til Blurb-moduler hver for seg

Blurb-innstillinger for modul 1

Nå, for å fullføre utformingen av rutenettet vårt, skal vi legge til grenser til Blurb-modulene på et individuelt nivå. Åpne den første Blurb mod og bruk en rett kant.

  • Høyre kantbredde: 1px
  • Høyre kantfarge: # ffd623
Avrundet modul for avrundede rammekonfigurasjonsdivisjoner

Legg også til en bunnkant til den første Blurb-modulen.

  • Nederste kantbredde: 1px
  • Nedre kantfarge: # 000000
Konfigurer divi bunnmargen
Blurb-innstillinger for modul 2

Åpne deretter den andre Blurb-modulen og bruk en bunnkant.

  • Nederste kantbredde: 1px
  • Nedre kantfarge: # 000000
Sammendrag divi for konfigurasjonsgrensemodul
Blurb-innstillinger for modul 3

Fullfør rutenettet ved å legge til en rett kant til den tredje Blurb-modulen.

  • Høyre kantbredde: 1px
  • Høyre kantfarge: # ffd623
produktfordeler nett

Legg til Woo Legg i kurv Modul i kolonne 2

Dynamisk innhold

Den siste modulen vi trenger i vårt design er en Woo Add to Cart-modul. Forsikre deg om at "Dette produktet" er valgt i området for dynamisk innhold.

  • Produkt: Dette produktet
Legg til kortinndelingsmodulinnstillinger

Feltinnstillinger

Gå til neste designfane og endre feltinnstillingene.

  • Feltets bakgrunnsfarge: #ffffff
  • Felttekstfarge: # 000000
Konfigurer fargestil legg til divi-modulen i handlekurven
  • Avrundede felt: 0px (alle hjørner)
  • Bredde på nedre grense av felt: 1px
  • Farge på feltets nedre kant: # 000000
Konfigurer avstand mellom divisjoner

Knappinnstillinger

Stiler deretter knappen tilsvarende:

  • Bruk egendefinerte stiler for knappen: Ja
  • Knapptekststørrelse: 20 piksler
  • Tekstfarge på knapp: # 000000
  • Bakgrunnsfarge på knappen: # ffd623
  • Knappens bredde: 0px
  • Knappens radius: 0px
Konfigurer divi-knappdesign
  • Knappefont: Oswald
  • Knapp font stil: store bokstaver
Konfigurer divi-knappen
  • Øvre polstring: 20px
  • Bunnpolstring: 20px
  • Venstre polstring: 50px
  • Høyre polstring: 50px
Konfigurer størrelsen på divi-modulen

avstanden

Og fullfør modulparametrene ved å legge til tilpassede marginverdier.

  • Øvre margin: 100px
  • Venstre margin: 5%
Konfigurer divi-avstand

3. Lagre endringene av temageneratoren og forhåndsvis resultatet

Når du er ferdig med å designe produktsidemalen, kan du lagre alle endringene i Theme Builder og vise resultatene på produktene dine!

Lagre divi-design
Lagre divi-modifikasjoner

undersøkelsen

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

Demoresultat

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du kan bli kreativ med din neste Divi-produktsidesmal. Spesielt har vi vist deg hvordan du inkluderer et dynamisk produktnett for å legge til ekstra fordeler på produktsiden din. Vi opprettet denne opplæringen ved hjelp av Divi i kombinasjon med plugin-programmet Advanced Custom Fields. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.