Divi Plugin Highlight: Divi Module Builder

Divi Builder include o mulțime de module pentru a vă ajuta să adăugați practic orice elemente de design la aspectele dvs., dar dacă ați dori să creați propriile module? Un plugin terță parte numit Divi Module Builder vă oferă această abilitate.

În acest articol voi arunca o privire asupra pluginului și voi vedea ce poate face și cât de ușor este de utilizat. Necesită Divi 3.0.50 sau mai mare și funcționează atât cu Divi, cât și cu Extra. Este disponibil de pe site-ul dezvoltatorului: DiviPlugins.com.

Instalarea Divi Module Builder

După ce ați activat pluginul, faceți clic pe Pagina de activare DMB . Alternativ, puteți vedea acest ecran accesând Module personalizate din tabloul de bord și faceți clic pe Licență .

Introduceți cheia de licență și faceți clic pe Activați licența . Un nou meniu este adăugat la tabloul de bord numit Module personalizate . În acest meniu veți găsi tot ce aveți nevoie pentru a vă construi modulele.

Adăugați un modul

Modulele sunt create în meniul tabloului de bord sub Module personalizate , Adăugare modul . Există două zone pe care le veți utiliza pentru a crea modulul. Zona din stânga este locul unde veți crea câmpurile. Zona din dreapta este locul unde veți adăuga codul pe care îl vor folosi câmpurile. Puteți face modulul standard sau lățime completă. Puteți salva schița sau publica când sunteți gata. Odată ce modulul este publicat, acesta va apărea în Divi Builder.

Câmpuri

Modulul dvs. poate avea oricâte câmpuri doriți. Fiecare câmp are proprietăți de câmp în interiorul său. Iată o privire mai atentă asupra fiecărei proprietăți a câmpului:

Etichetă câmp - eticheta care se va afișa ca titlu al câmpului în fila conținut a modulului.

Identificator de câmp - o valoare unică pe care o veți utiliza pentru a face referire la câmp în HTML. Utilizați numai litere mici, cifre și caractere de subliniere pentru identificatorii de câmp.

Descriere câmp - adăugați propria descriere pentru a explica scopul câmpului. Aceasta se va afișa sub intrarea din fila de conținut a modulului. Acest câmp este opțional, dar vă recomand să adăugați informații sau exemple pentru a ajuta utilizatorii.

Tipul câmpului - determină tipul de intrare pe care îl vede utilizatorul. Alegeți mai multe tipuri de câmp din caseta derulantă, inclusiv un text, o zonă de text, culoare, imagine, comutare Da / Nu și pictogramă.

Fila Design - adaugă controale de font pentru acest câmp în Designul modulului. Veți vedea această opțiune dacă selectați text sau zonă de text. Va trebui să identificați la ce element să aplicați controalele fontului adăugând o clasă în HTML.

Ascunde câmpul - oferă utilizatorilor control asupra fontului unui element din ieșirea HTML fără a le permite să controleze conținutul acestui element. Această opțiune va deveni disponibilă numai dacă este selectat un text sau o zonă de text Tipul câmpului.

Adăugați eticheta câmpului, identificatorul, descrierea, alegeți tipul câmpului, activați fila de proiectare sau selectați pentru a ascunde câmpul. Rearanjați câmpurile făcând clic pe săgețile sus / jos de pe fiecare câmp. Fiecare secțiune și câmp oferă o descriere și un exemplu.

Cod

Adăugați HTML, PHP, CSS și JavaScript personalizate pentru a controla rezultatul. Câmpurile HTML pot accepta interogări personalizate și PHP. Va trebui să activați PHP înainte ca acesta să recunoască codul. În caz contrar, va imprima codul pe ecran. Atât HTML cât și PHP utilizează identificatori de câmp pentru a face referire la câmpuri.

Comenzile rapide pentru cod sunt furnizate ca butoane sub câmpurile de cod. Aceasta include etichete și identificatori de câmp. Adăugați identificatorii de câmp și apoi sunt disponibili în partea de jos a zonei de cod, unde puteți face clic pentru a le adăuga la cod. Identificatorii HTML sunt văzuți ca butoane portocalii, iar PHP este văzut ca verde. Puteți utiliza mai mult decât ceea ce este disponibil sub formă de comenzi rapide, dar acestea sunt aici pentru a ajuta la accelerarea timpului de dezvoltare.

Crearea unui modul

Iată un exemplu rapid de creare a unui modul. Titlul va fi numele care apare pe modul în Divi Builder. Am adăugat eticheta câmpului, descrierea, am ales Textul ca tip de câmp și am creat un identificator de câmp.

Am salvat ca schiță, astfel încât identificatorul să apară în comenzile rapide HTML. Apoi, am selectat eticheta H1 din comenzile rapide, am plasat cursorul între etichete și am selectat eticheta din comenzile rapide HTML. Odată ce am terminat, am apucat să public. Rezultatul ar trebui să fie un modul cu un câmp în care utilizatorii pot introduce text. Ieșirea va afișa textul ca un antet 1.

Modulul apare acum în Divi Builder. Pot adăuga la pagină la fel ca orice modul Divi.

Fila Conținut include câmpurile pe care le-am adăugat cu etichetele mele.

