5 Exemple de aspecte ale secțiunii de stil editorial create cu Divi

Noile opțiuni Divi oferă o mulțime de posibilități. Modulele, rândurile și coloanele, mai mult ca oricând, se împuternicesc reciproc pe drumul către design web uimitor și ușor de utilizat. Unul dintre lucrurile pe care le poate face este să creeze secțiuni remarcabile de stil editorial. Și exact asta vă vom arăta în această postare; 5 machete diferite ale secțiunii stilului editorial pe care le puteți utiliza pe diferite site-uri web. Cea mai bună parte? Postarea se face utilizând setările potrivite numai pentru fiecare modul, rând și coloană.

Să aruncăm o privire la cele cinci exemple pe care vi le vom arăta cum să creați.

Primul exemplu

Desktop

Mobil

Al doilea exemplu

Desktop

Mobil

Al treilea exemplu

Desktop

Mobil

Al patrulea exemplu

Desktop

Mobil

Al cincilea exemplu

Desktop

Mobil

5 Exemple de aspecte ale secțiunii de stil editorial create cu Divi

Abonați-vă la canalul nostru Youtube

Începeți să creați primul exemplu

Să începem prin crearea primului aspect de stil editor.

Adăugați o secțiune nouă

Adăugați o pagină nouă, activați Divi Builder și comutați la Visual Builder. După ce vă aflați în Visual Builder, adăugați o secțiune standard.

Adăugați rândul cu trei coloane

În cadrul acelei secțiuni standard, vom avea nevoie de un rând cu trei coloane.

Fundal de gradient

Deschideți setările de rând și adăugați următorul fundal de gradient:

• Prima culoare: # 636363
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 0%
• Poziție finală: 47%

Coloana 2 Culoare fundal

De asemenea, va trebui să setăm „# d8d8d8” ca culoare de fundal a coloanei 2.

Dimensionare

Treceți la fila Proiectare și utilizați următoarele setări pentru subcategoria Dimensionare:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 100%
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Deschideți subcategoria Spacing și adăugați „50px” în partea de sus, dreapta, jos și stânga a căptușirii celei de-a doua coloane.

Modulul de imagine pentru prima coloană

Fundal de gradient

Adăugați o imagine în prima coloană a rândului și utilizați următorul fundal de gradient pentru aceasta:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: # 086191
• Tipul gradientului: liniar
• Direcția gradientului: 107 grade
• Poziția inițială: 60%
• Poziție finală: 60%

Aliniere

Accesați fila Proiectare, utilizați Alinierea imaginii din stânga și activați opțiunea „Centrează întotdeauna imaginea pe mobil”.

Spațiere

Apoi, deschideți subcategoria Spațiere și utilizați următoarele setări de margine și umplere:

• Marja superioară: 100 px (desktop), 0 px (tabletă și telefon)
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

Modulul de text a doua coloană

Setări text

Apoi, adăugați un modul de text la a doua coloană a rândului. Accesați fila Proiectare și utilizați următoarele setări pentru subcategoria Text:

• Dimensiunea fontului textului: 12 px
• Culoarea textului: # 000000
• Orientare text: centru

Dimensionare

Deschideți subcategoria Dimensionare, utilizați o lățime de „84%” și selectați Alinierea modulului central.

Spațiere

În cele din urmă, adăugați „50px” la marginea de sus și de jos.

Modulul de imagine a coloanei a treia

Fundal de gradient

Adăugați un alt modul de imagine în a treia coloană și utilizați următorul fundal de gradient:

• Prima culoare: # a36100
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 73 grade
• Poziția inițială: 40%
• Poziție finală: 40%

Aliniere

Accesați fila Proiectare, selectați Alinierea imaginii din stânga și activați opțiunea „Centrează întotdeauna imaginea pe mobil”.

Spațiere

În cele din urmă, adăugați următoarea marjă și umplere personalizate:

