Cum să vă schimbați sigla lipicioasă pe scroll cu Divi

De când au apărut opțiunile lipicioase Divi, au fost adăugate posibilități nesfârșite de interacțiune în cutiile noastre de instrumente Divi. Pe lângă posibilitatea de a transforma un antet lipicios pe scroll, puteți schimba stilul elementelor dvs. într-o stare lipicioasă. Acest lucru vă permite să evidențiați antetul odată ce a devenit lipicios și să creați o altă experiență de utilizator în timp ce oamenii vă citesc paginile și postările.

Una dintre întrebările adresate frecvent în comunitate este cum să schimbi sigla Divi într-o stare lipicioasă. În acest tutorial, vă vom arăta o modalitate rapidă și ușoară de a face acest lucru. Vom începe tutorialul construind un antet global, apoi vom aplica efectele lipicioase și în a treia parte a tutorialului vă vom arăta cum să vă schimbați sigla lipicioasă pe scroll. Dacă sunteți deja familiarizați cu opțiunile lipicioase ale Divi și cu posibilitățile globale de antet, nu ezitați să treceți la a treia parte a tutorialului pentru a vedea câțiva pași necesari pentru a vă schimba sigla lipicioasă pe scroll.

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 și creați un nou antet global sau personalizat.

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți setările secțiunii respective și aplicați o culoare de fundal.

• Culoare fundal: # 556de0

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

Box Shadow

Adăugați și o umbră de cutie.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând 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 ale rândului după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lăţime:
  • Desktop: 80%
  • Tabletă și telefon: 100%
• Lățime maximă: 2580 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

Coloana 1 Spațierea

Apoi, deschideți setările coloanei 1 și aplicați câteva umpluturi de sus și de jos.

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

Coloana 2 Culoare fundal

Treceți la setările celei de-a doua coloane și adăugați o culoare de fundal.

• Culoare fundal: # 6eba01

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

Selectați Meniu

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

Eliminați culoarea de fundal

Eliminați culoarea de fundal albă implicită 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: Montserrat
• Greutate font meniu: îndrăzneț
• Culoare text meniu: #ffffff
• Dimensiune text meniu: 16 px
• Alinierea textului: dreapta

Setări meniu derulant

Apoi, faceți câteva modificări la setările meniului derulant.

• Culoarea fundalului meniului drop-down: # 556de0
• Culoare linie meniu drop-down: rgba (0,45,76,0)
• Culoarea fundalului meniului mobil: # 556de0
• Culoarea textului meniului mobil: #ffffff

Setări pictograme

Schimbați culorile pictogramei în continuare.

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

Spațiere

Și aplicați câteva valori de spațiere receptive.

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

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 modulului.

• Aliniere buton: centru

Setări buton

Stilează butonul în continuare.

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

• Distanța dintre litere și butoane: 1 px
• Buton Font: Montserrat
• Stilul fontului butonului: majuscule

Spațiere

Și aplicați câteva valori de spațiere receptive.

• Marja superioară:
  • Desktop: 30 px
  • Tabletă și telefon: 20 px
• Marja inferioară:
  • Desktop: 30 px
  • Tabletă și telefon: 20 px

2. Aplicați efecte personalizate lipicioase

Faceți secțiunea lipicioasă

Acum, că avem toate elementele la locul lor, este timpul să adăugăm efectul lipicios și să schimbăm și logo-ul nostru lipicios. Începeți prin a deschide din nou setările secțiunii. Accesați fila avansată și aplicați următoarele setări de poziție lipicioasă:

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

Culoare de fundal a secțiunii lipicioase

Acum, când secțiunea a fost transformată lipicioasă, putem aplica un stil lipicios elementelor părinte și copil. Începeți accesând setările de fundal ale secțiunii și aplicați o culoare de fundal alb într-o stare lipicioasă.

• Culoare fundal: #FFFFFF

Dimensionarea rândurilor lipicioase

Modificați lățimea rândului într-o stare lipicioasă în continuare.

• Lățime: 100%

Spațiere coloană 1 lipicioasă

Apoi, vom elimina umplutura de sus și de jos a coloanei 1 într-o stare lipicioasă.

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

Culoarea de fundal a coloanei lipicioase 2

Vom schimba și culoarea de fundal a coloanei 2 lipicioase.

• Culoare fundal: # 556de0

Culoare text meniu lipicios

Continuați deschizând modulul de meniu și aplicați o culoare de text de meniu lipicioasă.

• Culoare text meniu: # 556de0

Setări drop-down meniu lipicios

Schimbați și câteva culori ale meniului drop-down într-o stare lipicioasă.

• Culoarea fundalului meniului derulant: #ffffff
• Culoarea fundalului meniului mobil: #ffffff
• Culoarea textului meniului mobil: # 556de0

Setări pictogramă meniu lipicios

Împreună cu culorile pictogramei lipicioase.

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

Spațierea meniului lipicios

Apoi, accesați setările de spațiere și aplicați o margine stângă lipicioasă.

• Marja stângă: 5%

Spațierea lipită a butoanelor

Nu în ultimul rând, modificați valorile marginilor lipicioase ale modulului buton în setările de spațiere.

• Marja superioară: 15 px
• Marja inferioară: 15 px

3. Schimbați sigla în stare lipicioasă

Încărcați ambele pictograme în biblioteca media

Singurul lucru rămas de făcut este să adăugăm cele două sigle diferite la modulul de meniu. Un logo va fi aplicat într-o stare statică, celălalt într-o stare lipicioasă. Încărcați ambele sigle în biblioteca dvs. media.

Selectați Static Logo

Apoi, deschideți modulul de meniu și selectați fișierul de imagine a logo-ului static în setările logo-ului.

Aplicați lățimea și înălțimea maximă a logo-ului în pixeli

Treceți la fila de proiectare a modulului și aplicați o lățime și o înălțime maximă a siglei. Aceste valori ne vor ajuta să menținem la fel dimensiunea logo-ului nostru static și lipicios.

• Logo Lățime maximă: 100 px
• Logo Înălțime maximă: 60 px

Copiați adresa URL a logo-ului lipicios

Acum, reveniți la biblioteca dvs. media și copiați adresa URL a siglei dvs. lipicioase.

Adăugați o adresă URL lipicioasă într-o stare lipicioasă (elementul principal al siglei meniului)

Pentru a schimba sigla într-o stare lipicioasă, vom naviga la fila avansată a modulului de meniu și vom derula în jos până la caseta CSS Logo Logo. Acolo, vom activa opțiunile lipicioase din caseta CSS și vom adăuga o linie de cod CSS cu adresa URL a logo-ului lipicios între paranteze. Asta e!

content: url(addlinkhere);

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ă vă schimbați sigla lipicioasă pe scroll folosind opțiunile lipicioase ale lui Divi. Această abordare vă permite să utilizați două sigle diferite în antetul dvs. fără a fi nevoie să utilizați meniuri separate. Am început prin a vă arăta cum să construiți antetul global, apoi am transformat secțiunea noastră lipicioasă și schimbăm stilurile lipicioase. Am finalizat tutorialul arătându-vă cum să schimbați sigla lipicioasă pe scroll în a treia parte a tutorialului. 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.