9. diel - Záhlavie stránky
V predchádzajúcom kvíze, Kvíz - Administračné rozhranie, základné nastavenia a šablóny, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.
V dnešnej lekcii základov WordPress sa naučíme pracovať so záhlavím stránky, vložíme si do neho naše logo, upravíme si vzhľad hlavného menu a ukážeme si ako pracovať s rozvrhnutím záhlavia.
Vzhľad menu
Nastavíme si vzhľad menu v hlavičke našej stránky.
Hlavička stránky
Prejdeme do Prispôsobenia, kde zvolíme možnosť Tvorca záhlavia:
Logo
Vložíme si do hlavičky stránky logo. Kliknite na možnosť Názov webu & Logo:
A z ďalšej ponuky vyberieme možnosť Vybrať Logo:
Otvorí sa nám už známa knižnica médií. Vyberieme logo, ktoré chceme do hlavičky vložiť a klikneme na tlačidlo Vybrať:
V ďalšom kroku sa nám otvorí možnosť orezať obrázok. My si ale klikneme na tlačidlo Neorezávat obrázek:
Tým sme logo vložili do hlavičky webu. Teraz ešte musíme upraviť jeho veľkosť. V sekcii "Šírka loga" mu nastavíme veľkosť 60px:
Farba názvu stránky
Logo máme hotové a teraz si ešte upravíme farbu názvu našej
stránky. Prejdeme do záložky DESIGN a pri položke "Farba
názvu" klikneme na koliesko označujúce základnú farbu a
nastavíme hex #FFFFFF:
Názov webu nám tak zmizol, pretože má teraz rovnakú farbu ako pozadie. To ale čoskoro napravíme.
Pozadia
Pokiaľ nabehneme v režime prispôsobenia myší na niektorý prvok na stránke, objaví sa nám v rohu ikona ceruzky. Pokiaľ na túto ikonku klikneme, dostaneme sa okamžite k úpravám daného prvku a nemusíme sa k úpravám preklikávať cez ľavé menu. Hneď si to vyskúšame. Nájdeme myšou na záhlavie stránky a na ceruzku klikneme:
V ľavom stĺpčeku sa nám otvorili úpravy hlavného záhlavia.
Je nutné si dať pozor, aby sme omylom nenašli myšou na iný prvok napríklad logo, ktoré sme pred chvíľkou pridávali, dostali by sme sa tak k úpravám loga, nie záhlavia.
Zo všetkého najskôr si odstránime spodný okraj záhlavia. Prejdeme do záložky DESIGN av sekcii "Veľkosť spodného okraja" nastavíme hodnotu 0px:
Teraz klikneme na koliesko pri položke "Pozadie" a vyberieme možnosť Farebný prechod:
Pozadie môžeme nastaviť tromi spôsobmi. Prvá možnosť je jednofarebné pozadie, kde nastavujeme farbu tak, ako sme zvyknutí. Druhou možnosťou je farebný prechod, kde môžeme nastaviť ľubovoľné množstvo farieb, typ a uhol prechodu. Treťou možnosťou je potom obrázok.
My si nastavíme do pozadia farebný prechod z dvoch farieb. Kliknite na
ľavé koliesko, ktoré teraz v prechode znázorňuje svetlo modrú farbu a
nastavíme si tu fialovú - hex #721FAE:
Máme nastavenú počiatočnú farbu farebného prechodu.
Teraz klikneme na pravé koliesko na farebnom prechode, ktoré teraz
znázorňuje svetlo fialovú a nastavíme si tu modrú farbu - hex
#3008FB:
Ak by sme potrebovali nastaviť ďalšie farby stačí nabehnúť myšou kamkoľvek na farebný prechod, kde chceme umiestniť ďalšiu farbu a kliknúť na koliesko so symbolom +, ktoré sa nám tu objavia. Pokiaľ chceme naopak niektorý z bodov odstrániť, klikneme na tlačidlo Odstrániť kontrolný bod. S jednotlivými bodmi môžeme tiež pohybovať a upraviť tak finálnu podobu farebného prechodu podľa našich predstáv:
My si necháme nastavené iba dve farby a nastavíme si ešte typ a uhol prechodu. Typ prechodu môžeme mať lineárny alebo lúčovitý. Necháme si tu lineárne a uhol nastavíme na 45 °:
Vzhľad menu
Upravíme si ešte farbu položiek menu, aby nám v záhlaví viac vynikli. Nájdeme si myšou na položky menu a klikneme opäť na ikonu ceruzky:
Prejdeme do záložky DESIGN, kde máme ako prvú položku Štýl ponuky pri prejdení. Môžeme si tu určiť aký efekt sa vykoná pri nabehnutí na niektorú z položiek menu. Na výber máme:
- Nič
- Priblížiť
- Podčiarknuť
- Nadtrhnúť
Ďalej si tu môžeme upraviť podponuku menu. My tu
podponuku nemáme, ale upravíme si ešte farbu ponuky. Pri
položke Text/Odkaz máme tri farebné kolieska, prvé označuje
farbu základnú, druhé farbu položky menu pri
nabehnutí myši a tretiu aktívnu položku menu. My
nastavíme základnú farbu na bielu - hex #FFFFFF, pri prejdení
myši nastavíme farbu tyrkysovú - hex #00FFFC a rovnakú farbu
nastavíme aj aktívnej položke:
Rozvrhnutie hlavičky
V spodnej časti stránky môžeme vidieť rozvrhnutie nášho záhlavia:
Záhlavie máme rozdelené na tri sektory. Môžeme si tu jednotlivé položky presúvať alebo pridávať nové pomocou symbolu +. My si presunieme Názov webu & Logo do stredu a položku Hlavné menu presunieme doľava:
Záhlavie tým máme hotové a môžeme zmeny uložiť kliknutím na tlačidlo Publikovať. Výsledok bude vyzerať takto:
V ďalšej lekcii, Päta stránky , sa zameriame na zástupné značky, upravíme si pätičku stránky a copyright, pozrieme sa aj na widgety a ako ich používať a pridáme si aj ikonky pre sociálne siete.
