Cum să dezvăluie o grilă de imagine subiacentă în eroul tău cu opțiunile lipicioase ale lui Divi

Crearea unei secțiuni erou care să atragă atenția vizitatorilor dvs. poate da tonul pentru restul site-ului web. Dacă sunteți în căutarea unui mod creativ de a utiliza opțiunile lipicioase ale lui Divi pentru a vă ajuta să ajungeți acolo, vă va plăcea acest tutorial. Astăzi, vă arătăm cum să dezvăluiți o grilă de imagine subiacentă în eroul dvs. cu opțiunile lipicioase ale lui Divi. Includem o tranziție foarte lină de la implicit la lipicios și 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 GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

1. Creați Hero Design

Adăugați o secțiune nouă

Culoare de fundal

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

• Culoare fundal: # 111111

Spațiere

Accesați fila de proiectare a secțiunii și adăugați niște umplutură de jos. Această umplutură de jos ne va oferi suficient spațiu pentru a crea experiența de derulare.

• Căptușeală inferioară: 120vh

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â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: 2
• Lățime: 100%
• Lățime maximă: 2580 px

Spațiere

Adăugați câteva margini superioare receptive în continuare.

• Marja superioară:
  • Desktop: 10vh
  • Tabletă și telefon: 5vh

Indicele Z

Și pentru a ne asigura că acest rând rămâne sub al doilea rând pe care îl vom adăuga la această secțiune, mai târziu vom folosi un index az de 10 în fila avansată.

• Indicele Z: 10

Toate setările coloanei

Odată ce setările de rând generale sunt realizate, deschideți fiecare dintre coloane în mod individual.

Element principal CSS

În fiecare dintre coloane, aplicați următoarele linii de cod CSS elementului principal de pe telefon:

Numai telefon:

width: 50% !important;
margin: 0 !important;

Setări coloana 2

Apoi, deschideți setările coloanei 2.

Indicele Z

Și creșteți indexul Z la 12. Aceasta va pune această coloană deasupra celei de-a treia coloane.

• Indicele Z: 12

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

Incarca imaginea

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați o imagine la alegere.

Spațiere

Treceți la fila de proiectare a modulului și modificați setările de spațiere după cum urmează:

• Marja inferioară:
  • Tabletă și telefon: 10 px
• Marja dreaptă:
  • Tabletă și telefon: 2%

Clonați modulul de imagine de trei ori și plasați duplicatele în coloanele rămase

După ce ați completat setările modulului, puteți clona întregul modul de trei ori și puteți plasa duplicatele în coloanele rămase ale rândului.

Schimbați imaginile

Asigurați-vă că schimbați imaginea din fiecare modul duplicat.

Schimbați spațiul modulului de imagine nr. 2 și # 4

Apoi, deschideți setările modulelor de imagine din coloana 2 și 4 și aplicați următoarele valori de spațiere:

• Marja inferioară:
  • Tabletă și telefon: 10 px
• Marginea stângă:
  • Tabletă și telefon: 2%
• Marja dreapta: /

Adăugați rândul # 2

Structura coloanei

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

Fundal de gradient

Deschideți setările rândului și aplicați următorul fundal de gradient:

• Culoare 1: # 111111
• Culoare 2: rgba (255,255,255,0)

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime: 100%
• Lățime maximă: 2580 px

Spațiere

Apoi, aplicați niște umplutură de sus și de jos.

• Căptușeală superioară: 20vh
• Căptușeală inferioară: 20vh

Poziţie

Pentru a plasa acest rând deasupra grilei de imagine, vom folosi setările de poziție în consecință:

• Poziție: Absolută
• Locație: Centrul de sus
• Indicele Z: 12

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

Adăugați conținut H1

Adăugați un prim modul de text la acest rând folosind un conținut H1 la alegere.

Setări text H1

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

• Font antet: Kumbh Sans
• Greutatea fontului de titlu: Bold
• Stilul fontului de titlu: majuscule
• Alinierea textului de antet: centru
• Culoare text antet: #ffdbaa
• Dimensiune text antet:
  • Desktop: 120 px
  • Tabletă: 60 px
  • Telefon: 40 px
• Distanța între litere
  • Desktop: -3px
  • Tabletă și telefon: 0 px
• Umbra textului de antet:
  • Selectați: A treia opțiune
  • Culoare umbră text antet: rgba (0,0,0,0.4)

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime maximă: 900 px
• Alinierea modulului: centru

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

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în acest rând este un modul buton. Adăugați o copie la alegere.

Aliniere buton

Treceți la fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Apoi, stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 20 px
  • Tabletă: 16 px
  • Telefon: 14 px
• Dimensiune text buton: # 111111
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: Kumbh Sans
• Buton Font Greutate: Bold

Spațiere

Și utilizați câteva valori de umplere receptivă în setările de spațiere.

• Căptușeală superioară:
  • Desktop și tabletă: 20 px
  • Telefon: 15 px
• Căptușeală inferioară:
  • Desktop și tabletă: 20 px
  • Telefon: 15 px
• Căptușeală stângă:
  • Desktop și tabletă: 50 px
  • Telefon: 40 px
• Garnitura dreapta:
  • Desktop și tabletă: 50 px
  • Telefon: 40 px

2. Aplicați Setări lipicioase

Transformă rândul # 1 lipicios

Acum, că avem toate elementele la locul nostru, ne putem concentra asupra setărilor lipicioase. Deschideți setările primului rând și aplicați următoarele setări lipicioase:

• Poziție lipicioasă: lipiți-vă de sus
• Limita lipicioasă inferioară: secțiunea
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Opacitate lipicioasă

Apoi, modificați opacitatea din setările filtrelor.

• Implicit: 20%
• Lipicios: 100%

Modulul de imagine # 1 Setări lipicioase

Spațiere

Apoi, deschideți setările modulului de imagine din coloana 1. Treceți la fila de proiectare și adăugați niște margini lipicioase sus și dreapta.

• Marja superioară lipicioasă: -20%
• Marja dreaptă lipicioasă: -20%

Tranziție

Măriți și durata tranziției.

• Durata tranziției: 700 ms

Modulul de imagine # 2 Spațiere lipicioasă

Spațiere

Treceți la modulul de imagine din coloana 2 și utilizați următoarele setări de spațiere lipicioasă:

• Marja superioară lipicioasă: 20%
• Marja stângă lipicioasă: -30%

Tranziție

Măriți și durata tranziției aici.

• Durata tranziției: 1000 ms

Modulul de imagine # 3 Spațiere lipicioasă

Spațiere

În continuare, avem modulul de imagine în coloana 3. Folosiți următoarele valori de spațiere lipicioasă:

• Marja superioară lipicioasă: -10%
• Marja stângă lipicioasă: -25%
• Marja dreaptă lipicioasă: -25%

Tranziție

Modificați durata tranziției în consecință:

• Durata tranziției: 700 ms

Modulul de imagine # 4 Spațiere lipicioasă

Spațiere

Și, în cele din urmă, deschideți modulul de imagine din coloana 4. Aplicați următoarele valori de spațiere lipicioasă:

• Marja superioară lipicioasă: -20%
• Marja stângă lipicioasă: -30%

Tranziție

Completați setările modulului și acest tutorial, mărind durata tranziției. Asta e! Salvați și ieșiți din pagină pentru a vedea rezultatul.

• Durata tranziției: 1000 ms

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ă dezvăluiți o grilă de imagini pe scroll folosind secțiunile lipicioase ale lui Divi. 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.