Cum să vă animați modulul Divi Call to Action

Tema noastră semnătură, Divi, vine cu diverse opțiuni de stil pentru biblioteca sa de module native. Pe lângă faptul că aveți un control profund asupra modului în care vor arăta elementele de pe site-ul dvs., aveți și opțiunea de a adăuga mișcare paginilor dvs. Divi include mai multe efecte de animație pe care le puteți adăuga la următorul proiect de web design. În această postare, vom analiza cum să folosiți următoarele setări de animație în Divi în modulul nativ Call to Action:

1. Planare
2. Efecte de defilare
3. Animație și
4. Lipicios

Pentru acest tutorial, vom recrea o secțiune din pachetul de layout al agenției de marketing Divi. Vom lucra cu aspectul paginii de destinație.

Instalarea aspectului paginii de destinație

Mai întâi trebuie să creăm o pagină nouă în WordPress pentru a instala aspectul paginii. Facem acest lucru trecând cu mouse-ul peste elementul de meniu Pagini din meniul din stânga. Apoi, facem clic pe Adăugare nou .

Odată ajuns în editorul WordPress implicit Gutenberg, setează un titlu pentru noua ta pagină. Apoi, faceți clic pe butonul violet Utilizați Divi Builder .

Apoi vi se vor prezenta trei opțiuni. Vom face clic pe butonul violet din mijloc, Browse Layouts .

Acest lucru va deschide biblioteca vastă de layout a Divi, care vine plină cu pagini pre-proiectate din care puteți alege. Vom selecta pachetul de layout al agenției de marketing .

Din pachetul de aspect, vom folosi aspectul paginii de destinație. Faceți clic pe aspect , apoi faceți clic pe butonul albastru Utilizați acest aspect pentru a încărca aspectul în pagina nou creată.

Odată ce aspectul s-a încărcat, faceți clic pe butonul verde Salvare din partea dreaptă jos a ecranului.

Acum începe munca adevărată! Să creăm primul nostru îndemn la acțiune!

Adăugarea modulului nostru de apel la acțiune

Pe parcursul acestui tutorial, vom folosi un modul de apel la acțiune pentru a înlocui modulele text și butoane utilizate în această secțiune.

Pentru început, să ștergem mai întâi aceste module. Plasați cursorul peste fiecare modul și faceți clic pe pictograma coș de gunoi când apare meniul pop-out gri. Vrem să părăsim modulul de text care spune Introducere, dar vom folosi un apel la acțiune pentru a înlocui modulele pe care le-am șters.

Apoi, dorim să adăugăm un modul de apel la acțiune la rând. Facem acest lucru trecând cu mouse-ul peste Modulul de text și făcând clic pe pictograma gri plus .

Aceasta va deschide apoi fereastra de tip module. De acolo, facem clic pe pictograma Modulul Call to Action .

Odată cu modulul adăugat, putem începe să-l stilăm pentru a fi utilizat în aspectul nostru.

Modelarea modulului nostru de apel la acțiune

Vom folosi aceeași copie din modulele originale pentru modulul nostru de apel la acțiune nou adăugat. Putem introduce acest conținut în câmpurile Titlu, Buton și Corp ale modulului.

Stilizarea textului îndemnului la acțiune

Acum, să începem să stilăm modulul nostru. Începem prin a face clic pe fila Design a Modulului Call to Action. În primul rând, dorim să setăm alinierea și culoarea textului nostru. Vrem să avem textul nostru aliniat la Centru și culoarea setată la Lumină .

În al doilea rând, vrem să începem să ne stilăm textul titlului. Mai jos, găsiți setările pe care le vom folosi.

Setări text titlu:

• Font de titlu: Poppins
• Greutatea fontului titlului: aldine
• Dimensiunea textului titlului: 55px
• Înălțimea liniei de titlu: 1,2 em

Observați cum arată similar cu textul care a fost folosit anterior. Vom primi îndrumările noastre de stil de la pachetul nostru de layout al agenției de marketing Divi.

În al treilea rând, vrem să ne stilăm textul corporal. Să folosim setările de mai jos pentru a obține textul corporal al modulului nostru.

Setări pentru textul corpului:

• Font pentru corp: Raleway
• Greutatea fontului corporal: obișnuit
• Dimensiunea textului corpului: 16 px
• Înălțimea liniei corpului: 1,8 em

Stiluri de butoane din modulul nostru

În cele din urmă, vom folosi următoarele setări pentru a stila butonul din modulul Call to Action.

