Tutorial Divi: come utilizzare il modulo contatore numeri

Il modulo contatore numerico sul tema WordPress Divi è un ottimo modo per visualizzare i numeri in modo divertente e coinvolgente. Questo modulo è comunemente usato per visualizzare statistica su di te o sulla tua attività. Ad esempio, mostrare il numero di clienti o follower su Facebook è un ottimo modo per mostrare prove sociali.

Come aggiungere il modulo Numero di contatore di Divi

Prima di poter aggiungere un modulo contatore alla tua pagina, devi prima passare a Divi Builder. Una volta che il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

Una volta entrato 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, ricordati di aggiungere prima una riga alla tua pagina.

Individua il modulo del contatore dei numeri 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 dei numeri" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente il modulo del contatore dei numeri! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Caso d'uso di esempio: utilizzo del modulo contatore digitale per visualizzare i risultati di un progetto

Un ottimo modo per utilizzare il modulo contatore numerico è illustrare il statistica per i casi di studio. Basta etichettare ogni contatore con un numero in modo che l'utente possa facilmente vedere il successo del progetto. In questo esempio, utilizzo il modulo contatore digitale per visualizzare i risultati di quattro progetti.

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 caso di studio utilizzando i moduli contatore digitale.

La sezione della pagina che mostra i risultati del case study utilizzando i moduli digitali prevede l'utilizzo di una sezione specializzata. Utilizzando Visual Builder, aggiungi una sezione specializzata alla pagina e seleziona il seguente layout:

Seleziona un layout a 1 colonna per il lato destro della sezione e inserisci il titolo e il testo richiesti per i risultati del case study.

Inserisci un layout di colonne 2 direttamente sotto il layout di colonna 1 sul lato destro della sezione.

Ora aggiungi il tuo primo modulo contatore numeri nella colonna di sinistra.

Aggiornare i parametri dei contatori numerici come segue:

Opzioni di contenuto

Titolo: nuovi visitatori
Numero: 54210
Segno percentuale: OFF

Opzioni di design

Colore del testo: scuro
Carattere del titolo: predefinito
Dimensione carattere titolo: 20px
Colore del testo del titolo: # 405c60
Altezza della riga del titolo: 1em
Numero di caratteri: impostazione predefinita, grassetto
Numero di caratteri: 60px
Numero Colore testo: # e07a5e
Altezza riga numero: 72px

Salva le impostazioni

Duplica il modulo Contatori numerici e trascinalo nella colonna adiacente a destra e aggiorna le opzioni Titolo e Numero.

Duplica la riga che contiene i due moduli contatori numerici in modo da visualizzare altri due contatori numerici di seguito.

Quindi aggiorna le opzioni Titolo e Numero per quelli. Ora hai tutti e quattro i contatori dei numeri completi.

Non dimenticare di aggiungere l'immagine 667 x 320 nella colonna / lato sinistro della sezione specializzata.

È finita! La combinazione di contatori numerici e contatori a barre in questa pagina di case study rende il contenuto davvero coinvolgente.

Opzioni del contenuto del contatore digitale

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

titolo

Immettere un titolo per il contatore. Questo verrà visualizzato sotto il numero in un testo più piccolo.

Nome

Questo è il numero che conterà il contatore. Quando scorri la pagina verso il basso e raggiungi il contatore, il numero conta rapidamente da 0 fino a raggiungere il numero impostato qui. Qui possono essere inseriti solo valori numerici.

Segno di percentuale

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

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo delle impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Etichetta amministrativa

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

Opzioni di progettazione (stile) del misuratore digitale

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

Colore del testo

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

Carattere del titolo

È possibile modificare il carattere del testo del titolo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti 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. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o 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 del valore della tua dimensione per cambiare il suo 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 desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere del titolo

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo del titolo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di 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 del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della riga del titolo

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

Caratteri del numero

È possibile modificare il carattere del testo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti 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 numero

Qui puoi regolare la dimensione del tuo testo digitale. È 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 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 del valore della tua dimensione per cambiare il tipo di unità.

Colore del testo digitale

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 digitale, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura di lettere digitali

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo numerico, 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 del valore della tua dimensione per cambiare il tipo di unità.

Linea altezza del numero

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

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. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Imbottitura personalizzata

Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Opzioni avanzate del contatore dei numeri

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 e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

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 foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le 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 diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]