Construiește -ți propriile module cu grupuri de module DIVI 5

Doriți să creați module DIVI personalizate fără a atinge o linie de cod? Cu noile grupuri de module Divi 5, acum puteți combina mai multe elemente într -un singur aspect reutilizabil - toate din interiorul constructorului vizual. Fără JavaScript. Fără php. Pur și simplu trageți, picături și proiectați.

În acest ghid rapid, vă vom arăta cum să vă creați propriile module folosind noile grupuri ale Divi. Veți vedea în mod specific cum să construiți de la zero un blurb, tabel de prețuri, mărturie sau orice alt tip de modul pe care îl puteți imagina.

Notă: Divi 5 este gata să fie utilizat pe site -uri web noi, dar nu recomandăm să convertiți site -urile existente în Divi 5 încă. Veți vedea ceva de la noi când suntem încrezători în procesul de actualizare.

Care sunt noile grupuri de module ale Divi?

Grupurile, sau grupurile de module, sunt un nou element de container care împerechează mai multe module și/sau rânduri într -o singură unitate dintr -o coloană. Aceasta are avantajul de a grupa mai multe elemente mai mici și de a vă permite să mutați întregul grup oriunde aveți nevoie de el pe pagină.

Grupurile de module pot fi mutate pe întreaga pagină fără probleme și vor deveni deosebit de utile atunci când FlexBox și Bucla Builder sunt lansate. Odată ce Bucla Builder este lansată, veți putea folosi grupuri pentru a crea machete de blog personalizate, meniuri pentru subsoluri, galerii de imagini și multe altele. Deci, este util acum, dar în câteva luni, va fi și mai impresionant de utilizat.

Rândurile cuibărite au fost o altă caracteristică Divi extrem de solicitată pe care am adăugat -o la Divi 5. Te -au lăsat să puneți rânduri în rândul rândurilor în conținutul inimii voastre. Deși numele „grupuri de module” ar putea face să pară că puteți grupa doar module, opusul este adevărat. De fapt, puteți utiliza rânduri cuibărite în grupuri, care deschide oportunitatea de a construi structuri de dispunere infinit cuibărite și de a le face parte dintr -un grup reutilizabil.

Cum să vă creați propriile module divi

Grupurile de module vă permit să vă creați propriile module în cadrul editorului. Puteți grupa module și rânduri cuibărite împreună pentru a crea aranjamente complexe care seamănă cu unele dintre modulele noastre mai mari.

1. Creați -vă propriul modul Blurb

Modulul nostru Blurb încorporat

Modulul Blurb este un element fundamental în multe modele Divi. Este un modul de acces, dar atunci când îl descompun, are doar câteva lucruri care îl fac să facă clic. Acestea sunt:

O imagine/pictogramă, titlu/rubrică și conținut de corp. Putem crea un grup de module și să plasăm aceste module în interiorul său: o imagine sau o pictogramă, o rubrică și un modul de text. Împreună, aceste trei module pot reproduce același conținut utilizabil în modulul Blurb.

Anatomia unui modul Blurb

Crearea propriului grup de module blurb

Iată un exemplu de modul Blurb cu o pictogramă pe partea stângă și o replicare vizuală identică a modulului Blurb folosind A:

Grup, rând interior, coloană (1) cu un modul de pictogramă și coloană (2) cu un modul de titlu și text.

Radiografia X este pornită pentru a vedea scheletul fiecăruia pentru a-și vedea asemănările, chiar dacă sunt construite diferit.

Singurul lucru special cu acest aranjament este faptul că prima coloană este setată pe o lățime de 18%, iar a doua ocupă o lățime de 82% (opțiunile de dimensionare a coloanei sunt noi cu actualizarea caracteristicilor cuibărite).

Construirea modulelor dvs. de acest fel are avantajul suplimentar de a vă oferi mai multe opțiuni de stil de design pentru fiecare element individual. Modulul Blurb facilitează plasarea imaginii/pictogramei, dar are compromisurile sale. Folosiți abordarea care vă aduce cel mai apropiat de designul dorit.

2. Creați -vă propriul modul de prețuri

Modulul nostru de tabel de prețuri încorporat

Unele module Divi au multe altele. Acesta este cazul modulului tabelului de prețuri. Există mai multe câmpuri pe tabel de prețuri, după cum puteți vedea mai jos.

Anatomia unui modul de tabel de prețuri

Crearea propriului grup de module de tabel de prețuri

Dacă recreăm modulul tabelului de prețuri folosind grupuri de module și module individuale, vom obține acest rezultat.

