Evidenziazione del plug-in Divi: Divi Module Builder

Il Divi Builder include molti moduli per aiutarti ad aggiungere praticamente qualsiasi elemento di design ai tuoi layout, ma cosa succede se volessi creare i tuoi moduli? Un plug-in di terze parti chiamato Divi Module Builder ti offre questa capacità.

In questo articolo darò un'occhiata al plugin e vedrò cosa può fare e quanto è facile da usare. Richiede Divi 3.0.50 o superiore e funziona sia con Divi che con Extra. È disponibile dal sito Web dello sviluppatore: DiviPlugins.com.

Installazione di Divi Module Builder

Una volta attivato il plug-in, fai clic su Pagina di attivazione DMB . In alternativa, puoi vedere questa schermata andando su Moduli personalizzati nella dashboard e facendo clic su Licenza .

Inserisci la tua chiave di licenza e fai clic su Attiva licenza . Viene aggiunto un nuovo menu alla dashboard chiamato Moduli personalizzati . All'interno di questo menu troverai tutto il necessario per costruire i tuoi moduli.

Aggiungi modulo

I moduli vengono creati nel menu della dashboard in Moduli personalizzati , Aggiungi modulo . Ci sono due aree che utilizzerai per creare il modulo. L'area a sinistra è dove creerai i campi. L'area a destra è dove aggiungerai il codice che utilizzeranno i campi. Puoi rendere il modulo standard o a larghezza intera. Puoi salvare la bozza o pubblicarla quando sei pronto. Una volta pubblicato, il modulo apparirà in Divi Builder.

Campi

Il tuo modulo può avere tutti i campi che vuoi. Ogni campo ha proprietà di campo al suo interno. Ecco uno sguardo più da vicino a ciascuna delle proprietà del campo:

Etichetta campo : l'etichetta che verrà visualizzata come titolo del campo nella scheda contenuto del modulo.

Identificatore di campo : un valore univoco che utilizzerai per fare riferimento al campo in HTML. Utilizza solo lettere minuscole, numeri e trattini bassi per gli identificatori di campo.

Descrizione campo : aggiungi la tua descrizione per spiegare lo scopo del campo. Questo verrà visualizzato sotto l'input nella scheda contenuto del modulo. Questo campo è facoltativo ma consiglio di aggiungere informazioni o esempi per aiutare gli utenti.

Tipo di campo : determina il tipo di input visualizzato dall'utente. Scegli diversi tipi di campo dalla casella a discesa tra cui testo, area di testo, colore, immagine, interruttore Sì/No e icona.

Scheda Design : aggiunge i controlli dei caratteri per questo campo all'interno del Design del modulo. Vedrai questa opzione se selezioni testo o area di testo. Dovrai identificare a quale elemento applicare i controlli dei caratteri aggiungendo una classe nell'HTML.

Nascondi campo : dai agli utenti il ​​controllo sul carattere di un elemento nell'output HTML senza consentire loro di controllare il contenuto di questo elemento. Questa opzione sarà disponibile solo se è selezionato un tipo di campo di testo o area di testo.

Aggiungi l'etichetta del campo, l'identificatore, la descrizione, scegli il tipo di campo, abilita la scheda di progettazione o seleziona per nascondere il campo. Riorganizzare i campi facendo clic sulle frecce su/giù su ciascun campo. Ogni sezione e campo fornisce una descrizione e un esempio.

Codice

Aggiungi HTML, PHP, CSS e JavaScript personalizzati per controllare l'output. I campi HTML possono accettare query personalizzate e PHP. Dovrai abilitare PHP prima che riconosca il codice. Altrimenti stamperà il codice sullo schermo. Sia HTML che PHP utilizzano identificatori di campo per fare riferimento ai campi.

Le scorciatoie del codice sono fornite come pulsanti sotto i campi del codice. Ciò include tag e identificatori di campo. Aggiungi i tuoi identificatori di campo e poi è disponibile nella parte inferiore dell'area del codice dove puoi fare clic per aggiungerli al tuo codice. Gli identificatori HTML sono visti come pulsanti arancioni e PHP è visto come verde. Puoi usare più di quello che è disponibile come scorciatoie, ma queste sono qui per aiutare ad accelerare i tempi di sviluppo.

Creazione di un modulo

Ecco un rapido esempio di creazione di un modulo. Il titolo sarà il nome che appare sul modulo in Divi Builder. Ho aggiunto l'etichetta del campo, la descrizione, ho scelto Testo come tipo di campo e ho creato un identificatore di campo.

Ho salvato come bozza in modo che l'identificatore appaia nelle scorciatoie HTML. Successivamente, ho selezionato il tag H1 dalle scorciatoie, ho posizionato il cursore tra i tag e ho selezionato l'etichetta dalle scorciatoie HTML. Una volta finito ho premuto pubblica. Il risultato dovrebbe essere un modulo con un campo in cui gli utenti possono inserire del testo. L'output visualizzerà il testo come intestazione 1.

Il modulo ora appare in Divi Builder. Posso aggiungere alla pagina proprio come qualsiasi modulo Divi.

La scheda Contenuto include i campi che ho aggiunto con le mie etichette.