• Marja superioară: 300 px (desktop), 0 px (tabletă și telefon)
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px

Rezultat

Să aruncăm o altă privire asupra rezultatului de pe desktop:

Și pe mobil:

Începeți să creați al doilea exemplu

Al doilea exemplu arată astfel pe desktop:

Adăugați o secțiune nouă

În primul rând, adăugați o nouă secțiune standard.

Adăugați rândul din două coloane

Apoi, adăugați un rând cu două coloane.

Coloana 2 Culoare fundal

Deschideți setările rândului și adăugați „#ededed” ca Culoare 2 Culoare de fundal.

Dimensionare

Accesați fila Proiectare și efectuați următoarele modificări pentru subcategoria Dimensionare:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 100%
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Modulul de imagine pentru prima coloană

Aliniere

Adăugați un modul de imagine în prima coloană, utilizați Aliniere imagine din stânga și activați opțiunea „Întotdeauna centrează imaginea pe mobil”.

Spațiere

Deschideți subcategoria Spațiere și utilizați următoarele setări:

• Marja superioară: 100 px (desktop), 0 px (tabletă și telefon)
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Modulul de text a doua coloană

Setări text

Apoi, adăugați un modul de text la a doua coloană și aplicați următoarele setări subcategoriei Text:

• Font text: Lato
• Dimensiunea fontului textului: 12 px
• Culoarea textului: # 000000
• Înălțimea liniei textului: 2.2em
• Orientare text: centru

Dimensionare

Deschideți subcategoria Dimensionare și aplicați o lățime de '75% '.

Spațiere

În cele din urmă, asigurați-vă că următoarele setări se aplică subcategoriei Spațiu:

• Marja superioară: 120 px (desktop), -80 (tabletă și telefon)
• Marja stângă: -240 px (desktop), 80 (tabletă), 45 (telefon)
• Căptușeală sus, dreapta, jos și stânga: 50 px (desktop și tabletă), 20 px (telefon)

Rezultat

După ce ați terminat, veți observa următorul design pe desktop:

Și pe mobil:

Începeți să creați al treilea exemplu

În continuare, avem următorul exemplu care arată astfel:

Adăugați o secțiune nouă

Încă o dată, adăugați o nouă secțiune standard.

Adăugați rândul din două coloane

Structura coloanei de care vom avea nevoie pentru acest rând este următoarea:

Coloana 1 Culoare fundal

Deschideți setările rândului și utilizați „# e8e8e8” ca Culoare 1 Culoare de fundal.

Coloana 2 Fundal gradient

Fundalul de gradient necesar pentru a doua coloană este următorul:

• Prima culoare: # e8e8e8
• A doua culoare: rgba (255,255,255,0)
• Coloana 2 Tip de gradient: Liniar
• Coloana 2 Direcție gradient: 147deg
• Coloana 2 Poziția inițială: 25%
• Coloana 2 Poziție finală: 9%

Dimensionare

Deschideți subcategoria Dimensionare și utilizați următoarele setări:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 100%
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

În cele din urmă, adăugați „70px” la umplerea de sus și de jos a primei coloane.

Modulul de imagine pentru prima coloană

Aliniere

Adăugați un modul de imagine în prima coloană, utilizați Aliniere imagine din stânga și activați opțiunea „Întotdeauna centrează imaginea pe mobil”.

Spațiere

Deschideți subcategoria Spacing și adăugați „-300px” la marginea din stânga.

Modulul de text a doua coloană

Culoare de fundal

Adăugați un modul de text în a doua coloană și utilizați „# 3d3d3d” ca culoare de fundal.

Setări text

Accesați fila Proiectare și utilizați următoarele setări pentru subcategoria Text:

• Font text: Lato
• Dimensiunea fontului textului: 12 px
• Culoarea textului: #FFFFFF
• Înălțimea liniei textului: 2.2em
• Orientare text: centru

Dimensionare

