Cum se creează titluri de secțiuni lipicioase cu Divi

Modul în care vă proiectați paginile este o reflectare directă a mărcii dvs. De aceea, la un moment dat în brainstorming-ul dvs. de design, este posibil să doriți să găsiți și să adăugați elemente de design unice pe site-ul dvs. web, care vă vor ajuta să generați un model pe toate paginile. Un mod unic de a evidenția identitatea site-ului dvs. web este prin utilizarea titlurilor de secțiuni lipicioase. Aceste titluri de secțiuni lipicioase vor urmări comportamentul de navigare al vizitatorilor dvs., lipindu-se de partea de sus a browserului lor. În acest tutorial, vă vom arăta cum să creați titluri de secțiuni lipicioase utilizând opțiunile lipicioase ale lui Divi. Titlurile secțiunilor lipicioase vor fi mai puțin subliniate odată ce vizitatorii dvs. parcurg, dar vor fi suficient de vizibile pentru ca aceștia să recunoască secțiunea la care se află. 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ă 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

1. Creați proiectarea secțiunii

Adăugați o secțiune nouă

Spațiere

Î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 câteva căptușeli de sus și de jos.

• Căptușeală superioară: 200 px
• Căptușeală inferioară: 200 px

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ândului și modificați setările de dimensionare după cum urmează:

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

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

Adăugați conținut H2

Acum, adăugați un modul de text în coloana rândului și introduceți un conținut H2 la alegere.

Setări text H2

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

• Rubrica 2 Font: Poppins
• Titlul 2 Greutate font: Semi Bold
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text:
  • Desktop: 20vw
  • Tabletă și telefon: 28vw

Adăugați rândul # 2

Structura coloanei

Adăugați un alt rând chiar sub cel anterior folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificaț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%

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

Adauga continut

Apoi, adăugați un prim modul de text în coloana 2 cu un conținut descriptiv la alegere.

Setări text

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

• Font text: Poppins
• Culoarea textului: # 000000
• Mărimea textului:
  • Desktop: 2vw
  • Tabletă: 4vw
  • Telefon: 5vw
• Spațiere scrisoare text: -0,1vw
• Înălțimea liniei de text: 1.6em

Dimensionare

Modificați și setările de dimensionare pentru diferite dimensiuni de ecran.

• Lăţime:
  • Desktop: 70%
  • Tabletă și telefon: 90%
• Alinierea modulului: centru

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

Incarca imaginea

Treceți la următorul modul, care este un modul de imagine. Încărcați o imagine la alegere.

Dimensionare

Treceți la fila de proiectare a modulului și forțați lățimea completă a imaginii.

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

Spațiere

Adăugați și o marjă de sus.

• Marja superioară: 100 px

Adăugați un modul buton la coloana 2

Adăugați o copie

În continuare, avem un modul buton. Adăugați o copie la alegere.

Setări buton

Modificați setările butonului modulului în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 1,5vw
  • Tabletă: 2,5vw
  • Telefon: 3.5vw
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # f6223e
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Poppins
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu

Spațiere

Și completați setările modulului adăugând câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară:
  • Desktop și tabletă: 3%
  • Telefon: 5%
• Căptușeală inferioară:
  • Desktop și tabletă: 3%
  • Telefon: 5%
• Căptușeală stângă:
  • Desktop: 5vw
  • Tabletă: 8vw
  • Telefon: 12vw
• Garnitura dreapta:
  • Desktop: 5vw
  • Tabletă: 8vw
  • Telefon: 12vw

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

Adăugați conținut din lista bullet

Următorul și ultimul modul pe care îl vom adăuga la această coloană este un alt modul de text. Adăugați elementele de listă la alegere în caseta de conținut.

Setări text

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

• Font text: Poppins
• Culoarea textului: # 000000
• Mărimea textului:
  • Desktop: 2vw
  • Tabletă: 4vw
  • Telefon: 5vw
• Spațiere scrisoare text: -0,1vw
• Înălțimea liniei de text: 1.6em

Setări text listă comandată

Efectuați și câteva modificări la setările textului listei ordonate.

• Culoare text listă comandată: # ff2340
• Înălțime linie listă comandată: 1.6em
• Listă comandată Tip stil: super-roman
• Poziția stilului listei ordonate: în exterior

Adăugați culoarea textului negru la listarea articolelor individual în caseta de conținut

Apoi, vom transforma articolele înapoi în negru navigând la caseta de conținut și adăugând manual o culoare de text neagră la fiecare dintre elementele listei.

Dimensionare

Apoi, vom schimba setările de dimensionare pentru diferite dimensiuni de ecran.

• Lăţime:
  • Desktop: 70%
  • Tabletă și telefon: 90%
• Alinierea modulului: centru

Spațiere

Vom aplica niște valori de marjă și umplere personalizate și la setările de spațiere ale modulului.

• Marja superioară: 50 px
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

2. Aplicați Efect adeziv la titlul secțiunii

Adăugați Efect adeziv la rând

Acum, că am stabilit bazele designului nostru, este timpul să facem efectul pe care l-ați putut vedea în previzualizarea acestui post. Pentru a face acest lucru, vom transforma întregul nostru rând lipicios deschizând setările rândului, accesând fila avansată și aplicând următoarele setări:

• 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

Modificați rândul Z Index

Pentru a ne asigura că rândul lipicios rămâne sub al doilea rând din designul nostru, vom atribui un index az de „1” rândului nostru lipicios. Când derulați, veți vedea rândul lipicios și modulul său de text merge sub modulele celui de-al doilea rând.

• Indicele Z: 1

Adăugați modul de amestecare a coloanei 2 (rândul 2)

Cu toate acestea, după cum ați putut observa în previzualizarea acestui post, titlul secțiunii lipicioase este vizibil în orice moment. Pentru a obține acest efect, vom adăuga un modul de amestecare în a doua coloană a celui de-al doilea rând. Acest lucru va ajuta la amestecarea rândului lipicios și a modulelor din al doilea rând, menținând totuși un indice z scăzut pentru rândul lipicios.

• Blend Mode: Multiplicare

Schimbați Setările textului Sticky H2

Vom aplica și câteva stiluri lipicioase modulului nostru de text din rândul # 1. Începeți prin schimbarea culorii textului H2 într-o stare lipicioasă și aplicați și o umbră de text personalizată.

• Culoare text Sticky H2: #ffffff
• Titlul 2 Text Shadow: A doua opțiune (a se vedea mai jos ecranul de imprimare)
• Titlul 2 Culoare umbră text:
  • Implicit: rgba (0,0,0,0)
  • Lipicios: rgba (0,0,0,0.08)

Schimbați spațiul modulului text lipicios

Vom schimba și poziția modulului folosind o marjă stângă negativă lipicioasă în setările de spațiere

• Marja stângă lipicioasă: -35%

Măriți durata de tranziție a modulului de text

Și pentru a asigura o tranziție lină, vom mări durata tranziției în fila avansată.

• Durata tranziției: 500 ms

3. Secțiunea Reutilizare

Secțiunea de clonare

Acum că avem o secțiune finalizată, inclusiv titlul secțiunii lipicioase, putem reutiliza întreaga secțiune de câte ori dorim clonând-o.

Schimbați conținutul titlului

Asigurați-vă că schimbați conținutul titlului în primul rând.

Potriviți dimensiunea textului cu lungimea caracterului

În funcție de câte caractere are noul dvs. titlu H2, vă recomandăm să ajustați dimensiunea textului titlului 2.

Schimbați toate celelalte conținuturi și imagini

Și, bineînțeles, va trebui să schimbați și celelalte conținuturi din secțiunea duplicat. Asta e!

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 opțiunile lipicioase ale lui Divi. Mai precis, v-am arătat cum să creați titluri de secțiuni lipicioase care să vă urmărească vizitatorii de-a lungul designului pe care îl creați. Acest efect conferă designului dvs. o dimensiune suplimentară și o tranziție perfectă. 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.