Cum să adăugați o bară de jos poziționată absolut la secțiunea erou cu Divi

Modul în care structurați elementele din secțiunea erou poate fi dificil uneori. Doriți să aveți un echilibru bun, fără a fi nevoie să reduceți drastic cantitatea de conținut pe care doriți să îl partajați. Din fericire, unele abordări simplificate și-au dovedit valoarea pe web. Una dintre aceste abordări este adăugarea unei bare de jos poziționate absolut la secțiunea erou. Nu numai că arată bine, în ceea ce privește designul, ci vă ajută să adăugați mai multe apeluri la acțiune fără a dezechilibra designul.

În acest tutorial, vă vom arăta cum să adăugați o bară de jos poziționată absolut la secțiunea erou din Divi. Bara de jos pe care o vom adăuga va conține patru părți; trei butoane și un formular de contact. 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 GRATUIT aspectul secțiunii erou a barei de jos poziționat absolut

Pentru a pune mâna pe aspectul gratuit al secțiunii erou, 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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați o secțiune nouă

Fundal de gradient

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și aplicați un fundal de gradient.

• Culoare 1: rgba (0,0,0,0,62)
• Culoare 2: rgba (0,0,0,0,97)
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Încărcați următoarea imagine de fundal la alegere.

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

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

Revărsări

Ascundem și revărsările secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândului și aplicați o marjă de sus și de jos.

• Marja superioară: 20%
• Marja inferioară: 20%

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

Adăugați conținut H1

E timpul să adăugați module, începând cu un prim modul de text care conține un conținut H1 la alegere.

Setări text H1

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

• Font de antet: Work Sans
• Culoare text antet: #ffffff
• Dimensiune text antet:
  • Desktop: 80 px
  • Tabletă: 50 px
  • Telefon: 40 px
• Distanța între litere:
  • Desktop: -4px
  • Tabletă și telefon: -2 px

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

Adauga continut

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

Setări text

Modificați setările de text ale modulului în consecință:

• Font text: Deschideți Sans
• Culoarea textului: # a0a0a0

Dimensionare

Modificați și setările de dimensionare.

• Lăţime:
  • Desktop: 68%
  • Tabletă și telefon: 100%

Adăugați un modul buton în coloană

Adăugați o copie

Ultimul modul de care avem nevoie în acest rând este un modul buton. Includeți o copie la alegere.

Adăugați un link

Adăugați un link de buton.

• Adresă URL a butonului: #

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: #ffffff
• Lățimea chenarului butonului: 0 px

• Buton Font: Work Sans
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga

Adăugați rândul # 2

Structura coloanei

E timpul să creăm bara noastră de secțiune erou de jos! Pentru aceasta, vom adăuga un nou rând 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.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lăţime:
  • Desktop: 100%
  • Tabletă și telefon: 80%
• Lățime maximă: 2560 px

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Box Shadow

Includeți și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: 50 px
• Culoare umbră: rgba (135.135.135,0.08)

Poziţie

Apoi, treceți la fila avansată și repoziționați întregul rând pe desktop. Aduceți-l înapoi la valorile implicite pentru dimensiunile de ecran mai mici. Setările de poziție ale acestui rând se vor asigura că rândul se lipeste de partea inferioară a containerului secțiunii.

• Poziţie:
  • Desktop: absolut
  • Tabletă și telefon: implicit
• Locație: Centrul de jos

Setări coloana 1

Spațiere

Continuați deschizând setările coloanei 1 și aplicați câteva valori de umplere personalizate.

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

Frontieră

Folosim și câteva setări de margini adaptabile pentru această coloană.

• Frontiera de sus:
  • Lățimea marginii superioare: 5 px
  • Culoarea chenarului superior:
    • Implicit: rgba (255,255,255,0)
    • Plasați cursorul: #ffffff
• Bordura inferioară:
  • Lățimea marginii inferioare:
    • Desktop și tabletă: 0 px
    • Telefon: 3 px
  • Culoare margine inferioară: rgba (255.255.255,0.11)
• Bordura stângă:
  • Lățimea marginii stângi:
    • Desktop: 0 px
    • Tabletă: 3 px
    • Telefon: 0px
  • Culoare margine stânga: rgba (255.255.255,0.11)

Setări coloana 2

Spațiere

Accesați setările celei de-a doua coloane. Adăugați câteva valori de umplere la setările de spațiere.

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

Frontieră

Și includeți următoarele borduri receptive:

• Frontiera de sus:
  • Lățimea marginii superioare: 5 px
  • Culoarea chenarului superior:
    • Implicit: rgba (255,255,255,0)
    • Plasați cursorul: #ffffff
