Želite li stvoriti ljepljivo zaglavlje s Divi ?
Stvaranje ljepljivih zaglavlja teklo je glatko od dolaska teme, ali smatramo da mnogi ljudi ne znaju kako ih izraditi bez korištenja dodatnog koda. Međutim, i to je vrlo lako učiniti zahvaljujući ljepljivim opcijama Divi.
Zapravo, ne samo da je lakša, nego ova metoda nudi više mogućnosti za prilagodbu dizajna.
Stoga ćemo odvojiti vrijeme u ovom vodiču da vam pokažemo kako stvoriti ultra personalizirano ljepljivo zaglavlje pomoću postavki Divi.
pregled
Prije nego što zaronimo u ovaj vodič, pogledajmo rezultat koji želimo postići.
Izgradite strukturu elementa zaglavlja
Stvorite novi globalni predložak zaglavlja
Pristupite Divi Theme Builderu i počnite stvarati novo globalno ili prilagođeno zaglavlje.
Parametri odjeljka 1
Gradijentna pozadina
Kad uđemo u uređivač predložaka, počet ćemo s izgradnjom strukture naših elemenata zaglavlja. U drugom dijelu ovog vodiča usredotočit ćemo se na primjenu različitih ljepljivih postavki kako bismo dovršili dizajn ljepljivog zaglavlja.
Pročitajte također: Kako napraviti klizni i potisni izbornik u DIVI
U uređivaču predložaka primijetit ćete odjeljak. Otvorite ovaj odjeljak i primijenite gradijent pozadine.
- Boja 1: #ffba60
- Boja 2: #ffd6a0
- Smjer gradijenta: 90 stupnjeva
- Početna pozicija: 50%
- Konačna pozicija: 50%
razmak
Zatim uklonite sve unutarnje margine (gornju i donju) prema zadanim postavkama.
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
Dodajte novi redak
Struktura stupca
Da bismo stvorili gornju traku zaglavlja, u naš odjeljak ćemo dodati novi red koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja bilo kakvih modula, otvorite postavke retka i promijenite postavke veličine na sljedeći način:
- Koristite prilagođenu širinu žlijeba: Da
- Razmak između stupaca: 1
- Maksimalna širina: 95%
- Maksimalna širina: 2 piksela
razmak
Također dodajte prilagođene unutarnje margine (gornju i donju).
- Unutarnji rubni vrh: 15px
- Donja unutarnja margina: 15px
CSS glavni element
A kako bismo osigurali da stupci ostanu jedan pored drugog na manjim veličinama zaslona, dodat ćemo redak CSS koda u element glavnog retka u naprednoj kartici.
display: flex;
Dodajte modul 'Pratite nas na društvenim medijima' u stupac 1
Dodajte društvene mreže po izboru
Vrijeme je za dodavanje modula, počevši od modula 'Pratite nas na društvenim medijima' u stupcu 1. Dodajte društvene mreže po svom izboru zajedno s njihovim odgovarajućim vezama.
Uklonite boju pozadine sa svake društvene mreže
Nastavite uklanjanjem svake boje pozadine s društvene mreže zasebno.
Postavke ikona
Zatim se vratite na opće postavke modula i promijenite boju ikone na kartici dizajna.
- Boja ikone: #26333a
razmak
Također dodajte gornju maržu.
- Gornja margina: 5 px
Dodajte modul gumba u stupac 2
Dodajte tekst gumbu
U stupcu 2, jedini modul koji nam treba je modul Button. Dodajte tekst po vlastitom izboru.
Dodaj link
Zatim dodajte vezu.
Poravnanje gumba
Zatim prijeđite na karticu Stil i promijenite poravnanje gumba.
- Poravnanje gumba: desno
Postavke gumba
Gumb također prilagođavamo.
- Koristite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 14 px
- Boja teksta gumba: #26333a
- Širina obruba gumba: 2 px
- Boja obruba gumba: #26333a
- Polumjer obruba gumba: 0 piksela
- Gumbi za razmak između slova: 4 px
- Gumb mekog svjetla: podebljani tekst
- Gumb za kopiranje stila: velika slova
- Prikaži gumb: da
razmak
A mi ćemo dovršiti postavke modula dodavanjem unutarnjih margina (vrh i dno) postavkama razmaka.
- Unutarnji rubni vrh: 10px
- Donja unutarnja margina: 10px
Dodajte odjeljak 2
Gradijentna pozadina
Dodajte još jedan uobičajeni odjeljak odmah ispod prethodnog. Ovaj odjeljak bit će posvećen našem jelovniku i bit će ljepljiv u drugom dijelu ovog vodiča.
Otkrijte također: Kako stvoriti globalno zaglavlje s obrascem za prijavu u DIVI
Nakon što dodate odjeljak, primijenite gradijent pozadine.
- Boja 1: #ffffff
- Boja 2: #f7f7f7
- Vrsta gradijenta: linearni
- Smjer gradijenta: 90 stupnjeva
- Početna pozicija: 25%
- Konačna pozicija: 25%
razmak
Prebacite se na karticu Stil odjeljka i prema zadanim postavkama uklonite sve unutarnje margine (gornju i donju).
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
Dodajte novi redak
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak pomoću sljedeće strukture stupaca:
dimenzioniranje
Prijeđite na karticu Stil i promijenite postavke veličine na sljedeći način:
- Koristite prilagođenu širinu žlijeba: Da
- Razmak između stupaca: 1
- Maksimalna širina: 2 piksela
razmak
Zatim uklonite sve unutarnje margine (gornju i donju) prema zadanim postavkama.
- Unutarnji rubni vrh: 10px
- Donja unutarnja margina: 10px
Dodajte modul izbornika u stupac
Odaberite izbornik
Zatim dodajte modul izbornika u stupac retka i odaberite dinamički izbornik po svom izboru.
Preuzmite logotip
Zatim prenesite logotip.
Uklonite boju pozadine
Zatim uklonite zadanu bijelu boju pozadine iz modula.
Postavke teksta izbornika
Prijeđite na karticu Stil i također prilagodite postavke teksta izbornika.
- Izbornik za prigušeno svjetlo: Podebljani tekst
- Boja teksta izbornika: #002d4c
- Veličina teksta izbornika: 15px
- Razmak između slova izbornika: 4px
- Poravnanje teksta: desno
Postavke teksta padajućeg izbornika
Zatim napravite neke promjene u postavkama padajućeg izbornika.
- Boja pozadine padajućeg izbornika: #ffffff
- Boja linije padajućeg izbornika: #002d4c
Postavke ikona
S postavkama ikona.
- Boja ikone košarice: #002d4c
- Boja ikone pretraživanja: #002d4c
- Boja ikone jelovnika hamburgera: #002d4c
dimenzioniranje
I dovršite postavke modula dodavanjem maksimalne visine logotipa u postavke veličine.
- Maksimalna visina logotipa: 60 piksela
2. Primijenite prilagođene ljepljive efekte
Učinite dio #2 ljepljivim
Sada kada smo stvorili strukturu naših elemenata zaglavlja, vrijeme je da naš drugi odjeljak učinimo ljepljivim i prilagodimo njegove elemente kada su u ljepljivom stanju.
Vidi također: Kako stvoriti vertikalni navigacijski izbornik u DIVI
Otvorite postavke drugog odjeljka i prebacite se na naprednu karticu. Tamo idite na postavke efekata pomicanja i primijenite sljedeće ljepljive opcije:
- Ljepljiva pozicija: Drži se vrha
- Ljepljivi gornji pomak: 0px
- Donja ljepljiva granica: Nema
- Odmak od okolnih ljepljivih elemenata: Da
- Zadani i ljepljivi stilovi prijelaza: Da
Promjena pozadine gradijenta odjeljka u ljepljivom stanju
Sada kada je naš odjeljak postao ljepljiv, pojavit će se dodatna opcija u našim postavkama odjeljka, retka i modula; ljepljiva opcija. Kada kliknete na ovu ikonu, moći ćete stvoriti alternativni stil za element koji ste odabrali u ljepljivom stanju.
Započnite odlaskom na postavke pozadine u drugom odjeljku i primjenom sljedeće ljepljive gradijentne pozadine:
- Boja 1: #26333a
- Boja 2: #1e272f
Stretch konop u ljepljivom stanju
Zatim ćemo otvoriti liniju koja sadrži modul Izbornik i promijeniti ćemo širinu u ljepljivom stanju.
- Maksimalna širina: 95%
Uklonite podstavu u ljepljivom stanju
Također uklanjamo unutarnje margine (gornju i donju) iz ljepljivog stanja naše linije.
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
Promjena boje teksta izbornika u ljepljivom stanju
Zatim ćemo promijeniti boju teksta izbornika u ljepljivo stanje.
- Boja teksta izbornika: #ffbd68
Promjena boje ikona izbornika u ljepljivom stanju
S bojama ikona.
- Boja ikone košarice: #ffffff
- Boja ikone pretraživanja: #ffffff
- Boja ikone jelovnika hamburgera: #ffffff
Uklonite visinu logotipa u ljepljivom stanju
I na kraju, promijenit ćemo maksimalnu visinu logotipa na nulu u ljepljivom stanju. Ovo će potpuno ukloniti logotip iz našeg zaglavlja nakon što se omoguće ljepljive postavke odjeljka.
Maksimalna visina logotipa: 0px
Učinjeno je !
Svakako spremite sve promjene Divi Theme Builder nakon što završite s dizajniranjem zaglavlja i pregledajte ga na svom web stranica.
pregled
Sada kada smo prošli sve korake, pogledajmo zadnji rezultat.
Preuzmite DIVI odmah!!!
Zaključak
tamo! To je to za ovaj članak. U potonjem smo vam pokazali kako stvoriti ljepljivo zaglavlje pomoću konstruktora teme Divi i prilagođenih stilova.
Kako biste se upoznali s Divinim Theme Builderom, također možete pročitati naš članak o Kako stvoriti globalno zaglavlje pomoću Divi's Theme Builder
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
