4 butoane de defilare animate pentru secțiunea Hero a site-ului dvs. Divi (și cum să le creați)

Butoanele de defilare animate au o sarcină simplă, dar importantă, de a atrage atenția utilizatorilor și de a le conduce pe pagina dvs. web. Aceste tipuri de butoane se găsesc în mod normal deasupra paginii, astfel încât un vizitator să poată face clic pe buton fără a fi nevoie să deruleze la următoarea secțiune importantă a paginii web. De fapt, Divi are această caracteristică a butonului de derulare încorporat în modulul antet cu lățime completă.

În acest tutorial, vă voi arăta cum să creați butoane de parcurgere animate complet personalizate în Divi. Deci, dacă sunteți în căutarea unei alternative creative la butonul de defilare încorporat al Divi în modulul antet cu lățime completă, aceste modele animate de butoane de defilare vă vor ajuta să vă îndreptați în direcția corectă (literalmente).

Trage cu ochiul

Iată o privire rapidă asupra proiectelor pe care le vom construi împreună.

Descărcați GRATUIT aspectul butoanelor de derulare animate

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, va trebui să aveți 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. Imagini care urmează să fie utilizate pentru conținut fals

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

Construirea secțiunii antet

Înainte de a începe să proiectăm butoanele de defilare animate, trebuie să ne configurăm secțiunea de antet fals. Deoarece ne vom concentra mai mult pe obținerea design-urilor animate de butoane de derulare, vom păstra designul antetului simplu, cu un fundal întunecat. După ce ați terminat, putem dubla secțiunea pentru a aborda fiecare nou design al butonului de derulare.

Pentru a începe, creați o secțiune obișnuită cu un rând de o coloană.

Apoi, înainte de a adăuga un modul, deschideți setările secțiunii și adăugați un fundal întunecat după cum urmează:

Culoare fundal: # 222222

Orice fundal întunecat va funcționa.

Adăugați textul antet

Pentru a crea textul antetului fals, adăugați un nou modul de text la rândul cu o singură coloană.

Apoi actualizați conținutul corpului cu un antet h1 chiar deasupra textului de paragraf implicit.

<h1>scroll button animation</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Apoi actualizați setările de proiectare după cum urmează:

Font text: Karla
Aliniere text text: centru
antet Dimensiune text: 5vw
Culoarea textului: deschis

Acesta va fi designul secțiunii de bază pe care îl vom folosi pentru diferitele butoane de derulare animate.

Proiectarea butonului de defilare animat # 1: Text vertical cu animație de revenire lentă

Având în vedere designul secțiunii de bază, suntem gata să adăugăm primul nostru buton de derulare animat. Acest buton de derulare este format dintr-un modul de blurbare care va avea o pictogramă în partea dreaptă. Apoi, textul și pictograma vor fi rotite vertical, astfel încât pictograma săgeată să fie îndreptată în jos. După aceea, vom adăuga animația de respingere cu o durată lentă.

Iată cum să o faci.

Mai întâi, adăugați un nou rând cu o coloană chiar sub rândul nostru care conține textul antetului.

Apoi adăugați un modul de blurb pe rând.

Sub setările de blurb, ștergeți conținutul implicit al corpului și adăugați următoarele:

Titlu: scroll
Utilizați pictograma: DA
Pictogramă: săgeată dreapta (vezi captura de ecran)

Apoi actualizați setările de proiectare după cum urmează:

Culoare pictogramă: #ffffff
Plasare imagine / pictogramă: stânga
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 50 px
Titlu Stil Font: TT
Culoarea textului titlului: #ffffff
Dimensiune text titlu: 14 px
Spațierea literelor de titlu: 3 px
Înălțimea liniei de titlu: 50 px (la fel ca dimensiunea fontului pictogramei)

Apoi, trebuie să îi oferim blurbului o lățime setată și să o rotim vertical, după cum urmează:

lățime: 132px
Alinierea modulului: centru
Transformare Rotire axa Z: 90 grade

Acum, tot ce trebuie să facem este să inversăm ordinea conținutului blurbului, astfel încât pictograma săgeată să fie în dreapta blurbului în loc de stânga. Acest lucru va face săgeata să fie afișată sub textul vertical așa cum a fost intenționat. Pentru a face acest lucru, trebuie să adăugăm următoarele elemente CSS personalizate la elementul principal:

direction: rtl;

Adăugarea animației cu impuls lent

Pentru a adăuga animația, actualizați următoarele:

