Ljepljive trake i dalje su popularan dio web dizajna. Izvrsne su za poticanje konverzija tako što pozive na akciju drže na vrhu, a da nisu toliko nametljivi kao skočni prozori.
U ovom slučaju upotrebe dizajnirat ćemo ljepljivu traku za proizvode WooCommerce koristeći Woo module iz Divi. Ljepljiva traka može uključivati bilo koji modul Divi. Za ovaj vodič stvorit ćemo ljepljivu traku koja uključuje gumb "Dodaj u košaricu" tako da ostane vidljiva kada se korisnik pomiče prema dolje po stranici. Osim toga, izradit ćemo i traku obavijesti o košarici za kupnju tako da će korisnici uvijek vidjeti gumb "pogledaj košaricu" nakon što se klikne gumb "dodaj u košaricu".
Ovi ljepljivi elementi šipke pomoći će povećavanju konverzija održavanjem vida tih presudnih CTA-ova.
pregled
Ovdje je pregled onoga što ćemo dizajnirati u ovom vodiču.
Dio 1: Dizajn ljepljive šipke na stranici proizvoda
Za ovaj ćemo primjer upotrijebiti jednostavan simulirani proizvod, tako da morate stvoriti novi proizvod ili urediti postojeći. Informacije o proizvodu nisu važne za ovaj vodič. Provjerite imate li osnove poput naslova proizvoda, cijene, opisa, slike itd.
Nakon što je jednostavan proizvod spreman, kliknite da biste uredili proizvod na pozadini i implementirali ga Divi Graditelj na stranici proizvoda. Pod Divi Page Settings, odaberite "Fullwidth" za izgled, zatim kliknite "Build on Front."
Stranica proizvoda trebala bi izgledati ovako.
Ispod prvog retka koji sadrži mrvice i obavijest o košarici dodajte novi red s rasporedom u jedan stupac.
Postavke linije
Prije dodavanja modula ažurirajte postavke linije na sljedeći način:
- Boja pozadine: # 333333
- Koristite prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 100%
- Tapaciranje: 0px odozdo, 0px dno
Liniju učinite ljepljivom
Da bi linija postala ljepljiva, dodajte sljedeći prilagođeni CSS kôd glavnom elementu radne površine:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Zatim dodajte sljedeći CSS kôd istom glavnom elementu za zaslon tableta:
top: 0px;
Ako vam nije poznato css svojstvo "position: sticky", ovo je neka vrsta kombinacije između fiksnog položaja i relativnog položaja gdje će se element (u ovom slučaju linija) pomicati sa svojim spremnik dok ne dosegne određeni položaj na vrhu ili dnu stranice (ili navedeni pomak). U ovom smo primjeru postavili pomak na 50 piksela od vrha prozora preglednika (ostavljajući prostor za visinu zadanog fiksnog zaglavlja na radnoj površini). Zatim se na tabletu pomak mijenja u "top: 0px" kako bi se ispravila ljepljiva linija / traka na vrhu preglednika na mobitelu.
Napomena: Zanemarite sve pogreške koje se pojave kada dodate CSS u okvir. Kôd će raditi u redu.
Nakon CSS-a ažurirajte Z indeks na sljedeći način:
- Z indeks: 10
Sada će linija postati ljepljiva dok se korisnik kreće kroz stranicu proizvoda.
Prilagođeni stupac CSS
Prije nego počnete ispunjavati liniju sa sadržaj, moramo biti sigurni da će se modul unutar našeg retka s jednim stupcem poravnati vodoravno umjesto okomito. Možemo upotrijebiti jednostavan CSS trik da to učinimo sa svojstvom flex. Otvorite postavke stupca i dodajte sljedeći prilagođeni CSS glavnom elementu:
display:flex; align-items:center;
Ovo brine o našem dizajnu ljepljive linije. Sada moramo popuniti liniju s sadržaj.
Dodajte naslov Woo
Dodajte novi modul Woo naslova u stupac ljepljive linije.
Zatim ažurirajte postavke na sljedeći način:
- Naslov teksta u boji: #ffffff
- Veličina naslova teksta: 28px (desktop), 20px (tablet), 16px (telefon)
- Širina: 30%
- Tapaciranje: 2vw na vrhu, 2vw na dnu, 2vw na dnu, 2vw na lijevoj strani, XNUMXvw na desnoj strani
Dodajte cijenu Woo
Zatim dodajte Woo modul cijene klikom na ikonu sive boje plus koja se pojavljuje kada pokažite mišem iznad modula naslova koji ste upravo stvorili.
Zatim ažurirajte postavke Woo Price na sljedeći način:
- Cijena teksta Veličina: 28px (desktop), 20px (tablet), 16px (telefon)
- Širina: 30%
- Tapaciranje: 2vw na vrhu, 2vw na dnu, 2vw na dnu, 2vw na lijevoj strani, XNUMXvw na desnoj strani
- Širina desne granice: 1px
- Boja desne granice: #777777
- Širina lijevog ruba: 1px
- Boja na lijevoj ivici: #777777
Dodavanje modula Dodaj u košaricu
Za posljednji element od sadržaj, dodajte modul Woo Add to Cart odmah nakon modula Woo Price.
Zatim ažurirajte postavke na sljedeći način:
Pojednostavite element Dodaj u košaricu skrivanjem polja količine i količine zalihe na mobitelu.
- Polje za prikaz količine: OFF (tablet)
- Prikaži zalihu: isključeno
- Poravnanje teksta: desno
- Upotrijebite prilagođene stilove za gumb: DA
- Veličina teksta gumba: 18px (tablet), 14px (telefon)
- Boja teksta gumba: #ffffff
- Boja pozadine gumba: #0c71c3
- Širina obruba gumba: 0px
- Širina: 40%
- Tapaciranje: 2vw s lijeve strane, 2vw s desne strane
rezultat
Pogledajmo kako to izgleda na stranici uživo.
2 Dio: Stvorite traku s obavijestima o košaricama
Stvaranje ljepljive trake s obavijestima o kolicima zapravo uključuje nekoliko jednostavnih koraka, ali rezultat može biti izuzetno učinkovit. Kao što možda već znate, obavijest o košarici pojavljuje se samo kada korisnik klikne gumb "Dodaj u košaricu". Ali to je presudni sljedeći korak u procesu kupnje koji korisnike odvodi na stranicu za naplatu. Dakle, kada se obavijest o košarici pojavi kao ljepljiva traka na dnu prozora, korisniku je vidljivija.
Da biste stvorili ljepljivu traku obavijesti o košarici, prvo stvorite novi redak s jednim stupcem na dnu stranice proizvoda. Zatim ažurirajte postavke reda kako slijedi:
- Širina: 100%
- Tapaciranje: 0px na vrhu, 0px na dnu
Učinite liniju ljepljivom dodavanjem sljedećeg prilagođenog CSS-a glavnom elementu:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Napomena: Kao i ranije, možete zanemariti pogreške koje se pojavljuju prilikom dodavanja svojstva position: sticky.
Red će se lijepiti na dnu prozora kad se pomičete prema gore.
Zatim ažurirajte z indeks kako bi ostao u prvom planu, i to tako:
- Z indeks: 10
Dodajte modul obavijesti o košarici
Nakon što stvorite liniju, dodajte Woo Cart Obavijest u liniju i ažurirajte postavke na sljedeći način:
- Veličina teksta (telefon): 15px
- Margina: 0em pri dnu
To je to ! Želite li ukloniti zadanu stavku upozorenja o košarici na vrhu stranice, ovisi o vama, ali možda bi bilo dobro ostaviti je radi boljih konverzija.
Konačni rezultat
Evo kako bi konačni rezultat mogao izgledati.
Završne misli
Nadamo se da će nam ovaj članak pomoći da shvatimo kako stvoriti ljepljive trake za naše stranice proizvoda u Diviju. Opisali smo kako stvoriti ljepljivu traku koja uključuje naslov proizvoda, cijenu i gumb Dodaj u košaricu. A također smo pokazali kako stvoriti ljepljivu traku. I jedno i drugo trebalo bi olakšati postupak kupnje i potaknuti konverzije. A ne treba nam ni dodatak!
