Cum să extindeți modulele pentru a crea aspecte de coloană unice în Divi

Fiecare pagină nouă pe care o proiectați cu Divi Builder este structurată utilizând o serie de aspecte de coloane diferite. Divi include structuri de coloane încorporate pentru fiecare rând, de la o coloană până la șase coloane. Dar, uneori, s-ar putea să simțiți nevoia să ajustați aceste coloane pentru aspecte și mai unice. Astăzi, vă voi arăta un mod creativ de a face exact acest lucru.

În acest tutorial, vă voi arăta o tehnică simplă de proiectare care vă permite să extindeți modulele folosind margini negative pentru a ocupa mai multe coloane. Această tehnică vă va permite să proiectați câteva machete unice personalizate pe care poate nu le-ați considerat posibile.

Să începem.

Trage cu ochiul

Pentru a obține o mai bună înțelegere a ceea ce vom construi, iată o versiune înainte și după a proiectului folosind această tehnică.

Inainte de

Acesta este designul aspectului fără a utiliza margini personalizate pentru a extinde modulele către alte coloane.

După

Acesta este aspectul după extinderea celor două module de imagine și a celor trei module de text etichetate cu numerele „01”, „03” și „05”.

Modificarea este subtilă, dar ar trebui să puteți vedea modul în care modulele s-au extins pentru a ocupa coloana adiacentă. Și singurul lucru necesar pentru a realiza acest lucru este o setare simplă a marjei de -100%.

Iar rezultatul pe tabletă este și mai interesant.

Înțelegerea conceptului

În mod implicit, fiecare modul Divi are o lățime de 100%, ceea ce înseamnă că fiecare modul pe care îl așezați într-o coloană va acoperi lățimea completă a coloanei în care se află. Lățimea jgheabului este ceea ce Divi folosește pentru a determina cantitatea de spațiu dintre fiecare coloană. Deci, pentru acest tutorial, este important să setați lățimea jgheabului la 1 pentru a scăpa de acel spațiu.

Iată o ilustrare a modului în care fiecare modul se întinde pe toată lățimea unei coloane într-un rând cu o lățime a jgheabului setată la 1.

Acum, dacă adăugați o marjă negativă (stânga sau dreapta) unui modul, puteți extinde cu ușurință acel modul pentru a ocupa mai multe coloane. Acest lucru vă permite să creați aspecte de coloană personalizate pentru pagina dvs. pe care poate nu le-ați luat în considerare.

În această ilustrație, puteți vedea că adăugând o marjă stângă de -100% la modulul din coloana 5, acesta extinde modulul la stânga pentru a ocupa atât coloana 5, cât și coloana 4.

Și unul dintre bonusurile utilizării aspectului cu șase coloane este că designul este păstrat frumos pe tabletă.

De asemenea, datorită modului în care coloanele sunt ordonate de la stânga la dreapta, modulele ar trebui, în general, extinse spre stânga, astfel încât conținutul să nu fie ascuns în spatele coloanei. Acest lucru este valabil mai ales dacă aveți un set de culori de fundal. Deci, dacă întâmpinați problema conținutului modulului ascuns în spatele unei coloane, probabil că extindeți modulul în direcția greșită.

De ce să folosiți un aspect cu șase coloane?

Există trei motive principale pentru a utiliza un aspect cu șase coloane pentru această tehnică de proiectare. Primul motiv este că vă oferă mai multe coloane cu care să lucrați. Al doilea motiv este că șase machete de coloane se convertesc într-un aspect cu trei coloane pe tabletă, ceea ce va păstra foarte bine elementele de design. Al treilea motiv este că coloanele își vor păstra ordinea pe mobil, astfel încât culorile de fundal ale coloanei să rămână aceleași. Acest lucru este util pentru aspectele grilei.

Acest design funcționează și cu aspectul coloanei 1/2 1/6 1/6 1/6 și cu aspectul coloanei 1/6 1/6 1/6 1/2 deoarece ambele vor păstra și cele trei coloane pe tabletă.

Implementarea proiectării

Pentru a arăta cum funcționează această tehnică de proiectare, vă voi ghida prin procesul de construire a unei structuri simple de grilă pentru prezentarea produselor. Apoi, vă voi arăta cum să extindeți modulele în alte coloane pentru a crea un design de aspect personalizat.

Configurarea secțiunii și rândurilor

Pentru a începe, creați o pagină nouă și implementați constructorul vizual. Apoi alegeți „Build from Scratch”. Apoi continuați și adăugați un aspect de coloană 1/2 1/6 1/6 1/6 la prima secțiune.

Apoi actualizați setările rândului după cum urmează:

Culoare fundal: # 222831
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA
Marjă personalizată: 0 px sus, 0 px jos
Căptușeală personalizată: 0 px sus, 0 px jos

Salvează setările.

Deoarece toate cele trei rânduri pentru acest design vor partaja aceste setări de rând. Continuați un duplicat al rândului pentru a crea un al doilea rând. Apoi schimbați al doilea rând pentru a avea un aspect cu șase coloane.

Pentru a crea al treilea rând, pur și simplu copiați al doilea rând.

Adăugarea de module la rândul 1

În prima coloană din primul rând superior, adăugați un modul text cu următoarele setări:

Culoarea textului: deschis
Dimensiune text text: 16 px
Căptușeală personalizată: 2vw sus, 2vw jos, 2vw stânga, 2vw dreapta

În a doua coloană a primului rând, adăugați un modul blurb cu următoarele setări:

