Descărcați o secțiune CTA coloană de proiectare a secțiunii erou pentru Divi

Secțiunea erou a paginii dvs. merită toată atenția pe care o poate primi. Există modalități nesfârșite de a vă stiliza secțiunea erou, în funcție de ce este site-ul dvs. web și de modul în care se comportă publicul țintă. Pentru unele site-uri web, poate fi util să plasați carduri CTA pe mai multe coloane fără a crea o experiență copleșitoare. O modalitate excelentă de a o aborda este prin crearea de carduri CTA cu glisare pe coloană. În tutorialul Divi de astăzi, vă vom arăta cum să creați un design uimitor de la zero care să abordeze această tehnică. 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 secțiunile Hero gratuit

Pentru a pune mâinile pe secțiunile gratuite despre eroi, va trebui mai întâi să le 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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați o secțiune nouă

Fundal de gradient

Adăugați o nouă secțiune la pagina la care lucrați, deschideți setările secțiunii și introduceți un fundal de gradient.

• Culoare 1: #ffffff
• Culoare 2: # f5ede5
• Direcția gradientului: 90 grade
• Poziția inițială: 17%
• Poziție finală: 17%

Spațiere

Treceți la fila de proiectare și adăugați câteva căptușeli personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 5vw (desktop), 10vw (tabletă), 13vw (telefon)
• Căptușeală inferioară: 5vw (desktop), 10vw (tabletă), 13vw (telefon)

Adăugați rândul # 1

Structura coloanei

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

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: # fff6ed

Dimensionare

Treceți la fila de proiectare și modificați și setările de dimensionare ale rândului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 60vw (desktop), 100% (tabletă și telefon)
• Lățime maximă: 100%
• Alinierea rândurilor: corect

Spațiere

De asemenea, adăugăm câteva valori de umplere personalizate la setările de spațiere.

• Căptușeală superioară: 6vw
• Căptușeală inferioară: 6vw
• Căptușeală stângă: 5,5vw
• Garnitura dreapta: 24vw

Frontieră

Mergeți la setările de margine următoare și adăugați o margine din stânga folosind următoarele setări:

• Lățimea marginii stânga: 6 px
• Culoare margine stânga: #FFFFFF

Box Shadow

Adăugați o umbră de casetă subtilă pentru a crea adâncime în secțiunea erou.

• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: rgba (0,0,0,0.22)

Clasa CSS

Și utilizați o clasă CSS în fila avansată. Mai târziu în această postare, vom folosi această clasă CSS pentru a ascunde bara de derulare.

• Clasa CSS: glisare-bară de derulare

Elementul principal

Pentru a crea o derulare / glisare orizontală, va trebui să amplasăm coloanele orizontal. Vom face asta adăugând un cod CSS personalizat în elementul principal al rândului.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Revărsări

Treceți la setările de vizibilitate și modificați revărsările rândului.

• Depășire orizontală: derulați
• Vertical Overflow: Ascuns

Setări coloană

După ce ați completat setările rândului, puteți deschide setările primei coloane.

Fundal de gradient

Adăugați un fundal de gradient.

• Culoare 1: rgba (245.237.229,0.91)
• Culoare 2: rgba (219,34,65,0.84)
• Poziția inițială: 35%
• Poziție finală: 81%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Împreună cu o imagine de fundal.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare

Spațiere

Treceți la fila de proiectare și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 4vw (desktop), 10vw (tabletă), 12vw (telefon)
• Căptușeală inferioară: 4vw (desktop), 10vw (tabletă), 12vw (telefon)
• Căptușire stângă: 2vw (desktop), 5vw (tabletă), 7vw (telefon)
• Căptușeală dreaptă: 2vw (desktop), 5vw (tabletă), 7vw (telefon)

Frontieră

Continuați prin adăugarea razei de margine „20px” la fiecare dintre colțurile din setările de margine.

Elementul principal

O altă parte importantă în realizarea acestui lucru este adăugarea unei singure linii de cod CSS la elementul principal al coloanei.

width: 100% !important;

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

Adăugați conținut H3

E timpul să începeți să adăugați module! Puteți adăuga câte module doriți și le puteți stiliza după propriile preferințe. Cu toate acestea, dacă doriți să recreați exact același exemplu care a fost distribuit în previzualizarea acestei postări, începeți cu un modul de text și introduceți un conținut H3.

Setări text H3

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

• Rubrica 3 Font: Poppins
• Rubrica 3 Greutatea fontului: ușoară
• Rubrica 3 Culoarea textului: # e92640
• Titlul 3 Dimensiune text: 1,5vw (desktop), 3,5vw (tabletă), 4,5vw (telefon)

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

Adauga continut

Următorul modul de care avem nevoie este un alt modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