Deschideți subcategoria Dimensionare și utilizați „75%” pentru Lățime.

Spațiere

În cele din urmă, utilizați următoarele setări pentru subcategoria Spațiere:

• Marja superioară: 130 px (desktop), -200 (tabletă și telefon)
• Marja stângă: -180px (desktop), 80 (tabletă), 50 (telefon)
• Căptușeală sus, dreapta, jos și stânga: 50 px (desktop și tabletă), 20 px (telefon)

Rezultat

Odată terminat, rezultatul de pe desktop va arăta astfel:

Și așa pe mobil:

Începeți să creați al patrulea exemplu

Al patrulea exemplu pe care îl vom crea arată astfel:

Adăugați o secțiune nouă

Începeți prin adăugarea unei secțiuni standard la pagina la care lucrați.

Adăugați rândul din două coloane

Apoi, adăugați un rând cu două coloane.

Dimensionare

Deschideți subcategoria Dimensionare și efectuați următoarele modificări:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 60%
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Prima coloană Primul modul de imagine

Aliniere

Adăugați un modul de imagine în prima coloană, utilizați alinierea corectă a imaginii și activați opțiunea „Centrează întotdeauna imaginea pe mobil”.

Dimensionare

Accesați subcategoria de dimensionare a acelui modul de imagine, utilizați o lățime de '89% 'și selectați alinierea modulului corect.

Vizibilitate

Accesați fila Advanced și dezactivați modulul de imagine de pe telefon și tabletă. Vom face acest lucru pentru 3 dintre modulele de imagine care sunt utilizate. Puteți decide singur care dintre ele doriți să apară pe tabletă și telefon, în cazul nostru, aceasta va fi imaginea din colțul din dreapta sus.

Prima coloană Al doilea modul de imagine

Aliniere

Adăugați un alt modul de imagine, utilizați alinierea corectă a imaginii și activați opțiunea „Centrează întotdeauna imaginea pe mobil”.

Frontieră

Derulați în jos și utilizați următoarea margine:

• Utilizați chenarul: Da
• Culoare margine: #FFFFFF
• Lățimea chenarului: 5 px
• Stilul chenarului: solid

Vizibilitate

În cele din urmă, accesați fila Advanced și dezactivați modulul de imagine de pe telefon și tabletă.

A doua coloană Primul modul de imagine

Aliniere

Adăugați următorul modul de imagine la a doua coloană, utilizați Alinierea de imagine din stânga și activați opțiunea „Întotdeauna centrează imaginea pe mobil”.

Frontieră

Derulați în jos, deschideți subcategoria Border și aplicați următoarele setări:

• Utilizați chenarul: Da
• Culoare margine: #FFFFFF
• Lățimea chenarului: 4 px
• Stilul chenarului: solid

A doua coloană Al doilea modul de imagine

Aliniere

Adăugați ultimul modul de imagine la a doua coloană, utilizați Aliniere imagine din stânga și activați opțiunea „Întotdeauna centrează imaginea pe mobil”.

Dimensionare

Apoi, deschideți subcategoria de dimensionare, utilizați o lățime de '89% 'și selectați alinierea modulului din stânga.

Vizibilitate

Dezactivați și acest modul de imagine pe telefon și tabletă.

Adăugați rândul cu o coloană

După ce ați terminat rândul anterior, continuați și adăugați altul. De data aceasta, rândul va avea nevoie doar de o singură coloană.

Dimensionare

Accesați fila Proiectare a setărilor rândului, activați opțiunea „Utilizați lățimea personalizată” și utilizați „581px” ca lățime personalizată.

Modul text

Culoare de fundal

Adăugați un modul de text la noul rând și selectați „rgba (255,255,255,0,92)” ca culoare de fundal.

Setări text

Treceți la fila Proiectare și efectuați următoarele setări pentru subcategoria Text:

• Font text: Lato
• Dimensiunea fontului textului: 12 px
• Culoarea textului: # 000000
• Înălțimea liniei textului: 2.2em
• Orientare text: centru

