Sticky Bars continuă să fie un element popular al designului web. Sunt grozave pentru a stimula conversiile prin menținerea îndemnurilor la acțiune fără a fi la fel de intruzive ca ferestrele pop-up.
În acest caz de utilizare, vom proiecta o bară lipicioasă pentru produse WooCommerce folosind module Woo de la Divi. Sticky Bar poate include orice modul Divi. Pentru acest tutorial, vom crea o bară lipicioasă care include butonul „Adăugați în coș”, astfel încât acesta să rămână vizibil pe măsură ce utilizatorul derulează în jos pe pagină. În plus, vom crea, de asemenea, o bară de notificare pentru coș, astfel încât utilizatorii să vadă întotdeauna butonul „afișați coșul de cumpărături” odată ce se face clic pe butonul „Adaugă în coș”.
Aceste elemente de bară lipicioasă vor ajuta la creșterea conversiilor, păstrând în vedere acele CTA esențiale.
studiu
Iată o previzualizare a ceea ce vom proiecta în acest tutorial.
Partea 1: Proiectarea barei lipicioase pe pagina unui produs
Vom folosi un produs simulat simplu pentru acest exemplu, așa că trebuie să creați un produs nou sau să modificați un produs existent. Informațiile despre produs nu sunt importante pentru acest tutorial. Asigurați-vă că aveți elementele de bază, cum ar fi titlul produsului, prețul, descrierea, imaginea etc.
Odată ce un produs simplu este gata, faceți clic pentru a edita produsul pe backend și implementați Divi Builder pe pagina produsului. Sub Setările paginii Divi, selectați „Fullwidth” pentru aspect, apoi faceți clic pe „Build on Front”.
Pagina produsului ar trebui să arate așa.
Sub primul rând care conține pesmetul și notificarea coșului, adăugați un rând nou cu un aspect cu o singură coloană.
Setări de linie
Înainte de a adăuga module, actualizați setările rândului după cum urmează:
- Culoarea fundalului: # 333333
- Utilizați o lățime personalizată a jgheabului: DA
- Lățimea jgheabului: 1
- Lățime: 100%
- Umplutură: 0px Sus, 0px Jos
Faceți linia lipicioasă
Pentru a face linia lipicioasă, adăugați următorul cod CSS personalizat la elementul principal de pe desktop:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Apoi adăugați următorul cod CSS la același element principal pentru afișajul tabletei:
top: 0px;
Dacă nu sunteți familiarizat cu proprietatea CSS „position:sticky”, este un fel de amestec între poziția fixă și poziția relativă în care elementul (în acest caz rândul) va derula cu containerul său până când ajunge la o poziție desemnată la partea de sus sau de jos a paginii (sau offset-ul specificat). În acest exemplu, setăm offset-ul la 50px din partea de sus a ferestrei browserului (lăsând spațiu pentru înălțimea unui antet implicit fix pe desktop). Apoi, pe tabletă, offset-ul este modificat în „top: 0px” pentru a corecta linia/bara lipicioasă din partea de sus a browserului de pe mobil.
Notă: Ignorați orice erori pe care le vedeți când adăugați CSS-ul în casetă. Codul va funcționa bine.
După ce faceți CSS, actualizați indexul Z după cum urmează:
- Z index: 10
Acum linia va deveni lipicioasă pe măsură ce utilizatorul derulează în jos pe pagina produsului.
Coloană CSS personalizată
Înainte de a începe să umpleți linia cu cuprins, trebuie să ne asigurăm că modulul din interiorul rândului nostru cu o singură coloană se va alinia orizontal în loc de vertical. Putem folosi un truc simplu CSS pentru a face acest lucru cu proprietatea flex. Deschideți setările coloanei și adăugați următorul CSS personalizat la elementul principal:
display:flex; align-items:center;
Acest lucru are grijă de designul nostru lipicios. Acum trebuie să umplem linia cu cuprins.
Adăugați un titlu Woo
Adăugați un nou modul de titlu Woo la coloana de rând lipicioasă.
Apoi actualizați setările după cum urmează:
- Titlul textului color: #ffffff
- Dimensiune titlu text: 28px (desktop), 20px (tabletă), 16px (telefon)
- Lățime: 30%
- Tapițerie: 2vw în partea de sus, 2vw în partea de jos, 2vw în stânga, 2vw în dreapta
Adăugați prețul Woo
Apoi, adăugați un modul de preț Woo făcând clic pe pictograma gri plus care apare când treceți cu mouse-ul peste modulul de titlu Woo pe care tocmai l-ați creat.
Apoi, actualizați setările Woo Price după cum urmează:
- Preț Dimensiunea textului: 28px (desktop), 20px (tabletă), 16px (telefon)
- Lățime: 30%
- Tapițerie: 2vw în partea de sus, 2vw în partea de jos, 2vw în stânga, 2vw în dreapta
- Lățimea marginii din dreapta: 1px
- Culoarea marginii din dreapta: #777777
- Lățimea marginii din stânga: 1px
- Culoarea marginii din stânga: #777777
Adaugă un modul Adaugă în coș
Pentru ultimul element al cuprins, adăugați un modul Woo Adaugă în coș imediat după modulul Woo Price.
Apoi actualizați setările după cum urmează:
Simplificați articolul Adaugă în coș prin ascunderea câmpului privind cantitatea și cantitatea din stoc pe mobil.
- Afișați câmpul cantității: OFF (tabletă)
- Afișare stoc: OFF
- Alinierea textului: drept
- Utilizați stiluri personalizate pentru butonul: DA
- Dimensiunea textului butonului: 18px (tabletă), 14px (telefon)
- Culoarea textului butonului: #ffffff
- Culoare de fundal pentru buton: #0c71c3
- Lățimea marginii butonului: 0px
- Lățime: 40%
- Captuseala: 2vw stanga, 2vw dreapta
rezultat
Acum să vedem cum arată pe pagina live.
Partea 2: Creați o bară de notificare pentru coș
Crearea unei bare lipicioase pentru notificarea coșului implică de fapt câțiva pași simpli, dar rezultatul poate fi extrem de eficient. După cum probabil știți deja, notificarea privind coșul de cumpărături apare numai atunci când un utilizator face clic pe butonul „Adăugați în coș”. Dar este următorul pas crucial în procesul de cumpărare care duce utilizatorii la pagina de finalizare a comenzii. Deci, atunci când notificarea coșului apare ca o bară lipicioasă în partea de jos a ferestrei, este mai vizibilă pentru utilizator.
Pentru a crea bara lipicioasă de notificare a coșului, creați mai întâi un nou rând cu o singură coloană în partea de jos a paginii produsului. Apoi actualizați setările rândului după cum urmează:
- Lățime: 100%
- Tapițerie: 0px în partea de sus, 0px în partea de jos
Faceți linia lipicioasă adăugând următorul CSS personalizat la elementul principal:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Notă: Așa cum am făcut mai devreme, puteți ignora erorile care apar la adăugarea proprietății position:sticky.
Rândul va rămâne lipit în partea de jos a ferestrei când derulați în sus.
Apoi actualizați indexul z pentru a-l păstra în prim-plan, așa:
- Z index: 10
Adăugați modul de notificare coș
După ce ați creat rândul, adăugați modulul Woo Cart Reviews la rând și actualizați setările după cum urmează:
- Dimensiunea textului (telefon): 15px
- Marja: 0em în partea de jos
Asta este ! Depinde de dvs. dacă doriți sau nu să eliminați elementul prestabilit de avertizare coș din partea de sus a paginii, dar ar putea fi o idee bună să îl lăsați pentru conversii mai bune.
Rezultat final
Acesta este cum ar putea arăta rezultatul final.
Ultimele gânduri
Sperăm că acest articol ne va ajuta să înțelegem cum să creăm bare lipicioase pentru paginile noastre de produse în Divi. Am explicat cum să creați o bară lipicioasă care include titlul produsului, prețul și un buton Adăugați în coș. Și am arătat, de asemenea, cum să facem o bară lipicioasă. Ambele ar trebui să faciliteze procesul de cumpărare și să stimuleze conversiile. Și nici măcar nu avem nevoie de un plugin!
