Evidenziazione del plug-in Divi: Divi SuperTab

Divi SuperTabs è un plug-in di terze parti per Divi che aggiunge un modulo scheda a Divi Builder. Sebbene Divi Builder disponga già di un modulo scheda, questo plug-in offre alcune opzioni e funzionalità di progettazione uniche che ti consentono di creare schede più complesse per il tuo sito Web Divi. In questo punto saliente del plug-in, vedremo cosa può fare Divi SuperTabs e ti aiuteremo a decidere se questo è il plug-in giusto per il tuo sito web.

Diamoci da fare!

Installazione di Divi SuperTab

L'installazione di Divi SuperTabs è semplice e diretta. Passa alla pagina del plug-in sulla dashboard di WordPress, quindi fai clic su Carica plug-in. Carica il file ZIP per il plug-in, quindi attiva il plug-in una volta installato.

Modulo Divi SuperTabs

Un nuovo modulo viene aggiunto a Divi Builder chiamato SuperTabs. Questo modulo ti consente di aggiungere schede complesse e personalizzabili al tuo layout Divi. Diamo un'occhiata alle caratteristiche principali.

Impostazioni della scheda Divi SuperTabs

Nella scheda del contenuto per le impostazioni di SuperTabs, puoi aggiungere le tue schede. Ogni scheda ha anche il proprio menu delle impostazioni, che consente di personalizzare il design di ogni singola scheda.

Impostazioni scheda – Contenuto

All'interno delle impostazioni di ciascuna scheda, puoi aggiungere il contenuto della scheda come titolo, sottotitolo e contenuto della scheda.

Nella sezione Layout, puoi scegliere tra una varietà di layout per il contenuto della tua scheda. Nell'esempio sopra, ho usato il layout Immagine a sinistra, Testo, Pulsante.

In alternativa, puoi selezionare l'opzione libreria per utilizzare qualsiasi layout della libreria Divi in ​​una scheda, consentendoti di creare progetti più complessi utilizzando altri moduli Divi.

Per utilizzare un elemento della libreria con Divi SuperTab, salva il layout desiderato nella libreria Divi e assicurati di aggiungerlo alla categoria "Contenuto schede".

Quindi, seleziona Libreria sotto le impostazioni del layout della scheda e aggiungi il layout della tua Libreria Divi.

Inoltre, nella scheda del contenuto delle impostazioni della scheda, puoi aggiungere un'icona alla tua scheda. SuperTab ti consente di utilizzare le icone predefinite di Divi, le icone di FontAwesome e persino caricare le tue icone personalizzate.

È inoltre possibile impostare una scheda per collegarsi a un URL in modo che il collegamento si apra quando la scheda viene selezionata. Questo è un modo pratico per collegarsi a siti Web esterni insieme al contenuto della scheda. Puoi anche impostare un collegamento per l'intero modulo anche nelle impostazioni del collegamento.

Infine, puoi impostare uno sfondo unico per la tua scheda. Le impostazioni dello sfondo includono tutte le opzioni di sfondo predefinite di Divi (colore, sfumatura, immagine, video, motivo e maschera). In questo esempio, ho aggiunto un semplice sfondo colorato a questa scheda.

Impostazioni scheda – Design

Nella scheda Design delle impostazioni della scheda, puoi trovare molte opzioni per personalizzare completamente l'aspetto della tua scheda. Quando personalizzi il design in questo modo, le tue modifiche vengono applicate solo alla singola scheda che stai modificando, non al resto delle schede. Le opzioni di design all'interno delle impostazioni delle singole schede sono le stesse delle opzioni di design all'interno delle impostazioni SuperTabs, quindi la differenza principale è se si desidera che il design si applichi a ogni scheda o solo a una singola scheda.

Con le impostazioni di progettazione, puoi modificare l'aspetto della navigazione, della scheda, del contenuto, del layout, del testo, delle dimensioni, della spaziatura, ecc. Esamineremo in dettaglio tutte le opzioni di progettazione più avanti in questo articolo.