Modulul afișează textul pe care l-am introdus în câmp. Deoarece am adăugat HTML pentru a-l afișa ca H1, textul are automat o proprietate H1. Aș putea adăuga fila Design pentru a include mai multe caracteristici de personalizare. Acest lucru va necesita un anumit cod pentru a viza corect câmpul.

Module

Puteți vedea lista modulelor din meniul tabloului de bord. Accesați Module personalizate , Module . Aici puteți edita sau șterge modulele. Arată dacă PHP este activat sau dezactivat pentru fiecare modul. Dacă doriți să clonați un modul, va trebui să le vizualizați în Setări .

Setări modul personalizat

Meniul Setări oferă o locație în care vă puteți gestiona modulele. Puteți vizualiza atât modulele publicate, cât și proiectele.

Le puteți clona, ​​ceea ce vă oferă un loc bun pentru a începe pe un modul care are nevoie de mult cod pe care l-ați folosit într-un alt modul. De asemenea, puteți edita, dezactiva sau activa PHP (ceea ce este util dacă sunteți blocat din editor din cauza unei erori de cod - am făcut acest lucru și am folosit această caracteristică pentru a edita modulul) și puteți importa și exporta modulele.

Adăugați dependență

Aici puteți adăuga dependențe CSS și Javascript terțe. Adăugați-le ca adrese URL externe sau interne. Alegeți CSS sau Javascript din caseta derulantă, adăugați numele și adăugați adresa URL. Ele pot fi apoi utilizate pe orice pagină. Oferă un exemplu de utilizare a Font Awesome. Acesta este un mod excelent de a crea o dependență într-o singură locație și apoi de a o folosi oriunde.

Exemplu Divi Module Builder - Grila de blog personalizată

Mai degrabă decât să creez un modul „în regulă”, ca exemplu, arăt exemplul extraordinar creat de dezvoltator - Custom Blog Grid (disponibil pentru descărcare gratuit pe site-ul web al dezvoltatorului). Include 3 câmpuri, HTML, PHP și CSS. Iată o privire la fiecare.

Modulul de grilă de blog personalizat

Câmpul 1 este etichetat Categorii, folosește categorii ca identificator, iar tipul câmpului este setat la Text.

Câmpul 2 este etichetat Efect imagine alb-negru. Identificatorul este filtru, iar tipul depus este Da / Nu Comută. Filtrul este creat în CSS.

Câmpul 3 este etichetat Post Title și folosește post_title ca identificator. Tipul de câmp este setat la Text și are fila Proiectare activată. Vom vedea personalizări pentru acest câmp în modul. Acest câmp primește o clasă H2 în HTML.

PHP este selectat, astfel încât să poată fi utilizat în caseta Cod de ieșire HTML.

CSS personalizat este adăugat la caseta de ieșire CSS.

Iată Javascript. Va trebui să înțelegeți bine HTML, PHP, CSS și Javascript pentru a beneficia la maximum de acest plugin. Cu alte cuvinte, acesta este un plugin pentru dezvoltatori.

Modulul de grilă de blog personalizat din Divi Builder

Odată ce modulul este publicat, îl veți găsi în Divi Builder.

Setările care apar în modul și etichetele acestora vor diferi în funcție de selecțiile pe care le faceți. Acest modul vă permite să adăugați categorii, să activați efectul alb-negru și să adăugați un titlu de postare în fila Conținut. De asemenea, include setări de fundal (care este implicit pentru module).

Fila Proiectare este activată pentru acest modul. Include setări pentru text, textul titlului postării, chenar, spațiu și animație.

Rezultate personalizate ale grilei de bloguri

Rezultatul este o grilă de bloguri cu animație cu hover. Am activat modul alb-negru, astfel încât imaginile să fie afișate în alb și negru, cu excepția cazului în care trec pe deasupra lor. Prefer această formă de hover - să dezvăluie imaginea pe hover decât să o ascund.

În acesta am dezactivat modul alb-negru, am schimbat fontul titlului și am adăugat un gradient de fundal. Mai multe ajustări pot fi adăugate în cod pentru a schimba butonul, pentru a adăuga suprapuneri etc. Dacă îl puteți codifica, îl puteți face să facă practic orice vă puteți imagina.

Licență și documentație

Există trei licențe dintre care puteți alege: unic, nelimitat și pe viață. Licența Unlimited acoperă site-uri web nelimitate și include 1 an de actualizări și asistență. Licența Lifetime Unlimited Sites include actualizări pe toată durata vieții și asistență.

Documentația este furnizată pe site-ul dezvoltatorului. Exemplul de cod este inclus împreună cu instrucțiuni pas cu pas.

Gânduri finale

Divi Module Builder este un plugin puternic cu mult potențial în mâinile potrivite. Deoarece necesită o bună cunoaștere a codului, nu este pentru toată lumea. Acest lucru oferă dezvoltatorilor un instrument excelent pentru a crea și partaja module. Îmi place că puteți importa și exporta de pe un site pe altul. Fiecare site care folosește modulul va avea nevoie de pluginul instalat. Dacă aveți o bună cunoaștere a codului și sunteți interesat să creați propriile module Divi, Divi Module Builder merită aruncat o privire.

Vrem sa auzim de la tine. Ați încercat Divi Module Builder? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin aliaksei kruhlenia / shutterstock.com