Vai al contenuto principale

Tutorial Divi: come usare il modulo Rate Tables

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]

È più facile che mai creare tabelle dei prezzi per i tuoi prodotti online. Crea tutte le tabelle che desideri e controlla i prezzi e le caratteristiche di ciascuna utilizzando il modulo Tabelle prezzi del tuo tema Divi WordPress. Puoi persino elaborare un piano particolare per aumentare le conversioni. Anche se il tuo modulo include più tabelle dei prezzi, verrà trattato come un singolo modulo e può essere posizionato sotto qualsiasi dimensione di colonna.

Come aggiungere un modulo Tabelle tariffe alla tua pagina

Prima di poter aggiungere un modulo di tabella dei prezzi alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi 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.

Tabelle dei prezzi dei moduli

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.

divi wordpress price chart.png

Individua il modulo delle tabelle dei prezzi 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 "tabelle prezzi" e quindi fare clic su "invio" per cercare e aggiungere automaticamente il modulo tabelle prezzi! 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: aggiungi una tabella dei prezzi per una pagina di prodotto

Quando promuovi i tuoi prodotti su una landing page, i grafici dei prezzi possono mostrare efficacemente le tue diverse opzioni di prezzo.

In questo esempio, aggiungerò un modulo della tabella dei prezzi per visualizzare tre piani tariffari (o tabelle) con uno di quei piani che si distingue come piano in primo piano per aumentare le conversioni.

Tabella dei prezzi di WordPress divi.jpg

Innanzitutto, aggiungi una nuova sezione normale alla pagina in cui devono essere visualizzate le tabelle dei prezzi. Aggiungi una riga a larghezza intera (1 colonna) alla sezione e inserisci un modulo Tabelle prezzi nella riga.

price table line divi.png

Nelle impostazioni delle tabelle dei prezzi, nella scheda Contenuto, fare clic su + Aggiungi un nuovo elemento per aggiungere il tuo primo tavolo.

nuovo column price chart.png

Aggiorna i parametri della tabella dei prezzi come segue:

Opzioni di contenuto

Titolo: Valuta personale: $ Per: anno Prezzo: 69 Testo pulsante: Contenuto registrazione:
Accesso a tutti i temi Aggiornamenti perpetui dei temi Supporto tecnico Premium -Accesso a tutti i plug-in -Acquista file overlay -Nessuna tariffa annuale
URL pulsante: [inserisci l'URL del pulsante] Sfondo: #ffffff

Opzioni di design

Colore testo prezzo: # 3e51b5 Usa stili pulsanti personalizzati: YES Colore testo pulsante: #ffffff Colore pulsante: # 3e51b5 Larghezza pulsante: 0px

Salva le impostazioni

divi wordpress price chart example.png

Ora, duplica la tabella dei prezzi che hai appena creato due volte per avere tre tabelle dei prezzi in totale.

creazione di diversi esempi di tableau.jpg

Per la tabella dei prezzi medi, aggiorna le seguenti opzioni:

Scheda Contenuto

Titolo: Sviluppatore Prezzo: 89 Contenuto: Accesso a tutti i temi Aggiornamenti perpetui dei temi Supporto tecnico premium Accesso a tutti i file con livelli di Photoshop - nessuna tariffa annuale URL pulsante: [inserisci l'URL del pulsante]

Scheda di progettazione

Colore del testo: # 0091ca Colore del pulsante: # 0091ca

Per la terza tabella dei prezzi, aggiorna le impostazioni come segue:

Scheda Contenuto

Titolo: Prezzo a vita: 249 Pulsante Testo: Sottoscrivi Contenuto: Accesso a tutti i temi Aggiornamenti perpetui dei temi Supporto tecnico premium Accesso a tutti i plugin File Photoshop a più livelli Nessun canone annuale URL pulsante: [inserisci URL pulsante]

Salva le impostazioni

Ora torna alle impostazioni della tabella dei prezzi e aggiorna quanto segue:

Opzioni di contenuto

Colore di sfondo della tabella in primo piano: #0091ca

Opzioni di design

Colore della palla: # 3e51b5 Colore del tavolo in primo piano: # 0091ca

risultato della tabella dei prezzi divi.jpg

Salva le impostazioni

Ora torna indietro e modifica le impostazioni della sezione per dare alla sezione un colore di sfondo di #3e51b5.

È tutto. Ora hai una tabella dei prezzi con tre opzioni con l'opzione centrale impostata come elemento in primo piano che si distingue dal resto.

opzione tavolo prezzi divi.jpg

Opzioni di contenuto per tabelle dei prezzi

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.

price table design option.png

+ Aggiungi un nuovo articolo

Qui è dove aggiungi nuove tabelle dei prezzi al tuo modulo. Facendo clic su "+ aggiungi nuovo articolo" si aprirà un elenco completamente nuovo di opzioni di progettazione specifiche per quella tabella dei prezzi. Vedi sotto per le singole impostazioni della tabella dei prezzi.

Dopo aver aggiunto la prima scheda, verrà visualizzata una barra grigia con il titolo della tabella dei prezzi sotto forma di etichetta. La barra grigia ha anche tre pulsanti che consentono di modificare, duplicare o eliminare la tabella.

Mostra Bullet

Per impostazione predefinita, gli elementi della tabella dei prezzi vengono visualizzati come elenchi puntati. Se desideri rimuovere i punti elenco dall'elenco delle funzionalità, puoi disattivare questa opzione.

Colore di sfondo della tabella in primo piano

Ogni tabella prezzi può essere "presentata". Le tabelle in primo piano sono evidenziate nella riga, che le distingue dalle altre opzioni. Usando questa impostazione puoi cambiare il colore di sfondo solo per le tabelle in primo piano.

Colore di sfondo dell'intestazione della tabella

Sopra ogni tabella dei prezzi c'è un'area di intestazione che include il titolo e il sottotitolo della tabella. È possibile controllare il colore di sfondo di quest'area indipendentemente dal colore di sfondo della tabella principale selezionando il colore desiderato dal selettore di colori.

Intestazione della tabella in primo piano

Ogni tabella dei prezzi può essere "descritta". Le tabelle in primo piano sono evidenziate nella riga, che le distingue dalle altre opzioni. Utilizzando questa impostazione è possibile modificare il colore di sfondo dell'intestazione solo per le tabelle selezionate.

Colore di sfondo

Per impostazione predefinita, le tabelle dei prezzi hanno un colore di sfondo bianco. Se desideri utilizzare un colore diverso per lo sfondo della tabella dei prezzi, puoi impostare il colore personalizzato qui utilizzando il selettore dei colori.

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 della tabella dei prezzi

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.

array design option.png

allineamento

Per impostazione predefinita, gli elenchi di funzionalità sono allineati a sinistra nella tabella dei prezzi. Se vuoi allinearli, puoi abilitare questa opzione.

Rimuovi l'ombra esterna dalla tabella in primo piano

Per impostazione predefinita, le tabelle dei prezzi hanno un'ombra sottile dietro ogni tabella. Se vuoi rimuovere questa ombra, puoi abilitare questa opzione.

Articoli dalla lista al centro

Qui puoi scegliere di centrare gli elementi elencati nella tabella.

Colore della palla

Per impostazione predefinita, i punti elenco nell'elenco della tabella dei prezzi erediteranno il colore principale del tema. Se vuoi usare un colore diverso, puoi impostarlo qui usando il selettore dei colori.

Colore della tabella in primo piano

Se desideri utilizzare un colore diverso per i punti elenco nelle tabelle dei prezzi, puoi impostare quel colore qui utilizzando il selettore dei colori.

Colore del testo dell'intestazione della tabella in primo piano

Questa opzione controlla il colore del colore del testo dell'intestazione della tabella. Se si modifica il colore di sfondo dell'intestazione della tabella, è anche possibile modificare questa opzione per garantire la leggibilità.

Carattere intestazione

È possibile modificare il carattere del testo dell'intestazione 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 dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. È 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à.

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]

Colore del testo dell'intestazione

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

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo dell'intestazione, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci 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à.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. 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 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 tipo di unità.

Colore del testo della tabella in primo piano

Questo cambia il colore del corpo del testo per la tabella in primo piano. Se si modifica il colore di sfondo della tabella, potrebbe essere necessario modificare questa opzione per garantire la leggibilità.

Carattere del corpo

È possibile modificare il carattere del corpo 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 corpo

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

Colore del testo del corpo

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

Spaziatura delle lettere del corpo

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

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga di testo nel tuo corpo 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 suo tipo di unità.

Colore del testo del sottotitolo della tabella

Questo cambia il colore del testo della didascalia per la tabella in primo piano. Se si modifica il colore di sfondo della tabella, potrebbe essere necessario modificare questa opzione per garantire la leggibilità.

Carattere sottotitoli

È possibile modificare il carattere del testo della didascalia 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, lettere maiuscole e sottolineato.

Dimensione del carattere dei sottotitoli o dei sottotitoli

Qui puoi regolare la dimensione del testo del sottotitolo. È 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 dell'intestazione secondaria

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

Spaziatura delle lettere delle intestazioni secondarie

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo della didascalia, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci 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à.

Altezza della riga dell'intestazione secondaria

L'altezza della riga influisce sullo spazio tra ogni riga del testo della didascalia. 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 del valore della tua dimensione per cambiare il tipo di unità.

Valuta Valuta e Frequenza

È possibile modificare il carattere della valuta e il testo della frequenza 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.

Valuta Valuta Dimensione e frequenza

Qui puoi regolare la dimensione della valuta e il testo della frequenza. È 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 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 e frequenza del testo della valuta

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

Spaziatura di lettere e valute

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nella valuta e il testo della frequenza, 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 di valuta di frequenza

L'altezza della riga influisce sullo spazio tra ogni riga della valuta e il testo della frequenza.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 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à.

Prezzo di colore in primo piano

Questo cambia il colore dei prezzi per il tuo tavolo in primo piano. Se si modifica il colore di sfondo della tabella, potrebbe essere necessario modificare questa opzione per garantire la leggibilità.

Polizia di prezzo

Puoi modificare il carattere del testo del prezzo 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, lettere maiuscole e sottolineato.

Dimensione carattere prezzo

Qui puoi regolare la dimensione del testo del prezzo. È 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 prezzo

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

Spaziatura delle lettere dei prezzi

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del prezzo, 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 suo tipo di unità.

Altezza della linea di prezzo

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

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, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Usa stili personalizzati per il pulsante

L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.

Dimensione del testo del pulsante

Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.

Colore del testo del pulsante

Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.

Colore di sfondo del pulsante

Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.

Larghezza del bordo del pulsante

Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.

Colore del bordo del pulsante

Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.

Raggio del bordo del pulsante

Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.

Spaziatura delle lettere del pulsante

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, 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 suo tipo di unità.

Polizia di Boutton

È possibile modificare il carattere del testo del pulsante 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, lettere maiuscole e sottolineato.

Aggiungi un'icona a pulsante

Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia.

Icona del pulsante

Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.

Colore dell'icona del pulsante

La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.

Posizionamento dell'icona del pulsante

Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.

Mostra solo l'icona quando si passa con il mouse sopra il pulsante

Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo al passaggio del mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.

Colore del testo al cavalcavia del pulsante

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore di sfondo del pulsante al passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Pulsante del bordo di passaggio del colore

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

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]

Pulsante del bordo del passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Pulsante di spaziatura delle note di puntamento

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Opzioni avanzate del tariffario

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.

opzioni avanzate divi price chart.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 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.

Opzioni di contenuto delle singole tabelle dei prezzi

prezzo sezione singola table.png

titolo

Il titolo inserito qui verrà utilizzato per questa opzione di prezzo (Premium).

sottotitolo

Il sottotitolo che inserisci qui apparirà sotto il tuo titolo.

Escogitare

Inserisci qui il simbolo della valuta desiderata.

da

Se il tuo prezzo è basato su abbonamento, inserisci qui il ciclo di abbonamento (ad esempio, Anno).

Prezzo

Inserisci qui il valore del prodotto.

Pulsante di testo

Specifica qui il testo del pulsante.

Contenuto

In questo campo è possibile inserire l'elenco delle funzionalità fornite o meno con il prodotto. Separare ogni elemento dell'elenco su una nuova riga e iniziare ogni riga con un simbolo + o -. A + specifica una funzionalità inclusa, mentre A - specifica una funzionalità esclusa.

URL del pulsante

In fondo a ciascuna tabella, puoi inserire un pulsante di invito all'azione inserendo un URL web valido in questo campo. Lascia questo e il file
campo di testo pulsante vuoto se non si desidera avere un pulsante nella tabella dei prezzi.

Colore di sfondo

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

Opzioni di progettazione per tabelle dei prezzi individuali

colonna prezzo colonna stile divi.png

Crea questo tavolo in primo piano

Scegli di anticipare o meno questa tabella dei prezzi con questo menu a discesa. Ciò consentirà alla tavola di distinguersi dal resto.

Colore articolo escluso

Per gli elementi nell'elenco che sono stati impostati come esclusi utilizzando il simbolo -, è possibile regolarne il colore utilizzando questa impostazione. Ad esempio, potresti voler cambiare il colore in rosso o ridurne l'opacità per indicare visivamente che gli articoli sono esclusi dal pacchetto corrente.

Carattere intestazione

È possibile modificare il carattere del testo dell'intestazione 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, lettere maiuscole e sottolineato.

Dimensione del carattere dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. È 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 dell'intestazione

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

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo dell'intestazione, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci 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à.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. 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 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 tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo 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 corpo

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

Colore del testo del corpo

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 desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

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

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga di testo nel tuo corpo 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 suo tipo di unità.

Carattere sottotitoli

È possibile modificare il carattere del testo della didascalia 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 carattere sottotitoli

Qui puoi regolare la dimensione del testo del sottotitolo. È 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 dei sottotitoli

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

Spaziatura delle lettere dei sottotitoli

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo della didascalia, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci 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à.

Altezza della linea dei sottotitoli

L'altezza della riga influisce sullo spazio tra ogni riga del testo della didascalia. 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 del valore della tua dimensione per cambiare il tipo di unità.

Valuta Valuta e Frequenza

È possibile modificare il carattere della valuta e il testo della frequenza 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 carattere per valuta e frequenza

Qui puoi regolare la dimensione della valuta e il testo della frequenza. È 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 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 per valuta e frequenza

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

Spaziatura di lettere e valute

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nella valuta e il testo della frequenza, 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à.

Valuta e linea di frequenza

L'altezza della riga influisce sullo spazio tra ogni riga della valuta e il testo della frequenza.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 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à.

Politica dei prezzi

Puoi modificare il carattere del testo del prezzo 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 carattere prezzo

Qui puoi regolare la dimensione del testo del prezzo. È 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 prezzo

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

Spaziatura delle lettere dei prezzi

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del prezzo, 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 suo tipo di unità.

Altezza della linea di prezzo

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

Usa stili personalizzati per il pulsante

L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.

Dimensione del testo del pulsante

Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.

Colore del testo del pulsante

Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.

Colore di sfondo del pulsante

Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.

Larghezza del bordo del pulsante

Tutti i pulsanti Divi hanno un bordo di 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.

Colore del bordo del pulsante

Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.

Raggio del bordo del pulsante

Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.

Spaziatura delle lettere dei pulsanti

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, 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 suo tipo di unità.

Carattere del pulsante

È possibile modificare il carattere del testo del pulsante 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.

Aggiungi un'icona al pulsante

Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia al passaggio del mouse.

Icona del pulsante

Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.

Colore dell'icona del pulsante

La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.

Posizionamento del pulsante icona

Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.

Mostra solo l'icona quando si passa con il mouse sopra il pulsante

Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo al passaggio del mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.

Colore del testo al cavalcavia del pulsante

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore di sfondo del pulsante al cavalcavia

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore del bordo al cavalcavia

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Raggio del bordo del pulsante nella panoramica

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Spaziatura delle lettere del pulsante sul cavalcavia

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Opzioni tabella prezzi individuali Opzioni avanzate

opzione avanzata divi.png

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.

Altri tutorial di Divi

Questo articolo contiene i commenti 3

  1. Ottimo articolo per un modulo quasi completo. La possibilità di aggiungere un prezzo barrato non sarebbe stata rifiutata ...

  2. Buongiorno,
    Grazie per questo articolo molto preciso e dettagliato. Sono nuovo nell'usare DIVI builder e noto che dopo aver creato la mia tabella dei prezzi a 3 colonne, il display mobile è un disastro (2 colonne extra strette e una terza di fila ...).
    C'è un modo (oltre a duplicare la tabella e nasconderla) per impostarlo come su Bootstrap, ad esempio (dare una colonna della larghezza del 33% su desktop e 100% su dispositivi mobili)?
    Merci pour votre aiutante.

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
5 azioni
quota2
Tweet
Enregistrer3