Impostazioni scheda – Avanzate

Nella scheda Avanzate, hai tutte le opzioni Divi avanzate predefinite, tra cui CSS personalizzato, Condizioni, Visibilità, Transizioni, Posizione ed Effetti di scorrimento.

Scheda Contenuto Divi SuperTabs

Ora che abbiamo coperto le impostazioni per le singole schede all'interno del modulo Divi SuperTabs, esploriamo le impostazioni generali per il modulo SuperTabs, a partire dalla scheda del contenuto. Come abbiamo già spiegato, qui è dove aggiungi ciascuna delle tue schede.

Freccia

Con questa opzione, puoi aggiungere una freccia alle tue schede che verrà visualizzata sulla scheda attiva. Puoi vedere un esempio di questo sopra. Il colore della freccia può essere personalizzato nella scheda Design.

Collegamento

Questa opzione è un'opzione predefinita del modulo Divi che consente di collegare il modulo a un URL.

Sfondo

Puoi aggiungere uno sfondo al modulo con l'opzione Sfondo. Quando aggiungi uno sfondo in questo modo, il colore copre la navigazione a schede e l'area del contenuto. In questo esempio, ho aggiunto uno sfondo giallo al modulo. Ci sono altre opzioni di sfondo nella scheda Design, che ti consentono di aggiungere colori diversi per le schede e l'area del contenuto. Esamineremo queste opzioni di progettazione nella prossima sezione.

Scheda di progettazione Divi SuperTabs

La scheda di progettazione è dove questo plugin brilla davvero. Ci sono molte opzioni per personalizzare ogni aspetto del modulo SuperTabs. Diamo un'occhiata.

Impostazioni di navigazione

Nelle impostazioni Nav, puoi modificare la posizione della navigazione, l'allineamento e la posizione dei sottotitoli. Nell'esempio precedente, la posizione di navigazione è impostata su Sinistra. Puoi anche rendere le schede appiccicose in modo che aderiscano alla parte superiore della pagina mentre scorri il contenuto della scheda.

Inoltre, nelle impostazioni di navigazione, puoi personalizzare completamente la spaziatura di navigazione modificando la larghezza, il margine, il riempimento e il margine di navigazione. In questo esempio, ho rimosso il padding sinistro e modificato la larghezza di navigazione al 20%. Infine, puoi personalizzare i colori e il design generale della barra di navigazione modificando il colore di sfondo, aggiungendo angoli arrotondati o aggiungendo un bordo. Ho cambiato lo sfondo della barra di navigazione in verde.

Scheda Impostazioni

Nelle impostazioni della scheda, puoi personalizzare il riempimento della scheda, il colore di sfondo della scheda attiva e il colore di sfondo della scheda inattiva. Puoi anche modificare la posizione, l'allineamento, il margine e le dimensioni dell'icona. Infine, puoi scegliere di nascondere l'icona o il titolo, aggiungere angoli arrotondati o aggiungere un bordo.

Nell'esempio seguente ho cambiato il colore di sfondo della scheda attiva in un verde più chiaro e ho cambiato la posizione dell'icona a sinistra e ho aggiunto un margine dell'icona.

Impostazioni freccia

Nelle impostazioni della freccia, puoi cambiare il colore della freccia. L'ho cambiato in un verde più chiaro per abbinare il colore di sfondo della scheda attiva.

Le impostazioni del contenuto

Qui puoi personalizzare il design generale dei contenuti nelle tue schede. Puoi aggiungere padding, angoli arrotondati e un bordo. Ho aggiunto un po' di riempimento alla sezione del contenuto per portare un migliore equilibrio al design generale.

Disposizione

Nelle impostazioni del layout, puoi impostare la barra di navigazione in modo che sia inserita, visualizzata all'interno della cornice della scheda.

Testo dell'elemento di navigazione

Qui puoi personalizzare il carattere dell'elemento di navigazione, lo spessore del carattere, lo stile, il colore, la dimensione, la spaziatura, l'altezza della linea e l'ombreggiatura. Qui ho cambiato il colore del carattere dell'elemento di navigazione in bianco, questo cambia anche il colore dell'icona.

