Cum se creează numere de numere animate Scroll cu Divi

Numeratoarele animate de numere sunt populare pe web ca un mijloc de a afișa date numerice pentru a evidenția valoarea serviciilor, studiile de caz și multe altele. Divi are un modul de numărare dedicat, care poate fi utilizat pentru a genera cu ușurință contoare de numere animate.

Cu toate acestea, în acest tutorial, vă vom arăta cum să creați contoare numerice care se animă pe scroll folosind Divi. Folosind opțiunile de poziție și efectele de derulare ale lui Divi, vom proiecta un aspect simplu pentru a afișa o dată cu numere de derulare.

Verifică!

Trage cu ochiul

Iată o privire rapidă asupra contoarelor animate de derulare pe care le vom proiecta în Divi.

Descărcați aspectul GRATUIT

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!

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ă faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

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

Partea 1: Crearea secțiunii de titlu

În această primă parte, vom crea un titlu simplu pentru aspect.

Mai întâi, adăugați un rând cu o coloană la secțiune.

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

Actualizați conținutul modulului text cu următoarele:

<h2>Save The Date<h2>

Apoi actualizați stilul de text al titlului după cum urmează:

• Rubrica 2 Font: Prata
• Titlul 2 Dimensiune text: 130 px (desktop), 70 px (tabletă), 40 px (telefon)

Partea 2: Crearea contoarelor cu animație de derulare

În această parte următoare, vom crea cele trei contoare care vor anima numerele în derulare până când se vor odihni pentru a afișa o dată (lună, zi și an). Fiecare contor va fi construit folosind un total de 5 module text și un modul divizor. Primul modul de text va servi ca etichetă a contorului (adică lună, zi, an). Următoarele patru module de text vor conține fiecare un număr diferit (în progresie) care va fi animat pe scroll folosind decalajele de mișcare verticală din Divi. Modulul divizor inferior va ajuta la ascunderea depășirii numerelor.

Iată cum să o faci.

Adăugați al doilea rând

Sub rândul existent, adăugați un alt rând cu o coloană.

Setări rând

Înainte de a adăuga orice modul, actualizați setările rândului după cum urmează:

• Lățimea jgheabului: 1
• Căptușeală: 0 px sus, 0 px jos

Setări coloană

Apoi deschideți setările pentru coloană și actualizați umplutura după cum urmează:

• Căptușeală (desktop): 100 px jos
• Căptușeală (tabletă și telefon): 0 px de jos

Adăugați un modul de text

Apoi adăugați un modul text în coloană.

Conținut / Etichetă

Pentru conținutul modulului text, adăugați cuvântul „Lună”.

Setări de proiectare a textului

Odată ce conținutul este adăugat, actualizați setările de proiectare după cum urmează:

• Culoare fundal: #ffffff
• Font text: Prata
• Dimensiune text text: 40 px
• Înălțimea liniei de text: 2em
• Lățime: 100%
• Căptușeală: 20 px sus, 20 px jos, 20 px stânga, 20 px dreapta
• Lățimea marginii inferioare: 5 px
• Culoarea chenarului inferior: #eeeeee

Poziţie

Apoi, sub fila avansată, actualizați opțiunile de poziție după cum urmează:

• Poziție: relativă
• Indicele Z 1

Adăugați un modul de text pentru primul număr

Odată ce primul modul de text este la locul său, putem începe să adăugăm numerele care se vor deplasa pe scroll. Pentru a adăuga primul număr, adăugați un nou modul de text sub modulul de text „Lună” existent.

Adăugați un număr / conținut

Apoi actualizați eticheta modulului text pentru a citi „num1” pentru o referință mai ușoară. Apoi actualizați conținutul cu numărul „01”.

Setări de proiectare pentru număr

Sub fila Proiectare, actualizați următoarele:

• Font text: Prata
• Culoarea textului textului: # 8ab2d3
• Dimensiune text text: 70 px
• Spațiere scrisoare text: 4 px
• Înălțimea liniei de text: 1,5em
• Căptușeală: 20 px stânga

NOTĂ: Numerele au o dimensiune a textului de 70 px și o înălțime a liniei de 1,5em, ceea ce înseamnă că înălțimea totală a modulului de text va fi aproape de 100 px. Acest lucru este important să se țină cont de fiecare dată când începem să adăugăm compensările de mișcare verticală. De exemplu, adăugarea unui decalaj vertical de „1” la modulul text va muta modulul text exact 100px, care este înălțimea modulului text.

Efecte derulare pentru primul număr

Adăugați următoarele efecte de derulare la modulul text.

Sub fila Mișcare verticală, actualizați următoarele:

• Activați mișcarea verticală: DA
• Offset de pornire: 1 (la 10%)
• Decalaj mediu: 0 (la 20%)
• Offset final: -1 (la 30%)

