5 moduri creative de a utiliza comenzile de marjă și jgheaburi încorporate ale Divi

Marja Divi și comenzile pentru jgheab sunt două setări de design puternice care vă pot transforma într-adevăr aspectele în moduri creative. Și, dacă înțelegeți cum funcționează, vă veți teme mai puțin să ieșiți și să încercați lucruri noi pentru dvs. În această postare, vă voi arăta 5 moduri creative de a utiliza marginile Divi și comenzile de canal. Unele vor fi mai ușor de realizat decât altele, dar, în general, cred că veți pleca cu o nouă apreciere pentru aceste două setări de design. Despre lățimea marginii și a jgheabului Marja se referă la distanța dintre (sau în afara) elementelor. Deci, gândiți-vă la o secțiune, rând sau modul ca la o cutie. Marja este cea care adaugă spațiu în afara casetei și este utilizată pentru a separa casetele de pe pagină (acest lucru este prezentat mai detaliat aici).

Lățimea jgheabului este doar un termen elegant pentru marja dintre coloanele dintr-un rând. Este dificil să construiți în mod adecvat o rețea cu margini corecte din mers. De aceea, Divi are opțiunea de lățime a jgheabului pentru fiecare rând. Ajută la ameliorarea durerii pentru distanțarea uniformă a coloanelor. Valorile opționale pentru lățimea jgheabului variază de la 1 la 4. 1 reprezintă marja zero între coloane. 2 reprezintă o marjă dreaptă de 3% între coloane. 3 reprezintă o marjă dreaptă de 5,5% între coloane. 4 reprezintă o marjă dreaptă de 8% între coloane. Acum, că avem o abordare mai bună cu ceea ce avem de-a face, să începem să le folosim!

Iată 5 moduri creative de a utiliza marginile Divi și comenzile jgheabului: Trage cu ochiul Iată o scurtă privire asupra proiectelor posibile cu aceste tehnici: 5 moduri creative de a utiliza comenzile de marjă și jgheaburi încorporate ale Divi Abonați-vă la canalul nostru Youtube # 1 Extinderea modulelor de imagine în afara rândului Întrucât proiectarea grilei sparte este la modă în zilele noastre, extinderea modulelor în afara containerului (sau rândului) lor este o modalitate excelentă de a sparge aspectul tradițional al grilei pentru un aspect unic. Trucul este să folosiți marje negative pentru a extinde modulul într-o anumită direcție.

Un exemplu excelent al acestei tehnici creative se găsește în aspectul paginii de destinație Fitness Gym. În secțiunea intitulată „Deveniți membru” puteți vedea modul în care imaginea este extinsă în afara containerului rândurilor lor. Iată ideea de bază a modului de realizare a acestui design. Creați o nouă secțiune cu două rânduri cu patru coloane. Acordați fiecărui rând următoarele setări: Lățimea jgheabului: 1 Marjă personalizată: 0 px de sus Împletire personalizată: 0 px sus, 0 px jos Apoi actualizați setările secțiunii după cum urmează: Culoarea din stânga a gradientului de fundal: # fa2a20 Culoarea dreaptă a gradientului de fundal: rgba (16,23,45,0,85) Direcția gradientului: 90 grade Poziția inițială: 50% Poziție finală: 50% Căptușeală personalizată: 0 px sus, 0 px jos

Apoi în rândul de sus, adăugați un modul de imagine în coloana 3 și adăugați o imagine la modul. Apoi actualizați setările cu o marjă superioară negativă după cum urmează: Marjă personalizată: -6vw Top În al doilea rând, adăugați un modul de imagine în coloana 2 și adăugați o imagine în modul. Apoi actualizați setările cu o marjă inferioară negativă după cum urmează: Apoi adăugați un modul de imagine în coloana 4 din același rând și adăugați o imagine la modul. Apoi actualizați setările cu o marjă inferioară negativă după cum urmează: Marjă personalizată: -5vw jos Deoarece avem lățimea jgheabului setată la 1, imaginile / modulele sunt la nivel unul împotriva celuilalt, fără spațiu între ele. Acest lucru combinat cu poziția de pornire cu gradient de 50% îi oferă un punct de rupere simetric frumos în fundal.

Este posibil să fi observat că am folosit unitatea de lungime vw pentru marginile personalizate. Unitatea de lungime vw (viewport width) este relativă la lățimea browserului. Deci 10vw reprezintă practic 10% din fereastra browserului. Acest lucru permite designului să se redimensioneze împreună cu browserul fără să sară în jur. Consultați articolul nostru complet despre unitățile de lungime pentru mai multe informații. Iată designul final. # 2 Extinderea modulelor și divizoarelor de text în afara coloanelor Extinderea modulelor de text în afara unei coloane sau rânduri deschide ușa pentru modele de antet unice. Rândul sau coloana poate servi ca element de fundal personalizat, deoarece textul se extinde dincolo de elementul de fundal la stânga și la dreapta pentru un aspect unic.

Iată cum se face acest lucru. Mai întâi creați o nouă secțiune cu un rând cu două coloane. Înainte de a adăuga module, actualizați setările rândului după cum urmează: Culoarea de fundal a coloanei 1: # 00ca8f Lățime personalizată: 700 px Lățimea jgheabului: 4 Box Shadow: vezi captura de ecran Poziție orizontală a umbrei cutiei: -10px Box Shadow Vertical Position: -10px Culoare umbră cutie: rgba (100.113.248,0.37) Setarea lățimii jgheabului la 4 maximizează spațiul dintre coloane pentru a ne ușura extinderea modulelor în afara coloanei. Acum să adăugăm un modul text în coloana 1 și să actualizăm setările după cum urmează:

Font de titlu: Fira Sans Condensed Greutatea fontului de titlu: Ultra Bold Stilul fontului de titlu: TT Text antet Aliniere: centru Culoare text antet: # 0f135d Dimensiune text antet: 100 px (60 Distanța între litere de antet: 10 px Lățime: 600 px Marja personalizată: -100px la stânga, -100px la dreapta Împletire personalizată: 0 px sus, 0 px jos, 0 px stânga, 0 px dreapta Cheia acestui design este creșterea lățimii modulului astfel încât, atunci când adăugăm marginile negative dreapta și stânga, modulul text să aibă spațiu pentru a se extinde dincolo de coloană de ambele părți. Ca element de proiectare suplimentar, puteți adăuga și un separator în coloana 2 care se extinde și în afara coloanei. Pentru aceasta, adăugați un modul divizor în coloana 2 și actualizați următoarele setări:

Culoare: # 0f135d Greutatea divizorului: 12 px Lățime: 150% Marjă personalizată: 15 px în partea de sus, -25% la stânga, -25% la dreapta Aceeași tehnică de proiectare este utilizată și aici. Mărim lățimea (sau lățimea maximă) la 150%, astfel încât să putem extinde modulul în afara coloanei din stânga și din dreapta. Iată rezultatul final. Iată-l pe mobil. De asemenea, puteți schimba acest lucru într-un aspect cu o singură coloană, cu câteva actualizări ale setărilor pentru un aspect complet acum. Pentru a face acest lucru, schimbați aspectul coloanei rândului cu o singură coloană și modificați lățimea rândului la 400 px.

Iată rezultatul. Pentru mai multă inspirație, consultați acest post despre cum să extindeți modulele pentru a crea machete unice de coloane în Divi. # 3 Module suprapuse cu butoane Marjele personalizate pot fi folosite pentru a poziționa butoanele în locuri unice de-a lungul designului. Unul dintre lucrurile mele preferate de făcut este butoanele de poziționare astfel încât să se suprapună cu alte module. Pentru a ilustra acest concept, voi folosi Layout-ul paginii de destinație Soccer Club din pachetul Layout Soccer Club. În secțiunea de sus a aspectului, veți observa că există două butoane plasate în partea de sus și de jos a videoclipului. Butonului de sus i s-a acordat o marjă de jos de 0 px, astfel încât acesta să stea la culoare deasupra videoclipului. Și modulului video i s-a acordat o marjă de jos de 0 px, astfel încât butonul de jos să fie la același nivel cu partea de jos a videoclipului. Ceea ce voi face este să mut fiecare dintre aceste butoane astfel încât să se suprapună cu modulul video.

Pentru a face acest lucru, deschideți setările modulului butonului superior și acordați-i o marjă inferioară personalizată de -56 px (practic înălțimea butonului). Apoi deschideți setările butonului de jos și acordați-i o marjă superioară personalizată de -56 px. Iată designul final. Și pentru că am folosit o valoare a lungimii pixelilor pentru marjele noastre negative, butoanele vor rămâne la locul lor și pe mobil. Pentru mai multă inspirație, consultați această postare despre cum să adăugați un buton de derulare animat folosind tehnici similare. # 4 Secțiuni suprapuse cu rânduri Suprapunerea unei secțiuni cu un rând este un proces simplu, dar poate adăuga cu adevărat un anumit grad de creativitate pentru a spori designul paginii dvs. și a face conținutul să iasă în evidență. Pentru a ilustra acest concept, să aruncăm o privire la pagina de destinație imobiliară din pachetul de aspect imobiliar. Observați cum a fost tras rândul de conținut din a doua secțiune pentru a suprapune secțiunea de sus, făcând conținutul să iasă în evidență. Să analizăm rapid cum se face acest lucru. Rândului i se oferă o lățime personalizată de 1440 px, astfel încât să aibă o anumită distanță pe ambele părți pentru a încadra conținutul frumos. Lățimea jgheabului este setată la 1 pentru a maximiza spațiul necesar pentru cele trei blurbs și conținutul acestora. Și, în cele din urmă, rândului i se oferă o marjă de sus personalizată de -10vw. Aceasta trage rândul în sus, astfel încât să se suprapună peste secțiunea de mai sus. Lucruri simple nu? Pentru mai multe informații despre acest concept, consultați postarea despre cum să suprapuneți module și rânduri. # 5 Extinderea rândurilor pe Hover Acest stil de zbor este o modalitate excelentă de a dezvălui mai multe informații despre un anumit serviciu sau ofertă promoțională pe site-ul dvs. web. Cheia acestui efect de deplasare este să utilizați marja personalizată pentru a extinde o jumătate de rând în afara ferestrei browserului. Apoi, când treceți cu mouse-ul peste jumătatea vizibilă a rândului, marginea revine înapoi și dezvăluie cealaltă jumătate a conținutului rândului. Pentru a vă arăta cum se face acest lucru, voi folosi pagina Servicii instalatori din pachetul de instalare instalatori. După ce ați încărcat aspectul serviciilor instalatorului pe pagina dvs., derulați în jos până la secțiunea cu oferta promoțională mare, care scrie „10% OFF”. Acesta este un rând din două coloane, cu textul mare al promoției în coloana 1 și cu mai multe informații despre promoție în coloana 2. Ce vom face este să ascundem în mod implicit informațiile din coloana 1 și apoi să dezvăluim acele informații în cursul plimbării. Pentru aceasta, deschideți setările rândului și actualizați următoarele: Coloana 1 Culoare fundal: rgba (12.113.195,0.16) Alinierea rândurilor: corect Lățime personalizată: 800 px Lățimea jgheabului: 1 Acum trebuie să adăugăm setările de marjă personalizate pentru a obține efectul de hover. Și din moment ce folosim lățimea jgheabului 1, trebuie să adăugăm niște umpluturi în coloana 1. Actualizați următoarele: Marja personalizată (desktop): -400px dreapta Coloana 2 căptușeală personalizată: 2vw stânga, 2vw dreapta Deoarece lățimea rândului nostru este de 800 px, vrem să ascundem 400 px (jumătate din rând). De aceea, setăm marja dreaptă la -400px. Marja personalizată (plasați cu mouse-ul): 0 px dreapta Marjă personalizată (tabletă): 0 px dreapta Prin setarea din nou a marginii drepte la 0 px la plimbare, întregul rând devine vizibil! Iată rezultatul final. Și întregul rând devine vizibil pe mobil. Mai multă inspirație Există o mulțime de exemple de stiluri unice care utilizează valorile de marjă și jgheab în aspectele noastre premade. Am prezentat deja câteva dintre aceste elemente în această postare. Dacă doriți mai multe tutoriale ca acesta, consultați următoarele postări de pe blogul nostru:

• Cum se utilizează textul ca element de design abstract în Divi
• Cum se aliniază vertical conținutul în Divi
• Cum se utilizează opacitatea, căptușirea și marginile negative pentru a modula modulele Divi

Gânduri finale Sper că această postare a fost utilă pentru a arăta câteva modele simple, dar unice, folosind marje personalizate și valori de jgheab. Și, sunt încrezător că, odată ce vă familiarizați cu aceste tehnici de proiectare externe, veți fi surprinși de cât de ușor va fi să vă creați propriile machete unice. Aștept cu nerăbdare să aud de la dvs. în comentarii. Noroc!