Testo dell'elemento di navigazione attivo

Le impostazioni del testo dell'elemento di navigazione attivo hanno le stesse impostazioni del testo dell'elemento di navigazione, ma queste opzioni si applicano solo all'elemento di navigazione quando è attivo (selezionato). Qui ho cambiato il colore del testo dell'elemento di navigazione attivo in arancione.

Testo del sottotitolo

Qui puoi personalizzare il design del testo dei sottotitoli. Le opzioni sono le stesse delle opzioni del testo di navigazione.

Testo del sottotitolo della scheda attiva

E in questa sezione puoi personalizzare il design del testo dei sottotitoli attivi. Ancora una volta, abbiamo le stesse opzioni di personalizzazione delle ultime tre sezioni, ma queste impostazioni si applicano solo ai sottotitoli quando sono attivi.

Altre impostazioni di progettazione

Oltre alle impostazioni uniche che abbiamo coperto, ci sono anche altre opzioni predefinite come ridimensionamento, bordo spaziatura, ombreggiatura riquadro, filtri, trasformazione e animazione.

Scheda Avanzate Divi SuperTabs

La scheda Avanzate per Divi SuperTabs è piuttosto standard. Puoi aggiungere CSS personalizzati per personalizzare ancora di più il modulo e puoi utilizzare le altre impostazioni come condizioni, visibilità, transizioni, posizione ed effetti di scorrimento per portare il tuo design SuperTabs al livello successivo.

Esempi Divi SuperTab

Ecco alcuni esempi di come utilizzare Divi SuperTab.

Tabella dei prezzi

Il primo esempio è una tabella dei prezzi. Il contenuto proviene dal pacchetto di layout di riparazione del dispositivo. Ho salvato ciascuna delle tabelle dei prezzi nella Libreria Divi e ho utilizzato la funzione di layout della Libreria per aggiungere il contenuto a ciascuna scheda. Ciò semplifica l'aggiunta di layout di contenuto più complessi nelle schede.

Come funziona

Il secondo esempio utilizza le schede per organizzare le diverse fasi di un processo. Questo layout è stato realizzato utilizzando il pacchetto di layout Estate Planning. Ho utilizzato le impostazioni delle singole schede per impostare un colore e uno sfondo della scheda diversi per ciascuna scheda.

Caratteristiche

L'ultimo esempio utilizza Divi Home Staging Layout Pack. Ho usato SuperTab per organizzare alcune delle funzionalità evidenziate nella pagina. Inoltre, ho utilizzato icone personalizzate per aggiungere un certo interesse visivo alle schede.

Acquista Divi SuperTab

Divi SuperTabs è disponibile nel Divi Marketplace. Mercato. Costa $ 29 per l'utilizzo illimitato del sito Web e 1 anno di supporto e aggiornamenti. Il prezzo include anche una garanzia di rimborso di 30 giorni.

Pensieri finali

Divi SuperTabs è un plug-in ricco di funzionalità per Divi Builder che ti consente di creare schede complesse per il tuo sito Web Divi. Il punto di forza di questo plugin è sicuramente la possibilità di importare layout dalla tua libreria Divi come una scheda, permettendoti di aggiungere contenuti di schede complessi contenenti altri moduli Divi. Inoltre, la personalizzazione del plug-in è eccezionale. Con tutte le impostazioni disponibili puoi personalizzare e mettere a punto le schede per ottenere esattamente l'aspetto che desideri.

Nel complesso Divi SuperTabs è molto facile da configurare e utilizzare e puoi creare schede di bell'aspetto per organizzare le informazioni sul tuo sito web. Se ti senti limitato dal modulo delle schede native di Divi o desideri utilizzare il contenuto della libreria Divi all'interno delle tue schede, questo plug-in potrebbe essere un'ottima opzione per te.

Ci piacerebbe avere tue notizie! Hai provato Divi SuperTab? Fateci sapere cosa ne pensate nei commenti!