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 kommer vi att designa en klibbig bar för produkterna WooCommerce använder Woo-moduler från Divi. Den klibbiga stapeln kan innehålla vilken modul som helst Divi. För den här handledningen skapar vi en klibbig stapel som innehåller knappen "Lägg till i kundvagn" så att den förblir synlig när användaren rullar ner på sidan. Dessutom kommer vi också att skapa en varukorgsmeddelandefält så att användare alltid kommer att se knappen "visa kundvagn" när knappen "lägg till i kundvagn" 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 på backend och distribuera Divi Builder på produktsidan. Under Divi Page Settings, välj "Fullwidth" för layouten och klicka sedan på "Build on Front."
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.
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
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:
top: 0px;
Om du inte känner till egenskapen css "position: sticky" är det en blandning mellan den fasta positionen och den relativa positionen där elementet (i det här fallet linjen) rullar med sin behållaren tills den når en bestämd position högst upp eller längst ner på sidan (eller den angivna förskjutningen). I det här exemplet sätter vi 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å surfplattan ändras sedan förskjutningen till “top: 0px” för att korrigera limlinjen / stapeln 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
Nu blir raden klibbig när användaren rullar genom produktsidan.
Anpassad CSS-kolumn
Innan du börjar fylla raden med innehåll, måste vi se till att modulen inuti vår rad med en kolumn kommer att riktas in horisontellt istället för vertikalt. Vi kan använda ett enkelt CSS-trick för att göra detta med egenskapen flex. Öppna kolumninställningarna och lägg till följande anpassade CSS till huvudelementet:
display:flex; align-items:center;
Detta tar hand om vår sticky line design. 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.
Uppdatera sedan inställningarna enligt följande:
- 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
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.
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 inslaget av innehåll, lägg till en Woo Add to Cart-modul precis efter Woo Price-modulen.
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
- 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
- Bredd: 40%
- Klädsel: 2vw till vänster, 2vw till höger
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
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.
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:
- Z-index: 10
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
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!