Accesați setările de text următoare și efectuați câteva modificări.

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Culoarea textului: # e92640
• Dimensiune text: 0,8vw (desktop), 1,9vw (tabletă), 2,8vw (telefon)

Spațiere

Adăugăm, de asemenea, o marjă inferioară pentru a crea spațiu în cardul nostru de glisare a coloanei.

• Marja inferioară: 18vw (desktop), 30vw (tabletă), 42vw (telefon)

Adăugați modulul buton la coloana 1

Adăugați o copie

Treceți la modulul următor, care este un modul buton. Introduceți o copie la alegere.

Setări buton

Treceți la fila de proiectare și modificați setările butonului în mod corespunzător:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 0,8vw (desktop), 1,8vw (tabletă), 2,5vw (telefon)
• Culoarea textului butonului: # f5ede5
• Lățimea chenarului butonului: 1 px
• Culoarea chenarului butonului: # f5ede5
• Raza chenarului butonului: 5 px
• Buton Font: Poppins

Spațiere

Măriți dimensiunea butonului adăugând câteva valori de umplere personalizate pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

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

Vizibilitate

Următorul modul de care avem nevoie este un modul divizor. 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: # f5ede5

Adăugați modulul de text nr. 3 î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: Poppins
• Greutatea fontului textului: ușoară
• Culoarea textului: # f5ede5
• Dimensiune text: 0,8vw (desktop), 1,9vw (tabletă), 2,8vw (telefon)
• Înălțimea liniei textului: 2.3em

Spațiere

Adăugați și câteva margini superioare.

• Marja superioară: 2vw

Clonați coloana de până la 5 ori și refolosiți pentru alte CTA-uri

După ce ați completat prima coloană și toate modulele din ea, puteți clona întreaga coloană de până la 5 ori, în funcție de câte coloane glisați pe cardurile CTA pe care doriți să le afișați. Asigurați-vă că modificați toate copiile pentru fiecare duplicat de coloană, împreună cu linkurile pentru butoane.

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Vom folosi acest rând pentru a crea o suprapunere cu precedentul. Alegeți următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și ajustați setările de dimensionare în consecință:

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

Spațiere

Mai târziu, vom adăuga modulele de care avem nevoie și vom crea o suprapunere superioară negativă pentru a face să pară că modulele fac parte din primul rând. Aceasta înseamnă că nu avem nevoie de al doilea rând pentru a ocupa deloc spațiu în proiectarea noastră. De aceea, eliminăm toate umpluturile implicite de sus și de jos.

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

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

Adăugați conținut H1

E timpul să începeți să adăugați module! Începeți cu un prim modul de text și introduceți un conținut H1 la alegere.

Setări text H1

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

• Font de titlu: Poppins
• Culoare text antet: # e92741
• Dimensiune text antet: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

Spațiere

Adăugați câteva valori de marjă în continuare.

• Marja superioară: -35vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja stângă: 5vw
• Marja dreaptă: 12vw

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

Adauga continut

Al doilea modul de care avem nevoie este un alt modul de text. Introduceți un conținut de paragraf la alegere.

Setări text

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

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Culoarea textului: # e92741
• Dimensiune text: 0,8vw (desktop), 1,9vw (tabletă), 2,8vw (telefon)
• Înălțimea liniei textului: 2.8em

Spațiere

Adăugăm și câteva valori de marjă personalizate la modulul text.

• Marja superioară: 2vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja inferioară: 2vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja stângă: 5vw
• Marja dreaptă: 13vw (desktop), 5vw (tabletă și telefon)

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Setări buton

Apoi, accesați fila Design și stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,9vw
• Culoarea textului butonului: # e92741
• Culoarea fundalului butonului: # f5ede5
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 5 px
• Buton Font: Poppins

Spațiere

De asemenea, mărim dimensiunea butonului prin adăugarea unor valori de spațiere personalizate.

• Marja superioară: 2vw
• Marja stângă: 5vw
• Căptușeală superioară: 1,5vw (desktop), 2,5vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1,5vw (desktop), 2,5vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 6vw (desktop), 9vw (tabletă), 15vw (telefon)
• Căptușeală dreaptă: 6vw (desktop), 9vw (tabletă), 15vw (telefon)

Box Shadow

Finalizați designul modulului de butoane adăugând o umbră de casetă subtilă.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 50 px
• Puterea răspândirii umbrei cutiei: -5 px
• Culoare umbră: rgba (0,0,0,0.19)

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, am împărtășit gratuit o frumoasă secțiune de erou cu coloana și ți-am arătat cum să o recreezi de la zero. Acesta este un mod excelent de a prezenta mai multe cărți CTA în secțiunea erou fără a avea un design care pare prea copleșitor. Sperăm că v-a plăcut acest tutorial și dacă aveți întrebări sau sugestii, asigurați-vă că le lăsați î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.