Cum să utilizați divizoarele invizibile pentru a crea spațiu între modulele Divi

Modulul Divi Divider este unic printre modulele disponibile în Divi Builder. Funcționează pentru a servi mai multor scopuri. Nu numai că oferă o linie stilată pentru a adăuga o diviziune interesantă între module, dar este și folosită pentru a adăuga spații albe. Multe layout-uri Divi folosesc module de separare invizibile pentru a crea spațiu în cadrul layout-ului. În această postare, vom vedea cum să folosiți divizoarele invizibile pentru a crea spațiu între modulele Divi.

De ce să creați spațiu cu separatoare invizibile?

Divizoarele invizibile sunt o modalitate excelentă de a adăuga spații albe la machetele dvs. Fără spațiu alb, un aspect poate deveni aglomerat și neatrăgător din punct de vedere vizual. Elementele pot fi ușor ignorate dacă sunt prea aproape de alte elemente. Nu vor sta deoparte, făcând CTA-urile să treacă neobservate.

Spațiile albe pot ajuta la concentrarea atenției asupra anumitor zone ale ecranului. Când un element are multe spații albe în jurul lui, iese în evidență. Acest lucru este important în special pentru butoane, descrieri, blurburi sau orice altceva cu care doriți să interacționeze vizitatorii dvs. Spațiile albe chiar îmbunătățesc lizibilitatea, astfel încât conținutul este mai ușor de consumat.

Setări modul divizor

Modulele de separare pot crea spațiu vertical și orizontal în mai multe moduri. Cantitatea de spațiu pe care o ocupă modulul poate fi ajustată cu Dimensiunea, Marja și Umplutura. Rezultatul este în esență același și fiecare dintre metode poate fi utilizată în combinație dacă trebuie să reglați spațierea.

Modulul divizor Arată vizibilitatea

Modulul poate afișa sau nu divizorul. Acest lucru ne permite să folosim modulul doar de spațiu dacă dorim. Dimensiunea spațiului pe care îl ocupă modulul este diferită de separatorul vizibil și invizibil.

Pentru a face divizorul invizibil, accesați fila Conținut . Prima secțiune este Vizibilitate . Aceasta este activată în mod implicit. Iată setarea cu Vizibilitatea activată. Am dat Row un fundal bronzat pentru a ajuta la vizualizarea Modulului Divider.

Pur și simplu dezactivați-l . Divizorul nu se va afișa și acum puteți utiliza modulul pentru a adăuga spațiere în aspectul Divi. Tot ceea ce arată acum este fundalul bronzat pentru Row.

Divizor invizibil combinat cu dimensionare

La fel ca multe module Divi, Modulul Divider include mai multe ajustări pentru a controla dimensiunea modulului. Prima este setările de Dimensiune. Când modulul Divi este setat să nu afișeze divizorul, setările de dimensionare arată doar:

• Lăţime
• Lățimea maximă
• Înălțime minimă
• Înălţime
• Înălțimea maximă

Exemplul de mai jos arată Modulul Divider invizibil. Am adăugat un fundal albastru la modul, astfel încât să iasă în evidență.

Ajustarea înălțimii este o modalitate excelentă de a controla distanța pentru modulul divizor invizibil. Exemplul de mai jos arată un Modul Divider cu 220px de înălțime.

Modul divizor invizibil combinat cu spațiere

Marja și umplutura pot fi, de asemenea, folosite pentru a adăuga spațiere pentru modulul divizor invizibil. Ele funcționează la fel ca cu orice modul Divi.

Acest exemplu arată modulul Divider invizibil fără ajustare a înălțimii. Am adăugat Marja de sus și de jos de 50 px. Modulul arată în continuare fundalul albastru ca dimensiune normală, dar există mai multă marjă în jurul modulului, așa cum vă puteți da seama după fundalul cafeniu al Rândului.

Acest exemplu adaugă umplutură de sus și de jos de 50 px. Rândul are aceeași dimensiune, dar modulul ocupă acum mai mult din Rând. Rezultatul este în esență același, așa că le puteți încerca pe ambele și puteți vedea care funcționează cel mai bine pentru fiecare situație.

Acest exemplu arată atât cu marginea superioară și inferioară de 50 px, cât și cu umplutură. Modulul ocupă acum mai multă zonă. Puteți folosi unul sau altul, dar acest lucru vă ajută să reglați spațierea dacă există probleme.

Exemple de separatoare invizibile

Vom crea două exemple din același pachet de layout. exemplele noastre vor adăuga spații albe pentru a oferi conținutului o anumită focalizare sau pentru a ajuta la aliniere. Pentru exemple, voi folosi pagina de destinație și pagina de pornire din pachetul gratuit de layout Flower Farm, disponibil în Divi. Vom folosi o varietate de ajustări pentru a vedea cum funcționează.

Despărțitori invizibili Exemplul unu

