Doriți să creați un antet frumos transparent și lipicios cu Divi?
Când vine vorba de configurarea unui antet global pentru dvs site-ul web, există multe moduri de a o aborda. Una dintre cele mai subtile abordări este un antet transparent.
Dacă decideți să utilizați un antet transparent, dar aveți nevoie ca acesta să fie lipicios atunci când derulați, vă va plăcea acest tutorial. Tranziția dintre transparent și lipicios este fără efort!
Să mergem.
studiu
Înainte de a vă scufunda în tutorial, să aruncăm o privire rapidă asupra rezultatului.
Creați un nou șablon de antet global
Accesați Divi > Theme Builder.
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 acestui articol. Deschideți setările secțiunii și adăugați o culoare de fundal neagră.
- Fundal: #000000
spaţierea
Comutați la fila Stil secțiune și eliminați toate Marginile interioare (Sus și Jos) în mod implicit.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Adăugați o linie nouă
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
Adăugați un modul Text la coloană
Adăugați un modul Text în coloana de rând și introduceți un mesaj la alegere.
Setări text
Comutați la fila Stil modul și modificați setările textului în consecință:
- Font text: Oswald
- Stilul de copiere a textului: TT
- Culoare text Text: #ffffff
- Dimensiunea textului:
- Desktop: 19px
- Tabletă: 18px
- Telefon: 16px
- Alinierea textului: centrat
Adăugați secțiunea # 2
spaţierea
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 deveni lipicios la derulare.
Deschideți setările secțiunii și eliminați toate marginile interne (sus și jos) în mod implicit în fila Stil.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Adăugați o linie nouă
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
Culoare de fundal transparentă
Deschideți setările liniei și aplicați o culoare de fundal complet transparentă liniei.
- Fundal: rgba (255,255,255,0)
dimensionarea
Comutați la fila Stil linie și modificați setările de dimensionare.
- Utilizați lățimea jgheab personalizată: da
- Distanța între coloane: 1
- Lățime maximă: 100%
- Lățime maximă: 100%
spaţierea
Apoi adăugați margini interne personalizate (stânga și dreapta).
- Marja interioară stângă: 10%
- Marja internă dreapta: 10%
Cutie de umbră
Apoi, aplicați o umbră de casetă transparentă. Mai târziu, în tutorial, vom folosi această umbră de casetă într-o stare lipicioasă cu o culoare de umbră diferită.
- Intensitatea estomparii umbrei casetei: 50px
- Culoare font subtitrare: rgba (0,0,0,0)
Poziţie
Pentru a vă asigura că linia apare în partea de sus a cuprins a 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 ecrane de dimensiuni mai mici.
Adăugați modul Meniu în coloana 1
Selectați un meniu
Acum că setările noastre de rând sunt la locul lor, este timpul să adăugați module, începând cu un modul Meniu din coloana 1. Selectați meniul la alegere.
Descărcați logo-ul
Apoi încărcați un logo.
Eliminați culoarea de fundal
De asemenea, eliminați culoarea de fundal din modul.
Setări text din meniu
Comutați la fila Stil a modulului și modificați setările textului meniului în consecință:
- Meniu font: Oswald
- Meniu Soft Light: Bold
- Copiere meniul stil: TT
- Culoarea textului meniului: #efefef
- Dimensiunea textului meniului: 18px
- Aliniere text: dreapta
Setări meniului derulant
Modificați, de asemenea, setările meniului derulant.
- Culoarea rândului dropdown: rgba(0,0,0,0)
- Culoarea de fundal a meniului mobil: rgba (0,0,0,0,95)
Setări pictograme
Apoi, schimbați culorile pictogramei în setările pictogramei.
- Culoarea pictogramei coș: #ffffff
- Culoarea pictogramei de căutare: #ffffff
- Culoarea pictogramei meniului Hamburger: #ffffff
Setări logo
De asemenea, schimbăm culoarea logo-ului nostru în setările logo-ului prin schimbarea filtrului de inversare a imaginii.
- Inversare imagine: 90%
dimensionarea
În continuare, vom atribui o înălțime maximă logo-ului nostru.
- Lățimea maximă a siglei: 40 pixeli
spaţierea
În continuare, vom adăuga umplutură de sus și de jos pe ecrane de dimensiuni mici.
- Marja internă de vârf:
- Tabletă și telefon: 10px
- Marja internă inferioară:
- Tabletă și telefon: 10px
Adăugați modulul Button în coloana 2
Adaugă text la Button
În coloana 2, singurul modul de care avem nevoie este un modul Button. Adăugați un text la alegere.
Aliniere butoane
Comutați la fila Stil modul și modificați alinierea butoanelor.
- Alinierea butoanelor: dreapta
Setări buton
Personalizați butonul în continuare.
- Utilizați stiluri personalizate pentru Buton: Da
- Dimensiunea textului butonului: 16px
- Culoarea textului butonului: #ffffff
- Buton de fundal: #ed4441
- Culoarea marginii butonului: #ed4441
- Butonul Raza chenarului: 0 pixeli
- Spațiere între litere butoane: 4px
- Font pentru buton: Oswald
- Buton Soft Light: text îngroșat
- Buton de copiere a stilului: TT
- Afișați pictograma butonului: Da
- Culoarea pictogramei butonului: #1a1a1a
spaţierea
Și completați setările modulului adăugând valori de spațiere personalizate.
- Marja de sus: -70px
- Marginea internă de sus și de jos: 25 px
Aplicați efecte lipicioase personalizate
Faceți secțiunea #2 lipicioasă
Acum că am pus bazele antetului nostru, este timpul să aplicăm efectul lipicios! Pentru a face acest lucru, începeți prin a deschide setările din a doua secțiune și aplicați următoarele setări lipicioase la fila avansată:
- Poziție lipicioasă: lipiți de sus
- Deplasare superioară stick: 0px
- Mimit lipicios de jos: niciunul
- Decalaj față de elementele lipicioase din jur: DA
- Stiluri implicite de tranziție și lipite: DA
Lipiți culoarea de fundal
Acum că opțiunea sticky este activată, putem face modificări ale opțiunii sticky la toate elementele din secțiune. Vom începe prin a deschide rândul care conține meniul nostru și a aplica o culoare de fundal albă opțiunii lipicioase.
- Culoare de fundal: #FFFFFF
Spațiere lipicioasă dintre rânduri
În continuare, vom modifica valorile de spațiere ale funcției sticky a liniei.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Sticky Row Shadow Box
De asemenea, schimbăm culoarea umbrei casetei într-o stare lipicioasă.
- Culoare font subtitrare: rgba(0,0,0,0.08)
Poziționare linie lipicioasă
În continuare, vom readuce poziționarea rândului la relativ într-o stare lipicioasă.
- Poziție: relativă
- Origine offset: stânga sus
Setări de text pentru meniul de stare lipită
În continuare, vom schimba culoarea textului meniului în starea lipicioasă.
- Culoarea textului meniului: #000000
Setările meniului drop-down în stare lipicioasă
Cu culoarea de fundal a meniului mobil în setările meniului derulant.
- Meniu mobil, culoare de fundal: #ffffff
Culorile pictogramei meniului în stare lipicioasă
De asemenea, schimbați culorile pictogramei într-o stare lipicioasă.
- Culoarea pictogramei coș: #000000
- Culoarea pictogramei de căutare: #000000
- Culoarea pictogramei meniului Hamburger: #000000
Filtru de logo în stare lipicioasă
Apoi, eliminați filtrul inversat din imaginea logo-ului într-o stare lipicioasă.
- Inversare imagine: 0%
Spațierea butoanelor în stare lipicioasă
Și finalizați tutorialul eliminând marginea superioară negativă din buton atunci când este în stare lipicioasă.
- Marja superioară: 0px
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire la rezultatul final.
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să combinați constructorul de tematică de Divi cu noile opțiuni sticky. Mai exact, v-am arătat cum să treceți de la un antet transparent la un antet lipicios în stil diferit în timp ce derulați.
Această abordare vă permite să îmbinați designul paginii cu meniul, menținând în același timp un antet frumos și lipicios atunci când derulați.
Dacă doriți să aflați mai multe despre Divi, nu ezitați să vizitați catalogul nostru de Tutoriale Divi. De asemenea, puteți consulta Cum se creează pagina de blog cu modulul Divi Blog
Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru realizarea proiectelor dvs. de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
