Što je CTA vizualno privlačniji, to je veća šansa da će stopa konverzije biti. Postoji mnogo načina za dizajn CTA-ova, ali u ovom ćemo vam članku pokazati kako stvoriti zadivljujuće CTA predloške stupaca s poluprozirnim slikama i preklapanjima stupaca. Poluprozirne slike možete pronaći u donjoj mapi za preuzimanje, ali slobodno upotrijebite i druge slike. Također ćete moći besplatno preuzeti datoteku JSON!
Idemo.
Pregledi
Prije nego što uđemo u tutorial, pogledajmo kako to izgleda na različitim veličinama zaslona.
Krenimo rekreirati!
Dodajte novi odjeljak
kontekst
Započnite s izradom nove stranice ili dodavanjem novog redovnog odjeljka na postojeću stranicu. Zatim idite na odjeljak postavki i dodajte gradijentnu pozadinu.
- Pozadina: gradijent
- Gradijent gradijenta boje: vrlo svijetlosiva #efefef
- Boja pozadine dvije: bijela #ffffff
- Tip gradijenta: radijalni
- Radijalni smjer: sredina
- Početna pozicija: 52%
- Završna pozicija: 50%
razmak
Prebacite se na karticu Dizajn i prilagodite ispunu u postavkama razmaka.
- Gornja i donja obloga
- Ured: 0vw
- Tapaciranje u čarapama
- Tablet + telefon: 70vw
Dodajte novi redak
Struktura stupaca
Nastavite dodavati novi redak pomoću sljedeće strukture stupca:
dimenzioniranje
Zatim podesite širinu i maksimalnu širinu crte.
- Širina: 100%
- Maks. Širina 100%
Dodajte tekstualni modul
Dodajte H2 i tekstualni sadržaj
Vrijeme je za dodavanje modula! Prvo dodajte tekstualni modul i umetnite ga sadržaj H2 i odlomci po vašem izboru.
Tekstovi
Prebacite se na karticu dizajna i oblikujte tekst na sljedeći način:
- Tekst teksta: Open Sans
- Usklađivanje teksta: središte
- Boja teksta: zelena #5bba1b
- Veličina teksta:
- Ured: 1.2vw
- Tablet: 2.8vw
- Telefon: 3.6vw
- Razmak između tekstualnih slova: 0.2vw
- Visina retka teksta: 1.8em
Naslov 2 Tekst
Nakon stiliziranja teksta stavka, također stilizirajte tekst H2.
- Odjeljak: H2
- H2 Težina slova: Doppio One
- Poravnavanje teksta H2: Središte
- Boja teksta H2: #3d3d3d
- H2 Veličina teksta:
- Ured: 4.4vw
- Tablet: 5.9vw
- Telefon: 6.9vw
razmak
I dodajte malo paddinga na vrhu.
- Gornja obloga: 212px
Dodajte modul podjele
vidljivost
Ispod tekstnog modula dodajte modul za podjelu i postavite vidljivost na "Da".
- Vidljivost: da
Crta
Zatim promijenite boju separatora.
- Boja linije: tamno siva #545454
dimenzioniranje
Sada prilagodite veličinu separatora tako da izgleda manje.
- Težina separatora: 4px
- Širina: 9%
- Usklađivanje modula: centar
razmak
Također dodajte negativnu gornju maržu.
- Gornja marža:
- Ured: -40px
- Tablet + telefon: -15px
Dodajte novi redak
Struktura stupaca
Nastavite dodavanjem novog retka s tri stupca jednake veličine. To će biti osnova za dizajn stupca CTA.
kontekst
Prije dodavanja modula dodajte gradijent pozadini parametara linije.
- Pozadina: gradijent
- 1 gradijent pozadinske boje: bijela #ffffff
- Boja pozadinske pregrade: prozirna
- Tip gradijenta: radijalni
- Radijalno središte upravljača
- Početna pozicija: 42%
- Završna pozicija: 50%
dimenzioniranje
Sada prilagodite veličinu crte.
- Širina: 100%
- Maksimalna širina: 100%
razmak
Zatim idite na postavke razmaka i dodajte prilagođene vrijednosti umetanja.
- gornja presvlaka: 22vw
- Donja obloga: 10vw
- Lijeva i desna obloga: 10vw
Postavke stupca 1
kontekst
Nastavite otvaranjem stupca 1 i dodavanjem pozadine gradijenta.
- Pozadina: gradijent
- Boja pozadinske pregrade: plava #2a4eed
- Boja pozadinske boje gradijenta dva: svijetlo plava #91f5f7
- Tip gradijenta: linearni
- Smjer gradijenta: 38deg
- Početna pozicija: 23%
granica
Zatim definirajte zaobljene kutove stupaca u postavkama obruba.
- Zaobljeni uglovi: 2vw na svim uglovima
Kutija sjena
Dodajte i suptilnu nijansu okvira.
- Sjena okvira: Druga opcija
- Sjena okvira Horizontalni položaj: 6px
- Okvirna okomita pozicija: -10px
- Kutija sjena zamućenja sjena: 50px
prelijeva
Provjerite jesu li prepuni stupca također vidljivi.
- Vodoravni i okomiti preljev: vidljiv
Postavke stupca 2
kontekst
Idite u drugi stupac i dodajte sljedeću pozadinu gradijenta:
- Pozadina: gradijent
- Boja gradijenta pozadine: #1ba038
- Dvobojni gradijent pozadine: #c6f727
- Tip gradijenta: linearni
- Smjer gradijenta: 38deg
- Početna pozicija: 23%
granica
U stup dodajte i polumjer obruba.
- Zaobljeni uglovi: 2vw u četiri ugla
Kutija sjena
S suptilnom sjenom kutije.
- Sjena okvira: Druga opcija
- Sjena okvira Horizontalni položaj: 6px
- Okvirna okomita pozicija: -10px
- Kutija sjena zamućenja sjena: 50px
Transformator
Ovaj je stupac malo viši od ostalih. Da bismo stvorili ovaj efekt, prilagodit ćemo postavke pretvorbe pretvorbe za stupac 2.
- Transformer Prevoditelj:
- Ured: -8vw, y-os
- Tablet + telefon: 30vw, Y os
prelijeva
Takođe učinite vidljivim prelijevanja ovog stupca.
- Vodoravni i okomiti preljevi: vidljivi
Postavke stupca 3
kontekst
Prijeđimo na zadnji i zadnji stupac! Dodajte pozadinu gradijenta.
- Pozadina: gradijent
- Boja pozadinske boje gradijenta: #f0562c
- Dvobojni gradijent pozadine: #f1a526
- Tip gradijenta: linearni
- Smjer gradijenta: 38deg
- Početna pozicija: 23%
granica
Prebacite se na karticu Dizajn i dodajte radijus obruba u svaki kut.
- Zaobljeni kutovi: 2vw na svim uglovima.
Kutija sjena
Dodajte i okvir za hlađenje.
- Sjena okvira: Druga opcija
- Sjena okvira Horizontalni položaj: 6px
- Okvirna okomita pozicija: -10px
- Kutija sjena zamućenja sjena: 50px
Transformator
Na manjim veličinama zaslona morat ćemo premjestiti stupac pomoću prilagođenih vrijednosti pretvorbe pretvorbe.
- Transformer Prevoditelj:
- Tablet + telefon: 60vw
prelijeva
Na kraju, prilagodite postavke preljeva.
- Vodoravni i okomiti preljevi: vidljivi
Dodajte slikovne module
Uvezite poluprozirnu sliku izreza
Nakon što napravite sve parametre stupca, vrijeme je za dodavanje modula. Dodajte modul slike u stupac 1 i prenesite poluprozirnu sliku po vašem izboru. Slike koje smo koristili možete pronaći u mapi u zipovanju koju ste mogli preuzeti na početku ovog članka.
dimenzioniranje
Napravite modul pune širine.
- Prebacite se na način pune širine: Da
razmak
Zatim dodajte vrijednosti marže i ispunjavanja.
- Gornja marža:
- Ured: -11vw
- Tablet + telefon: -24vw
- Padding lijevo i desno:
- Ured: 5vw
- Tablet + telefon: 20vw
Pretvorite ljestve u lebdeću
Slici dodajemo suptilan efekt lebdenja pomoću opcije mjerila pretvorbe u postavkama pretvorbe.
- Linija transformacije na lebdećem položaju: 120% na obje osi.
Z-indeks
Da biste bili sigurni da se slika prikazuje na vrhu stupca, povećajte vrijednost indeksa z na kartici Napredno.
- Z-indeks: 1
Duplicirajte i povucite module slike
Sada dvaput klonirajte modul slike i stavite duplikate u preostala dva stupca. Ovaj je postupak lakši u žičanom načinu rada.
- Započnite s umnožavanjem modula slike dva puta
- Zatim povucite nove module slike u stupce 2 i 3.
- Preuzmite različite slike
Dodajte tekstualne module
Dodajte H3 sadržaj
Ispod slike u stupcu 1 dodajte tekstualni modul i umetnite nešto sadržaj H3 po vašem izboru.
Naslov 3 Tekst
Prebacite se na karticu dizajn i primijenite stil na postavke teksta H3.
- Naslov teksta: H3
- H3 font: Doppio One
- H3 Težina slova: podebljana
- Usklađivanje H3: središte
- H3 Boja teksta: bijela #ffffff
- H3 Veličina teksta:
- Ured: 1.8vw
- Tablet: 5vw
- Telefon: 6vw
Umnožavanje i povlačenje tekstualnih modula
Klonirajte tekstualni modul dva puta i stavite duplikate u dva preostala stupca.
- Započnite s umnožavanjem tekstualnih modula dva puta.
- Zatim ih povucite ispod modula slike u stupcima 2 i 3.
- Promijeni sadržaj u svakom novom tekstualnom modulu
Dodajte tekstualne module
Dodajte sadržaj
Ispod naslovnog modula dodajte novi modul teksta. Dodajte sadržaj odlomka u područje sadržaja.
Tekstovi
Sada, stil stil na sljedeći način.
- Tekst teksta: Open Sans
- Boja teksta: Bijela #ffffff
- Veličina teksta:
- Ured: 0.6vw
- Tablet: 2vw
- Telefon: 2.8vw
- Visina retka teksta: 2.2em
razmak
Za centriranje teksta prilagodite razmak modula na sljedeći način.
- Donja marža:
- Ured: 5vw
- Tablet + telefon: 10vw
- Padding lijevo i desno
- Ured: 5vw
- Tablet + telefon: 14vw
Umnožavanje i povlačenje tekstualnih modula
Klonirajte tekstualni modul dva puta i povucite duplikate u preostala dva stupca.
- Započnite s umnožavanjem tekstualnih modula dva puta
- Zatim stavite duplikate u stupce 2 i 3
- Promijenite sadržaj svakog duplikata
Dodajte module modula
Dodajte sadržaj
Idemo na posljednji modul! Dodajte modul gumba u stupac 1 s kopijom po vašem izboru.
Dodaj link
Umetnite vezu u opcijama veza modula.
poravnanje
Sada poravnajte modul gumba.
- Poravnanje: središte
Stilovi gumba
Zatim pozovite gumb na sljedeći način.
- Veličina teksta gumba:
- Ured: 1vw
- Tablet: 2vw
- Telefon: 3vw
- Boja teksta gumba: Svijetlo plava #2a4eed
- Boja pozadine gumba: bijela #ffffff
- Polumjer obruba gumba: 50vw
- Font gumba: Double One
- Težina slova: podebljana
- Boja gumba: Svijetlo plava #2a4eed
razmak
Oblikujte gumb i stvorite preklapanje na dnu dodavanjem prilagođenih vrijednosti margina i umotavanja u postavkama razmaka.
- Donja marža:
- Ured: -1.7vw
- Tablet: -4vw
- Telefon: -6vw
- Tapaciranje vrha i dna:
- Ured: 1vw
- Tablet + telefon: 3vw
- Padding lijevo i desno
- Ured: 4vw
- Tablet + telefon: 10vw
Kutija sjena
Posljednje, ali ne najmanje bitno, gumbu dodajte suptilnu nijansu okvira.
- Sjena kutije: prva opcija
- Sjena vodoravnog položaja okvira: 0px
- Sjena vertikalnog položaja okvira: 2px
- Kutija sjena zamućenja sjena: 50px
Umnožavanje i povlačenje modula s gumbima
Kao i kod prethodnih modula, klonirajte gumb dva puta i stavite duplikate u preostala dva stupca retka.
- Klonirajte gumb gumba dva puta
- Duplikate stavite u stupce 2 i 3
Gumb 2 Tekst i boja ikone
Promijenite boju gumba i ikone modula gumba u stupcu 2.
- Boja teksta gumba: zelena # 1ba038
- Boja ikone: # 1ba038
Gumb 3 Tekst i boja ikone
Učinite isto s gumbom u posljednjem stupcu i gotovi ste!
- Boja teksta gumba: Narančasta #f0562c
- Boja ikone: # f0562c
Da završim
U ovom smo vam članku pokazali kako koristiti poluprozirne slike za stvaranje zapanjujućeg dizajna CTA stupca. Koristili smo postavke prelijevanja stupaca Divi tako da se slike i gumbi neprimjetno preklapaju. Pokušajte koristiti ovaj dizajn u svom sljedećem projektu Divi i javite nam kako ide u odjeljku za komentare!