Sub fila Fading In and Out, actualizați următoarele:

• Activați Fading In and Out: DA
• Opacitate de pornire: 0% (la 10%)
• Opacitate medie: 100% (la 20%)
• Opacitate finală: 0% (la 30%)

Asigurați-vă că setați declanșatorul efectului de mișcare în partea de sus a elementului:

• Declanșatorul efectului de mișcare: partea de sus a elementului

Creați modulul de text pentru al doilea număr

Dublează primul număr

Odată ce primul număr a fost creat, copiați-l pentru a crea modulul de text pentru al doilea număr. Apoi actualizați eticheta în vizualizarea straturilor pentru o mai bună referință.

Actualizați numărul / conținutul

Deschideți setările pentru modulul text al doilea număr și actualizați conținutul cu numărul „02”.

Actualizați poziția

Apoi actualizați opțiunile de poziție după cum urmează:

• Poziție: Absolută
• Decalaj vertical: 126 px

Actualizați efectele de derulare

Apoi actualizați efectele de derulare după cum urmează:

Sub fila Mișcare verticală, actualizați următoarele:

• Offset de pornire: 1 (la 20%)
• Decalaj mediu: 0 (la 30%)
• Offset final: -1 (la 40%)

Sub fila Fading In and Out, actualizați următoarele:

• Opacitate de pornire: 0% (la 20%)
• Opacitate medie: 100% (la 30%)
• Opacitate finală: 0% (la 40%)

Creați un modul de text pentru al treilea număr

Dublează al doilea număr

Pentru a crea modulul de text pentru al treilea număr, copiați modulul de text pentru al doilea număr.

Actualizați numărul / conținutul

Actualizați conținutul cu numărul „03”.

Actualizați efectele de derulare

Apoi actualizați efectele de derulare:

Sub fila Mișcare verticală, actualizați următoarele:

• Offset de pornire: 1 (la 30%)
• Decalaj mediu: 0 (la 40%)
• Offset final: -1 (la 50%)

Sub fila Fading In and Out, actualizați următoarele:

• Opacitate de pornire: 0% (la 30%)
• Opacitate medie: 100% (la 40%)
• Opacitate finală: 0% (la 50%)

Creați un modul de text pentru al patrulea număr

Dublu exemplar al treilea număr

Pentru a crea al patrulea număr pentru contorul de derulare, copiați modulul de text pentru al treilea număr.

Actualizați numărul / conținutul

Actualizați conținutul cu numărul „04”.

Actualizați efectele de derulare

Apoi actualizați efectele de derulare:

Sub fila Mișcare verticală, actualizați următoarele:

• Offset de pornire: 1 (la 40%)
• Decalaj mediu: 0 (la 50%)
• Offset final: 0 (la 60%)

Sub fila Fading In and Out, actualizați următoarele:

• Opacitate de pornire: 0% (la 40%)
• Opacitate medie: 100% (la 50%)
• Opacitate finală: 100% (la 60%)

Adăugați divizorul inferior

Sub ultimul modul text, adăugați un nou modul divizor. Acesta va fi folosit pentru a ascunde revărsarea de jos a textului care va fi derulat în vizualizare.

Apoi selectați NU pentru a afișa divizorul.

Setări stil și poziție

Actualizați designul divizorului după cum urmează:

• Culoare fundal: #ffffff
• Lățime: 100%
• Înălțime: 100 px
• Lățimea marginii superioare: 5 px

Sub fila avansată, actualizați următoarele:

• Dezactivați pe: telefon și tabletă
• Poziție: Absolută
• Locație: în partea stângă jos

IMPORTANT: Spațiul pe care îl va ocupa divizorul a fost creat mai devreme prin adăugarea unei căptușeli inferioare de 100 px la coloană. Dacă nu adăugați acea căptușeală, divizorul va suprapune numerele.

Crearea mai multor contoare și coloane

Duplicați coloana 1 și actualizați conținutul

Pentru a crea un contor nou, duplicați coloana 1. Aceasta va crea o a doua coloană cu toate elementele în loc automat.

Apoi, tot ce trebuie să faceți este să actualizați conținutul pentru toate modulele de text cu text și numere noi.

Duplicați coloana 2 și actualizați conținutul

Odată ce conținutul pentru toate modulele de text a fost actualizat în coloana 2, copiați coloana 2 pentru a crea un al treilea contor pentru an. Apoi actualizați conținutul pentru fiecare modul text, după cum este necesar.

Rezultat final

Iată rezultatul final.

Gânduri finale

Acest aspect simplu, cu contoare numerice animate cu derulare, ar trebui să fie util pentru afișarea datelor numerice într-un mod nou și unic. Simțiți-vă liber să abandonați conceptul de dată și să folosiți ghișeele pentru orice puteți visa!

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

Noroc!