Cum să creați un CTA atrăgător în Divi cu câteva efecte simple de zbor

Interacțiunile subtile și efectele de plutire pot fi utile pentru crearea unui CTA (Call to Action) atrăgător. Trucul este să folosești efecte care fac CTA-ul tău mai atractiv și mai intuitiv, astfel încât utilizatorii sunt mai predispuși să acționeze. Și întrucât obiectivul final al majorității CTA-urilor este să faceți clic pe un link sau pe un buton, este important să vă optimizați CTA într-un mod care să aducă acele elemente care pot fi făcute clic pe primul plan.

În acest tutorial, vă voi arăta cum să utilizați Divi pentru a optimiza vizibilitatea CTA-urilor folosind mai multe efecte de hover. Vă voi arăta cum să adăugați fundaluri de împărțire a secțiunii pe hover pentru a vă aranja CTA-urile pentru un contrast și o lizibilitate mai bune. Și vă voi arăta cum să măriți și să mutați CTA în centrul paginii pe hover, astfel încât să devină punctul principal. Aceste efecte de plutire vor fi utile pentru a evidenția orice îndemn la acțiune și, sperăm, pentru a îmbunătăți experiența utilizatorului.

Să începem.

Trage cu ochiul

Iată o privire asupra efectelor atractive ale cursorului CTA pe care le vom construi în acest tutorial.

Descărcați gratuit aspectul aspectului efectelor de hover CTA

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

Î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.

DESCARCA

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!

Abonați-vă la canalul nostru Youtube

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, veți avea nevoie de următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. O imagine de fundal pentru a fi utilizată în construcția de proiectare. Voi folosi unul din pachetul de aspect veterinar pentru acest tutorial.

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

Implementarea efectelor atractive ale CTA Hover în Divi

Pentru acest exemplu de proiectare, vom începe cu un modul de apel la acțiune care este aliniat la stânga sau la dreapta. Apoi vom aduce modulul în centrul paginii și îl vom scala (sau îl vom mări) atunci când vom trece peste rând. Pentru a face apelul la acțiune să iasă în evidență și mai mult în starea de deplasare a rândului, îl vom pune în scenă adăugând separatoare de secțiuni care se vor închide în spatele modulului pentru un contrast mai bun.

Iată cum să o faci.

Crearea secțiunii și rândului

Mai întâi, creați o secțiune obișnuită cu un rând cu o coloană.

Înainte de a adăuga un modul, deschideți setările secțiunii și actualizați următoarele:

Adăugați o imagine de fundal cu punctul focal al imaginii în partea dreaptă, astfel încât să rămână vizibilă atunci când adăugați modulul nostru din stânga.

• Lățime maximă: 1080px
• Alinierea secțiunii: centru

Asta se ocupă de secțiune pentru moment. Vom reveni la setările secțiunii mai târziu pentru a adăuga efectele de deplasare a divizorului de secțiune.

Apoi, deschideți setările rândului și actualizați următoarele:

• lățime: 100%
• lățime maximă: 100%
• Căptușeală: 5% sus, 5% jos, 35% dreapta

Căptușirea dreaptă este cheia acestui design, deoarece împinge conținutul spre stânga. Vom reveni mai târziu pentru a adăuga opțiunile de deplasare pentru a muta conținutul rândului înapoi în centru mai târziu.

Adăugarea modulului Call to Action

Acum suntem pregătiți să construim modulul de chemare la acțiune, care va fi centrul principal al CTA-ului nostru atrăgător.

Continuați și adăugați un modul de apel la acțiune la rândul cu o singură coloană.

Apoi actualizați setările modulului de apelare la acțiune după cum urmează:

Conţinut

• Titlu: Reducere la prima vizită
• Buton: Faceți o programare
• Adresă URL a butonului: #

Proiecta

• Culoare fundal: #ffffff
• Culoarea textului: Întunecat
• Titlu Font: Nunito
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 36 px

• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 154c87
• Lățimea chenarului butonului: 0 px
• Lățime maximă: 500 px
• Alinierea modulului: centru
• Colțuri rotunde: 10 px

O caracteristică cheie a acestui design este lățimea maximă de 500 px. Acest lucru se va asigura că modulul nu se modifică în lățime ori de câte ori reglăm umplerea dreaptă a rândului mai târziu.

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 30 px
• Puterea neclarității umbrei cutiei: 100 px
• Puterea răspândirii umbrei cutiei: -30px

Scalarea și centrarea îndemnului la acțiune atunci când planează peste rând

Acum suntem gata să începem să adăugăm efectele noastre atractive de CTA. În acest moment, vrem să realizăm două lucruri atunci când planăm peste rând. În primul rând, vrem să mutăm CTA în centru. Și apoi vrem să mărim scara modulului (să îl facem mai mare) pentru a-l face și mai vizibil.