Observați cele șapte câmpuri de text/opțiune separate pe tabel. Din punct de vedere vizual, fiecare tabel are trei părți principale (titlu, preț și detalii). Există câteva moduri de a face acest lucru în interiorul unui grup, dar mai jos, am folosit trei rânduri cuibărite pentru fiecare. De acolo, am folosit module de titlu și text în interiorul fiecărei secțiuni pentru a recrea tabelul de prețuri.

Lucrul frumos în ceea ce privește utilizarea modulului de tabel de prețuri este că se ocupă de cea mai mare parte a machetei și veți începe capul. Dar uneori asta înseamnă că este mai greu să lucrezi când vrei lucruri specifice făcute cu ea. A face o muncă suplimentară pentru a crea acest aspect al tabelului de prețuri cu module mai simple ne oferă mai mult control și libertate a proiectării.

3. Creați -vă propriul modul mărturie

Modulul nostru de mărturie încorporat

Modulele mărturie ale lui Divi sunt altul care se întâmplă multe. Include până la patru elemente de text diferite și o pereche de opțiuni de imagine/pictogramă.

Crearea propriului grup de module mărturie

Cel mai consumator de timp al recreării modulului de mărturie este obținerea distanțării corecte (în special la mai multe puncte de întrerupere). Dar, odată ce obțineți asta, lucrurile sunt destul de simple. De -a lungul aspectului grupului, am folosit câteva rânduri și modulele de pictogramă, imagine, rubrică și text.

Lucrul frumos despre recrearea unora dintre aceste module este că te deschizi la mai multe posibilități. Unele module mai complicate au un aspect opinat pe care doar CSS extins îl poate manipula. Dar când o construiți singur, aveți mai multă libertate de a vă deplasa în multe dintre aceste sub-elemente.

Când proiectați astfel, se deschid mai multe posibilități de aspect. De exemplu, puteți face ceea ce nu este posibil (cel puțin ceea ce nu este ușor) cu modulul de mărturie, mutând elemente în poziții complet diferite în aspectul grupului mai mare. Dacă designul dvs. necesită o anumită flexibilitate, construirea unora dintre aceste piese vă poate ajuta să obțineți precizia pe care o urmăriți.

De asemenea, îmi place ideea de a fi capabil să creezi un modul mărturisit personalizat, precum cel de mai sus, și folosesc viitorul constructor de bucle pentru a trage mărturii de la un CPT. Vă va oferi proiectarea libertății + capacitatea de a construi mai repede cu date și conținut structurat.

Salvați modulul personalizat ca element global

Când noul dvs. modul se simte corect, salvați -l ca un element global pentru utilizare în altă parte a site -ului dvs. Deschideți meniul Setări grup. Faceți clic pe opțiunea „ Salvați la bibliotecă ”.

Va apărea un modal unde vă puteți numi modulul pentru o utilizare ușoară mai târziu. Comutați „ Salvați ca global ” pentru a -l stoca în biblioteca Divi. Orice modificare pe care o faceți actualizări ulterioare fiecare copie de pe site -ul dvs.

Elementul dvs. global va avea acum o culoare verde distinctă pentru a vă ajuta să observați că este global.

Puteți accesa toate elementele globale salvate și alte elemente de bibliotecă din bordul de bord> Divi> Divi Library . Editarea unui element global aici îl va actualiza pe site. De asemenea, puteți edita elemente globale direct pe paginile pe care sunt utilizate (și va actualiza la nivel de site).

Aveți nevoie de modulul de pe fiecare site pe care îl construiți? Comutați „ Salvați în Divi Cloud ”. Modulul este acum în biblioteca ta cloud, gata pentru orice proiect oriunde. Elementele de bibliotecă păstrează lucrurile pe un singur site, în timp ce Divi Cloud călătorește cu dvs. de la un site la altul. Folosiți atât pentru a accelera Builds, cât și pentru a crea o consistență mai mare.

Obțineți Divi Cloud

Construiește ceva nou astăzi

Grupurile de module îți pun o nouă putere în mâini. Puteți modela machete originale și exact ceea ce aveți nevoie. Începeți prin recrearea unui modul Blurb și vedeți cum se potrivește procesul. Pe măsură ce te obișnuiești să folosești DIVI în acest fel, vei observa că creezi modele și mai complexe, deoarece poți utiliza modulele standard sau îți creezi propriul tău.

O mare parte din ceea ce a fost acoperit mai sus a fost posibil cu Divi înainte ca grupurile să cadă, dar acestea fac lucrurile mai ușoare. Mai ales când lansăm Flex și The Loop Builder, grupurile vor deveni un element fundamental al proiectării dvs. cu Divi.

Sunteți gata să nivelați? Prinde un site nou și testează -ți primul modul personalizat astăzi.