Il modulo mostra il testo che ho inserito nel campo. Poiché ho aggiunto HTML per visualizzarlo come H1, il testo ha automaticamente una proprietà H1. Potrei aggiungere la scheda Design per includere più funzionalità di personalizzazione. Ciò richiederà del codice per indirizzare correttamente il campo.

Moduli

Puoi vedere l'elenco dei moduli nel menu della dashboard. Vai a Moduli personalizzati , Moduli . Qui puoi modificare o eliminare i tuoi moduli. Mostra se PHP è attivato o disattivato per ogni modulo. Se vuoi clonare un modulo dovrai visualizzarli in Impostazioni .

Impostazioni modulo personalizzato

Il menu Impostazioni fornisce una posizione in cui è possibile gestire i moduli. È possibile visualizzare sia i moduli pubblicati che quelli in bozza.

Puoi clonarli, il che ti dà un buon punto di partenza su un modulo che richiede molto codice che hai usato in un altro modulo. Puoi anche modificare, disabilitare o abilitare PHP (che è utile se sei bloccato fuori dall'editor a causa di un errore di codice - l'ho fatto e ho usato questa funzione per modificare il modulo) e importare ed esportare i tuoi moduli.

Aggiungi dipendenza

Qui puoi aggiungere dipendenze CSS e Javascript di terze parti. Aggiungili come URL esterni o interni. Scegli CSS o Javascript dalla casella a discesa, aggiungi il nome e aggiungi l'URL. Possono quindi essere utilizzati su qualsiasi pagina. Fornisce un esempio dell'utilizzo di Font Awesome. Questo è un modo eccellente per creare una dipendenza in una posizione e poi usarla ovunque.

Esempio di generatore di moduli Divi – Griglia blog personalizzata

Piuttosto che creare un modulo "okay" come esempio, sto mostrando il fantastico esempio creato dallo sviluppatore: Custom Blog Grid (disponibile per il download gratuito sul sito Web dello sviluppatore). Include 3 campi, HTML, PHP e CSS. Ecco uno sguardo a ciascuno.

Modulo griglia blog personalizzato

Il campo 1 è denominato Categorie, utilizza le categorie come identificatore e il tipo di campo è impostato su Testo.

Il campo 2 è etichettato Effetto immagine in bianco e nero. L'identificatore è filtro e il tipo archiviato è Attiva/disattiva Sì/No. Il filtro è creato in CSS.

Il campo 3 è etichettato come titolo del post e utilizza post_title come identificatore. Il tipo di campo è impostato su Testo e ha la scheda Progettazione abilitata. Vedremo le personalizzazioni per questo campo nel modulo. A questo campo viene assegnata una classe H2 in HTML.

PHP è selezionato in modo che possa essere utilizzato nella casella del codice di output HTML.

CSS personalizzato viene aggiunto alla casella di output CSS.

Ecco il Javascript. Dovrai avere una buona conoscenza di HTML, PHP, CSS e Javascript per ottenere il massimo da questo plugin. In altre parole, questo è un plugin per sviluppatori.

Il modulo della griglia del blog personalizzato in Divi Builder

Una volta pubblicato il modulo, lo troverai nel Divi Builder.

Le impostazioni che appaiono all'interno del modulo e le relative etichette variano a seconda delle selezioni effettuate. Questo modulo ti consente di aggiungere categorie, abilitare l'effetto bianco e nero e aggiungere un titolo al post nella scheda Contenuto. Include anche le impostazioni di sfondo (che è l'impostazione predefinita per i moduli).

La scheda Progettazione è abilitata per questo modulo. Include le impostazioni per il testo, il testo del titolo del post, il bordo, la spaziatura e l'animazione.

Risultati della griglia del blog personalizzato

Il risultato è una griglia del blog con animazione al passaggio del mouse. Ho abilitato la modalità in bianco e nero in modo che le immagini vengano visualizzate in bianco e nero a meno che non ci passi sopra con il mouse. Preferisco questa forma di hover: per rivelare l'immagine al passaggio del mouse piuttosto che oscurarla.

In questo ho disabilitato la modalità bianco e nero, cambiato il carattere del titolo e aggiunto un gradiente di sfondo. Ulteriori regolazioni possono essere aggiunte nel codice per cambiare il pulsante, aggiungere sovrapposizioni, ecc. Se riesci a codificarlo, puoi farlo fare praticamente tutto ciò che puoi immaginare.

Licenza e documentazione

Ci sono tre licenze tra cui scegliere: singola, illimitata e a vita. La licenza Unlimited copre siti Web illimitati e include 1 anno di aggiornamenti e supporto. La licenza Lifetime Unlimited Sites include aggiornamenti e supporto a vita.

La documentazione è disponibile sul sito Web dello sviluppatore. Il codice di esempio è incluso insieme alle istruzioni passo passo.

Pensieri finali

Divi Module Builder è un plugin potente con un grande potenziale nelle mani giuste. Poiché richiede una buona conoscenza del codice, non è per tutti. Questo offre agli sviluppatori uno strumento eccellente per creare e condividere moduli. Mi piace che tu possa importare ed esportare da un sito all'altro. Ogni sito che utilizza il modulo avrà bisogno del plugin installato. Se hai una buona conoscenza del codice e sei interessato a creare i tuoi moduli Divi, vale la pena dare un'occhiata a Divi Module Builder.

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

Immagine in primo piano tramite aliaksei kruhlenia / shutterstock.com