Cum să vă faceți antetul transparent lipit pe scroll cu Divi

Când vine vorba de configurarea unui antet global pentru site-ul dvs., există multe modalități de abordare a acestuia. Una dintre abordările mai subtile este un antet transparent. Anteturile transparente sunt plasate deasupra secțiunilor erou ale paginilor dvs., ceea ce poate duce la modele frumoase care se concentrează pe o abordare minimă, dar clară. Dacă decideți să alegeți un antet transparent, dar aveți nevoie de un antet lipicios pe scroll, vă va plăcea acest tutorial. Folosind opțiunile lipicioase încorporate ale lui Divi, vă vom arăta cum să treceți de la un antet transparent la un antet lipicios cu stil diferit pe scroll. Tranziția dintre transparent și lipicios este fără efort! 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 șablonul Global Header

Pentru a pune mâna pe șablonul global gratuit de antet, 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. Construirea structurii elementului de antet într-un nou șablon de antet

Creați un nou șablon global de antet

Începeți accesând Divi Theme Builder. Acolo, începeți să creați un nou antet global sau personalizat.

Secțiunea # 1 Setări

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Această secțiune va fi dedicată barei de antet de sus pe care o puteți observa în previzualizarea acestei postări. Deschideți setările secțiunii și adăugați o culoare de fundal neagră.

• Culoare fundal: # 000000

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

Adăugați un rând nou

Structura coloanei

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

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

Adauga continut

Adăugați un modul de text în coloana rândului și introduceți o copie la alegere.

Setări text

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

• Font text: Oswald
• Stil de text text: majuscule
• Culoarea textului: #ffffff
• Mărimea textului:
  • Desktop: 19 px
  • Tabletă: 18 px
  • Telefon: 16 px
• Aliniere text: centru

Adăugați secțiunea 2

Spațiere

Chiar sub prima secțiune, adăugați o altă secțiune obișnuită. Această secțiune va fi dedicată meniului nostru transparent, care va fi transformat lipicios pe scroll. Deschideți setările secțiunii și eliminați toate umpluturile implicite de sus și de jos din fila Design.

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

Adăugați un rând nou

Structura coloanei

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

Culoare de fundal transparentă

Deschideți setările rândului și aplicați o culoare de fundal complet transparentă pe rând.

• Culoare fundal: rgba (255,255,255,0)

Dimensionare

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

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

Spațiere

Adăugați câteva umpluturi personalizate la stânga și la dreapta.

• Căptușeală stângă: 10%
• Căptușeală dreaptă: 10%

Box Shadow

Apoi, aplicați o umbră de cutie transparentă. Mai târziu, în tutorial, vom folosi această umbră de cutie într-o stare lipicioasă cu o culoare diferită de umbră.

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

Poziţie

Pentru a ne asigura că rândul apare deasupra conținutului paginii, cu un fundal transparent, vom folosi o poziție absolută pentru rândul nostru în fila avansată.

• Poziție: Absolută
• Locație: stânga sus

Coloana 2 Vizibilitate

De asemenea, ascundem a doua coloană a rândului nostru pe tabletă și telefon pentru a avea un design de antet mai puțin complex pe dimensiuni mai mici de ecran.

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

Selectați Meniu

Acum că setările noastre de rânduri sunt la locul lor, este timpul să adăugați module, începând cu un modul de meniu în coloana 1. Selectați un meniu la alegere.

Încărcați sigla

Încărcați o siglă în continuare.

Eliminați culoarea de fundal

Eliminați și culoarea de fundal a modulului.

Setări text meniu

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

• Font de meniu: Oswald
• Greutate font meniu: îndrăzneț
• Stilul fontului meniului: majuscule
• Culoare text meniu: #efefef
• Dimensiune text meniu: 18 px
• Alinierea textului: dreapta

Setări meniu derulant

Modificați și setările meniului derulant.

• Culoare linie meniu derulant: rgba (0,0,0,0)
• Culoarea fundalului meniului mobil: rgba (0,0,0,0.95)

Setări pictograme