Setări butoane:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 14px
• Culoarea textului butonului: #000000
• Fundalul butonului: #ffffff
• Lățimea chenarului butonului: 0px
• Raza marginii butonului: 10px
• Font pentru buton: Poppins
• Greutatea fontului butonului: aldine
• Umplutură pentru butoane:
  • Umplutură de sus și de jos: 20px
  • Umplutură la stânga și la dreapta: 30px

Adăugarea de umplutură la modulul nostru

Înainte de a părăsi fila Design, să adăugăm câteva elemente de umplutură la conținutul modulului nostru de apel la acțiune. Pentru a face acest lucru, să derulăm în jos la fila Spațiere . Apoi, introduceți 10% pentru umplutura din stânga și din dreapta .

Schimbarea culorii de fundal

Pentru a termina stilul modulului nostru, vom ieși din fila Design și, în sfârșit, vom termina în fila Conținut. Facem clic pe fila Conținut , apoi derulăm în jos la fila Fundal. Apoi, debifăm comutatorul Utilizare culoare de fundal pentru a elimina culoarea de fundal implicită a modulului.

După ce s-a terminat, facem clic pe bifa verde pentru a ne salva munca și a închide modulul de apel la acțiune.

Animarea modulului nostru cu efecte Hover

Vom începe să animam primul nostru modul de apel la acțiune cu o animație subtilă Hover. Puteți vedea mai jos produsul final al lucrării noastre.

Activarea Setărilor Hover

Pentru început, intrăm în Setările modulului pentru modulul nostru de îndemn la acțiune nou stilat.

Apoi, facem clic pe fila Design . În cele din urmă, derulăm în jos la fila Transformare . Aici vom activa efectul de hover pentru acest modul. Odată ce ne aflăm în secțiunea Transformare, trecem cu mouse-ul peste Transformare pentru a dezvălui un meniu derulant. Din meniu, facem clic pe pictograma Pointer . Această pictogramă înseamnă că putem seta setări alternative în opțiunile de transformare care vor fi activate la trecerea cu mouse-ul.

Unul dintre lucrurile grozave despre Divi este că multe elemente și opțiuni din Divi pot avea, de asemenea, același efect de hover activat. În cazul nostru, dorim ca dimensiunea modulului să crească cu 5% atunci când trecem cu mouse-ul peste el.

În primul rând, vom face clic pe fila Hover . Acest lucru ne va arăta opțiunile pe care le putem folosi pentru a ne transforma modulul. În al doilea rând, vom face clic pe pictograma Scale . Dorim să creștem dimensiunea totală a modulului nostru. Apoi, introducem suma cu care dorim să crească modulul nostru. Dorim să fie mai mare decât este în prezent cu cinci procente, așa că introducem 105% în opțiunea de dimensiune . Pentru a salva modificările, facem apoi clic pe butonul nostru de bifare verde .

Utilizarea efectelor de defilare cu modulul de apel la acțiune

Să ne uităm la modul în care putem folosi Scroll Effects pentru a adăuga o animație subtilă la modulul nostru Call to Action. Iată ce vom realiza prin Efectele de defilare native ale Divi:

Vom începe de la modulul nostru de chemare la acțiune proaspăt stilat. Spre deosebire de setările noastre de transformare, vom activa Efectele de defilare în fila Avansat a modulului nostru. Deci, facem clic pe fila Avansat , apoi derulăm în jos la fila Efecte de defilare .

Odată ajuns în fila Efecte de defilare, există mai multe setări de care trebuie să fim conștienți pentru a crea acest efect subtil. În primul rând, vom păstra poziția Sticky ca Nu Stick pentru acest modul. În continuare, vom folosi efectul de defilare Fading In and Out. Facem clic pe pictograma acesteia pentru a o activa . În al treilea rând, dorim să activăm setarea activând comutatorul Activare Fading In și Out .

O parte majoră a acestui stil de animație o reprezintă cifrele utilizate pentru opacitatea de început, mijloc și sfârșit. Aceste setări sunt activate atunci când modulul intră în diferitele secțiuni ale ferestrei de vizualizare a ecranului. Pentru exemplul nostru, vom folosi următoarele setări:

Setări de intrare și ieșire:

• Opacitatea de pornire: 10%
• Opacitate medie: 99%
• Opacitate finală: 20%

Pentru declanșarea efectului de mișcare, dorim ca Fading In și Out să înceapă când mijlocul elementului este în focalizare.

Folosind aceste setări, putem crea un efect de defilare curat în modulul nostru de apel la acțiune. În continuare, să vedem cum putem anima intrarea unui alt Modul Call to Action cu fila Animație.

Animații de intrare și Divi

