Evidenziazione del plug-in Divi: Divi Widget Builder

Hai mai desiderato posizionare moduli e layout Divi all'interno di aree widget? Il solo pensiero dei layout Divi nelle barre laterali e nei piè di pagina mi dà idee per possibilità di progettazione oltre il mio livello di abilità. La cosa interessante è che è facile da fare, non importa quale sia il tuo livello di abilità. Come? Con un plugin di terze parti chiamato Divi Widget Builder.

Divi Widget Builder ti consente di visualizzare qualsiasi layout Divi nella tua libreria Divi all'interno di un widget. Ciò include singoli moduli e pagine complete, comprese tutte le loro caratteristiche e regolazioni. Funziona sia con Divi che con Extra. In questo articolo daremo un'occhiata a Divi Widget Builder e vedremo quanto sia facile aggiungere layout Divi alle aree dei widget.

Puoi acquistare Divi Widget Builder sul sito web dell'editore.

Installazione e attivazione di Divi Widget Builder

Carica e attiva il plugin normalmente.

Una volta attivato il plugin, dovrai inserire la tua chiave di licenza. Passa a Divi , Divi Widget Builder nel menu della dashboard e inserisci la tua chiave di licenza. Non sono necessarie altre impostazioni per utilizzare il plug-in, ma avrai bisogno di layout Divi da utilizzare all'interno dei widget.

Libreria Divi

Puoi utilizzare qualsiasi layout Divi all'interno di Divi Widget Builder. Non consiglio di creare layout come faresti con una pagina o un post. Ad esempio, una griglia a 3 o 4 colonne (per blog, progetti, blurb, ecc.) sembrerebbe strana nella barra laterale. Questo è facile da risolvere creando layout in singole colonne. In altre parole, crea layout specifici per la barra laterale o il piè di pagina.

I moduli singoli funzionano bene nella barra laterale. Esempi inclusi:

• Mappe
• Moduli di contatto
• Timer conto alla rovescia
• Banconi bar
• Pulsante
• Blog
• Accesso
• Contatore di numeri
• Persona
• Testimonianza

Crea un layout e usa questi moduli con sovrapposizioni di sfondo, combinali, ext., per creare dei widget davvero interessanti. Il cielo è il limite.

Creazione di un layout

Crea il tuo layout andando su Divi , Divi Library nel menu della dashboard. Seleziona Aggiungi nuovo in alto a sinistra.

Assegna un nome al layout e seleziona il tipo di modello dal menu a discesa. Scorri verso il basso e puoi selezionare una categoria per il tuo modello, se lo desideri. Avrai un'altra possibilità di selezionare la categoria o anche di aggiungere nuove categorie nella schermata successiva. Fai clic su Invia quando hai finito.

Ora crea semplicemente il tuo layout normalmente.

Il widget Divi Widget Builder

Un nuovo widget viene aggiunto ai tuoi widget chiamato Divi PB Widget. Per vederlo, vai su Aspetto , Widget nella dashboard. Rilascia questo widget in qualsiasi area widget (incluse barre laterali, piè di pagina o qualsiasi altra cosa che hai creato). Fornisce una casella a discesa in cui è possibile scegliere qualsiasi elemento della libreria Divi da visualizzare all'interno del widget.

Ci sono altre due selezioni:

Visualizza il titolo dell'elemento della libreria : visualizza il nome del layout nella barra laterale del tuo sito web. Funziona come un titolo per il widget. Deselezionalo per nascondere il nome.

Aggiungi elementi della libreria da utilizzare come widget qui : facendo clic sulla parola "qui" in quella frase (beh, non la mia frase) ti porterà alla libreria Divi dove puoi creare i tuoi layout. Mi piace che questo collegamento sia incluso in quanto aiuta a ridurre la confusione su dove creare i layout e ti dà un rapido accesso alla libreria.

Una volta effettuate le selezioni, fai clic su Salva e il nuovo layout viene applicato alla posizione del widget in cui hai posizionato Divi PB Widget. Il widget funziona anche con le tue aree widget personalizzate.

Esempi di Divi Widget Builder

Ecco alcuni esempi piuttosto che ho preparato. Sono semplici, ma si spera che ti diano un'idea di come funziona.

Carta geografica

Questo esempio mostra un feed del blog con una barra laterale. La barra laterale viene aggiunta all'interno di un layout 2/3 Divi con un modulo blog a sinistra.

Questo esempio utilizza un singolo modulo mappa. Ho incluso il nome del layout. Non ho assegnato uno stile al modulo mappa, quindi ha una casella bianca attorno. Questo è facilmente regolabile. Se apporto modifiche al modulo, tali modifiche si riflettono sul widget quando aggiorno la pagina.

Potrei semplicemente posizionare la mappa all'interno del layout Divi, ma posizionandola nella barra laterale viene visualizzata la mappa indipendentemente dal post del blog che qualcuno sta leggendo. Questo è il post standard del blog senza utilizzare un layout Divi. Usando un layout potrei creare una nuova mappa per ogni post, creare una nuova area widget e scegliere quale mappa visualizzare su ogni post individualmente.