Apoi, schimbați culorile pictogramei din setările pictogramelor.

• Culoare pictogramă coș de cumpărături: #ffffff
• Caută pictograma Culoare: #ffffff
• Culoare pictogramă meniu hamburger: #ffffff

Setări siglă

Schimbăm și culoarea logo-ului nostru în setările logo-ului, schimbând filtrul de inversare a imaginii.

• Inversare imagine: 90%

Dimensionare

Apoi, vom atribui o înălțime maximă logo-ului nostru.

• Logo Înălțime maximă: 40 px

Spațiere

Apoi, vom adăuga câteva umpluturi de sus și de jos pe dimensiuni mai mici de ecran.

• Căptușeală superioară:
  • Tabletă și telefon: 10 px
• Căptușeală inferioară:
  • Tabletă și telefon: 10 px

Adăugați un modul buton la coloana 2

Adăugați o copie

În coloana 2, singurul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere buton

Treceți la fila de proiectare a modulului și schimbați alinierea butoanelor.

• Aliniere buton: dreapta

Setări buton

Stilează butonul în continuare.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 16 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ed4441
• Culoarea chenarului butonului: # ed4441

• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 4 px
• Buton Font: Oswald
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule
• Afișează pictograma buton: Da
• Culoare pictogramă buton: # 1a1a1a

Spațiere

Și completați setările modulului adăugând câteva valori de spațiere personalizate.

• Marja superioară: -70px
• Căptușeală superioară: 25 px
• Căptușeală inferioară: 25 px

2. Aplicați efecte personalizate lipicioase

Întoarceți secțiunea 2 lipicioasă

Acum, că am stabilit bazele antetului nostru, este timpul să aplicăm efectul lipicios! Pentru aceasta, începeți prin deschiderea setărilor celei de-a doua secțiuni și aplicați următoarele setări lipicioase la fila avansată:

• Poziție lipicioasă: lipiți-vă de sus
• Decalaj superior lipicios: 0 px
• Limita inferioară lipicioasă: Niciuna
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Culoare de fundal Sticky Row

Acum, când opțiunea lipicioasă este activată, putem face modificări de design lipicios la toate elementele din secțiune. Vom începe prin a deschide rândul care conține meniul nostru și vom aplica o culoare albă de fundal lipicioasă.

• Culoare fundal: #FFFFFF

Spațierea rândurilor lipicioase

Apoi, vom modifica valorile spațiale lipite ale rândului.

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

Sticky Row Box Shadow

Schimbăm și culoarea umbrei cutiei într-o stare lipicioasă.

• Culoare umbră: rgba (0,0,0,0.08)

Poziționarea rândului lipicios

Apoi, vom readuce poziția rândului la relativă într-o stare lipicioasă.

• Poziție: relativă
• Originea offsetului: stânga sus

Setări text meniu lipicios

Apoi, vom schimba culoarea textului meniului lipicios.

• Culoare text meniu: # 000000

Setări drop-down meniu lipicios

Împreună cu culoarea de fundal a meniului mobil din setările derulante ale meniului.

• Culoarea fundalului meniului mobil: #ffffff

Culoare pictogramă meniu lipicios

Schimbați și culorile pictogramei într-o stare lipicioasă.

• Culoare pictogramă coș de cumpărături: # 000000
• Culoare pictogramă de căutare: # 000000
• Culoare pictogramă meniu hamburger: # 000000

Filtru logo sigiliu

Apoi, eliminați filtrul de inversare a imaginii logo-ului într-o stare lipicioasă.

• Inversare imagine: 0%

Spațierea lipită a butoanelor

Și finalizați tutorialul prin eliminarea marginii superioare negative a butonului în timp ce este lipicios.

• Marja superioară: 0 px

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, v-am arătat cum să combinați Divi's Theme Builder cu noile opțiuni lipicioase. Mai precis, v-am arătat cum să treceți de la un antet transparent la un antet lipicios cu stil diferit pe scroll. Această abordare vă permite să îmbinați designul paginii cu meniul dvs., păstrând în același timp un antet lipicios frumos pe scroll. 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.