Pentru primul nostru exemplu, vom adăuga spațiu între două module de text și un modul de butoane doar pentru ca acestea să ocupe mai mult spațiu în zona lor. Vom folosi două module divizor invizibile.

Acest exemplu folosește pagina de destinație din Pachetul de aspect Flower Farm. Voi adăuga spații albe la CTA în secțiunea de servicii. Pentru referință, iată o privire la această secțiune înainte de a adăuga modulele de separare invizibile.

Primul divizor

Plasați un modul divizor sub primul modul text.

Setați Vizibilitatea modulului pentru a nu afișa separatorul.

• Separator de spectacol: Nu

Selectați fila Design și modificați Înălțimea la 120 px pentru desktop-uri. Setați Înălțimea pentru tablete și telefoane la Automat. Închideți setările modulului.

• Înălțime: 120 px (desktop), automat (tabletă și telefon)

Al doilea divizor

Apoi, plasați al doilea Modul Divider deasupra Modulului Buton.

Setați Vizibilitatea modulului pentru a nu afișa separatorul.

• Separator de spectacol: Nu

Selectați fila Design și derulați în jos la Spațiere . Introduceți 10% pentru Marja de sus și de jos pentru desktop-uri. Setați tabletele și telefoanele pe Auto. Închideți modulul și salvați setările.

• Marja: 10% de sus și de jos, tabletă și telefon automat

Despărțitori invizibili Exemplul doi

Pentru al doilea exemplu, vom folosi secțiunea Îndemn la acțiune din aspect. Această secțiune are un rând cu trei coloane cu un titlu și un buton în stânga, o imagine în mijloc și o descriere în partea dreaptă. Conținutul pentru coloanele din stânga și din dreapta începe din partea de sus a rândului. Vom folosi trei module de separare pentru a adăuga spații albe și pentru a centra conținutul. Diferența va fi minoră, dar va avea un impact vizual asupra aspectului.

Acesta folosește Pagina de pornire din pachetul Flower Farm Layout. Pentru referință, iată o privire la această secțiune înainte de a adăuga modulele de separare invizibile.

Primul divizor

Plasați un modul de separare deasupra primului modul de text din coloana din stânga. Este posibil să fie necesar să trageți Modulul Divider deasupra primului Modul Text după ce a fost adăugat.

Setați Vizibilitatea modulului pentru a nu afișa separatorul. Închideți setările modulului.

• Separator de spectacol: Nu

Selectați fila Design și modificați Înălțimea la 102px pentru desktop-uri. Setați Înălțimea pentru tablete și telefoane la automat. Închideți setările modulului.

• Înălțime (desktop): 102px
• Înălțime (tabletă, telefon): automat

Al doilea divizor

Plasați cel de -al doilea Modul Divider sub Modulul Buton din coloana din stânga. La început, se va părea că acesta nu este necesar, deoarece nu va afecta versiunea desktop, dar va avea un impact asupra tabletelor și telefoanelor.

Setați Vizibilitatea modulului pentru a nu afișa separatorul.

• Separator de spectacol: Nu

Selectați fila Design . Derulați în jos la Spațiere și adăugați 5 px la Umplutura de sus și de jos . Închideți setările modulului.

• Căptușeală: 5px Sus, 5px Jos

Al treilea divizor

În cele din urmă, plasați al treilea Modul Divider peste primul Modul Text din coloana din dreapta. S-ar putea să fie nevoie să-l trageți în loc.

Setați Vizibilitatea modulului pentru a nu afișa separatorul.

• Separator de spectacol: Nu

Selectați fila Design și modificați Înălțimea la 194 px. Setați Înălțimea pentru tablete la 50 px și telefoane la 40 px. Închideți setările modulului.

• Înălțime: 194 px (desktop), 50 px (tabletă), 40 px (telefon)

Rezultate Invisible Dividers

Despărțitori invizibili pentru desktop Exemplul unu

Despărțitori invizibili pentru telefon Exemplul unu

Despărțitori invizibili pentru desktop Exemplul doi

Despărțitori invizibili pentru telefon Exemplul doi

Gânduri de sfârșit

Acesta este sau uitați-vă la modul de utilizare a divizoarelor invizibile pentru a crea spațiu între modulele Divi. Spațiul alb este excelent pentru a evidenția anumite elemente și pentru a îmbunătăți lizibilitatea unui site web. Modulul Divider oferă mai multe opțiuni pentru adăugarea de spațiu, inclusiv Dimensiunea și Spațierea, și puteți ajusta Marja, Umplutura sau ambele. Puteți utiliza oricare sau toate setările în orice combinație doriți pentru a obține rezultatele de care aveți nevoie.

Vrem sa auzim de la tine. Folosiți module de separare invizibile pentru a adăuga spații albe la machetele dvs. Divi? Spune-ne despre experiența ta în comentarii.