Cum să proiectezi secțiuni unice Hero Multi-Column cu secțiunea de specialitate Divi

De-a lungul tuturor tendințelor de design, modul în care îți proiectezi secțiunile erou rămâne extrem de important. Cu Divi, puteți adopta diferite abordări și puteți crea o secțiune de erou care să iasă în evidență și să încurajeze oamenii să își extindă șederea pe site-ul dvs. web. Pentru a vă ajuta să vă inspirați pentru viitoarele dvs. proiecte Divi, vă vom arăta cum să proiectați secțiuni unice de eroi cu mai multe coloane folosind doar opțiunile încorporate ale Divi. Nu numai că secțiunile eroilor cu mai multe coloane arată grozav, dar vă ajută și să plasați strategic mai mult conținut în secțiunea erou, fără a vă copleși vizitatorii.

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.

Descărcați aspectul secțiunii eroului cu mai multe coloane GRATUIT

Pentru a pune mâna pe aspectul secțiunii erou cu mai multe coloane, 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 nouă secțiune de specialitate

Structura coloanei

Pentru a crea o secțiune erou fără coloane multiple, vom folosi una dintre secțiunile de specialitate Divi la care aveți acces în interiorul Visual Builder. Alegerea pentru o secțiune de specialitate vă permite să aveți o mai bună aderență la structura grilei pe care o alegeți atunci când proiectați o secțiune erou cu mai multe coloane. Pentru acest exemplu particular, selectăm următoarea structură de coloane:

Culoare de fundal

Deschideți setările secțiunii și adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

Dimensionare

Ne asigurăm că nu există niciun decalaj între coloanele secțiunii modificând setările de dimensionare.

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

Spațiere

De asemenea, eliminăm toate umpluturile implicite de sus și de jos ale rândului și coloanelor.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 0 px
• Coloana 1 Căptușeală inferioară: 0 px
• Coloana 2 Căptușeală superioară: 0 px
• Coloana 2 Căptușeală inferioară: 0 px
• Coloana 3 Căptușeală superioară: 0 px
• Coloana 3 Căptușeală inferioară: 0 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la prima coloană a secțiunii folosind următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândului și eliminați toate umpluturile implicite, de sus și de jos.

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

Adăugați un modul de text în coloană

Adăugați conținut de paragraf și H1

E timpul să începeți să adăugați module! Adăugați un nou modul de text cu un anumit paragraf și conținut H1 la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 0,9vw (desktop), 1,6vw (tabletă), 2,2vw (telefon)

Setări text H1

Modificați și setările de text H1.

• Font de titlu: Deschideți Sans
• Greutatea fontului de titlu: Semi îndrăzneț
• Stilul fontului de titlu: majuscule
• Culoare text antet: # 000000
• Dimensiune text antet: 4vw
• Înălțimea liniei de direcție: 1.1em

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 10.8vw
• Garnitura stânga: 4vw
• Garnitura dreapta: 4vw

Adăugați rândul # 2

Structura coloanei

Al doilea rând de care avem nevoie în prima coloană de secțiune folosește următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândului și modificați valorile de umplere.

• Căptușeală superioară: 3vw
• Garnitura stânga: 4vw
• Garnitura dreapta: 4vw

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

Adăugați conținut H3

După ce ați terminat setările rândului, puteți continua și adăuga un nou modul de text în prima coloană. Introduceți un conținut H3 la alegere.

Setări text H3

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

• Rubrica 3 Font: Deschideți Sans
• Titlul 3 Greutate font: Semi Bold
• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Dimensiune text: 1,5vw (Desktop), 2vw (tabletă), 2,5vw (telefon)

Spațiere

Continuați adăugând o marjă superioară pe telefon.

• Marja superioară: 2vw (numai telefon)

Adăugați un modul divizor în coloana 1

Vizibilitate

Al doilea modul de care avem nevoie în prima coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Schimbați culoarea liniei în continuare.

• Culoare linie: # 000000

Spațiere

Adăugați câteva valori de marjă personalizate pentru a crea spațiu în jurul divizorului.

• Marja superioară: 2vw
• Marja inferioară: 2vw
• Marja dreaptă: 2vw

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

Adauga continut

Următorul și ultimul modul de care avem nevoie în această coloană este un alt modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

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

• Font text: Deschideți Sans
• Dimensiune text: 0,6vw (desktop), 1,1vw (tabletă), 2vw (telefon)
• Înălțimea liniei de text: 2em

Spațiere

Adăugați și niște umplutură dreaptă și de jos.

• Marja inferioară: 5vw (numai telefon)
• Marja dreaptă: 2vw

Clonați toate modulele din coloana 1 De două ori și plasați duplicatele în coloanele rămase

După ce ați finalizat toate modulele din coloana 1, puteți continua și clona fiecare dintre ele de două ori. Plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați conținutul

Asigurați-vă că modificați tot conținutul din modulele de text.

Adăugați rândul # 3

Structura coloanei

Următorul și ultimul rând de care avem nevoie în prima coloană de secțiune utilizează următoarea structură de coloane:

Spațiere

Deschideți setările rândului și modificați valorile spațierii.

• Marja superioară: 2vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de text în coloana 1

Adauga continut

Continuați adăugând un modul de text la prima coloană cu o copie CTA la alegere.

Adăugați un link

Adăugați și un link către întregul modul.

Culoare de fundal

De asemenea, schimbăm culoarea de fundal a modulului de text.

• Culoare fundal: # 000000

Setări text

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

• Font text: Deschideți Sans
• Greutatea fontului textului: Ultra Bold
• Stil de text text: majuscule
• Aliniere text: centru
• Culoarea textului: #ffffff
• Dimensiune text: 1vw (desktop), 1,7vw (tabletă), 2,5vw (telefon)