Dimensionare

Apoi, deschideți subcategoria Dimensionare, adăugați „75%” la Lățime și selectați Alinierea modulului central.

Spațiere

În cele din urmă, efectuați următoarele setări pentru subcategoria Spațiu:

• Marja superioară: -580 px (desktop), -200 (tabletă și telefon)
• Marja stângă: - 180 px (desktop), 80 (tabletă), 50 (telefon)
• Căptușeală sus, dreapta, jos și stânga: 50 px

Rezultat

După ce ați terminat, veți putea asista la următorul rezultat pe desktop:

Și următoarele pe mobil:

Începeți să creați al cincilea exemplu

Ultimul exemplu pe care vă vom arăta cum să îl recreați este următorul:

Adăugați secțiunea lățime completă

Începeți prin adăugarea unei secțiuni de lățime completă pe pagina dvs.

Modul de imagine Fullwidth

În secțiunea Fullwidth, adăugați un modul de imagine Fullwidth.

Adăugați o secțiune nouă

Chiar sub secțiunea anterioară, adăugați o altă secțiune. De data aceasta, secțiunea trebuie să fie standard în loc de lățime completă.

Adăugați rândul cu trei coloane

Adăugați un rând cu trei coloane la noua secțiune standard.

Coloana 1, 2 și 3 Culoare fundal

Deschideți setările rândului și atribuiți următoarele culori de fundal coloanelor:

• Coloana 1: #eaeaea
• Coloana 2: rgba (12.113.195,0.17)
• Coloana 3: rgba (131,0,233,0,09)

Dimensionare

Accesați fila Proiectare și efectuați următoarele modificări la subcategoria Dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Apoi deschideți subcategoria Spacing, adăugați „-60px” la marginea superioară și „50px” la umplutura inferioară a fiecărei coloane.

Modulul de text prima coloană

Culoare de fundal

Continuați adăugând un modul de text la prima coloană și folosind „rgba (255,255,255,0,89)” ca culoare de fundal.

Setări text

Accesați fila Proiectare și efectuați următoarele setări pentru subcategoria Text:

• Font text: Lato
• Dimensiunea fontului textului: 12 px
• Culoarea textului: # 000000
• Înălțimea liniei textului: 2.2em
• Orientare text: centru

Frontieră

Deschideți subcategoria Border și utilizați următoarele setări:

• Utilizați chenarul: Da
• Culoare margine: #FFFFFF
• Lățimea chenarului: 17 px
• Stilul chenarului: solid

Dimensionare

Apoi, utilizați o lățime de '75% 'și selectați Alinierea centrală a modulului din subcategoria Dimensionare.

Spațiere

În cele din urmă, deschideți subcategoria Spațiere și aplicați următoarele setări:

• Marja superioară: -300px (desktop), 0px (tabletă și telefon)
• Căptușeală sus, dreapta, jos, stânga: 50 px (desktop și tabletă), 20 px (telefon)

Clonați modulul de text de două ori și plasați-l în alte două coloane

Continuați și clonați modulul de text de două ori. Apoi, așezați fiecare dintre clone în cele două coloane rămase.

Modificarea spațiului Modul de text a doua coloană

Va trebui să schimbăm Marja superioară a modulului de text plasat în a doua coloană în „-220px”.

Modificare spațiu Modul text coloană a treia

Același număr este valabil pentru modulul de text din a treia coloană, dar valoarea este în schimb „-140px”.

Rezultat

Și aici aveți rezultatul pe desktop:

Și pe mobil:

Gânduri finale

În această postare, v-am arătat câteva aspecte frumoase și distractive ale secțiunilor stilului editorial pe care le puteți utiliza pe propriul dvs. site web. Aceste exemple arată cât de flexibile sunt opțiunile Divi și cât de creativ puteți obține. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Julia Tim / shutterstock.com