Stil de animație: Bounce
Direcția animației: Jos
Durata animației: 5000 ms
Întârziere animație: 400 ms
Animație imagine / pictogramă: de la stânga la dreapta

Rezultat final

Acum, să verificăm rezultatul final pentru proiectul # 1.

Designul butonului de defilare animat nr. 2: animație de text cu carcasă verticală

Următorul design se bazează pe designul nr. 1, în sensul că vom păstra butonul vertical de derulare a textului creat utilizând modulul blurb. Diferența va fi animația. Pentru acest design, vom adăuga o animație de diapozitive care începe cu butonul de derulare ascuns deasupra containerului rândului și apoi se termină cu butonul ascuns sub rând. Cu animația în buclă, acest lucru va crea un efect de animație de marcaj text care atrage atenția utilizatorului.

Iată cum să o faci.

Mai întâi copiați întreaga secțiune a designului # 1.

Actualizați setările rândului 2

Apoi, actualizați rândul de secțiune care conține modulul blurb / butonul de derulare după cum urmează:

Overflow orizontal: ascuns
Vertical Overflow: ascuns

Actualizați setările modulului Blurb

Pentru a crea animația marcaj, mai întâi trebuie să folosim transformare transformă pentru a muta textul blurb sub containerul rândului (ascuns vizualizării). Aceasta va fi poziția în care va fi textul la sfârșitul animației. Actualizați următoarele:

Transformă axa Y Traducere: 115 px

Apoi, adăugați următoarele setări de animație:

Stil de animație: Slide
Direcția animației: Jos
Durata animației: 4000 ms
Intensitatea animației: 195%
Animație Opacitate de pornire: 100%
Curba de viteză a animației: liniară
Repetați animația: buclă

Rezultat final

Acum, să verificăm rezultatul final pentru proiectul # 3.

Designul butonului de defilare animat nr. 3: fila săgeată cu animație glisată întârziată

Pentru acest proiect următor, vom combina un modul text și un modul blurb pentru a crea un design unic al filei săgeată.

Pentru acest design vom începe cu proiectarea de bază a secțiunii antetului. Deci, puteți duplica secțiunea de proiectare duplicat # 3 și apoi ștergeți modulul blurb din rândul 2.

Apoi adăugați un modul text la rândul cu o coloană direct sub primul rând.

Apoi actualizați conținutul corpului cu cuvântul „scroll”.

Apoi actualizați setările de proiectare după cum urmează:

Culoare fundal: #ffffff
Culoare text text: # 222222
Alinierea textului: centru
Lățime: 50 px
Alinierea modulului: centru
Marja: 0 px de jos
Căptușeală: 20 px sus, 20 px jos
Colțuri rotunjite 5 px jos stânga, 5 px jos dreapta

Adăugați pictograma Blurb

Acum că modulul de text este la locul său, trebuie să creăm pictograma blurb direct sub acesta pentru a finaliza designul filei săgeată. Pentru a face acest lucru, adăugați un nou modul blurb sub modulul text.

Apoi ștergeți titlul implicit și textul corpului. Apoi adăugați actualizarea următoarelor:

Utilizați pictograma: DA
Pictogramă: triunghi săgeată jos (vezi captura de ecran)

Apoi actualizați setările după cum urmează:

Culoare pictogramă: #ffffff
Marja: -36 px în partea de sus, 0 px în partea de jos

Această marjă negativă va atașa săgeata la modulul text pentru un design frumos al filei săgeată.

Apoi adăugați următorul css la imaginea blurb pentru a scoate o marjă inutilă sub pictogramă.

Blurb Image CSS:

margin-bottom: 0px;

Rândul 2 Setări și animație

Deoarece dorim să adăugăm aceeași animație la ambele module care alcătuiesc designul butonului de derulare, va trebui să adăugăm animația la rândul care le conține. Actualizați setarea pentru rând după cum urmează:

Lățime maximă: 100 px
Căptușeală: 0 px sus, 0 px jos

Stil de animație: Slide
Direcția animației: Jos
Durata animației: 1200 ms

Rândul 1 Culoarea fundalului și Umbra cutiei

Atingerea finală a acestui design implică adăugarea unei culori de fundal la primul rând direct deasupra rândului butonului de derulare. Și prin actualizarea indexului Z al acelui rând, vom permite ca animația butonului de derulare să apară ca și cum ar izbucni prin antet.

Deschideți setările pentru rândul 1 după cum urmează:

Culoare fundal: # 222222