Pentru aceasta, deschideți setările rândului și actualizați următoarele:

• Căptușeală (hover): 0% corect

Apoi reglați căptușeala pentru afișajul mobil:

• Căptușeală (tabletă): 0% corect
• Căptușeală (telefon): 5% la stânga, 5% la dreapta

Pentru a mări CTA, adăugați următoarea proprietate de transformare la rândul de pe cursor:

• Scala de transformare (plimbare): 110%

Chiar dacă proprietatea scalei de transformare se aplică rândului, acest lucru se aplică indirect și tuturor elementelor copil din interiorul rândului, inclusiv modulului. Prin urmare, modulul va scala la 110% atunci când treceți peste rând.

Organizarea CTA pe Hover cu divizoare de secțiuni

În cele din urmă, suntem pregătiți să adăugăm separatoare de secțiuni pentru a pune în scenă cta atunci când treceți peste secțiune / rând. Cheia aici este să vă asigurați că secțiunea și rândul au aceeași înălțime și lățime, astfel încât utilizatorul să treacă simultan peste secțiune și rând fără goluri. Deci, trebuie să scoatem orice capitonare a secțiunii. Apoi, trebuie să creăm un separator de secțiune de sus și de jos care crește în înălțime atunci când treceți peste secțiune.

Iată ce să faci.

Deschideți setările secțiunii și actualizați următoarele:

Căptușeală: 0 px sus, 0 px jos

• Stil divizor superior (desktop): vezi captura de ecran
• Top Divider Style (tabletă și telefon): nici unul
• Culoare divizor superior: rgba (21,76,135,0,61)
• Înălțimea separatorului superior (implicit): 0%
• Înălțimea separatorului superior (în sus): 120%
• Flip divizor superior: orizontal

• Stilul divizorului de jos (desktop): vezi captura de ecran
• Stil divizor inferior (tabletă și telefon): nici unul
• Culoare divizor inferior: rgba (21,76,135,0,61)
• Înălțimea divizorului inferior (implicit): 0%
• Înălțimea împărțitorului inferior (în sus): 120%
• Flip divizor inferior: orizontal

Pentru a vă asigura că separatoarele nu apar în afara secțiunii, actualizați opțiunea de revărsare verticală și orizontală la ascuns.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Acum, să verificăm rezultatul final.

Rezultat final

Și iată designul pe tabletă și telefon.

Schimbarea poziției CTA

Dacă doriți să modificați poziția inițială a modulului Apel la acțiune înainte de starea de deplasare, puteți actualiza cu ușurință distanța dintre rânduri.

Din partea dreaptă

Să presupunem că doriți ca modulul să înceapă de la dreapta înainte de a trece cu mouse-ul. Pur și simplu actualizați setările rândului după cum urmează:

• Căptușeală: 35% la stânga
• Căptușeală (hover): stânga 0%

Veți dori să actualizați imaginea pentru a avea un punct focal stâng. După aceea, iată rezultatul.

De Jos

Sau, dacă doriți, puteți avea fereastra pop-up CTA din partea de jos a rândului. Pentru a face acest lucru, va trebui să adăugați o înălțime fixă ​​la secțiune și apoi să coborâți modulul cu niște căptușeli superioare.

Deschideți setările secțiunii și dați secțiunii o înălțime maximă și setați preaplinul la ascuns.

• Înălțime maximă (desktop): 415 px
• Overflow orizontal: ascuns
• Vertical Overflow: ascuns

Apoi deschideți setările rândului și actualizați umplutura pentru a împinge modulul parțial din vizualizare sub secțiune. Apoi scoateți căptușeala superioară pentru a o readuce înapoi.

• Căptușeală (desktop): 25% sus, 5% jos
• Căptușeală (hover): 5% în partea de sus

Iată rezultatul ...

Gânduri finale

Divi îl face distractiv și ușor să adăugați tot felul de efecte de hover la proiectele paginilor dvs. web. Cele mai bune efecte de plutire sunt cele care au un scop și îmbunătățesc de fapt experiența utilizatorului. Câteva efecte simple de cursare acoperite în această postare ar trebui să ajute la crearea unor CTA-uri atrăgătoare, care arată minunat, îmbunătățesc experiența utilizatorului și, sperăm, să ducă la mai multe conversii.

Pentru mai multe idei, consultați postarea noastră în 3 moduri în care puteți utiliza opțiunile de plasare a cursorului pentru a sublinia CTA-urile din Divi și postarea noastră despre crearea de CTA-uri slide-in.

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

Noroc!