Vai al contenuto principale

Come utilizzare il modulo misuratore circolare sul costruttore Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Il bancone circolare consente di visualizzare una statistica unica in modo estetico e convincente. Man mano che si scorre 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 di contatore circolare su una pagina per offrire ai tuoi 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 installato il tema Divi 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 le statistiche per casi di studio 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:

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]

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.

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]

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.

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]

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 tema Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo sito web utilizzando le opzioni del tema Divi o le impostazioni della 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.

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
11 azioni
quota6
Tweet2
Enregistrer3