Conto alla rovescia

Questo layout utilizza più moduli timer per il conto alla rovescia per creare un singolo widget. Ho disegnato ciascuno separatamente.

I moduli mostrano un conto alla rovescia per la partita successiva, uno per ciascuno dei campionati coperti dal blog. Ciascuno dei timer per il conto alla rovescia utilizza colori specifici per i loghi della lega e include sfumature. Lo so: ho lasciato fuori NHL e molti altri. Mi dispiace.

Post Slider

Questo aggiunge un cursore di post alla barra laterale. Ho incluso il pulsante Leggi altro del cursore del post, la navigazione con punti e le frecce. Ho anche aggiunto widget più regolari per vedere come si adatta.

A proposito di me

Questo utilizza un layout di pagina anziché solo un modulo. Ho creato un layout da un post (invece di crearlo nella libreria Divi) utilizzando il layout Informazioni personali fornito con Divi. Ho modificato il layout in modo che tutto sia in una singola colonna e ho ridotto la dimensione del carattere per il titolo dell'intestazione. Ho quindi salvato il layout nella libreria in modo che fosse disponibile per Divi Widget Builder.

La pagina stessa è un layout di Divi Builder chiamato Creative Agency. Gli ho dato una barra laterale sinistra e ho scelto il layout Chi sono per il widget.

Questo è lo stesso layout ma invece di visualizzare la barra laterale standard di WordPress ho ricreato il layout utilizzando una sezione speciale. Ciò si traduce in un design molto più gradevole rispetto alla barra laterale standard di WordPress in quanto dà più larghezza alla pagina e il widget può essere posizionato sotto il modulo di intestazione a larghezza intera Divi.

La sezione Specialità consente 3 colonne all'interno di una riga, quindi ho ridotto a 3 blurb invece di 4 e ho posizionato la barra laterale nella colonna di sinistra. Ho creato la sezione Specialità a tutta larghezza e ho modificato il layout della pagina in Divi Post Settings nell'angolo in alto a destra da Left Sidebar a Fullwidth .

Modulo di Contatto

Questo utilizza il layout Il nostro team fornito con Divi Builder. Sto usando la barra laterale destra. Ho inserito un widget Monarch nella barra laterale insieme al Divi Widget Builder, che mostra un modulo di contatto.

Area widget piè di pagina

Questo ha 3 widget Divi Widget Builder nell'area del piè di pagina. Ho scelto un layout di piè di pagina a 3 colonne e ho inserito un modulo modulo di contatto, un modulo persona e un modulo cursore blog nelle 3 aree. Questo è il fantastico pacchetto di layout Code School di Jason Champagne. Anche l'immagine per il post del blog proviene da questo layout. Puoi scaricare il layout dal blog ET qui: Scarica un pacchetto di layout gratuito mozzafiato per la gestione dell'apprendimento (LMS) per Divi.

Questo piè di pagina utilizza due diversi layout che ho creato come post. Entrambi hanno immagini di sfondo. Il widget a sinistra utilizza diversi moduli di testo, un modulo follow social e un modulo divisore. La voce di menu sotto i pulsanti social sono collegamenti cliccabili. Utilizza anche una sovrapposizione per scurire l'immagine di sfondo. Il widget a destra è un modulo di contatto.

Utilizzo di Divi Widget Builder con Extra

Questo è lo stesso layout del nostro team con Extra. Inizialmente avevo creato il modulo di contatto utilizzando le impostazioni predefinite nel modulo. Volevo fondere lo sfondo, quindi ho reso lo sfondo trasparente. Ho anche cambiato il colore del testo del pulsante per renderlo visibile sullo sfondo scuro.

Licenza e documentazione

Sono disponibili quattro licenze:

• Sito singolo $7.00
• 3 siti $ 19.00
• Siti illimitati $ 39.00
• $ 89.00 a vita

Include un anno di supporto e aggiornamenti automatici. La documentazione è disponibile sul sito dell'editore.

Pensieri finali

Divi Widget Builder è semplice e facile da usare. Il lavoro deriva dalla creazione di layout Divi piuttosto che dall'utilizzo del generatore di widget. La scelta di un layout all'interno del widget builder non potrebbe essere più semplice e la possibilità di posizionare il maggior numero di widget Widget Builder in qualsiasi area widget che desideri apre molte possibilità di design Divi ed Extra.

Vorrei vedere alcuni esempi sul sito web dello sviluppatore del plugin in azione. Vedere alcuni casi d'uso creativi darebbe all'acquirente idee su come usarlo e trarne il massimo. Se sei interessato a posizionare layout e moduli Divi all'interno delle tue aree widget, Divi Widget Builder potrebbe essere il plug-in che stai cercando.

Vogliamo sentire da voi. Hai provato Divi Widget Builder? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite robuart / shutterstock.com