Vai al contenuto principale

Come utilizzare il modulo barra animata 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 animati sono un modo divertente ed efficace per visualizzare le statistiche ai tuoi visitatori. L'animazione è attivata dal caricamento lento per rendere la navigazione nella pagina davvero interessante. Puoi posizionare quanti contatori vuoi all'interno di questo modulo.

meter module divi.png

Come aggiungere un modulo contatore di barre alla tua pagina

Prima di poter aggiungere un modulo bancone bar alla tua pagina, dovrai 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 sul frontend, se sei connesso 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. .

bar counter divi.png

Individua il modulo del bancone bar 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 bar" e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo contatore bar!

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 Contatori di barre è illustrare le statistiche per i casi di studio. È sufficiente identificare ogni barra con una funzione specifica o un obiettivo del progetto in modo che l'utente sappia quali servizi sono inclusi nel progetto. In questo esempio, utilizzo il modulo barra per visualizzare tre obiettivi del progetto.

mostra il progetto 3 goals.jpg

Come puoi vedere, la parte superiore della pagina include i tre obiettivi del progetto utilizzando il modulo "Bancone bar" e la parte inferiore della pagina include i risultati del case study utilizzando il modulo "Contatore" Numero ".

Cominciamo.

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

Aggiornare i parametri dei contatori di barre come segue:

Opzioni di contenuto

Percentuale di utilizzo: ON
Colore di sfondo: #dddddd
Colore di sfondo della barra: # e07a5e

Opzioni di design

Colore del testo: scuro
Carattere del titolo: impostazione predefinita
Dimensione carattere titolo: 20px
Colore del testo del titolo: # 405c60
Altezza riga titolo: 2em
Carattere percentuale: impostazione predefinita
Dimensione carattere percentuale: 16px
Colore testo percentuale: #ffffff
Altezza riga percentuale: 2.5em

aggiungi un contatore divi.png conteggio

Ora torna alla scheda Contenuto e seleziona + Aggiungi un nuovo elemento per aggiungere il primo contatore di barre al modulo.

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]

Aggiorna le impostazioni dei singoli moduli come segue:

Scheda Contenuto

Titolo: il mio titolo
Percentuale: 80

Salva le impostazioni

personalizzazione bar numero divi.png

Aggiungi due contatori di barre aggiuntive al modulo e assegna a ciascuno un titolo e una percentuale.

bar counter divi list of bars.png

Questo è tutto!

risultato finale divi module barre.png

Opzioni di contenuto del contatore di barre

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.

opzione contenuto modulo bar divi.png

Percentuali di utilizzo

Per impostazione predefinita, le percentuali vengono visualizzate nel contatore della barra dei colori. Questo testo può essere disattivato utilizzando questa impostazione, consentendo al grafico a barre visivo di parlare da solo.

Colore di sfondo

Questa opzione consente di regolare il colore di sfondo di ogni bancone bar. Questa impostazione si applica allo spazio negativo dietro il colore della barra piena.

Colore di sfondo della barra

Questa opzione consente di regolare il colore di sfondo della barra piena. Questo colore di sfondo si sovrappone all'impostazione del colore di sfondo precedente.

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 bancone bar

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 design modulo contatore barre.png

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]

Colore del testo

Qui puoi scegliere se il tuo testo sarà 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. Puoi personalizzare ulteriormente il colore del testo utilizzando le opzioni di colore del testo aggiuntive che seguono.

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à.

percentuale di testo divi modulo barre.png

Percentuale di testo

È 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 carattere percentuale

Qui puoi regolare la dimensione del tuo testo come percentuale. 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à.

Percentuale di colore del testo

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 in percentuale, scegli il colore che vuoi dal selettore di colori usando questa opzione.

Percentuale di spaziatura tra lettere

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo testo come percentuale, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata 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à.

Altezza della linea percentuale

L'altezza della riga influisce sullo spazio tra ogni riga del testo in percentuale. 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à.

Raggio di confine

L'applicazione di un raggio del bordo arrotonderà gli angoli della barra nel bancone del bar. Maggiore è il raggio del bordo, più arrotondati sono gli angoli.

opzione di confine divi builder.png

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Unità di misura personalizzate supportate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro, ad esempio em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili, tra cui: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. Seleziona lo stile che desideri dal menu a discesa per applicarlo al bordo.

Imbottitura del bar

L'imbottitura è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. Qui puoi aggiungere un'imbottitura superiore e inferiore personalizzata al modulo barra.

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]

Opzioni avanzate del contatore di barre

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.

opzioni della barra del contatore advanced.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 figlio Divi o nel CSS personalizzato 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 ogni 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
Tweet
Enregistrer5