• Bordura inferioară:
  • Lățimea marginii inferioare:
    • Desktop și tabletă: 0 px
    • Telefon: 3 px
  • Culoare margine inferioară: rgba (255.255.255,0.11)
• Bordura stângă:
  • Lățimea marginii stângi:
    • Desktop: 3 px
    • Tabletă: 3 px
    • Telefon: 0px
  • Culoare margine stânga: rgba (255.255.255,0.11)

Coloana 3 Setări

Spațiere

A treia coloană are nevoie și de valori de umplere personalizate.

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

Frontieră

Împreună cu următoarele setări de margine:

• Frontiera de sus:
  • Lățimea marginii superioare: 5 px
  • Culoarea chenarului superior:
    • Implicit: rgba (255,255,255,0)
    • Plasați cursorul: #ffffff
• Bordura stângă:
  • Lățimea marginii stângi:
    • Desktop: 3 px
    • Tabletă: 3 px
    • Telefon: 0px
  • Culoare margine stânga: rgba (255.255.255,0.11)

Coloana 4 Setări

Culoare de fundal

Până la ultima coloană. Adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

Spațiere

Aplicați câteva valori de umplere adaptabile personalizate.

• Căptușeală de sus
  • Desktop: 3%
  • Tabletă: 3%
  • Telefon: 10%
• Căptușeală inferioară:
  • Desktop: 3%
  • Tabletă: 3%
  • Telefon: 10%
• Căptușeală stângă:
  • Desktop: 3%
  • Tabletă: 5%
  • Telefon: 10%
• Garnitura dreapta:
  • Desktop: 3%
  • Tabletă: 5%
  • Telefon: 10%

Poziţie

Și repoziționați întreaga coloană pe desktop. Acest lucru va face dimensiunea coloanei absolută și o va lăsa să se lipească de partea de jos a rândului.

• Poziţie:
  • Desktop: absolut
  • Tabletă și telefon: implicit
• Locație: în partea dreaptă jos

Clonați butonul Modul în rândul anterior și plasați duplicatul în coloana 1 din rândul nou

După ce ați completat setările de rând și coloană, este timpul să începeți să adăugați module. Reutilizăm modulul buton care face parte din rândul anterior. Clonați modulul și plasați duplicatul acestuia în prima coloană a noului rând.

Schimbați alinierea butonului

Deschideți duplicatul modulului de butoane și modificați alinierea.

• Aliniere buton: centru

Schimbați copierea și linkurile

Modificați copia modulului și legați-l în continuare.

Clonați butonul în coloana 1 De două ori și plasați duplicatele în coloanele 2 și 3

După ce ați modificat setările modulului buton din coloana 1, puteți clona întregul modul de două ori și puteți plasa duplicatele în coloana 2 și 3.

Schimbați copierea și linkurile

Schimbați copia și linkurile pentru fiecare duplicat.

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

Adăugați conținut H2

Până la ultima coloană a rândului. Acolo, primul modul de care avem nevoie este un modul de text cu conținut H2.

Setări text H2

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

• Titlul 2 Font: Work Sans
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Spațierea literelor: -2 px

Spațiere

Adăugați și o margine inferioară.

• Marja inferioară: 10%

Adăugați modulul de formular de contact în coloana 4

Faceți câmpuri lățime completă

Apoi, adăugați un modul de formular de contact chiar sub modulul de text. Deschideți câmpurile de nume și adresă de e-mail în mod individual și activați opțiunea „Creați lățimea completă” pentru ambele.

• Faceți lățime completă: Da

Setări câmpuri

Treceți la fila de proiectare a modulului și modificați setările câmpurilor după cum urmează:

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: # 000000
• Căptușire de câmp: 4%
• Căptușeală inferioară câmpuri: 4%
• Fields Font: Work Sans
• Dimensiune text câmpuri: 13 px

Setări text Captcha

Apoi, faceți câteva modificări la setările de text captcha.

• Font Captcha: Work Sans
• Culoare text Captcha: # 000000

Setări buton

Stilăm și butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 17 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: -1 px
• Buton Font: Work Sans

Frontieră

Și nu în ultimul rând, vom include o lățime a marginii inferioare. Asta e!

• Intrări Lățimea marginii inferioare: 1 px
• Intrări Culoare margine inferioară: #dddddd

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, ți-am arătat cum să devii creativ cu secțiunea erou din Divi. Mai precis, v-am arătat cum să includeți și să proiectați o bară de jos poziționată absolut. Folosirea unei bare de jos vă va ajuta să partajați mai mult conținut în secțiunea erou, fără ca acesta să devină prea copleșitor. Folosind această tehnică, puteți crea orice tip de design și puteți avea mai multe CTA-uri! 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.