Cum se adaugă efecte de animație la secțiuni / rânduri în Divi

În tutorialul Divi de astăzi, vă vom arăta cum să adăugați efecte de animație la secțiuni și rânduri din Divi. Tema Divi în sine oferă câteva efecte de animație relevante care vă ajută să aduceți un nivel suplimentar de interacțiune pe site-ul dvs. web. Aceste efecte sunt ușor de atribuit unei imagini din Divi Builder în subcategoria Animație din fila Avansat.

Cu toate acestea, dacă căutați o modalitate de a adăuga aceste efecte de animație la alte module, secțiuni sau rânduri ale site-ului dvs. web, este posibil și acest lucru. În această postare, vă vom arăta exact cum să faceți acest lucru. În afară de a vă arăta cum să adăugați efectele de animație încorporate, vă vom arăta și cum să integrați wow.js și animate.css în site-ul dvs. Divi.

La sfârșitul acestei postări, veți putea adăuga efecte frumoase atât rândurilor, cât și secțiunilor. Pentru a vă ajuta să vizualizați procesul, am dori să împărtășim următorul exemplu (pe care vă vom arăta cum să îl realizați la sfârșitul acestei postări):

Divi Animations sau Wow.js și Animate.css?

Probabil vă întrebați în ce cazuri ar trebui să luați în considerare utilizarea animațiilor Divi și în ce cazuri wow.js și animate.css ar face treaba mai bine. În timp ce utilizarea animației încorporate Divi este cea mai ușoară soluție dacă nu doriți să creați unele efecte de animație avansate, efectele wow.js și animate.css vor aduce cu siguranță o mare valoare adăugată și site-ului dvs. web.

Când se utilizează animațiile Divi

Există cinci efecte de animație disponibile în Divi pe care le puteți utiliza:

• Fade-in-ul
• Diapozitivul de jos
• Glisorul din stânga
• Diapozitivul drept
• Diapozitivul de sus

Deși există doar cinci posibilități, acestea sunt și cele mai frecvent utilizate. Sunt simple și la obiect. Dacă doriți să dați un efect suplimentar frumos site-ului dvs. web, fără a depune prea mult efort, efectele de animație Divi sunt calea de urmat. Fiecare dintre aceste efecte este activat din momentul în care derulați și aveți o vedere a modulului, rândului sau secțiunii în care ați adăugat efectul. În acest fel, vizitatorii dvs. nu vor pierde efectele care se află în partea de jos a paginii, de exemplu.

Pentru a integra efectele animației Divi, nu trebuie să aveți o temă copil încărcată pe site-ul dvs. web. Puteți adăuga cu ușurință aceste efecte în timp ce lucrați încă la tema părinte.

Când se folosește Wow.js și Animate.css

Integrarea wow.js & animate.css în site-ul dvs. web este ceva ce vă va plăcea probabil din cauza numeroaselor opțiuni pe care le aveți. Există 14 categorii de efecte de animație care conțin diferite efecte relevante pentru acea categorie. Categoriile din care puteți alege sunt următoarele:

• Cautatori de atentie
• Intrări săritoare
• Ieșiri care sări
• Decolorarea intrărilor
• Ieșiri decolorate
• Flippers
• Viteza luminii
• Intrări rotative
• Ieșiri rotative
• Intrări glisante
• Ieșiri glisante
• Zoom Intrări
• Ieșiri zoom
• Speciale

Puteți vizualiza toate efectele disponibile făcând clic pe următorul link. Aceste efecte de animație apar și la derulare.

Cum se adaugă efecte de animație la secțiuni / rânduri în Divi

Abonați-vă la canalul nostru Youtube

Utilizați efectele de animație încorporate

Prima posibilitate pe care o vom arăta este efectele de animație încorporate. Vă vom arăta cum să aplicați efectele atât unei secțiuni, cât și unui rând. Deschideți pagina în care doriți să faceți modificările.

În exemplul nostru, vom adăuga efectele de animație la prima secțiune și rândul paginii noastre. Adăugarea animației pentru secțiune sau rând este în ambele cazuri aceeași. Codurile clasei CSS pentru diferitele efecte de animație sunt următoarele:

• Clasa CSS fade-in: et-waypoint et_pb_animation_fade_in
• Clasa CSS glisantă de jos: et-waypoint et_pb_animation_bottom
• Glisare stânga în clasa CSS: et-waypoint et_pb_animation_left
• Glisare dreapta: clasă CSS: et-waypoint et_pb_animation_right
• Top slide-in CSS class: et-waypoint et_pb_animation_top

Adăugați efect de animație la rând

Pentru a adăuga animația la un anumit rând, deschideți setările acelui rând și accesați fila Advanced. În fila Advanced, plasați clasa CSS cu efect de animație în câmpul Clasă CSS. În acest caz, vă vom arăta cum să adăugați animația fade-in.

Adăugați efect de animație la secțiune

Aceeași metodă pentru adăugarea unui efect de animație la un rând se aplică și unei secțiuni. Accesați fila Avansat și plasați clasa CSS cu efect de animație la alegere în câmpul Clasă CSS. În acest exemplu, vă vom arăta cum să adăugați efectul de animație slide-in de sus.

Rezultatul

Odată ce ați adăugat efectele în secțiunea și rândul dvs., veți vedea că următorul rezultat se instalează:

Adăugați Wow.js & Animate.css la tema copilului dvs.

În următoarea parte, vă vom arăta cum să adăugați wow.js și animate.css pe site-ul dvs. WordPress și cum să îl utilizați pe toată tema Divi.

