Trebate stvoriti globalno zaglavlje za svoj web stranica sa Divi?
Globalno zaglavlje pojavit će se posvuda na vašem web stranica, osim ako stranici ili objavi niste dodijelili drugo zaglavlje.
Započnimo!
pregled
Evo pregleda globalnog zaglavlja koje ćemo dizajnirati.
Konfigurirajte svoj glavni izbornik
Započnite stvaranjem izbornika u postavkama izgleda vaše WordPress stranice.
Pristupite opciji Theme Builder pod Divi
U opcijama od Divi tema, kliknite Theme Builder. Kad stignete tamo, primijetit ćete a predložak web stranice Zadana.
Dodajte i stvorite globalno zaglavlje
Le predložak web stranice default je mjesto gdje možete početi stvarati svoje prilagođeno globalno zaglavlje, globalno tijelo i globalno podnožje. Pritisnite "Dodaj globalno zaglavlje" i nastavite klikom na "Izradi globalno zaglavlje" da biste započeli postupak.
Postavke odjeljka
dimenzioniranje
Otvorite postavke odjeljka koje ćete pronaći na stranici, na kartici Stil, promijenite dimenzije na različitim veličinama zaslona.
- Maksimalna širina: 100%
- Maksimalna širina: 1280px (za PC i tablet), 100% (za mobitel)
razmak
Uklonite sve gornje i donje unutarnje margine
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
granica
Sada dodajte radijus obruba donjem lijevom i desnom kutu odjeljka.
- Dolje lijevo: 50px
- Dolje desno: 50px
Kutija sjena
Dodajmo i suptilnu sjenu okvira.
- Jačina zamućenja sjene okvira: 60px
- Boja fonta titla: rgba(0,0,0,0.13)
vidljivost
- Vodoravno prelijevanje: Vidljivo
- Vertikalni preljev: vidljiv
Posvetite novi redak zaglavlju
Sada kada smo dovršili opće postavke odjeljka, možemo početi dodavati retke. Ukupno će nam trebati dvije linije; onaj koji je posvećen zaglavlju i onaj koji omogućuje prikaz stavki izbornika. Počet ćemo sa zaglavljem dodavanjem novog retka koristeći sljedeću strukturu stupca:
Postavke linije
Pozadinske postavke
Bez dodavanja modula u liniju, otvorite postavke linije i promijenite boju pozadine.
- Pozadina: #38383F
dimenzioniranje
Zatim izmijenite parametre veličine linije.
- Koristi prilagođenu širinu žlijeba: DA
- Razmak između stupaca: 1
- Maksimalna širina: 100%
- Maksimalna širina: 100%
Pregled
Sada provjerimo da li se stupci pojavljuju jedan pored drugog na manjim zaslonima dodavanjem ovog retka CSS koda glavnom elementu retka.
01
display: flex;
Dodajte slikovni modul u stupac 1
Preuzmite logotip
Nakon što ste dovršili postavke redaka, vrijeme je da počnete dodavati module. Dodajte slikovni modul u stupac 1 i prenesite svoj logotip.
poravnanje
Idite na karticu Stil i poravnajte sliku ulijevo.
dimenzioniranje
Također promijenite širinu modula.
razmak
Također dodajte prilagođene vrijednosti margina.
Dodajte modul za praćenje društvenih medija u stupac 2
Dodajte društvene mreže
Idemo na drugi stupac. Tamo će nam trebati modul za praćenje društvenih medija. Dodajte društvene mreže po svom izboru. Možete dodati onoliko društvenih medija koliko želite.
Boja pozadine društvenih mreža
Zatim otvorite svaku društvenu mrežu pojedinačno i promijenite boju pozadine u potpuno prozirnu boju.
- Boja pozadine: rgba (0,0,0,0)
poravnanje
Vratite se na normalne postavke modula i zatim promijenite potpuno poravnanje modula.
ikona
Promijenite i postavke ikona.
- Boja ikone: #FFFFFF
- Koristite prilagođenu veličinu ikone: Da
- Veličina fonta ikone: 16px (PC i tablet), 12px (telefon)
razmak
Dodajte gornju marginu.
Dodajte modul Button u stupac 3
Prijeđite na treći stupac i dodajte modul Button koji sadrži tekst po vašem izboru.
poravnanje
Promijenite poravnanje gumba na kartici Stil.
Postavke gumba
Prilagodite postavke gumba na sljedeći način:
- Koristite prilagođene stilove za gumb: Da
- Veličina teksta gumba: 12px (desktop), 10px (tablet), 8px (telefon)
- Boja teksta gumba: #ffffff
- Pozadinski gumb: #ffae25
- Širina obruba gumba: 0 piksela
- Gumb radijusa obruba: 0 piksela
- Razmak između slova: 5 px (desktop), 3 px (tablet i telefon)
- Gumb za font: Otvori Ništa
- Gumb mekog svjetla: podebljani tekst
- Stil gumba za kopiranje: TT
razmak
Prilagodite vrijednosti marže.
Posvetite novi redak traci izbornika
Nakon što ispunite redak posvećen globalnom zaglavlju, možete dodati još jedan redak odmah ispod.
Postavke linije
dimenzioniranje
Bez dodavanja modula, otvorite postavke linije i promijenite postavke veličine na kartici Stil.
razmak
Zatim uklonite sve donje i gornje margine.
Dodajte modul izbornika u stupac
Odaberite Izbornik
Zatim dodajte modul izbornika u stupac i odaberite izbornik koji ste stvorili u prvom dijelu ovog vodiča.
raspored
Prijeđite na karticu Stil i promijenite postavke izgleda na sljedeći način:
Veze
Također promijenite boju aktivne veze na kartici Stil.
- Boja aktivne veze: #ffae25
Padajući izbornik
Učinite isto za boju linije padajućeg izbornika u postavkama padajućeg izbornika.
- Boja padajućeg reda: #ffae25
ikona
- Boja ikone izbornika za hamburger: #ffae25
Tekst izbornika
S postavkama teksta izbornika.
- Font izbornika: Prata
- Boja teksta izbornika: #000000
Neka zaglavlje i traka izbornika ostanu na vrhu
Otvorite postavke odjeljka
Nakon što dovršite drugi redak, sve što trebate učiniti je osigurati da odjeljak ostane na vrhu naših stranica i postova. Da bismo to učinili, ponovno ćemo otvoriti postavke odjeljka.
Dodajte prilagođeni CSS glavnom elementu
Zatim ćemo prijeći na naprednu karticu i glavnom elementu odjeljka dodati nekoliko redaka CSS koda.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Spremite opcije globalnog zaglavlja i izrade tema
Nakon što dovršite cjelokupni dizajn globalnog zaglavlja, svakako spremite dizajn prije izlaska iz izgleda predloška. Nakon što izađete iz izgleda predloška, spremite cijele promjene alata za izradu tema i gotovi ste!
pregled
Sada kada smo prošli sve korake, pogledajmo zadnji rezultat.
Zaključak
U ovom smo vam članku pokazali kako izraditi prilagođeno globalno zaglavlje s Divi novim alatom za izradu tema. Ovaj vodič pokazuje kako je jednostavno stvoriti prekrasna zaglavlja i primijeniti ih na cijeli web stranica ili određene prilagođene vrste postova.
Nadamo se da će vam pomoći u prilagođavanju vaše web stranice s Theme Builderom.
Ako imate bilo kakvih pitanja ili prijedloga, ostavite nam komentar u odjeljak za komentare u nastavku.
...
