Sättet du designar din produktsida på har en omedelbar inverkan på ditt beteende besökare. En väldesignad och personlig produktsida kan tillåta besökare lättare att bestämma om de vill köpa din produkt. Om du letar efter ett sätt att göra din produktsida mer engagerande, kommer du förmodligen att gilla den här handledningen.
Vi visar dig hur du inkluderar ett dynamiskt rutnät för produktfördelar i din design med hjälp av Divi och plugin-programmet Advanced Custom Fields. Vi börjar med att skapa en fältgrupp för förmåner. Vi kommer sedan att fylla i de anpassade fälten på vår produktsida och inkludera innehåll dynamisk i vår produktsidamall.
Möjligt resultat
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
1. Installera ACF-plugin- och produktfördelningsfältgrupp-pluginet
Installera plugin-programmet Advanced Custom Fields
För att visa de olika produktfördelarna i backend av våra produkter kommer vi att använda plugin fri Avancerade anpassade fält. Få tillgång till din WordPress-backend> Plugins> Lägg till nytt> Hitta ACF-plugin> Installera> Aktivera .
Gå till anpassade fält och lägg till en ny grupp fält
När du har installerat och aktiverat ACF-plugin kan du komma åt dina anpassade fält och lägga till en ny grupp fält.
Fältgruppsinställningar
Ge din nya fältgrupp en titel och låt den endast visas på produktsidorna.
- "Meddelandetyp" är lika med "Produkt"
Lägg till ett första fält
Fortsätt genom att lägga till ett nytt fält för titeln på din första produktfördel.
- Fältetikett: Fördelstitel 1
- Fälttyp: text
Upprepa steget för de återstående fälten
Gör detsamma för de andra fördelarna med produkten och deras beskrivningar. Alla dessa fält kräver "Text" -fältstypen som tilldelats dem.
- Tjänstens namn 1
- Beskrivning av förmåner 1
- Tjänstens namn 2
- Beskrivning av förmåner 2
- Tjänstens namn 3
- Beskrivning av förmåner 3
- Tjänstens namn 4
- Beskrivning av förmåner 4
2. Lägg till fördelar till produkter
Öppna eller lägg till en ny produkt
När din fältgrupp och dina fält har skapats kan du lägga till produktfördelar i dina produkter på individuell nivå. Öppna en produkt efter eget val eller skapa en ny.
Fyll i fälten Produktfördelar
Och uppfylla fördelarna med produkten.
3. Skapa en produktsidamall i Divi Theme Builder
Gå till Divi Theme Builder och lägg till en ny mall
Det är dags att börja med Divi! För att skapa en ny mall, gå till Divi Theme Builder och klicka på "Lägg till en ny mall".
Använd en mall på alla produkter
Vi använder den här mallen på alla produkter, men välj gärna produkter med en specifik kategori eller etikett istället.
Ange modellkroppsmallredigeraren
Ange sedan modellens kropp genom att klicka på "Lägg till en anpassad kropp" och välja "Skapa en anpassad kropp".
Redigera avsnitt 1
Bakgrundsfärg
När du är inne i mallredigeraren kommer du att märka ett avsnitt. Öppna det avsnittet och ändra bakgrundsfärgen till svart.
- Bakgrundsfärg: # 000000
avstånd
Gå vidare till sektionens designflik och lägg till vissa anpassade topp- och bottenunderlag.
- Topp stoppning: 10px
- Botten stoppning: 10px
Lägg till en ny rad
Kolumnstruktur
Låt oss fortsätta genom att lägga till en ny rad i avsnittet som har följande struktur:
avstånd
Utan att lägga till några mod, låt oss öppna radinställningarna och göra några avståndsjusteringar.
- Använd personlig ränna: Ja
- Rännbredd: 1
- Bredd: 90%
- Maximal bredd: 100%
avstånd
Ta bort alla inre avstånd uppifrån och ned.
- Hög intern marginal: 0px
- Låg intern marginal: 0px
Lägg till Woo Cart Notice-modulen i kolumnen
Dynamiskt innehåll
Den enda modulen vi behöver på den här raden och avsnittet är Woo Cart Notice-modulen. Se till att "Den här produkten" är valt i det dynamiska avsnittet.
- Produkt: Den här produkten
Färgbakgrund
Öppna sedan modulinställningarna och använd en transparent bakgrund.
- Bakgrundsfärg: rgba (0,0,0,0)
Textinställningar
Byt till fliken "Design" och ändra textstilsorten.
- Textsteckensnitt: Karla
Knappinställning
Avsluta insticksinställningarna genom att definiera stilinställningarna:
- Använd anpassade stilar för knapp: Ja
- Knapptextstorlek: 20px
- Knapptextfärg: # 000000
- Knappbakgrund: # ffd623
- Knappens bredd: 0px
- Avrundad kantknapp: 0px
- Knappsnitt: Oswald
- Knappsnittform: Skift
- Hög intern marginal: 20px
- Låg intern marginal: 20px
- Vänster intern marginal: 50px
- Intern högermarginal: 50px
Lägg till avsnitt 2
Lutningbakgrund
Lägg till ytterligare ett vanligt avsnitt under det föregående. Öppna sedan inställningarna och använd en gradientbakgrund enligt följande:
- Färg 1: # 000000
- Färg 2: #ffffff
- Startposition:
- Skrivbord: 30%
- Tablett: 57%
- Telefon: 54%
- Slutposition:
- Skrivbord: 30%
- Tablett: 57%
- Telefon: 54%
avstånd
Låt oss gå till fliken Design och lägga till en hög intern marginal.
- Topp stoppning: 150px
Lägg till en ny rad
Kolumnstruktur
Fortsätt genom att lägga till en ny rad med samma struktur som visas nedan:
dimensionering
Utan att lägga till några mods ännu, öppnar vi inställningarna och ändrar avståndet enligt följande:
- Använd anpassade rännor: Ja
- Rännutrymme: 1
- Bredd: 95%
- Maximal bredd: 2560px
- Linjejustering: centrum
Förband
Vi kommer också att ta bort den övre inre marginalen.
- Topp stoppning: 0px
Huvudelementet
Och att centrera innehåll kolumnen på DeskTop kommer vi att använda två rader med CSS-kod i huvudelementet i modulraden.
Desktop:
display: flex; align-items: center;
Surfplatta & telefon:
display: block;
Lägg till Woo Image-modulen i kolumn 1
Dynamiskt innehåll
Det är dags att lägga till moduler, vi börjar med Woo Images-modulen i kolumn 1. Se till att ”Den här produkten” är vald.
- Produkt: Den här produkten
Vertikal rullningsanimeringseffekt
Vi lägger till subtil rörelse i bilden med hjälp av den horisontella rörelse-rullningseffekten på den avancerade fliken.
- Aktivera vertikal rörelse: Ja
- Starta offset:
- Kontor: -4
- Tablet och telefon: 0
- Genomsnittlig offset: 0
- Slutförskjutning: 0
- Trigger motion-effekt: mitt i elementet
Lägg till Woo-titelmodulen i kolumn 2
Dynamiskt innehåll
I kolumn 2 är den första modulen vi behöver en Woo-titelmodul. Se till att "Denna produkt" är markerat i rutan innehåll dynamisk.
- Produkt: Den här produkten
Titeltextinställningar
Gå sedan till fliken design och utforma titeltexten enligt följande:
- Titel typsnitt: Oswald
- Titelstilsstil: versaler
- Titelfärg: # ffd623
- Titeltextstorlek: 80px
avstånd
Slutför Woo-titelmodulen genom att lägga till vänster- och högermarginaler.
- Vänster marginal: 5%
- Höger marginal: 5%
Lägg till Woo-beskrivningsmodulen i kolumn 2
Dynamiskt innehåll
Låt oss gå vidare till nästa modul, som är en Woo-beskrivningsmodul. Vi använder följande dynamiska innehåll för detta:
- Produkt: Den här produkten
- Beskrivningstyp: Kort beskrivning
Textinställningar
Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:
- Textsteckensnitt: Karla
- Textfärg: #dbdbdb
- Textstorlek: 17 px (skrivbord och surfplatta), 15 px (telefon)
- Textradhöjd: 1,9 em
dimensionering
Ändra sedan bredden på olika skärmstorlekar.
- Bredd: 59% (skrivbord), 82% (surfplatta och telefon)
avstånd
Slutför Woo-beskrivningsmodulen genom att lägga till anpassade marginalvärden i avståndsinställningarna.
- Övre marginal: 50px
- Nedre marginal: 100px
- Vänster marginal: 5%
- Höger marginal: 5%
Lägg till Blurb-modulen i 2-kolumnen
Dynamiskt innehåll
För att visa produktfördelarna som vi har lagt till i den första delen av denna tutorial kommer vi att använda Blurb-modulerna. Lägg till en första Blurb-modul och använd det dynamiska innehållet i den första fördelen som produceras för titeln och kroppen.
- Titel: Fördelningsavdelning 1
- Kropp: Fördelningsbeskrivning 1
Ladda upp bild
Ladda upp en bild eller använd en ikon du väljer. Du kan hitta de som vi har använt under hela denna tutorial i den nedladdningsmapp som du kunde ladda ner i början av denna tutorial.
Inställningar för bild / ikon
Gå vidare till modulens designflik och ändra bild / ikoninställningarna enligt följande:
- Bild / Ikon Placering: Överst
- Bild / ikon Justering: Vänster
Titeltextinställningar
Vi ändrar titeltextinställningarna nästa.
- Titelstilsort: Oswald
- Titel Typsnitt stil: versaler
- Titeltextstorlek: 25px
Inställningar för kroppstext
Tillsammans med kroppsinställningarna.
- Body typsnitt: Karla
- Textstorlek: 17 px (skrivbord och surfplatta), 15 px (telefon)
- Kroppslinjens höjd: 1,9 em
dimensionering
Gå sedan till storleksinställningarna och ändra bredderna. Det är viktigt att använda en huvudbredd mindre än 50%, detta gör att vi kan visa två Blurb-moduler sida vid sida i nästa steg.
- Bildbredd: 25%
- Bredd: 49%
avstånd
Vi kommer också att lägga till utrymmen runt Blurb-modulen med anpassade utfyllnadsvärden på olika skärmstorlekar.
- Övre stoppning: 8%
- Nedre stoppning: 8%
- Vänster stoppning: 8% (skrivbord och surfplatta), 2% (telefon)
- Höger stoppning: 8% (skrivbord och surfplatta) 2% (telefon)
Huvudelement
Nu ska vi se till att Sammanfattningsmodulen visar texten bredvid varandra, i två steg. Först ser vi till att modulbredden är mindre än 50% (som vi gjorde i föregående steg). Därefter använder vi fastigheten på raden. Vi lägger till den här CSS-egenskapen på huvudelementet i det avancerade avsnittet.
display: inline-block;
Klona sammanfattningsmodulen 3 gånger
När du har slutfört den första Blurb-moden kan du klona den tre gånger. Du märker automatiskt att Blurb-modulerna visas i ett rutnät.
Redigera Blurb-modulbilderna
Redigera bilden i varje duplicerad Blurb-pod. Du hittar dem i nedladdningsmappen som du kanske har laddat ner i början av den här artikeln.
Ändra det dynamiska innehållet i Blurb-modulen
Ändra också det dynamiska innehållet i varje duplikat Blurb-modul.
- Titel: Tjänstens namn (2,3 eller 4)
- Kropp: beskrivning av fördelarna (2,3 eller 4)
Lägg gränser till Blurb-moduler individuellt
Blurb-modul 1-inställningar
För att avsluta utformningen av vårt nät kommer vi att lägga till gränser till Blurb-modulerna på en individuell nivå. Öppna den första Blurb-moden och använd en rak kant.
- Höger kantbredd: 1 st
- Höger kantfärg: # ffd623
Lägg också till en underkant till den första Blurb-modulen.
- Nedre kantbredd: 1 st
- Nedre kantfärg: # 000000
Blurb-modul 2-inställningar
Öppna sedan den andra Blurb-modulen och använd en underkant.
- Nedre kantbredd: 1 st
- Nedre kantfärg: # 000000
Blurb-modul 3-inställningar
Slutför nätdesignen genom att lägga till en rak kant till den tredje Blurb-modulen.
- Höger kantbredd: 1 st
- Höger kantfärg: # ffd623
Lägg till Woo Lägg i kundvagn Modul i kolumn 2
Dynamiskt innehåll
Den sista modulen vi behöver i vår design är en Woo Add to Cart-modul. Se till att "Den här produkten" har valts i området för dynamiskt innehåll.
- Produkt: Den här produkten
Fältinställningar
Gå till nästa designflik och ändra fältinställningarna.
- Fältets bakgrundsfärg: #ffffff
- Fälttextfärg: # 000000
- Rundade fält: 0px (alla hörn)
- Bredden på fältens nedre kant: 1px
- Färg på fältets nedre kant: # 000000
Knappinställningar
Ställ sedan in knappen i enlighet därmed:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 20 pixlar
- Knappens textfärg: # 000000
- Knappens bakgrundsfärg: # ffd623
- Knappens bredd: 0px
- Knappens radie: 0px
- Knappsnitt: Oswald
- Knappsnittstil: versaler
- Övre stoppning: 20px
- Botten stoppning: 20px
- Vänster padding: 50px
- Höger stoppning: 50px
avstånd
Och slutför modulparametrarna genom att lägga till anpassade marginalvärden.
- Övre marginal: 100px
- Vänster marginal: 5%
3. Spara modifieringarna i temageneratorn och förhandsgranska resultatet
När du är klar med att utforma produktsidamallen kan du spara alla dina Theme Builder-ändringar och visa resultaten på dina produkter!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Avslutande tankar
I den här artikeln har vi visat dig hur du blir kreativ med din nästa Divi-produktsidemall. Specifikt har vi visat dig hur du inkluderar ett dynamiskt produktnyttanät för att lägga till ytterligare fördelar på din produktsida. Vi skapade den här självstudien med Divi i kombination med plugin-programmet Advanced Custom Fields. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
