Utilizarea contururilor coloanei pentru a sublinia grila dvs. de design Divi

Structura încorporată a elementelor Divi poate fi utilizată în moduri tradiționale pentru a defini și stiliza diferite secțiuni, rânduri, coloane și module. Dar pot fi folosite și în mod creativ pentru a îmbunătăți structurile de proiectare de pe pagina dvs. În acest tutorial, vă vom arăta cum să utilizați contururile coloanelor pentru a sublinia grila de proiectare Divi. Vom dedica un rând poziționat absolut pentru a crea contururile frumoase ale coloanei de fundal și pentru a le uni cu alte rânduri din secțiunea noastră. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul schițelor coloanei GRATUIT

Pentru a pune mâinile pe aspectul conturului coloanei gratuite, va trebui mai întâi să-l descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Adăugați o secțiune nouă

Revărsări

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și setați revărsările la ascuns. Acest lucru vă va asigura că nimic nu depășește containerul secțiunii, în special schițele coloanei pe care le vom adăuga mai târziu în tutorial.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Lățime: 100%
• Lățime maximă: 100%
• Alinierea rândurilor: corect

Spațiere

Apoi, vom împinge rândul în partea dreaptă a paginii pe desktop folosind câteva setări de dimensionare personalizate.

• Marja superioară: 200 px
• Căptușire stângă: 47% (desktop), 6% (tabletă), 10% (telefon)
• Căptușeală dreaptă: 6% (tabletă), 10% (telefon)

Frontieră

Vom completa setările de rând generale adăugând o margine de sus și de jos.

• Lățimea marginii de sus și de jos: 4 px
• Culoare margine sus și jos: #bdffed

Setări coloana 1

Spațiere

După ce ați finalizat setările generale de rând, deschideți setările primei coloane și adăugați câteva valori de spațiere personalizate.

• Căptușeală superioară: 12%
• Căptușeală inferioară: 12%
• Căptușeală stângă: 3%
• Căptușeală dreaptă: 3%

Setări coloana 2

Spațiere

Deschideți apoi setările celei de-a doua coloane și utilizați următoarele setări de spațiere:

• Căptușeală superioară: 12%
• Căptușeală inferioară: 12%
• Căptușire stângă: 5% (desktop), 20% (tabletă), 15% (telefon)
• Căptușeală dreaptă: 5% (desktop), 20% (tabletă), 15% (telefon)

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H2

Este timpul să adăugați module, începând cu un modul text care conține conținut H2 în coloana 1.

Setări text H2

Treceți la fila de proiectare a modulului și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Source Code Pro
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului: rgba (35,38,211,0,46)
• Titlul 2 Dimensiune text: 4vw (Desktop), 60 px (tabletă), 50 px (telefon)
• Rubrica 2 Spațierea literelor: 5 px

• Titlul 2 Text Shadow Lungime orizontală: 0,05em
• Titlul 2 Text Shadow Vertical Lungime: 0,07em
• Titlul 2 Culoare umbră text: #bdffed

Mișcare verticală

Vom adăuga și niște mișcare verticală.

• Activați mișcarea verticală: da
• Offset de pornire: 2
• Decalaj mediu: 0
• Decalare finală: -2
• Declanșatorul efectului de mișcare: mijlocul elementului

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Adăugați un alt modul de text chiar sub cel precedent și introduceți un conținut de descriere la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Source Code Pro
• Culoare text: rgba (35,38,211,0,76)
• Dimensiune text: 15 px
• Înălțimea liniei de text: 2em

Mișcare verticală

Vom folosi o mișcare verticală și pentru acest modul.

• Activați mișcarea verticală: da
• Offset de pornire: 2
• Decalaj mediu: 0
• Decalare finală: -2
• Declanșatorul efectului de mișcare: mijlocul elementului

Adăugați modulul buton la coloana 1

Adăugați o copie

Ultimul modul de care avem nevoie în coloana 1 este un modul buton. Adăugați o copie la alegere.

Setări buton

Treceți la fila de proiectare a modulului și stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: # 2326d3
• Raza chenarului butonului: 0 px

• Buton Font: Source Code Pro
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu

Spațiere

Apoi, adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Mișcare verticală

Și finalizați setările modulului adăugând o mișcare verticală.

• Activați mișcarea verticală: da
• Offset de pornire: 2
• Decalaj mediu: 0
• Decalare finală: -2
• Declanșatorul efectului de mișcare: mijlocul elementului

Adăugați modulul de imagine în coloana 2

Încărcați o imagine 1: 1

În coloana 2, singurul modul de care avem nevoie de un modul de imagine. Încărcați o imagine cu un raport 1: 1.

Dimensionare

Treceți la fila de proiectare a modulului și forțați lățimea completă a imaginii.

• Forțează lățimea completă: Da

Frontieră

Vom transforma imaginea într-un cerc adăugând câteva colțuri rotunjite în continuare.

• Toate colțurile: 50vw

Box Shadow

Apoi, vom adăuga o umbră de cutie.

• Poziție orizontală a umbrei cutiei: 30 px
• Box Shadow Vertical Position: 30 px
• Culoare umbră: rgba (38.255.197,0.3)

Mișcare verticală

Și vom completa setările modulului adăugând o mișcare verticală.

• Activați mișcarea verticală: da
• Offset de pornire: -2
• Decalaj mediu: 0
• Offset final: 2
• Declanșatorul efectului de mișcare: mijlocul elementului

Clonați întregul rând de două ori

După ce ați finalizat primul rând, îl puteți clona de două ori.

Schimbați tot conținutul și imaginile

Asigurați-vă că modificați toate conținutul și imaginile duplicate.

Adăugați marja inferioară la ultimul rând

Și deschideți setările ultimului rând, accesați setările de spațiere și adăugați o margine de jos.

• Marja inferioară: 200 px

Dedicați rândul nou (în partea de sus a secțiunii) la contururile coloanei

Structura coloanei

Acum că avem rândurile generale la locul lor, este timpul să adăugăm contururile coloanei. Pentru aceasta, vom adăuga un rând nou în partea de sus a secțiunii noastre folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândurilor, accesați fila de proiectare și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 90%
• Lățime maximă: 100%

Spațiere

Eliminăm și toate căptușirile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Poziţie

Apoi, treceți la fila avansată și repoziționați întregul rând. Prin setarea poziției la absolută, vom elimina spațiul containerului ocupat de rândul din interiorul paginii.

• Poziție: Absolută
• Locație: Centrul de sus

Lățimea CSS a elementului principal al tuturor coloanelor

Odată ce setările generale ale rândurilor sunt la locul lor, este timpul să începeți stilul coloanelor. Mai întâi, adăugați o lățime personalizată fiecărei coloane utilizând o linie de cod CSS în interiorul elementului principal al rândului. Acest lucru ne va ajuta să păstrăm structura coloanei pe dimensiuni mai mici ale ecranului.

width: 20% !important;

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și modificați valorile de umplere pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 150vh (desktop), 250vh (tabletă și telefon)
• Căptușeală inferioară: 150vh (desktop), 250vh (tabletă și telefon)

Frontieră

Adăugați și o margine stângă.

• Lățimea marginii stânga: 5 px
• Culoare margine stângă: #bdffed
• Stilul chenarului stâng: punctat

Setări coloana 2

Culoare de fundal

Apoi, vom deschide setările coloanei 2 și vom adăuga o culoare de fundal.

• Culoare fundal: # b5fff1

Frontieră

Vom folosi și o margine dreaptă.

• Lățimea marginii drepte: 4 px
• Culoare margine dreaptă: #bdffed
• Stilul chenarului drept: solid

Coloana 3 Setări

Frontieră

În a treia coloană, vom folosi o margine dreaptă cu următoarele setări:

• Lățimea marginii drepte: 4 px
• Culoare margine dreaptă: rgba (35,38,211,0.12)
• Stilul chenarului drept: punctat

Coloana 4 Setări

Frontieră

Apoi, vom deschide setările coloanei 4 și vom modifica setările de margine în consecință:

• Lățimea marginii drepte: 4 px
• Culoare margine dreaptă: #bdffed
• Stilul chenarului drept: solid

Coloana 5 Setări

Frontieră

Vom completa setările coloanei adăugând și o margine dreaptă la coloana 5.

• Lățimea marginii drepte: 4 px
• Culoare margine dreaptă: rgba (35,38,211,0.12)
• Stilul marginii drepte: punctat

Adăugați un modul divizor în coloanele 1 și 2

Vizibilitate

În previzualizarea mobilă de la începutul acestei postări, ați putut observa un rezultat ușor diferit de cel de pe desktop. Permitem afișarea contururilor coloanei 1 și 2 doar prin adăugarea unui modul divizor în coloanele respective. Asigurați-vă că ascundeți ambele separatoare în setările de vizibilitate și ați terminat!

• Show Divider: Nu

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să devenim creativi cu coloanele încorporate ale Divi. Mai exact, v-am arătat cum să utilizați contururile coloanelor pentru a sublinia grila de proiectare Divi. Această abordare ajută la crearea unui design unic, fără a fi nevoie de software suplimentar de editare a imaginilor. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.