Z-Index: 10

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 80px
Puterea neclarității umbrei cutiei: 22 px
Puterea răspândirii umbrei cutiei: -70px
Culoare umbră: # 222222 (asigurați-vă că se potrivește cu culoarea de fundal)

Rezultat final

Acum verificați rezultatul final.

Design animat buton defilare # 4: animație defilare mouse

Pentru acest ultim buton de defilare animat, vom crea o animație de defilare a mouse-ului prin combinarea unui modul text și a unui modul blurb.

Iată cum să o faci.

Pentru a începe, puteți utiliza secțiunea antet de bază. Apoi adăugați un rând nou sub rândul 1.

Adăugați modulul Blurb

Apoi, adăugați un modul de blurb pe rând. Apoi ștergeți titlul implicit și textul corpului.

După aceea, actualizați pictograma după cum urmează:

Utilizați pictograma: DA
Pictogramă: cerc (vezi captura de ecran)

Apoi actualizați setările de proiectare a blurbului după cum urmează:

Culoare pictogramă: #ffffff
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 15 px
Stil de animație: Slide
Direcția animației: Jos
Durata animației: 1200 ms
Repetați animația: buclă
Animație imagine / pictogramă: fără animație

Apoi adăugați următorul CSS personalizat în imaginea Blurb:

margin-bottom: 0px;

Adăugați modulul de text

Apoi, adăugați un nou modul de text direct sub modulul blurb. Apoi actualizați textul corpului cu cuvântul „scroll”.

Apoi actualizați următoarele setări de text:

Culoarea textului textului: #ffffff
Alinierea textului: centru
Lățime: 90 px
Marja: 10 px sus, -30 px stânga

Actualizați setările rândului 2

Acum actualizați setările rândului după cum urmează:

Lățime: 30 px
Înălțime: 60 px
Colțuri rotunjite: 16 px
Lățimea chenarului: 1 px
Culoare margine: #ffffff
Stilul chenarului: solid
Overflow orizontal: vizibil
Vertical Overflow: vizibil

Rezultatul final

Acum să verificăm rezultatul final:

Adăugarea funcționalității Anchor Link

Legăturile de ancorare sunt acele legături care trec spre diferite secțiuni ale unei pagini. Acestea sunt adesea folosite pe site-uri web cu o singură pagină. Putem folosi același concept pentru a adăuga un link de ancorare la butoanele noastre de derulare, astfel încât să sară în jos pe pagină în secțiunea dorită. Pentru a adăuga funcționalitatea legăturii de ancorare la butoanele de derulare animate, trebuie să faceți două lucruri principale.

1. Trebuie să adăugați un ID CSS la secțiunea sau rândul la care doriți să treceți
2. Trebuie să adăugați un link de ancorare cu același ID CSS la butonul de derulare

Iată cum ar funcționa acest lucru. Mai întâi, creați o nouă secțiune sub secțiunea antet care conține butonul de derulare. Apoi dați noii secțiuni un ID CSS sub fila avansată.

Apoi găsiți elementul / butonul de derulare pe care doriți să îl transformați în legătura dvs. de ancorare și adăugați o adresă URL care începe cu un hashtag (sau simbolul lirei) și care este imediat urmată de ID-ul CSS al elementului la care sariți.

De exemplu, dacă ID-ul CSS al secțiunii este „secțiunea-2”, atunci veți adăuga „# secțiunea-2” ca adresă URL a linkului.

Amintiți-vă, Divi vă permite să adăugați adrese URL ale linkurilor la fiecare element din Divi, așa că nu ezitați să adăugați linkuri pe întregul rând care conține butonul de derulare animat.

Pentru mai multe informații, consultați câteva lucruri interesante pe care le puteți face cu linkuri de ancorare.

Fii creativ!

Nu vă fie teamă să combinați diferite module și să le animați în moduri diferite. De fapt, în timp ce exploram noi modalități de a proiecta butoane de defilare cu Divi, am creat o animație distractivă de defilare cu degetul mare care putea fi folosită pentru mobil. L-am inclus în descărcarea gratuită de mai sus, în cazul în care doriți să o verificați.

Gânduri finale

Butoanele de defilare animate ca acestea sunt ușor de construit cu Divi. Și pot fi folosite în mai multe locuri decât antetul, dacă le tratați ca legături de ancorare. Sper că aceste modele vă vor inspira să creați un nou buton de derulare pentru următorul dvs. proiect.

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

Noroc!