O animație de intrare are loc pe măsură ce un modul intră în fereastra de vizualizare a ecranului. În timp ce Scroll Effects vă permite să interacționați continuu cu modulul de fiecare dată când defilați prin fereastra acestuia, o animație de intrare este activată o dată. O animație de intrare poate fi realizată în buclă, totuși, indiferent dacă defilați pe lângă ea, treceți cu mouse-ul peste ea etc., nu va fi reanimată. Iată cum îți creezi animația de intrare. Am dori să folosim o animație Zoom odată ce modulul intră în vedere:

În fereastra de setări ale Modulului de apel la acțiune, facem clic pe fila Design și derulăm în jos la Animație . În interior, avem mai multe opțiuni de animație pe care le putem folosi odată ce acest modul se mută în focalizare. Faceți clic pe Stilul de animație Zoom. Pentru Direcția de animație, dorim să o lăsăm ca Centru – implicit – și să lăsăm toate celelalte setări implicite.

Utilizarea efectelor lipicioase cu modulul Call to Action

Exemplul nostru final ne va arăta cum să folosim Sticky Effects nativ Divi. Pentru aceasta, va trebui să creăm un rând și o secțiune nouă.

Faceți clic pe pictograma albastră plus pentru a adăuga o nouă secțiune.

Apoi, selectați aspectul rândului cu o singură coloană .

Vom folosi modulul nostru de apel la acțiune prefabricat, astfel încât să putem închide fereastra Adăugați un nou modul. Pentru secțiune, vom începe prin a introduce setările și a seta o culoare de fundal. Pentru a face acest lucru, faceți clic pe pictograma roată pentru a ajunge la setările secțiunii.

Apoi, derulați în jos la fila Fundal și setați culoarea de fundal la #f1ede1 .

Cu fundalul instalat, acum trebuie să adăugăm setări de spațiere pentru a ne asigura că modulul nostru lipicios de apel la acțiune funcționează așa cum este afișat. Deci, facem clic pe fila Design și apoi derulăm la secțiunea Spațiere . Această parte este esențială pentru a ne asigura că avem suficient spațiu pentru a vedea că animația noastră Sticky are efect.

Folosim următoarele setări pentru a modifica spațierea secțiunii noastre:

Setări de spațiere între secțiuni:

• Marja de sus: 0px
• Umplutură de sus: 0px
• Umplutură inferioară: 300px

Odată ce am introdus aceste setări, ne putem salva munca făcând clic pe bifa verde. Acum, vom activa efectul Sticky în rândul secțiunii noastre. Mai întâi, intrăm în setările rândului făcând clic pe pictograma roată .

Înainte de a naviga la fila Avansat, să setăm culoarea de fundal pentru rând. La fel cum am procedat cu secțiunea, derulăm în jos la fila Fundal și setăm culoarea de fundal la #000000 .

Cu aceasta, rândul nostru aproape că arată ca modulul Call to Action pe care l-am creat la începutul acestui tutorial. Cu toate acestea, vom folosi umplutură și margini pentru a face acest rând să se extindă de la o margine la alta. Acest lucru va face efectul Sticky atrăgător din punct de vedere vizual și mai puțin intruziv atunci când este utilizat pentru vizitatorii site-ului dvs.

Acum trecem la fila Design și facem clic pe fila Dimensiune . Apoi, setăm Lățimea și Lățimea maximă la 100% .

Mergând mai departe, acum derulăm în jos la fila Spațiere și adăugăm valori egale de umplutură de sus și de jos de 20px . Acest lucru ajută la crearea unui aspect mai elegant cu îndemnul nostru la acțiune.

Acum că avem estetica acoperită, putem trece la aplicarea efectului nostru de defilare. Trecem la fila Advanced , apoi facem clic pe fila Scroll Effects . Acum, activăm poziția Sticky selectând Stick to Top . Dorim ca îndemnul nostru să rămână chiar în partea de sus a ecranului, așa că lăsăm Sticky Top Offset la 0px . Singura altă setare pe care o vom schimba va fi limita inferioară, pe care o vom seta acum la Secțiune .

Pentru a rezuma

După cum puteți vedea, în mod implicit, Divi are multe caracteristici și modalități de a adăuga animație și mișcare paginii dvs. Indiferent dacă doriți să adăugați mișcare pentru a vă prezenta pagina sau să creați interes pentru conținutul dvs., Divi vă oferă instrumentele pentru a face acest lucru. Am acoperit patru moduri diferite de a anima modulul Call to Action, dar puteți utiliza aceleași setări în biblioteca de module din Divi. De asemenea, puteți aplica aceste setări la secțiuni, coloane și rânduri pentru a crea modele de pagini vibrante și unice pentru utilizatorii dvs.

Cum folosești animația în Divi? V-a interesat vreuna dintre aceste tehnici? Anunțați-ne în secțiunea de comentarii și haideți să pornim o conversație!