Spațiere

Și creați spațiu în jurul modulului folosind unele marje personalizate și valori de umplere.

• Marja superioară: 4vw (desktop), 11vw (tabletă), 0vw (telefon)
• Căptușeală superioară: 4vw
• Căptușeală inferioară: 4vw

Clonați modulul text și plasați duplicatul în coloana 2

După ce ați completat modulul de text din coloana 1, îl puteți clona și plasa duplicatul în a doua coloană.

Schimbați conținutul

Asigurați-vă că modificați conținutul și linkul.

Schimbați culoarea de fundal

La fel și culoarea de fundal.

• Culoare fundal: # e5e5e5

Schimbați culoarea textului

Apoi, treceți la fila de proiectare și schimbați culoarea textului.

• Culoarea textului: # 000000

Schimbați spațiul

Nu în ultimul rând, asigurați-vă că setările de spațiere conțin doar următoarele valori:

• Căptușeală superioară: 4vw
• Căptușeală inferioară: 4vw

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

Incarca imaginea

Accesați coloana următoare a secțiunii! Aici, primul modul de care avem nevoie este un modul de imagine. Încărcați o imagine la alegere sau utilizați una pe care o puteți găsi în dosarul zip care a fost partajat la începutul acestei postări.

Dimensionare

Accesați setările de dimensionare și asigurați-vă că opțiunea „Forțează lățimea completă” este activată. Acest lucru vă va asigura că imaginea își va păstra dimensiunea pe toate dimensiunile ecranului.

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

Filtre

Modificați setările filtrelor în continuare.

• Saturație: 0%
• Luminozitate: 50%

Adăugați un modul de text la coloana 2 a secțiunii

Adăugați paragraf și conținut H3

Al doilea modul de care avem nevoie în această coloană este un modul de text. Introduceți câteva paragrafe și conținut H3 la alegere.

Culoare de fundal

Adăugați o culoare de fundal modulului.

• Culoare fundal: # 000000

Setări text

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

• Font text: Deschideți Sans
• Culoarea textului: #ffffff
• Dimensiune text: 0,9vw (desktop), 1,6vw (tabletă), 2,2vw (telefon)

Setări text H3

Modificați și setările de text H3.

• Rubrica 3 Font: Deschideți Sans
• Titlul 3 Greutate font: Semi Bold
• Titlul 3 Stilul fontului: majuscule
• Rubrica 3 Culoarea textului: #ffffff
• Titlul 3 Dimensiune text: 1,5vw (desktop), 2,5vw (tabletă), 3vw (telefon)

Spațiere

Și adăugați câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 3vw
• Căptușeală inferioară: 3vw
• Garnitura stânga: 2vw
• Garnitura dreapta: 2vw

Clonați ambele module și plasați duplicatele în secțiunea coloana 3 (ordine inversată)

După ce ați finalizat ambele module, puteți continua și le puteți clona. Plasați duplicatele în coloana secțiunii rămase în ordine inversă.

Schimbați modulul text

Schimbați culoarea de fundal

Deschideți modulul de text duplicat în coloana a treia secțiune și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Schimbați culoarea textului

Schimbați culoarea textului în continuare.

• Culoarea textului: # 000000

Schimbați culoarea textului H3

Împreună cu culoarea textului H3.

• Rubrica 3 Culoarea textului: # 000000

Schimbați modulul de imagine

Schimbați imaginea

Încărcați o altă imagine în modulul de imagine duplicat de mai jos.

Schimbați filtrele

Și modificați setările filtrelor.

• Saturație: 0%
• Luminozitate: 147%

Adăugați un modul divizor în secțiunea Coloana 2

Poziţie

De asemenea, adăugăm câteva separatoare transformate pentru a adăuga detalii designului nostru. Plasați primul modul divizor chiar aici:

Vizibilitate

Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Adăugați o culoare de linie în continuare.

• Culoare linie: #ffffff

Transformare Rotire

Și transformați divizorul orizontal într-unul vertical modificând valoarea de rotire a transformării din stânga.

• Stânga: 270 grade

Transformă Traducere

Repoziționați modulul divizor folosind unitatea de lățime a ferestrei în setările de traducere a transformării.

• Dreapta: -19vw (Desktop)
• Partea de jos: -11vw (desktop), -24vw (tabletă)

Vizibilitate

Și ascundeți întregul modul pe telefon.

Adăugați modulul divizor în coloana 3 a secțiunii

Poziţie

Următorul și ultimul modul divizor trebuie adăugat chiar aici:

Vizibilitate

Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare și schimbați culoarea liniei.

• Culoare linie: # 000000

Transformare Rotire

Transformă apoi divizorul orizontal într-unul vertical.

• Stânga: 270 grade

Transformă Traducere

Și repoziționați divizorul utilizând setările de traducere de transformare.

• Dreapta: 2vw
• Partea de jos: -11vw (desktop), -24vw (tabletă)

Vizibilitate

Pentru a ne asigura că divizorul apare deasupra modulului de imagine de sub acesta, vom crește indexul Z în setările de vizibilitate. De asemenea, vom ascunde întregul modul pe telefon.

• Indicele Z: 2

previzualizare

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

Gânduri finale

În această postare, v-am arătat cum să creați secțiuni de erou cu mai multe coloane, frumoase și unice, numai cu opțiunile încorporate ale Divi. Aceasta este o tehnică excelentă care poate fi utilizată pentru diferite tipuri de site-uri web. Dacă aveți întrebări sau sugestii, asigurați-vă că 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.