Vai al contenuto principale

Come aggiungere un contatore animato allo scorrimento su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

I contatori di numeri animati sono popolari sul Web come un modo per visualizzare dati numerici per evidenziare il valore di servizi, casi di studio, ecc. Divi ha un modulo contatore di numeri dedicato che può essere utilizzato per generare facilmente contatori di numeri animati.

Tuttavia, in questo tutorial, ti mostreremo come creare contatori digitali che si animano nello scorrimento utilizzando Divi. Utilizzando le opzioni di posizione di Divi e gli effetti di scorrimento, progetteremo un layout semplice per visualizzare una data con numeri a scorrimento.

Parte 1: creazione della sezione del titolo

In questa prima parte, creeremo un titolo semplice per il layout.

Innanzitutto, aggiungi una riga di una colonna alla sezione.

Registra un modulo sezione divi

Quindi aggiungi un nuovo modulo di testo alla riga.

Aggiorna il contenuto del modulo di testo con il seguente:

Salva la data
Salva la data 1

Quindi aggiorna lo stile del testo dell'intestazione come segue:

  • Titolo intestazione 2: Prata
  • Voce 2 Dimensioni del testo: 130 px (desktop), 70 px (tablet), 40 px (telefono)
Modifica del titolo Divi

Parte 2: Creazione di contatori con animazione a scorrimento

In questa parte successiva, creeremo i tre contatori che animeranno i numeri a scorrimento finché non smetteranno di visualizzare una data (mese, giorno e anno). Ogni contatore sarà costruito utilizzando un totale di 5 moduli di testo e un modulo separatore. Il primo modulo di testo fungerà da etichetta del contatore (cioè mese, giorno, anno). I successivi quattro moduli di testo conterranno ciascuno un numero diverso (in corso) che verrà animato durante lo scorrimento utilizzando gli offset del movimento verticale in Divi. Il modulo di separazione inferiore aiuterà a nascondere l'overflow di numeri.

Ecco come.

Aggiungi una seconda riga

Sotto la riga esistente, aggiungi un'altra riga a una colonna.

Impostazioni linea

Prima di aggiungere un modulo, aggiorna i parametri di riga come segue:

  • Larghezza della grondaia: 1
  • Imbottitura: 0px alta, 0px bassa
Configurazione bordo Divi

Parametri della colonna

Quindi aprire le impostazioni della colonna e aggiornare il riempimento come segue:

  • Imbottitura (scrivania): 100px bassa
  • Imbottitura (tablet e telefono): 0px basso
Configurazione della spaziatura delle colonne Divi

Aggiungi un modulo di testo

Quindi aggiungere un modulo di testo alla colonna.

Aggiungi un modulo di testo divi

Contenuto / etichetta

Per il contenuto del modulo di testo, aggiungi la parola "mese".

Specificare il divi del mese

Impostazioni di progettazione del testo

Dopo aver aggiunto il contenuto, aggiorna le impostazioni di progettazione come segue:

  • Colore di sfondo: #ffffff
  • Carattere testo: parla
  • Dimensione del testo: 40px
  • Altezza della riga di testo: 2em
  • Larghezza: 100%
  • Imbottitura: 20 pixel nella parte superiore, 20 pixel nella parte inferiore, 20 pixel a sinistra, 20 pixel a destra
  • Larghezza del bordo inferiore: 5px
  • Colore del bordo inferiore: #eeeeee
Posizione

Quindi, nella scheda Avanzate, aggiorna le opzioni di posizione come segue:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • Posizione: relativa
  • Indice Z 1
Modulo wordpress Prata

Aggiungi un modulo di testo per il primo numero

Una volta che il primo modulo di testo è a posto, possiamo iniziare ad aggiungere i numeri che si sposteranno sullo scorrimento. Per aggiungere il primo numero, aggiungi un nuovo modulo di testo sotto il modulo di testo "Mese" esistente.

Aggiungi il modulo di testo del narratore

Aggiungi numero / contenuto

Quindi aggiornare l'etichetta del modulo di testo per leggere "num1" per un riferimento più semplice. Quindi aggiornare il contenuto con il numero "01".

Aggiungi modulo numero divi

Impostazioni di progettazione per il numero

Nella scheda progettazione, aggiorna quanto segue:

  • Carattere testo: Prata
  • Testo Colore testo: # 8ab2d3
  • Testo Dimensione del testo: 70px
  • Spaziatura lettere di testo: 4px
  • Altezza della riga di testo: 1.5em
  • Imbottitura: 20 px a sinistra
Configurazione colore Divi

NOTA: i numeri hanno una dimensione del testo di 70px e un'altezza della linea di 1.5em, il che significa che l'altezza totale del modulo di testo sarà vicina a 100px. Questo è importante da tenere a mente ogni volta che iniziamo ad aggiungere gli offset del movimento verticale. Ad esempio, l'aggiunta di un offset verticale di "1" al modulo di testo sposterà il modulo di testo esattamente 100px, che è l'altezza del modulo di testo.

Effetti di scorrimento per il primo numero

Aggiungi i seguenti effetti di scorrimento al modulo di testo.

