Il contatore circolare consente di visualizzare una singola statistica in modo esteticamente gradevole. Mentre scorri verso il basso, il numero esegue il conto alla rovescia e il grafico a torta si riempie gradualmente per corrispondere al valore percentuale. Prova a combinare piĂ¹ moduli contatori circolari su una pagina per dare il tuo Visitatori un modo divertente per conoscere la tua attivitĂ  o le tue abilitĂ  personali.

esempio di contatore circulerire divi.png

Come aggiungere un modulo contatore circolare alla tua pagina

Prima di poter aggiungere un modulo contatore circolare alla tua pagina, devi prima accedere a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editore ogni volta che crei una nuova pagina.

Facendo clic su questo pulsante, potrai attivare Divi Builder, che ti darĂ  accesso a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalitĂ  visiva.

Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi nel tuo sito web se hai effettuato l'accesso alla dashboard di WordPress.

usa il costruttore di divi

Una volta entrati in Visual Builder, puoi fare clic sul pulsante piĂ¹ grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, non dimenticare di aggiungere prima una riga alla tua pagina.

counter circle divi.png

Individua il modulo del contatore circolare nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "contatore circolare" e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo contatore circolare!

Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Usa il caso per visualizzare gli obiettivi del progetto in un caso di studio

Uno dei modi migliori per utilizzare il modulo dei contatori circolari è illustrare statistica per case study o elementi del portfolio.

Ăˆ sufficiente identificare ogni contatore circolare con una funzione o un obiettivo specifico del progetto in modo che l'utente sappia quali servizi sono inclusi nel progetto. In questo esempio, userĂ² il modulo "contatore circolare" per visualizzare tre obiettivi del progetto.

Come puoi vedere nell'immagine qui sotto, la parte superiore della pagina include i tre obiettivi del progetto utilizzando il modulo Contatore Bar e la parte inferiore della pagina include i risultati del case study utilizzando il modulo Numero Contatore .

esempio module circle divi animation.gif

Cominciamo.

Usa il visual builder per aggiungere una sezione standard con un layout a larghezza intera (1 colonna). Quindi aggiungi un modulo contatore circolare alla riga.

configurazione contatore circle divi.png

Aggiorna le impostazioni del contatore del cerchio come segue:

Opzioni di contenuto

Titolo: animazione
Numero: 80
Segno%: sì
Colore di sfondo della barra: #e07a5e

Opzioni di design

Colore del cerchio: #e07a5e
Colore del testo: scuro
Carattere del titolo: impostazione predefinita
Dimensione carattere titolo: 26px
Colore del testo del titolo: #405c60
Numero font: impostazione predefinita
Dimensione carattere: 46px
Colore testo numero: #405c60

animazione divi creazione di un cerchio con un grafico divi.png

Salva le impostazioni

Ora, duplica due volte il modulo contatore del cerchio e trascina ciascuna copia sulla seconda e terza colonna della linea.

copia un modulo metro circolare divi.png

Poiché i tuoi elementi di design sono stati trasferiti in moduli duplicati, devi solo aggiornare il titolo e il numero del contatore circolare.

Questo è tutto!

Visita la pagina.

design counter divi builder.png

Opzioni contrapposte circolari

Nella scheda Contenuto, troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciĂ² che controlla cosa appare nel tuo modulo sarĂ  sempre in questa scheda.

circle module content section.png

titolo

Immettere un titolo per il contatore del cerchio. Di solito è una parola che rappresenta la statistica che stai visualizzando. Verrà visualizzato sotto il numero nel grafico a torta.

Nome

Imposta un numero per il contatore circolare. Selezionando un numero inferiore a 100 riempirĂ  il grafico del cerchio con una percentuale uguale al numero inserito. Ad esempio, l'inserimento del numero 20 riempirĂ  il cerchio del 20% con il colore del tuo accento.

Segno di percentuale

Qui puoi scegliere se aggiungere il segno di percentuale dopo il numero sopra definito.

Colore di sfondo della barra

Questo cambierà il colore di riempimento della barra. La quantità di colore di riempimento è controllata dal "numero" selezionato sopra. Se selezioni il numero 50 e un colore blu, il tuo cerchio si riempirà al 50% con un colore blu.

Etichetta di amministrazione

Questo cambierĂ  l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette appariranno nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di design del contatore circolare

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa scheda ti consente di modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare praticamente qualsiasi cosa.

opzione contatore circolare divi.png

Colore del cerchio

Questo è il colore che verrà utilizzato per la parte vuota del cerchio (lo spazio negativo non riempito dal colore di sfondo della barra definita nella scheda Contenuto).

OpacitĂ  del colore del cerchio

Puoi ridurre l'opacitĂ  della parte piena del cerchio usando questa impostazione.

Colore del testo

Qui puoi scegliere se il tuo testo deve essere chiaro o scuro. Se stai lavorando con uno sfondo scuro, il tuo testo dovrebbe essere chiaro. Se lo sfondo è chiaro, il testo dovrebbe essere nero.

Carattere del titolo

Ăˆ possibile modificare il carattere del testo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del titolo

Qui puoi regolare la dimensione del testo del titolo. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

Colore del testo del titolo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del titolo, scegli il colore preferito dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere del titolo

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo del titolo, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

Altezza della riga del titolo

L'altezza della riga influisce sullo spazio tra ogni riga del testo del titolo. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

Numero di polizia

Ăˆ possibile modificare il carattere del testo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

numero testo divi builder circular counter.png

Dimensione carattere numero

Qui puoi regolare la dimensione del tuo testo numerato. Ăˆ possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

Colore del testo numerico

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo, scegli il colore che desideri dal selettore di colori usando questa opzione.

Spaziatura di lettere numerate

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

text meter spaziatura lettere divi.png

Altezza della linea numerica

L'altezza della riga influisce sullo spazio tra ogni riga del testo digitale. Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione dello spazio che desideri nel campo di input a destra del cursore. I campi di input supportano diverse unitĂ  di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unitĂ .

Opzioni avanzate di contatore circolare

Nella scheda Avanzate troverai le opzioni che i web designer piĂ¹ esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi CSS e ID personalizzati al modulo, che possono essere usati per personalizzare il modulo nel file style.css del tuo child theme.

advanced counter divi.png

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID puĂ² essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS puĂ² essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere piĂ¹ classi, separate da uno spazio. Queste classi possono essere utilizzate nel tuo Tema Divi Figlio o in CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando Opzioni tema Divi o Impostazioni pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato puĂ² anche essere applicato al modulo ea qualsiasi elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono giĂ  incorporate con i tag di stile. Quindi devi solo inserire regole CSS separate da punto e virgola.

visibilitĂ 

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial.