Evidenziazione del plugin Divi: Table Maker
Pubblicato: 2020-09-11Sebbene Divi abbia molti moduli, non ha un modulo per creare tabelle. Fortunatamente, c'è una soluzione. Table Maker è un plug-in di terze parti che ti consente di creare tabelle completamente personalizzabili con Divi Builder. Per aiutarti a decidere se questo è il plugin giusto per il tuo sito Divi, in questo articolo daremo un'occhiata a Table Maker e vedremo cosa può fare.
Installazione di Table Maker
L'installazione è semplice e immediata.
- Vai a Plugin > Aggiungi nuovo > Carica plugin
- Fare clic su Scegli file
- Individua il file zip del plugin sul tuo computer e selezionalo
- Fare clic su Installa ora
- Fare clic su Attiva
Modulo creatore di tavoli
Viene aggiunto un nuovo modulo a Divi Builder chiamato Table Maker. Vediamo le caratteristiche principali.
Scheda Contenuto creatore di tabelle
La scheda Contenuto include un'area per i sottomoduli. Questi sono usati per creare le colonne per la tabella. Per le colonne, puoi regolare il conteggio dell'intestazione e del piè di pagina e le dimensioni per le colonne e le righe, regolare i punti di interruzione reattivi per ogni tipo di dispositivo, abilitare lo scorrimento e scegliere icone, pulsanti e immagini. Le icone, i pulsanti e le immagini hanno personalizzazioni per dimensioni, colore, posizionamento, ecc.
Sottomoduli colonna
I sottomoduli definiscono le colonne e includono un campo per aggiungere contenuto alle righe. Funziona in modo molto simile a un editor di codice in cui ogni riga è numerata. Puoi anche regolare la larghezza, le icone, i pulsanti e le immagini.
La prima riga è il titolo della colonna per impostazione predefinita, ma puoi cambiarlo se non vuoi avere un'intestazione. Puoi includere HTML, il che significa che dovrai evitare determinati caratteri utilizzati per il markup. Puoi anche aggiungere CSS, shortcode, iFrame, icone, immagini, pulsanti e altro.
Le colonne includono personalizzazioni di design per ogni elemento, inclusi testo, sfondo, celle, celle di intestazione e piè di pagina, ecc.
Crea tutte le colonne che vuoi. Puoi modellarli indipendentemente, estendere gli stili da uno all'altro, ecc. Ho aggiunto 4 colonne e regolato separatamente i colori e le larghezze di ogni colonna.
Intestazioni e piè di pagina
Puoi impostare il numero di colonne per intestazioni e piè di pagina. Per impostazione predefinita, ha 1 intestazione e nessun piè di pagina. In questo esempio, ho impostato i primi 2 come intestazioni e l'ultimo come piè di pagina. I colori sono stilizzati in modo indipendente.
Puoi fare lo stesso per le righe. In questo esempio, ho impostato 2 righe come intestazioni (le due a sinistra) e una come piè di pagina (quella a destra).
Scorrimento tabella
Lo scorrimento della tabella fornisce lo scorrimento sia orizzontale che verticale. Se lo desideri, puoi rendere permanenti le intestazioni di colonna e riga. Questo li mantiene in posizione in modo che non scorrano fuori dalla vista. In questo esempio, ho abilitato lo scorrimento e reso le intestazioni appiccicose. Ho aggiunto molte colonne in modo che possa scorrere verticalmente. Le intestazioni di riga rimangono al loro posto.
Icone da tavolo
Puoi aggiungere tutte le icone che vuoi a ogni cella. Imposta un'icona predefinita e scegli le icone per ogni cella separatamente. Scegli l'icona predefinita e regola le dimensioni e il colore dalla scheda Contenuto.
Le icone vengono aggiunte alle celle specifiche in cui si desidera che vengano visualizzate utilizzando il tag icona nell'area del contenuto dei sottomoduli. È possibile sovrascrivere l'icona predefinita e impostare un valore predefinito per questa colonna selezionandola dalla scheda icona nel sottomodulo e immettere il nome di qualsiasi icona specifica che si desidera venga visualizzata. La pagina di vendita nell'Elegante Themes Marketplace fornisce un collegamento all'elenco delle icone e ai loro nomi.
Pulsanti della tabella
Anche i pulsanti della tabella vengono aggiunti utilizzando i tag. Aggiungi un pulsante predefinito nella scheda Contenuto. Puoi anche modellare il pulsante da queste impostazioni. Sostituisci il pulsante predefinito con queste stesse impostazioni all'interno di ogni sottomodulo di colonna.
Aggiungere il pulsante a ciascuna cella con il tag pulsante nell'area del contenuto del sottomodulo. Modificare il testo sul pulsante aggiungendolo all'interno dei tag. In questo esempio, ho aggiunto al pulsante predefinito un paio di celle e ho modificato il testo per il secondo pulsante.
Immagini della tabella
Puoi aggiungere immagini, icone e altri tipi di contenuto alle celle. Imposta la qualità dell'immagine, le proporzioni, la scala e l'allineamento orizzontale e verticale. Ha molte opzioni per le immagini.
Anche se le immagini vengono aggiunte nella galleria, non vengono visualizzate fino a quando non dici loro in quale cella devono essere visualizzate. Questo viene fatto usando i tag. Digitando il tag dell'immagine di apertura, il tag di chiusura viene aggiunto automaticamente e l'immagine viene visualizzata all'interno di quella cella. Puoi includerlo con altri contenuti nelle celle. Aggiungi un numero tra i tag per specificare un'immagine specifica da visualizzare.
Scheda Progettazione Crea tavoli
La scheda Design include le impostazioni per la cornice della tabella, le strisce, le celle, il testo, l'intestazione, il piè di pagina, le dimensioni, la spaziatura, il bordo, ecc. Ecco le impostazioni principali.
Cornice da tavolo
La scheda Progettazione include personalizzazioni per la cornice della tabella, le celle, il testo, l'intestazione, la riga, il piè di pagina, il dimensionamento, la spaziatura, il bordo, ecc. Questa è la cornice della tabella. Il tipo di frame predefinito utilizza Gaps, che posiziona un po' di spazio tra le celle. Questo è Nessuno, che rimuove i bordi tra le celle.
Per gli spazi, è possibile regolare gli spazi tra colonne e righe in modo indipendente. Ho aumentato lo spazio tra le colonne a 8 px e lo spazio tra le righe a 4 px.
Le linee posizionano un bordo attorno a ogni cella. Hai il controllo sullo stile, il colore e lo spessore delle linee. Questa è l'impostazione predefinita.
In questo esempio, ho impostato lo stile su punteggiato, cambiato il colore e regolato la larghezza della linea su 3px.
Strisce da tavola
Table Stripes crea un effetto a strisce come un foglio di calcolo standard. Puoi scegliere dove si applica, scegliere l'ordine e regolare la tonalità, la saturazione e la luminosità. Queste sono le impostazioni predefinite.
Per questo esempio, ho regolato la tonalità della striscia a 86 gradi, la saturazione al 172% e la luminosità all'82%. Tutte e tre le regolazioni lavorano insieme per creare interessanti opzioni di colore.
Per questo esempio, ho regolato il colore delle celle della tabella, delle celle dell'intestazione e delle celle dell'intestazione della colonna.
Per questo esempio, ho aggiunto un'ombra della casella n. 1 alle celle dell'intestazione e un'ombra della casella n. 3 alle celle dell'intestazione della riga. Ho centrato l'allineamento orizzontale e verticale del testo per ciascuno dei tipi di cella individualmente. Ho anche aggiunto più spazio per gli spazi vuoti.
Stile di intestazione e piè di pagina
Puoi modellare i colori per il testo e le celle di intestazione e piè di pagina in modo indipendente. In questo esempio, ho aggiunto un piè di pagina, reso il testo bianco e tutto maiuscolo, impostato il colore della cella su blu scuro e aggiunto un'ombra di riquadro alle celle.
In questo esempio, ho regolato in modo indipendente i bordi per le celle, le celle di intestazione e le celle a piè di pagina.
Esempi di creatori di tavoli
Ho creato una tabella con 5 colonne, un'intestazione di colonna e un'intestazione di riga. L'intestazione della riga ha un pulsante per lo shopping che ti porta alla pagina del prodotto per ogni prodotto e un'immagine del prodotto. Entrambe le intestazioni utilizzano uno sfondo nero, angoli arrotondati e caratteri del layout.
Le celle utilizzano strisce, un carattere più grande dal layout e angoli arrotondati. L'ultima colonna mostra le icone per mostrare se un prodotto è disponibile. Ho aggiunto un'ombra di casella a ciascuna delle intestazioni e delle celle. La cornice della tabella utilizza spazi con 4 pixel per lo spazio tra le colonne e 7 pixel per lo spazio tra le righe.
Ecco lo stesso design senza le immagini nell'intestazione della riga.
Ecco il layout con le immagini del prodotto così come appare sui dispositivi mobili. Riduce la tabella a 2 colonne di cui una è l'intestazione della riga. Questo lo rompe per colonne.
Puoi anche farlo spezzare per righe. Questo esempio rimuove le immagini e mostra la tabella suddivisa per righe.
Questo mostra le file come una fisarmonica. Facendo clic su uno lo si apre per mostrarne il contenuto.
Dove acquistare Table Maker
Puoi acquistare Table Maker nel Divi Marketplace. Costa $ 35 per siti Web illimitati e include una garanzia di rimborso di 30 giorni e un anno di supporto e aggiornamenti. La documentazione viene fornita sotto forma di video e testo.
Pensieri finali
Questo è il nostro sguardo a Table Maker per Divi. Ha molte funzionalità per creare e personalizzare tabelle per Divi, incluse molte che non ho trattato qui. Avevo solo bisogno della documentazione per vedere come usare immagini, icone e pulsanti.
All'inizio, sembrava un po' scomodo aggiungere pulsanti, icone e immagini alla tabella usando i tag, ma è facile da fare e poiché il contenuto delle celle viene aggiunto con un editor di codice ti dà molto più controllo di te' d normalmente.
Table Maker è un ottimo plugin per creare tabelle con Divi. Essere in grado di aggiungere contenuti come HTML, shortcode, iFrames, CSS, ecc., migliora notevolmente i tipi di tabelle che puoi creare. Se sei interessato a creare le tue tabelle personalizzate con Divi, vale la pena dare un'occhiata a Table Maker.
Vogliamo sentire da voi. Hai provato Table Maker per Divi? Fateci sapere cosa ne pensate nei commenti.
Immagine in primo piano tramite PCH.Vector / shutterstock.com