Nella scheda Movimento verticale, aggiorna quanto segue:

  • Abilita movimento verticale: SÌ
  • Avvia offset: 1 (al 10%)
  • Offset medio: 0 (al 20%)
  • Fine offset: -1 (all'30%)

Nella scheda Fade In e Fade Out, aggiorna quanto segue:

  • Attiva dissolvenza in entrata e in uscita: SÌ
  • Opacità iniziale: 0% (al 10%)
  • Opacità media: 100% (al 20%)
  • Opacità finale: 0% (al 30%)

Assicurati di impostare il trigger per l'effetto di movimento nella parte superiore della clip:

  • Trigger effetto movimento: elemento superiore
Configurazione del testo divi del modulo di animazione

Crea il modulo di testo per il secondo numero

Duplica il primo numero

Una volta creato il primo numero, duplicalo per creare il secondo modulo di testo numerico. Quindi aggiorna l'etichetta nella vista dei livelli per una migliore consultazione.

Duplica il modulo di testo divi 1

Aggiorna numero / contenuto

Apri i parametri del secondo modulo di testo digitale e aggiorna il contenuto con il numero "02".

Salva numero 2 divi

Posizione di aggiornamento

Quindi aggiornare le opzioni di posizione come segue:

  • Posizione: assoluta
  • Offset verticale: 126px
Modifica della posizione del modulo di testo divi

Aggiorna effetti di scorrimento

Quindi aggiorna gli effetti di scorrimento come segue:

Nella scheda Movimento verticale, aggiorna quanto segue:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Avvia offset: 1 (al 20%)
  • Offset medio: 0 (al 30%)
  • Fine offset: -1 (all'40%)

Nella scheda Fade In e Fade Out, aggiorna quanto segue:

  • Opacità iniziale: 0% (al 20%)
  • Opacità media: 100% (al 30%)
  • Opacità finale: 0% (al 40%)
Animazione effetto scorrimento divi

Crea un modulo di testo per il terzo numero

Duplica il secondo numero

Per creare il modulo di testo per il terzo numero, duplicare il modulo di testo per il secondo numero.

Duplica il modulo di testo numero 3

Aggiorna numero / contenuto

Aggiorna il contenuto con il numero "03".

Modifica modulo testo divi

Aggiorna effetti di scorrimento

Quindi aggiorna gli effetti di scorrimento:

Nella scheda Movimento verticale, aggiorna quanto segue:

  • Avvia offset: 1 (al 30%)
  • Offset medio: 0 (al 40%)
  • Fine offset: -1 (all'50%)

Nella scheda Fade In e Fade Out, aggiorna quanto segue:

  • Opacità iniziale: 0% (al 30%)
  • Opacità media: 100% (al 40%)
  • Opacità finale: 0% (al 50%)
Modifica l'animazione del modulo di testo

Crea un modulo di testo per il quarto numero

Terzo problema duplicato

Per creare il quarto numero per il contatore di scorrimento, duplicare il modulo di testo per il terzo numero.

Duplica il numero di divi del modulo di testo 4

Aggiorna numero / contenuto

Aggiorna il contenuto con il numero "04".

Configura il valore del modulo di testo divi

Aggiorna effetti di scorrimento

Quindi aggiorna gli effetti di scorrimento:

Nella scheda Movimento verticale, aggiorna quanto segue:

  • Avvia offset: 1 (al 40%)
  • Offset medio: 0 (al 50%)
  • Fine offset: 0 (al 60%)

Nella scheda Fade In e Fade Out, aggiorna quanto segue:

  • Opacità iniziale: 0% (al 40%)
  • Opacità media: 100% (al 50%)
  • Opacità finale: 100% (al 60%)
Modulo di configurazione animazione 4 divi

Aggiungi un separatore inferiore

Sotto l'ultimo modulo di testo, aggiungi un nuovo modulo separatore. Questo verrà utilizzato per nascondere l'overflow inferiore del testo scorrevole in vista.

Aggiungi il modulo separatore divi

Quindi selezionare NO per visualizzare il separatore.

Non visualizzare il separatore divi

Impostazioni di stile e posizione

Aggiorna il design del separatore come segue:

  • Colore di sfondo: #ffffff
  • Larghezza: 100%
  • Altezza: 100px
  • Larghezza del bordo superiore: 5 px

Nella scheda Avanzate, aggiorna quanto segue:

  • Disattiva su: telefono e tablet
  • Posizione: assoluta
  • Posizione: in basso a sinistra

IMPORTANTE: lo spazio che occuperà il separatore è stato creato in precedenza aggiungendo un riempimento inferiore di 100 pixel alla colonna. Se non aggiungi questo riempimento, il separatore si sovrapporrà alle cifre.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Creazione di contatori e colonne aggiuntivi

Duplica la colonna 1 e aggiorna il contenuto

Per creare un nuovo contatore, duplicare la colonna 1. Ciò creerà una seconda colonna con tutti gli elementi in posizione automaticamente.

Quindi tutto ciò che devi fare è aggiornare il contenuto di tutti i moduli di testo con nuovi testi e numeri.

Duplica intera colonna divi

Duplica la colonna 2 e aggiorna il contenuto

Dopo aver aggiornato il contenuto di tutti i moduli di testo nella colonna 2, duplicare la colonna 2 per creare un terzo contatore per l'anno. Quindi aggiorna il contenuto di ogni modulo di testo secondo necessità.

Risultato finale

Ecco il risultato finale.

Altre risorse

Considerazioni finali

Questo semplice layout con contatori numerici a scorrimento animato dovrebbe essere utile per visualizzare i dati digitali in un modo nuovo e unico. Sentiti libero di abbandonare il concetto di data e usa i contatori per tutto ciò che puoi sognare!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer