Gå till innehållet

Skapa ett dynamiskt fördelningsnät för WooCommerce-produkter

Divi: det enklaste WordPress-temat att använda

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Sättet du utformar din produktsida har omedelbar inverkan på dina besökares beteende. En väl utformad och personlig produktsidedesign kan göra det lättare för besökare 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 antagligen att gilla den här guiden. 

Vi visar dig hur du inkluderar ett dynamiskt produktnät i din design med Divi och plugin-programmet Advanced Custom Fields. Vi börjar med att skapa en grupp fält för fördelar. Vi fyller sedan i de anpassade fälten på vår produktsida och inkluderar det dynamiska innehållet i vår produktsidemall. 

Möjligt resultat

Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.

Möjlig resultatdelning

1. Installera ACF-plugin- och produktfördelningsfältgrupp-pluginet

Installera plugin-programmet Advanced Custom Fields

För att visa de olika produktfördelarna i baksidan av våra produkter använder vi det kostnadsfria plugin-programmet Advanced Custom Fields. Gå till din WordPress-backend> Plugins> Lägg till nytt> Hitta ACF-plugin> Installera> Aktivera .

Installera adavanced anpassade fält plugin

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.

Skapa ACF-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 regler

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
Lägg till AC-fält
Divi-fältanpassning

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
Konfigurera ACF-fält

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.

Divi produkt skapande

Fyll i fälten Produktfördelar

Och uppfylla fördelarna med produkten.

Fyll i fälten för divi-fördelar

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

Divi temabyggare

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.

Lägg till alla woocommerce-produkter

Ange modellkroppsmallredigeraren

Ange sedan modellens kropp genom att klicka på "Lägg till en anpassad kropp" och välja "Skapa en anpassad kropp".

Bygga divi 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
Divi-sektionens bakgrundskonfiguration

avstånd

Gå vidare till sektionens designflik och lägg till vissa anpassade topp- och bottenunderlag.

  • Topp stoppning: 10px
  • Botten stoppning: 10px
Konfiguration av avdelningsavstånd

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:

Konfiguration av linjemodullayout

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%
Inställningar för linjemodulavstånd

avstånd

Ta bort alla inre avstånd uppifrån och ned.

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

  • Hög intern marginal: 0px
  • Låg intern marginal: 0px
Avståndsinställningar för Divi Line-modul

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
Inställningar woo cart meddelandemodul divi

Färgbakgrund

Öppna sedan modulinställningarna och använd en transparent bakgrund.

  • Bakgrundsfärg: rgba (0,0,0,0)
Woo-vagnmodulens divi-inställningar

Textinställningar

Byt till fliken "Design" och ändra textstilsorten.

  • Textsteckensnitt: Karla
Divi-modul typsnitt inställningar

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
Färginställningar för Woo-varningsmeddelande
  • Knappsnitt: Oswald
  • Knappsnittform: Skift
Woo kundvagn meddelande modul färgdesignjustering
  • Hög intern marginal: 20px
  • Låg intern marginal: 20px
  • Vänster intern marginal: 50px
  • Intern högermarginal: 50px
Konfigurationsdesignmodul woo-kundmeddelande

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

avstånd

Låt oss gå till fliken Design och lägga till en hög intern marginal.

  • Topp stoppning: 150px
Konfiguration av avstånd för Divi Line-modul

Lägg till en ny rad

Kolumnstruktur

Fortsätt genom att lägga till en ny rad med samma struktur som visas nedan:

Konfiguration av Divi-linjestil

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
Avdelningsmodul för rännsten

Förband

Vi kommer också att ta bort den övre inre marginalen.

  • Topp stoppning: 0px
Divi-modulavståndskonfiguration

Huvudelementet

Och för att centrera innehållet i kolumnen på skrivbordet använder vi två rader CSS-kod i huvudelementet i radmodulen.

Desktop:

display: flex; align-items: center;

Surfplatta & telefon:

display: block;
Inställningar för Divi Line-modulstil

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
Woocommerce produktbildsinställningar

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
Justering av Divi-bildmodul

Lägg till Woo-titelmodulen i kolumn 2

Dynamiskt innehåll

I kolumn 2 är den första moden vi behöver en Woo-titelmod. Se till att "Den här produkten" har valts i området för dynamiskt innehåll.

  • Produkt: Den här produkten
produkt fördelar rutnät

Titeltextinställningar

Gå sedan till fliken design och utforma titeltexten enligt följande:

  • Titel typsnitt: Oswald
  • Titelstilsstil: versaler
  • Titelfärg: # ffd623
  • Titeltextstorlek: 80px
Divi titelmodul designjustering

avstånd

Slutför Woo-titelmodulen genom att lägga till vänster- och högermarginaler.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Vänster marginal: 5%
  • Höger marginal: 5%
Inställning av Divi-titelmodul

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
Produktbeskrivningsmodulinställningar

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
Färgjusteringsmodul beskrivning divi

dimensionering

Ändra sedan bredden på olika skärmstorlekar.

  • Bredd: 59% (skrivbord), 82% (surfplatta och telefon)
Divi sammanfattningsmodulens breddjustering

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

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
Textinställning för Divi-sammanfattningsmodul

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.

Bildmodul Sammanfattning divi konfiguration

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

Titeltextinställningar

Vi ändrar titeltextinställningarna nästa.

  • Titelstilsort: Oswald
  • Titel Typsnitt stil: versaler
  • Titeltextstorlek: 25px
Konfigurera teckensnitt för divi-sammanfattningsmodul

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
Konfigurera sammanfattning av textmodul div

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%
Konfigurera dimensionering av divi-sammanfattningsmodul

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)
Konfigurera avståndet för divisammanfattningsmodul

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;
Lägg till CSS-kod divi-modul

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.

Produktnamn divi avsnitt

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.

Divi sammanfattningsmodulbild

Ä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)
Divi-sammanfattningsmodulregler

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
Sammanfattningsmodul för rundad kantkonfiguration

Lägg också till en underkant till den första Blurb-modulen.

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Konfigurera divi-bottenmarginalen
Blurb-modul 2-inställningar

Öppna sedan den andra Blurb-modulen och använd en underkant.

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Sammanfattningsdel för konfigurationsgränsmodul
Blurb-modul 3-inställningar

Slutför nätdesignen genom att lägga till en rak kant till den tredje Blurb-modulen.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Höger kantbredd: 1 st
  • Höger kantfärg: # ffd623
produkt fördelar rutnät

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
Lägg till inställningarna för kortdelmodulen

Fältinställningar

Gå till nästa designflik och ändra fältinställningarna.

  • Fältets bakgrundsfärg: #ffffff
  • Fälttextfärg: # 000000
Konfigurera stilfärgmodul lägg till i kundvagnen
  • Rundade fält: 0px (alla hörn)
  • Bredden på fältens nedre kant: 1px
  • Färg på fältets nedre kant: # 000000
Konfigurera avståndet mellan delar

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
Konfigurera divi-knappdesign
  • Knappsnitt: Oswald
  • Knappsnittstil: versaler
Konfigurera divi-knappen
  • Övre stoppning: 20px
  • Botten stoppning: 20px
  • Vänster padding: 50px
  • Höger stoppning: 50px
Konfigurera dimensionering av divi-modul

avstånd

Och slutför modulparametrarna genom att lägga till anpassade marginalvärden.

  • Övre marginal: 100px
  • Vänster marginal: 5%
Konfigurera divi-avstånd

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!

Spara divi-design
Spara divi-modifieringar

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.

Demoresultat

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer