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.
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 .
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.
Innstillinger for feltgruppe
Gi den nye feltgruppen en tittel, og la den bare vises på produktsidene.
- "Meldingstype" tilsvarer "Produkt"
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
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
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.
Fullfør produktfordelene
Og oppfylle fordelene med produktet.
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".
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.
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".
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
avstanden
Gå videre til seksjonens designfane og legg til noe tilpasset topp- og bunnpolstring.
- Topp polstring: 10px
- Bunn polstring: 10px
Legg til en ny linje
Kolonnestruktur
La oss fortsette med å legge til en ny linje til delen som har følgende struktur:
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%
avstanden
Fjern alt topp- og bunnavstand.
- Høy intern margin: 0px
- Lav intern margin: 0px
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
Fargebakgrunn
Åpne deretter modulinnstillingene og bruk en gjennomsiktig bakgrunn.
- Bakgrunnsfarge: rgba (0,0,0,0)
Tekstinnstillinger
Bytt til "Design" -fanen og endre tekstfonten.
- Tekstskrift: Karla
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
- Knappefont: Oswald
- Knapp Font Style: Shift
- Høy intern margin: 20px
- Lav intern margin: 20px
- Venstre indre margin: 50px
- Intern høyre marg: 50px
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%
avstanden
La oss gå til Design-fanen og legge til en høy intern margin.
- Topp polstring: 150px
Legg til en ny linje
Kolonnestruktur
Fortsett med å legge til en ny linje med samme struktur som vist nedenfor:
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
Mellomrom
Vi fjerner også den øverste indre marginen.
- Topp polstring: 0px
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;
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
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
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
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
avstanden
Fullfør Woo-tittelmodulen ved å legge til venstre og høyre marg.
- Venstre margin: 5%
- Høyre margin: 5%
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
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
dimensjonering
Endre deretter bredden på forskjellige skjermstørrelser.
- Bredde: 59% (stasjonær), 82% (nettbrett og telefon)
avstanden
Fullfør Woo-beskrivelsesmodulen ved å legge til egendefinerte marginverdier i avstandsinnstillingene.
- Øvre margin: 50px
- Bunnmargin: 100px
- Venstre margin: 5%
- Høyre margin: 5%
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
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.
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
Innstillinger for titteltekst
Vi endrer innstillingene for titteltekst neste.
- Tittel Font: Oswald
- Tittel Font Style: Store bokstaver
- Tittel Tekststørrelse: 25px
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
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%
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)
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;
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.
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.
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)
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
Legg også til en bunnkant til den første Blurb-modulen.
- Nederste kantbredde: 1px
- Nedre kantfarge: # 000000
Blurb-innstillinger for modul 2
Åpne deretter den andre Blurb-modulen og bruk en bunnkant.
- Nederste kantbredde: 1px
- Nedre kantfarge: # 000000
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
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
Feltinnstillinger
Gå til neste designfane og endre feltinnstillingene.
- Feltets bakgrunnsfarge: #ffffff
- Felttekstfarge: # 000000
- Avrundede felt: 0px (alle hjørner)
- Bredde på nedre grense av felt: 1px
- Farge på feltets nedre kant: # 000000
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
- Knappefont: Oswald
- Knapp font stil: store bokstaver
- Øvre polstring: 20px
- Bunnpolstring: 20px
- Venstre polstring: 50px
- Høyre polstring: 50px
avstanden
Og fullfør modulparametrene ved å legge til tilpassede marginverdier.
- Øvre margin: 100px
- Venstre margin: 5%
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!
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.
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.