Gå till innehållet

Hur man utformar limstänger för produktsidor med Divi Woo-moduler

Divi: det enklaste WordPress-temat att använda

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]

Sticky Bars fortsätter att vara ett populärt inslag i webbdesign. De är utmärkta för att få konverteringar genom att hålla samtal till handling i framkant utan att vara så påträngande som popup-fönster.

I det här användningsfallet ska vi utforma en klibbig stapel för WooCommerce-produkter med Divis Woo-moduler. Det klibbiga fältet kan innehålla vilken Divi-modul som helst. För denna handledning skapar vi en klibbig stapel som innehåller knappen "Lägg i kundvagn" så att den förblir synlig när användaren rullar ner på sidan. Dessutom kommer vi också att skapa ett meddelandefält för kundvagnen så att användarna alltid kommer att se "visa kundvagn" -knappen när "Lägg i kundvagn" -knappen har klickats.

Dessa klibbiga stapelelement hjälper till att öka konverteringarna genom att hålla dessa avgörande CTA: er i sikte.

undersökningen

Här är en förhandsgranskning av vad vi kommer att utforma i denna handledning.

Del 1: Design av limstången på en produktsida

Vi kommer att använda en enkel simulerad produkt för detta exempel, så du måste skapa en ny produkt eller redigera en befintlig produkt. Produktinformation är inte viktig för denna handledning. Se till att du har grunderna som produkttitel, pris, beskrivning, bild etc.

När en enkel produkt är klar, klicka för att redigera produkten i backend och distribuera Divi Builder på produktsidan. Under Divi Page Settings, välj “Fullwidth” för layouten och klicka sedan på “Build on Front”.

Visa produktbredd i helbredd

Produktsidan ska se ut så här.

Under den första raden som innehåller brödsmulorna och vagnen, lägg till en ny rad med en kolumnlayout.

Infoga rad till woocomemrce-kolumn

Linjeinställningar

Innan du lägger till moduler ska du uppdatera radinställningarna enligt följande:

  • Bakgrundsfärg: # 333333
  • Använd en anpassad rännbredd: JA
  • Rännbredd: 1
  • Bredd: 100%
  • Klädsel: 0px topp, 0px botten
Parametra klibbig sektion divi

Gör linjen klibbig

För att göra raden klibbig, lägg till följande anpassade CSS-kod i huvudskrivbordselementet:

position: -webkit-sticky !important; position: sticky !important; top: 50px;

Lägg sedan till följande CSS-kod i samma huvudelement för surfplattan:

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]

top: 0px;

Om du inte är bekant med egenskapen "position: klibbig" css är detta en slags blandning mellan den fasta positionen och den relativa positionen där elementet (i detta fall linjen) kommer att rulla med dess behållare tills det når en bestämd position vid toppen eller botten av sidan (eller den angivna förskjutningen). I det här exemplet ställer vi in ​​förskjutningen till 50 pixlar från toppen av webbläsarfönstret (lämnar utrymme för höjden på en standard fast rubrik på skrivbordet). På en surfplatta ändras sedan förskjutningen till "topp: 0px" för att korrigera den självhäftande linjen / fältet längst upp i webbläsaren på mobilen.

Obs! Ignorera eventuella fel som du ser när du lägger till CSS i rutan. Koden fungerar bra.

När du CSS uppdaterar du Z-index enligt följande:

  • Z-index: 10
Z index produkt woocommerce

Nu blir raden klibbig när användaren rullar genom produktsidan.

Anpassad CSS-kolumn

Innan vi börjar fylla raden med innehåll måste vi se till att modulen inuti en kolumnrad kommer att justeras horisontellt istället för vertikalt. Vi kan använda ett enkelt CSS-trick för att göra detta med flex-egenskapen. Öppna kolumninställningarna och lägg till följande anpassade CSS till huvudelementet:

display:flex; align-items:center;

Kod css kolumn divi woocommerce modul

Det tar hand om vår klibbiga linjedesign. Nu måste vi fylla raden med innehåll.

Lägg till en titel Woo

Lägg till en ny Woo-titelmodul i den klibbiga linjekolumnen.

Lägg till woo-titel

Uppdatera sedan inställningarna enligt följande:

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]

  • Färgtextitel: #ffffff
  • Texttitelstorlek: 28px (skrivbord), 20px (surfplatta), 16px (telefon)
  • Bredd: 30%
  • Klädsel: 2vw längst upp, 2vw längst ner, 2vw till vänster, 2vw till höger