Titlu: [introduceți titlul]
Conținut: [șterge]
Pictogramă: [alege pictograma]
Culoare pictogramă: #eeeeee
Pictogramă Dimensiune font: 50 px
Culoarea textului: deschis
Orientare text: centru
Căptușeală personalizată: 3vw sus, 2vw jos

Salvează setările

În a treia coloană, adăugați o imagine.

În ultima coloană, vrem să o lăsăm goală, astfel încât să putem extinde modulul de imagine pentru a umple și coloana respectivă. Dar nu vrem să o lăsăm complet goală, astfel încât coloana să fie activă atunci când se stivuiește pe mobil. Deci, cel mai simplu lucru de făcut este să adăugați un modul divizor și să alegeți să nu afișați divizorul. Apoi putem ascunde divizorul pentru smartphone.

Actualizați setările divizorului după cum urmează:

Show Divider: NU
Dezactivați pe: Telefon

Adăugarea de module la rândurile 2 și 3

Acum, trecem la rândul 2. În prima coloană copiați și lipiți modulul blurb pe care l-ați creat în a doua coloană a primului rând. Apoi schimbați pictograma și textul titlului într-o culoare neagră.

Apoi adăugați un modul de text la a doua coloană cu următoarele:

Conţinut:

<h2>Product</h2>
01

Culoarea textului textului: #ffffff
Dimensiune text text: 50 px
Înălțimea liniei de text: 1em
Orientarea textului: dreapta
Titlul 2 Alinierea textului: stânga
Rubrica 2 Culoarea textului: #ffffff
Titlul 2 Înălțimea liniei: 3em
Căptușeală personalizată: 2vw sus, 2vw jos, 2vw stânga, 2vw dreapta

Apoi copiați textul Modul pe care tocmai l-ați creat și lipiți-l în coloana 4 și coloana 6.

De asemenea, puteți lipi același modul de text în coloana 3, coloana 5 și coloana 6 din rândul 3. După aceea, puteți utiliza editorul în linie pentru a schimba numerele fiecăruia dintre modulele de text, astfel încât să puteți vedea cum se modulează aceste module mobil mai târziu.

În coloana 2 din rândul 3, adăugați o altă imagine.

După aceea, completați toate coloanele goale din secțiunea dvs. cu un separator copiind și lipind divizorul pe care l-ați creat în rândul 1.

Iată cum ar trebui să arate aspectul dvs. în acest moment (pătratele goale reprezintă un modul divizor):

Adăugarea unei marje negative pentru a extinde modulele la alte coloane

În acest moment putem începe extinderea modulelor noastre folosind marja negativă. Acest proces este extrem de simplu de realizat.

Deschideți setările modulului de imagine pentru imaginea din primul rând. Deoarece dorim să extindem imaginea spre dreapta, vom adăuga o marjă dreaptă de -100%.

Apoi, adăugați o marjă stângă de -100% la modulul de text din rândul 2, coloana 3.

Acum copiați stilurile modulelor și lipiți-le în modulele text din rândul 2, coloana 6 și, de asemenea, în modulul text din rândul 3, coloana 5.

Rămâne doar să extindeți imaginea din rândul 3, coloana 2. Actualizați modulul de imagine cu o marjă personalizată de -100% la stânga.

Adăugarea culorilor de fundal coloanelor dvs.

Ultima fază a proiectării este de a adăuga culori de fundal coloanelor dvs. Pentru primul rând (de sus) adăugați următoarele:

Coloana 1 Culoare fundal: # 393e46

Pentru al doilea rând, adăugați următoarele:

Coloana 1 Culoare fundal: #eeeeee
Coloana 4 Culoare fundal: # 7971ea
Coloana 5 Culoare fundal: # 393e46
Coloana 6 Culoare fundal: # 393e46

Și pentru ultimul rând, adăugați următoarele:

Coloana 3 Culoare fundal: # 7971ea
Coloana 6 Culoare fundal: # 7971ea

Asta este pentru designul desktopului. Acum să ne asigurăm că lucrurile arată bine pe mobil.

Reglarea aspectului pentru afișajul smartphone-ului

În acest moment, aspectul actual va arăta excelent pe desktop și tabletă, dar acele marje negative pe care le-am adăugat vor trebui ajustate pe smartphone.

În mod normal, dacă aș dori să repar marja negativă pe smartphone, aș seta doar marja stângă la 0% în cadrul setărilor modulului pentru dispozitivele smartphone. Cu toate acestea, va exista în continuare o ajustare necesară pentru dimensiunile ecranului între 479px și 767px lățime. Din această cauză, cel mai bun mod de a remedia marja negativă pe smartphone este să o faci cu un fragment de CSS personalizat.

Accesați setările paginii și adăugați următoarele CSS personalizate în fila Avansat:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Ce face acest fragment CSS este să seteze marja dreaptă și stângă a tuturor modulelor la 0% ori de câte ori dimensiunea ecranului este egală sau mai mică de 479 px lățime. Aceasta rezolvă problema frumos!

Acum, să verificăm designul final.

Gânduri finale

Utilizarea marjei negative pentru extinderea modulelor poate fi o modalitate convenabilă de a obține modele de aspect unice pe desktop și tabletă, fără a fi nevoie să recurgeți la o grămadă de CSS pentru a schimba aspectele implicite ale coloanei Divi. Și unul dintre lucrurile mele preferate despre această tehnică de design este cât de frumos arată aspectul pe tabletă. Sperăm că va fi util pentru următorul dvs. proiect. În orice caz, ajută întotdeauna să înțelegem mai profund Divi.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!