Cum să proiectați bare adezive pentru pagini de produse cu modulele Woo ale lui Divi

Publicat: 2019-10-16

Barele lipicioase continuă să fie un element popular în designul web. Sunt minunate pentru a spori conversiile, menținând CTA-urile în prim plan, fără a fi la fel de intruzive ca ferestrele pop-up.

În acest caz de utilizare, vom proiecta o bară lipicioasă pentru produsele WooCommerce folosind modulele Woo ale Divi. Bara lipicioasă poate include orice modul Divi. Pentru acest tutorial, vom crea o bară lipicioasă care include butonul „Adaugă în coș”, astfel încât să rămână vizibil pe măsură ce utilizatorul derulează pagina. În plus, vom crea, de asemenea, o bară de notificare lipicioasă pentru coș, astfel încât utilizatorii să poată vedea întotdeauna butonul „Vizualizare coș” după ce se face clic pe butonul „Adaugă în coș”.

Aceste elemente de bare lipicioase vor ajuta la creșterea conversiilor, ținând în vedere acele CTA-uri cruciale.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra a ceea ce vom proiecta în acest tutorial de caz de utilizare.

Descărcați gratuit Layout Bars Layout

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele
Descarcă gratis

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

  1. Dacă nu ați făcut-o încă, instalați și activați tema Divi instalată (sau pluginul Divi Builder dacă nu utilizați tema Divi).
  2. Instalați și activați pluginul WooCommerce. Dacă este prima dată când configurați WooCommerce, va trebui să rulați prin expertul de configurare de bază pentru a vă pregăti magazinul. După ce ați terminat, sunteți gata să adăugați noile produse.
  3. Creați câteva produse dacă nu aveți încă. Pentru mai multe informații despre cum să adăugați un produs nou, consultați acest tutorial.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1: Proiectarea barei lipicioase pe o pagină de produs

Vom folosi un produs simplu simulat pentru acest exemplu, deci trebuie să creați un produs nou sau să editați un produs existent. Informațiile despre produs nu sunt importante pentru acest tutorial, trebuie doar să vă asigurați că aveți elementele de bază, cum ar fi titlul produsului, prețul, descrierea, imaginea etc.

După ce aveți un produs simplu gata, faceți clic pentru a edita produsul pe backend și implementați Divi Builder pe pagina produsului. Sub Setări pagină Divi, selectați „Lățime completă” pentru aspectul paginii și apoi faceți clic pe „Construiți pe front-end”.

Pagina produsului ar trebui să arate similar cu aceasta.

Sub primul rând care conține pesmetul și notificarea despre coș, adăugați un rând nou cu un aspect cu o coloană.

Setări rând

Înainte de a adăuga module, actualizați setările rândului după cum urmează:

  • Culoare fundal: # 333333
  • Utilizați lățimea personalizată a jgheabului: DA
  • Lățimea jgheabului: 1
  • Lățime: 100%
  • Căptușeală: 0 px sus, 0 px jos

Făcând rândul lipicios

Pentru a face rândul lipicios, adăugați următorul CSS personalizat la Elementul principal pentru desktop: 

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

Apoi adăugați următorul CSS la același element principal pentru afișarea tabletei: 

top: 0px;

Dacă nu sunteți familiarizați cu proprietatea css „poziție: lipicioasă”, practic este un fel de amestec între poziția fixă ​​și poziția relativă în care elementul (în acest caz rândul) va derula împreună cu containerul său până când ajunge o poziție desemnată în partea de sus sau de jos a paginii (sau offsetul specificat). În acest exemplu, setăm decalajul să fie de 50 px de la partea de sus a ferestrei browserului (lăsând loc pentru înălțimea unui antet fix implicit pe desktop). Apoi, pe tabletă, offset-ul este schimbat în „top: 0px” pentru a fixa rândul / bara lipicioasă din partea de sus a browserului de pe mobil.

NOTĂ: Ignorați erorile pe care le vedeți când adăugați CSS în casetă. Codul va funcționa bine.

După CSS, actualizați indexul Z după cum urmează:

  • Indicele Z: 10

Acum rândul va deveni lipicios pe măsură ce utilizatorul derulează pagina produsului.

Coloană CSS personalizată

Înainte de a începe să umplem rândul cu conținut, trebuie să ne asigurăm că modulul din rândul nostru cu o coloană se va alinia orizontal în loc de vertical. Putem folosi un truc CSS simplu 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;