Färg sticky bar divi

Lägg till priset Woo

Lägg sedan till en Woo-prismodul genom att klicka på den grå plusikonen som visas när du håller muspekaren över woo-titelmodulen du just skapade.

Woocommerce pris divi

Uppdatera sedan Woo Price-inställningarna enligt följande:

  • Pristextstorlek: 28px (skrivbord), 20px (surfplatta), 16px (telefon)
  • Bredd: 30%
  • Klädsel: 2vw längst upp, 2vw längst ner, 2vw till vänster, 2vw till höger
  • Bredden på höger kant: 1px
  • Färg på höger kant: #777777
  • Bredd på vänstra gränsen: 1px
  • Vänster kantfärg: #777777

Lägg till en modul Lägg till i kundvagnen

För det sista innehållet, lägg till en Lägg till i varukorgen Woo-modul direkt efter Woo Price-modulen.

Lägg till en tilläggskorg divi-modul

Uppdatera sedan inställningarna enligt följande:

Förenkla elementet Lägg i varukorg genom att dölja fältet för lagermängd och kvantitet på mobilen.

  • Visa kvantitetsfält: OFF (surfplatta)
  • Visa lager: AV
Visa lägg till i korg divi
  • Textinriktning: höger
  • Använd anpassade stilar för knapp: YES
  • Knapptextstorlek: 18px (surfplatta), 14px (telefon)
  • Knapptextfärg: #ffffff
  • Knappens bakgrundsfärg: #0c71c3
  • Bredden på knappgränsen: 0px
Anpassa knappstilen
  • Bredd: 40%
  • Klädsel: 2vw till vänster, 2vw till höger
Anpassa storleksbreddsknappen lägg till i kundvagnen woocommerce

Resultat

Låt oss se hur det ser ut på livesidan.

2-del: Skapa en korgaviseringstang

Att skapa ett självhäftande vagnmeddelandefält innebär faktiskt några enkla steg, men resultatet kan bli extremt effektivt. Som du kanske redan vet visas varukorgsmeddelandet bara när en användare klickar på knappen "Lägg till i kundvagn". Men det är nästa viktiga steg i köpprocessen som tar användare till kassasidan. Så när vagnmeddelandet visas som en limstång längst ner i fönstret är den mer synlig för användaren.

Skapa en klibbig stapel för kundvagnen genom att först skapa en ny rad med en kolumn längst ner på produktsidan. Uppdatera sedan radinställningarna enligt följande:

  • Bredd: 100%
  • Klädsel: 0px längst upp, 0px längst ner
Lägg till en ny divi-linje

Gör linjen klibbig genom att lägga till följande anpassade CSS i huvudelementet:

position: -webkit-sticky !important; position: sticky !important; bottom: 0px;

Obs: Som vi gjorde tidigare kan du ignorera felen som visas när du lägger till position: sticky property.

Anpassa stil CSS-modul divi

Raden kommer att hålla sig fast vid fönstret när du bläddrar uppåt.

Uppdatera sedan z-indexet för att hålla det i förgrunden, så här:

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]

  • Z-index: 10
Konfigurera zindex divi line-modul

Lägg till varukorgsmeddelandemodulen

När du har skapat raden lägger du till modulen Woo Cart Notice till raden och uppdaterar inställningarna enligt följande:

  • Textstorlek (telefon): 15px
  • Marginal: 0em längst ner
Anpassning av woo-aviseringsmodulen

Det är allt ! Huruvida du vill ta bort standardvarningsvaran för kundvagnen högst upp på sidan är upp till dig, men det kan vara en bra idé att lämna den för bättre konverteringar.

Slutresultat

Så här kan det slutliga resultatet se ut.

Avslutande tankar

Förhoppningsvis hjälper den här artikeln oss att förstå hur vi skapar klibbiga staplar för våra produktsidor i Divi. Vi har beskrivit hur man skapar en klibbig stapel som innehåller en produkttitel, pris och knappen Lägg i varukorg. Och vi visade också hur man skapar en klibbig bar. Båda dessa bör göra köpprocessen enklare och öka omvandlingen. Och vi behöver inte ens ett plugin!

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
3 aktier
del3
tweet
Enregistrer