8 animații de butoane întârziate pentru antetul Divi personalizat CTA
Publicat: 2020-01-23Adăugarea animațiilor cu butoane întârziate la orice CTA poate fi o modalitate eficientă de a atrage atenția asupra vizitatorilor și, la rândul său, de a crește probabilitatea de a primi un clic. În acest tutorial, vă vom arăta cum să utilizați Divi pentru a crea animație cu 8 butoane întârziate pentru un antet CTA personalizat. Pentru a face acest lucru, vom combina setările de animație în moduri pe care probabil nu le-ați luat în considerare. În plus, aceste animații pot fi aplicate la aproape orice buton CTA de pe site-ul dvs.
Să începem.
Trage cu ochiul
Iată o privire asupra celor 8 animații de butoane întârziate pe care le vom adăuga la antetul personalizat CTA din Divi:
Descărcați GRATUIT formatul de animații cu 8 butoane de antet întârziat
Pentru a pune mâna pe cele 8 animații de butoane întârziate din acest tutorial, va trebui mai întâi să o 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.
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.
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!
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, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.
Va trebui să descărcați cel de-al doilea pachet Constructor de teme, deoarece vom folosi antetul personalizat pe șablonul de pagină 404 din acel pachet pentru acest tutorial.
După aceea, sunteți gata să plecați.
Importul șablonului din cel de-al doilea pachet Generator de teme
Din tabloul de bord WordPress, navigați la Divi> Theme Builder. În cadrul constructorului de teme, selectați pictograma de portabilitate din partea dreaptă sus a paginii. În fereastra popup de portabilitate, selectați fila de import, alegeți fișierul theme-builder-pack-2-404-page-template.json și faceți clic pe butonul de import. (Acest fișier de import va fi în folderul Second Theme Builder Pack)
De asemenea, puteți selecta opțiunea de a importa antetul și subsolul global ca machete statice.
După importarea șablonului, faceți clic pe pictogramă pentru a edita zona de antet personalizată.
Aceasta vă va duce la editorul de aspect al șablonului corpului, unde vom adăuga animațiile întârziate la butonul de pe antetul premade.
8 animații cu butoane întârziate pentru antetul personalizat CTA
Cele 8 animații de butoane întârziate de mai jos includ o combinație unică de opțiuni de animație Divi încorporate și proprietatea CSS în perspectivă. Proprietatea perspectivă adaugă un efect 3D atunci când animația butonului include un efect flip sau fold. Pentru majoritatea acestor animații, vom adăuga animație atât butonului, cât și coloanei părinte, pentru a obține o mișcare mai complexă.
Aici sunt ei…
# 1 Dropdown Bounce
Setări buton:
Meniul derulant cu animație buton întârziat este simplu și eficient. Pentru a-l construi, deschideți setările modulului buton și actualizați următoarele:
- Stil de animație: Bounce
- Direcția animației: Jos
- Durata animației: 1100 ms
- Întârziere animație: 1500 ms
- Animație Opacitate de pornire: 100%
# 2 Flip Vertical 3D
Pentru a crea animația butonului cu întârziere verticală 3D, trebuie mai întâi să adăugați proprietatea de perspectivă la coloana părinte a butonului (coloana 2).
Setări coloană
Pentru a adăuga perspectivă coloanei, deschideți setările rândului, apoi faceți clic pentru a edita setările coloanei 2. Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:
perspective: 150px
Setări buton:
- Stil de animație: Flip
- Regia de animație: Centru
- Durata animației: 1500 ms
- Întârziere animație: 1000 ms
- Intensitatea animației: 400%
- Animație Opacitate de pornire: 100%
# 3 Flip orizontal 3D
Animația butonului cu întârziere orizontală 3D este similară cu întoarcerea verticală. Singura diferență reală este direcția de animație.
Setări coloană:
Mai întâi, asigurați-vă că ați adăugat perspectiva la coloana 2 adăugând următorul CSS personalizat la elementul principal:
perspective: 150px
Setări buton:
Deschideți setările modulului buton și actualizați următoarele:
- Aliniere buton: centru
Acest lucru asigură faptul că întoarcerea orizontală este centrată cu proprietatea perspectivă părinte.
- Stil de animație: Fold
- Regia de animație: Centru
- Durata animației: 1000 ms
- Întârziere animație: 2000 ms
- Intensitatea animației: 400%
- Animație Opacitate de pornire: 100%
- Curba de viteză a animației: liniară
# 4 Dropdown Bounce + 3D Vertical Flip
Această animație de buton întârziată se realizează prin combinarea unei animații de respingere (adăugată la coloană) și a unei animații flip (adăugată la buton).
Iată cum să-l construiești.
Setări coloană:
Deschideți setările rândului și actualizați setările coloanei 2 cu următoarele:
- Stil de animație: Bounce
- Direcția animației: Jos
- Întârziere animație: 2000 ms
- Animație Opacitate de pornire: 100%
Apoi adăugați perspectiva CSS la elementul principal după cum urmează:
perspective: 150px;
Setări buton:
După ce setările coloanei sunt la locul lor, actualizați setările modulului buton după cum urmează:
- Stil de animație: Flip
- Regia de animație: Centru
- Durata animației: 1500 ms
- Întârziere animație: 1000 ms
- Intensitatea animației: 400%
- Animație Opacitate de pornire: 100%
Trucul de aici este să vă asigurați că întârziați flip-ul pentru a începe după finalizarea animației coloanei.
# 5 Coborâți în jos (glisați în jos + rotiți)
Pentru a obține animația „swoop down” pentru următoarea, va trebui să combinăm o animație de diapozitive (adăugată la coloană) și o animație de rulare (adăugată la buton).
Hai să o facem.
Setări coloană:
Deschideți setările rândului și actualizați setările coloanei 2 după cum urmează:
- Stil de animație: Slide
- Direcția animației: Jos
- Întârziere animație: 1000 ms
- Animație Opacitate de pornire: 100%
Apoi adăugați următorul css personalizat la elementul principal:
perspective: 150px
Setări buton:
Apoi actualizați setările butonului după cum urmează:
- Stil de animație: Roll
- Direcția animației: Jos
- Durata animației: 1500 ms
- Întârziere animație: 1000 ms
- Animație Opacitate de pornire: 100%
# 6 Mărește (zoom + scară de transformare)
Această animație a butonului întârziat este unică prin faptul că implică scalarea butonului folosind scala de transformare. Apoi adăugăm animația zoom la buton.
Iată cum să o faci.
Setări buton:
Deschideți setările modulului buton și actualizați următoarele:
- Scara de transformare: 175%
- Stil de animație: Zoom
- Regia de animație: Centru
- Durata animației: 1500 ms
- Întârziere animație: 1000 ms
- Animație Opacitate de pornire: 100%
# 7 Puls (mărire + micșorare)
Această animație cu impuls întârziat este creată prin combinarea unei animații de micșorare (adăugată la coloană) și a unei animații de mărire (adăugată la buton).
Hai să o facem.
Setări coloană:
Deschideți setările rândului și actualizați setările pentru coloana 2 după cum urmează:
- Stil de animație: Zoom
- Regia de animație: Centru
- Durata animației: 1000 ms
- Întârziere animație: 2000 ms
- Intensitatea animației: -100%
- Animație Opacitate de pornire: 100%
Observați că am adăugat o valoare negativă (-100%) pentru intensitatea animației. Acest lucru face ca coloana să aibă efectul opus, ceea ce va micșora coloana / butonul (sau micșora).
Setări buton:
Apoi actualizați setările butonului după cum urmează:
- Stil de animație: Zoom
- Regia de animație: Centru
- Durata animației: 1500 ms
- Întârziere animație: 1000 ms
- Intensitatea animației: 50%
- Animație Opacitate de pornire: 100%
Observați că întârzierea animației este setată să se producă cu 1000 ms înainte de animația coloanei, astfel încât butonul să se apropie înainte de a micșora.
Spirala # 8 (glisați la stânga + rotire)
Această animație finală a butonului întârziat combină o animație de diapozitive (adăugată la coloană) și o animație de flip de 720 de grade (adăugată butonului).
Iată cum să o faci.
Setări coloană:
Mai întâi, deschideți setările rândului și actualizați setările pentru coloana 2 după cum urmează:
- Stil de animație: Slide
- Direcția animației: Stânga
- Durata animației: 2000 ms
- Întârziere animație: 2000 ms
- Intensitate animație: 100%
- Animație Opacitate de pornire: 100%
Setări buton:
Apoi actualizați setările modulului buton după cum urmează:
- Stil de animație: Flip
- Regia de animație: Centru
- Durata animației: 2000 ms
- Întârziere animație: 2000 ms
- Intensitate animație: 800%
- Animație Opacitate de pornire: 100%
Observați aici că intensitatea animației este setată la 800%. Acest lucru va face ca butonul să răsucească de trei ori pentru a crea efectul de centrifugare.
Rezultate finale
Să aruncăm o ultimă privire asupra celor 8 animații cu butoane întârziate.
Gânduri finale
Sper că aceste 8 animații cu butoane întârziate vor ajuta la creșterea conversiilor pentru CTA-urile dvs. antet personalizate. De asemenea, puteți utiliza aceste exemple pentru inspirație și puteți explora modele și aplicații suplimentare pentru propriul dvs. site web!
Ai un favorit?
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!