În primul rând, vreau să-i acord credit lui Jeremy Cookson pentru această postare despre cum să integreze wow.js și animate.css în WordPress. În această parte a postării, vă vom arăta exact cum să realizați integrarea pentru un site web WordPress construit cu tema Divi.

Pentru a adăuga wow.js & animate.css la pagina dvs. web, va trebui să utilizați o temă secundară pe site-ul dvs. web. Dacă vă întrebați cum să creați o temă pentru copii, consultați această postare. După ce ați creat fișierele principale ale temei copilului dvs., va trebui să adăugați alte două fișiere pentru a completa tema copilului cu efectele de animație.

Descărcați fișierele și adăugați-le la tema copilului dvs.

Păstrați tema copilului la îndemână și descărcați următoarele două fișiere între timp făcând clic pe următoarele două linkuri:

• animate.min.css
• wow.min.js

După ce ați descărcat cele două fișiere, creați subfoldere în cadrul temei copilului. Denumiți unul dintre ele CSS și celălalt JS. După aceea, plasați animate.min.css în folderul CSS și wow.min.js în folderul JS.

Încărcați tema pentru copii

Următorul lucru pe care va trebui să-l faceți este să încărcați și să activați tema copil pe care tocmai ați adăugat wow.js și animate.css. Accesați tabloul de bord WordPress> Aspect> Teme> Și faceți clic pe „Adăugați un nou” în partea de sus a paginii.

Adăugați cod PHP în fișierul dvs. Functions.php

După ce ați încărcat tema copil, adăugați următoarele linii de cod PHP în fișierul functions.php al temei copilului:

// * Enqueue Animate.CSS și WOW.js
add_action ('wp_enqueue_scripts', 'sk_enqueue_scripts');
function sk_enqueue_scripts () {
wp_enqueue_style ('animate', get_stylesheet_directory_uri (). '/css/animate.min.css');
wp_enqueue_script ('wow', get_stylesheet_directory_uri (). '/js/wow.min.js', array (), ”, adevărat);
}
// * Enqueue script pentru a activa WOW.js
add_action ('wp_enqueue_scripts', 'sk_wow_init_in_footer');
funcție sk_wow_init_in_footer () {add_action ('print_footer_scripts', 'wow_init');}
// * Adăugați JavaScript înainte </body> funcția wow_init () {?>
<script type = ”text / javascript”>
nou WOW (). init (); </script> <? php}

Adăugați animații la rânduri și secțiuni

Sistemul pentru adăugarea efectelor wow.js și animate.css la rânduri și secțiuni este același ca și pentru efectele de animație Divi. Va trebui să deschideți setările rândului sau secțiunii la care doriți să adăugați efectul de animație. Apoi, puteți plasa clasa CSS atribuită animației în câmpul Clasă CSS din secțiunea sau rândul dvs.

Adăugați animație la rând

Pentru exemplul pe care îl vom arăta cu rândul, folosim efectul fadeInRight găsit în lista de efecte de animație. Accesați fila Advanced din setările Row și adăugați „wow fadeInRight” la câmpul CSS Class. De fiecare dată când doriți să adăugați un efect unei părți a site-ului dvs. web, asigurați-vă că puneți „wow” în fața efectului pe care îl utilizați.

Rezultat

Când ați adăugat clasa CSS și ați previzualiza pagina la care lucrați, ar fi trebuit să obțineți următorul rezultat:

Adăugați animație la secțiune

Aceeași metodă se aplică la adăugarea unui efect de animație într-o secțiune. Accesați fila Advanced și adăugați clasa CSS „wow bounceInDown” în câmpul CSS Class din secțiunea dvs.

Rezultat

Dacă ați urmat corect toți pașii, ar trebui să obțineți următorul rezultat:

Opțiuni avansate

În cazul în care doriți să adăugați câteva specificații suplimentare animației dvs., puteți face și asta. De exemplu, puteți adăuga un timp de întârziere la unul dintre efectele de animație. Acest lucru ar putea fi util atunci când combinați o animație de secțiune cu animație pe rând în aceeași secțiune. În acest fel, vă asigurați că efectele animației nu se suprapun reciproc.

Pentru a vă arăta cum să adăugați acest timp de întârziere, vom combina cele două efecte pe care le-am folosit în partea anterioară a acestui post. Un efect de animație este atribuit secțiunii și celălalt rândului. Pentru a ne asigura că efectul animației rândurilor nu se pierde, îi vom adăuga un timp de întârziere de 2 secunde.

Deschideți setările rândului și reveniți la fila Advanced. În câmpul CSS Class, adăugați o altă clasă numită „întârziere”. Această clasă nu există încă, dar urmează să o adăugăm în următorul nostru pas.

Acum, adăugați clasa CSS de întârziere la setările paginii la care lucrați făcând clic pe următorul buton:

Apoi, adăugați clasa CSS cu liniile de cod CSS în câmpul CSS personalizat. Dacă doriți să adăugați un timp de întârziere de 2 secunde, așa cum vom face în acest exemplu, veți avea nevoie de următoarele linii de cod CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Rezultat

După ce ați adăugat timpul de întârziere, rezultatul ar trebui să arate astfel:

Gânduri finale

În această postare, v-am arătat cum să adăugați efecte de animație pe site-ul dvs. Divi. Vă oferim două posibilități. Primul vă arată cum să utilizați efectele standard de animație furnizate de Divi. A doua posibilitate vă permite să integrați wow.js și animate.css. Utilizarea efectelor de animație pe site-ul dvs. web vă poate ajuta să subliniați conținutul pe care doriți să îl partajați vizitatorilor dvs. În afară de asta, arată și minunat. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Stocker top / shutterstock.com