Duhet të krijoni një kokë globale për veten tuaj Faqja e internetit me Divin?
Një kokë globale do të shfaqet kudo në tuaj Site Web, përveç nëse i keni caktuar një titull tjetër faqes ose postimit.
Le të fillojmë!
studim
Këtu është një pamje paraprake e titullit global që do të dizajnojmë.
Konfiguro menunë tuaj kryesore
Filloni duke krijuar menunë tuaj në cilësimet e paraqitjes së faqes suaj të WordPress.
Hyni në opsionin Theme Builder nën Divi
Në opsionet e Tema divi, klikoni Ndërtuesin e Temave. Pasi të jeni atje, do të vini re një shabllonin e faqes në internet Default.
Shtoni dhe krijoni një kokë globale
Le shabllonin e faqes në internet default është vendi ku mund të filloni të krijoni kokën tuaj të personalizuar globale, trupin global dhe fundin global. Klikoni "Shto kokën globale" dhe vazhdoni duke klikuar "Ndërtoni kokën globale" për të filluar procesin.
Cilësimet e seksionit
sizing
Hapni cilësimet e seksionit që do të gjeni në faqe, në skedën Style, ndryshoni dimensionet në madhësi të ndryshme të ekranit.
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 1280 px (për PC dhe tablet), 100% (për celular)
ndarje
Hiqni të gjitha kufijtë e brendshëm të sipërm dhe të poshtëm
- Maja e marzhit të brendshëm: 0 px
- Marzhi i brendshëm i poshtëm: 0 px
kufi
Tani shtoni një rreze kufiri në këndet e poshtme majtas dhe djathtas të seksionit.
- Poshtë majtas: 50 px
- Poshtë djathtas: 50 px
Kuti me hije
Le të shtojmë gjithashtu një hije delikate kutie.
- Forca e turbullimit të hijes së kutisë: 60 px
- Ngjyra e fontit të titrave: rgba(0,0,0,0.13)
dukshmëri
- Përmbytje horizontale: E dukshme
- Vërshimi vertikal: I dukshëm
Kushtojini një rresht të ri kokës
Tani që kemi përfunduar cilësimet e seksionit të përgjithshëm, mund të fillojmë të shtojmë rreshta. Në total, do të na duhen dy rreshta; një që i dedikohet kokës dhe një që lejon shfaqjen e artikujve të menysë. Ne do të fillojmë me kokën duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
Cilësimet e linjës
Cilësimet e sfondit
Pa shtuar module në linjë, hapni cilësimet e linjës dhe ndryshoni ngjyrën e sfondit.
- Sfondi: #38383F
sizing
Pastaj modifikoni parametrat e madhësisë së linjës.
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Hapësira e kolonave: 1
- Gjerësia maksimale: 100%
- Gjerësia maksimale: 100%
Duke parë
Tani le të sigurohemi që kolonat të shfaqen pranë njëra-tjetrës në ekrane më të vogla duke shtuar këtë rresht të kodit CSS në elementin e rreshtit kryesor.
01
display: flex;
Shtoni modulin e imazhit në kolonën 1
Shkarko logon
Pasi të keni përfunduar cilësimet e rreshtit, është koha të filloni të shtoni module. Shtoni një modul imazhi në kolonën 1 dhe ngarkoni logon tuaj.
radhitje
Shkoni te skeda Stil dhe rreshtoni imazhin në të majtë.
sizing
Ndryshoni gjithashtu gjerësinë e modulit.
ndarje
Gjithashtu shtoni vlerat e marzhit të personalizuar.
Shtoni modulin e përcjelljes së mediave sociale në kolonën 2
Shtoni rrjetet sociale
Le të shkojmë në kolonën e dytë. Atje do të na duhet një modul i përcjelljes së mediave sociale. Shtoni rrjetet sociale sipas zgjedhjes suaj. Mund të shtoni sa më shumë media sociale që dëshironi.
Ngjyra e sfondit të rrjetit social
Më pas, hapni çdo rrjet social individualisht dhe ndryshoni ngjyrën e sfondit në një ngjyrë plotësisht transparente.
- Ngjyra e sfondit: rgba (0,0,0,0)
radhitje
Kthehuni te cilësimet normale të modulit dhe më pas ndryshoni shtrirjen e plotë të modulit.
ikonë
Ndryshoni gjithashtu cilësimet e ikonës.
- Ngjyra e ikonës: #FFFFFF
- Përdorni madhësinë e personalizuar të ikonës: Po
- Madhësia e shkronjave të ikonës: 16 px (PC dhe tablet), 12 px (telefon)
ndarje
Shtoni një diferencë të lartë.
Shtoni modulin Button në kolonën 3
Kaloni në kolonën e tretë dhe shtoni një modul Button që përmban një tekst sipas dëshirës tuaj.
radhitje
Ndryshoni shtrirjen e butonit në skedën Style.
Cilësimet e butonit
Personalizoni cilësimet e butonit si më poshtë:
- Përdorni stile të personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 12 px (desktop), 10 px (tabletë), 8 px (telefon)
- Ngjyra e tekstit të butonit: #ffffff
- Butoni i sfondit: #ffae25
- Gjerësia e kufirit të butonit: 0 piksel
- Butoni Border Radius: 0 pixel
- Hapësira e shkronjave të butonave: 5 px (desktop), 3 px (tableti dhe telefoni)
- Butoni i Fontit: Hap Asnjë
- Butoni i lehtë i dritës: Tekst i trashë
- Stili i butonit të kopjimit: TT
ndarje
Personalizo vlerat e marzhit.
Kushtojini një rresht të ri shiritit të menusë
Pasi të keni plotësuar rreshtin e dedikuar për kokën globale, mund të shtoni një rresht tjetër pak më poshtë.
Cilësimet e linjës
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e madhësisë në skedën Style.
ndarje
Pastaj hiqni të gjitha kufijtë e poshtëm dhe të sipërm.
Shtoni një modul meny në kolonë
Zgjidhni Meny
Më pas, shtoni një modul Menu në kolonë dhe zgjidhni menunë që keni krijuar në pjesën e parë të këtij tutoriali.
natyrë
Kaloni në skedën Stil dhe ndryshoni cilësimet e paraqitjes si më poshtë:
Lidhjet
Ndryshoni gjithashtu ngjyrën e lidhjes aktive në skedën Style.
- Ngjyra aktive e lidhjes: #ffae25
Menyja e lëshimit
Bëni të njëjtën gjë për ngjyrën e linjës së menusë rënëse në cilësimet e menysë rënëse.
- Ngjyra e rreshtit zbritës: #ffae25
ikonë
- Ngjyra e ikonës së menusë së hamburgerit: #ffae25
Teksti i menysë
Me cilësimet e tekstit të menysë.
- Fonti i menysë: Prata
- Ngjyra e tekstit të menysë: #000000
Lëreni kokën dhe shiritin e menusë të qëndrojnë në krye
Hap cilësimet e seksionit
Pasi të keni përfunduar rreshtin e dytë, gjithçka që duhet të bëni është të siguroheni që seksioni të qëndrojë në krye të faqeve dhe postimeve tona. Për ta bërë këtë, ne do të hapim përsëri cilësimet e seksionit.
Shtoni CSS të personalizuar në elementin kryesor
Më pas, do të shkojmë në skedën e avancuar dhe do të shtojmë disa rreshta të kodit CSS në elementin kryesor të seksionit.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Ruani opsionet globale të titullit dhe ndërtuesit të temave
Pasi të keni përfunduar të gjithë dizajnin e kokës globale, sigurohuni që ta ruani dizajnin përpara se të dilni nga paraqitja e shabllonit. Pasi të jeni jashtë paraqitjes së shabllonit, ruani të gjitha ndryshimet e ndërtuesit të temave dhe keni mbaruar!
studim
Tani që kemi kaluar nëpër të gjitha hapat, le t'i hedhim një vështrim të fundit rezultatit.
Përfundim
Në këtë artikull, ne ju treguam se si të krijoni një kokë globale të personalizuar me ndërtuesin e ri të temave të Divi. Ky tutorial tregon se sa e lehtë është të krijosh tituj të bukur dhe t'i zbatosh ato në tërësinë tënde Site Web ose lloje specifike postimesh me porosi.
Shpresojmë që t'ju ndihmojë në personalizimin e faqes tuaj të internetit me Theme Builder.
Nëse keni ndonjë pyetje ose sugjerim, ju lutemi na lini një koment në seksioni i komenteve më poshtë.
...