Aceasta se ocupă de designul nostru de rânduri lipicioase. Acum, trebuie să umplem rândul cu conținut.

Adăugați Woo Title

Adăugați un nou modul Woo Title la coloana rândului lipicios.

Apoi actualizați setările după cum urmează:

  • Culoarea textului titlului: #ffffff
  • Dimensiune text titlu: 28 px (desktop), 20 px (tabletă), 16 px (telefon)
  • Lățime: 30%
  • Garnitura: 2vw sus, 2vw jos, 2vw stânga, 2vw dreapta

Adăugați prețul Woo

Apoi, adăugați un modul de preț woo făcând clic pe pictograma plus gri care apare atunci când treceți peste modulul de titlu woo pe care tocmai l-ați creat.

Apoi actualizați setările Woo Price după cum urmează:

  • Preț Dimensiune text: 28 px (desktop), 20 px (tabletă), 16 px (telefon)
  • Lățime: 30%
  • Garnitura: 2vw sus, 2vw jos, 2vw stânga, 2vw dreapta
  • Lățimea marginii drepte: 1 px
  • Culoare margine dreaptă: # 777777
  • Lățimea marginii stângi: 1 px
  • Culoare margine stângă: # 777777

Adăugați modulul Woo Add to Cart

Pentru ultima bucată de conținut, adăugați un modul Woo Add to Cart imediat după modulul Woo Price.

Apoi actualizați setările după cum urmează:

Simplificați elementul Adăugați în coș ascunzând câmpul cantității stocului și cantitatea pe mobil.

  • Afișați câmpul de cantitate: OPRIT (tabletă)
  • Arată stoc: OFF

  • Alinierea textului: dreapta
  • Utilizați stiluri personalizate pentru buton: DA
  • Dimensiune text buton: 18 px (tabletă), 14 px (telefon)
  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # 7ac5af
  • Lățimea chenarului butonului: 0 px

  • Lățime: 40%
  • Garnitura: 2vw stânga, 2vw dreapta

Rezultat

Acum, să verificăm cum arată pe pagina live.

Și iată-l pe mobil.

Partea 2: Crearea unei bare lipicioase pentru notificări despre coș

Crearea unei bare lipicioase pentru avizul coșului implică de fapt doar câțiva pași simpli, dar rezultatul poate fi extrem de eficient. După cum probabil știți deja, notificarea despre coș apare numai după ce un utilizator face clic pe butonul „Adaugă în coș”. Dar este următorul pas crucial în procesul de cumpărare care îi conduce pe utilizatori la pagina de plată. Deci, atunci când notificarea despre coș apare ca o bară lipicioasă în partea de jos a ferestrei, aceasta 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 coloană în partea de jos a paginii produsului. Apoi actualizați setările rândului după cum urmează:

  • Lățime: 100%
  • Căptușeală: 0 px sus, 0 px jos

Apoi, faceți rândul lipicios 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 atunci când adăugați poziția: proprietate lipicioasă.

Acest lucru va face ca rândul să se lipească de partea de jos a ferestrei atunci când derulați în sus.

Apoi actualizați indexul z pentru a-l menține pe primul plan după cum urmează:

  • Indicele Z: 10

Adăugați modulul Notificare coș

După ce ați creat rândul, adăugați modulul Woo Cart Notice la rând și actualizați setările după cum urmează:

  • Dimensiune text text (telefon): 15 px
  • Marja: 0em jos

Asta e! Depinde de dvs. dacă doriți sau nu să ștergeți elementul implicit de notificare a coșului din partea de sus a paginii, dar ar putea fi o idee bună să îl lăsați pentru conversii mai bune.

Rezultat final

Iată rezultatul final cu cele două bare lipicioase la locul lor.

Desktop

Mobil

Gânduri finale

Sperăm că această postare ne va ajuta să înțelegem cum să creăm bare lipicioase pentru paginile noastre de produse din Divi. Am prezentat modul de creare a unei bare lipicioase care include titlul produsului, prețul și butonul Adăugare la coș. Și am arătat, de asemenea, cum să creăm o bară lipicioasă pentru avizul coșului. Ambele ar trebui să ajute procesul de cumpărare și să stimuleze conversiile. Și nici nu avem nevoie de un plugin!

Simțiți-vă liber să explorați noi modalități de utilizare a barelor lipicioase din pagina produsului pe propriul site.

Așteptăm cu nerăbdare să auzim de la dvs. în comentarii.

Noroc!