8. diel - Globálne nastavenie
V predchádzajúcej lekcii, Menu vo WordPresse , sme si povedali niečo o menu vo WordPresse, ukázali sme si aké máme typy menu a vytvorili sme si hlavné menu a footer menu pre náš web.
V dnešnej lekcii základov WordPress si ukážeme ako funguje režim prispôsobenia vo WordPresse, povieme si niečo o globálnom nastavení a prejdeme si globálne nastavenie typografie, farieb a tlačidiel, aby sme mali pripravené všetko na tvorbu nášho webu.
Globálne nastavenie
Máme všetko pripravené a môžeme sa vrhnúť na nastavenie základného vzhľadu našej stránky. Globálne nastavenia vo WordPresse slúžia na to, aby sme mohli ľahko nastaviť jednotný vzhľad celého webu na jednom mieste.
V globálnom nastavení môžeme nastaviť:
- Typografiu - Písmo pre telo textu (body) a nadpisy (H1–H6) – veľkosť, rez písma, typ fontu.
- Farby - Farby zvýraznenia, odkazov, nadpisov, textu, ohraničenia, pozadia.
- Kontajner - Rozvrhnutie, štýl a šírku kontajnerov na stránke.
- Tlačidlá - Štýl tlačidiel, zaoblenie rohov, farby (pozadia, text, rámček), hover efekt (napr. zmena farby po nabehnutí).
- Presunúť hore - Malé tlačidlo, ktoré sa objaví vpravo dole a umožňuje návrat na začiatok stránky.
- Prístupnosť - Nastavenie pre lepšiu použiteľnosť pre užívateľov so zrakovým alebo iným obmedzením.
- Blokový editor - Týka sa štylovania blokov v Gutenberg editore.
- Rôzne - Ďalšie drobné nastavenia. Líšia sa podľa verzie šablóny a nainštalovaných pluginov.
Prispôsobenie
Ak chceme vo WordPress upraviť vzhľad máme dve možnosti, ako sa k tomuto nastaveniu dostať.
Druhá možnosť ako sa dostať k prispôsobeniu je priamo z náhľadu našej stránky, kde v hornej lište klikneme na Prispôsobiť:
Typografia
Možností prispôsobenia je tu naozaj veľa a budeme sa s ním zoznamovať postupne. Nás budú teraz zaujímať iba globálne prispôsobenie stránky .
Budeme tak môcť ihneď vidieť prehľadne všetky zmeny, ktoré vykonáme.
Tu klikneme na položku Typografia:
Môžeme tu využiť rôzne prednastavenia, môžeme tu upraviť základné písmo a písmo nadpisov, alebo môžeme jednotlivé nadpisy upraviť zvlášť:
My nebudeme používať prednastavené štýly, klikneme na ikonu ceruzky pri položke Písmo bežného textu a položku Font family (druh písma) nastavíme na Poppins:
Položku krížikom zatvoríme a rovnaké písmo nastavíme aj pre nadpisy:
Nastavenie typografie máme hotové, kliknutím na šípku späť sa dostaneme späť do globálneho nastavenia:
Nastavenie farieb
Naším ďalším krokom bude nastavenie farieb .
Rovnako ako pri typografii, nájdeme tu možnosť využiť prednastavené farebné palety. Môžeme tu prednastaviť farby jednotlivých prvkov na stránke, alebo farby pozadia:
Možnosti úprav
My si upravíme farbu zvýraznenia. Najskôr si ale ukážeme aké máme možnosti úpravy jednotlivých farieb . kolieska dve, prvé koliesko je základná farba prvku a druhé nám určuje, ako sa farba prvku zmení keď naň nabehneme myšou, tzv.
Môžeme tu ešte vidieť ikonku zatočenej šípky, pomocou ktorej vrátime farbu do pôvodného nastavenia. Keď na koliesko klikneme, môžeme farbu ľubovoľne upravovať:
Farebným posuvníkom nastavíme požadovanú farbu:
V obdĺžniku nad farebným posuvníkom nastavíme požadovaný odtieň:
A pomocou posledného posuvníka môžeme nastaviť priehľadnosť farby:
Máme tu ale aj ďalšiu možnosť ako farbu nastaviť, pokiaľ poznáme jej RGB, HSL alebo Hex kód. Bude sa pravdepodobne jednať o najčastejšiu variantu, ako budeme farbu vyberať. Photoshop), budeme využívať práve jeden z týchto zápisov. Zaistíme tak, že farba bude vždy všade rovnaká a samozrejme je to najrýchlejšia cesta, ako to dosiahnuť.
RGB (Red, Green, Blue)
RGB farba je zložená z troch zložiek - červenej, zelenej a modrej. Každá má hodnotu od 0 do 255. Jej zápis vyzerá takto:
rgb(114, 31, 74)
Vo WordPresse vidíme zápis takto:
Môžeme si všimnúť, že tu máme ešte hodnotu A. Ide teda o RGBA hodnotu, kde "A" znamená alfa kanál, teda priehľadnosť (opacity).
HSL (Hue, Saturation, Lightness)
Tento formát je intuitívnejší pre grafikov:
- Hue = odtieň (uhol 0–360° na farebnom kruhu)
- Saturation = sýtosť (0–100 %)
- Lightness = svetlosť (0–100 %)
hsl(275, 70%, 40%)
Vo WordPresse vidíme zápis takto:
HEX (Hexadecimálny kód)
Je najpoužívanejší zápis pre webové farby. Začína
# a skladá sa zo 6 znakov (alebo 3 skrátene),
ktoré reprezentujú hodnoty RGB.
#721FAE
Vo WordPresse vidíme zápis takto:
My budeme používať práve tento zápis.
Nastavenie farieb pomocou Hex
Klikneme na farebné koliesko pri prvku Zvýraznenie vyberieme
možnosť Hex a vložíme tu kód #721FAE:
Rovnakým postupom zmeníme farbu pri prvku Nadpis (H1-H6) a
Ohraničenie. Pri prvku Text tela stránky si nastavíme
čiernu farbu, zmeníme teda Hex kód na #000000.
Tlačidlá
Posledný prvok, ktorý si nastavíme globálne budú tlačidlá. Pomocou šípky prejdeme späť do globálneho nastavenia a klikneme na položku Tlačidlá:
Hore si môžeme zvoliť či chceme upraviť primárne, alebo sekundárne tlačidlo. Najprv si nastavíme primárne .
V ďalšom kroku si zvolíme farbu textu tlačidla.
Základnú farbu necháme bielu, zmeníme ale farbu pri
nabehnutí myši #00FFFC
Farba pozadia bude rovnako ako pri texte fialová, hex kód
bude #721FAE. Nastavíme túto farbu
ako pre základné pozadie tak aj pre
hover.
Ešte si nastavíme farby sekundárnych tlačidiel, v hornej lište prejdeme na záložku SECONDARY:
Tu nastavíme základnú farbu textu a okraje na hex
#721FAE.
Globálne nastavenie máme hotovo! Nesmieme ale zabudnúť na dôležitú vec. Všetky zmeny musíme uložiť a publikovať .
Ak by sme na tento krok zabudli, museli by sme všetko nastavovať znova, preto nikdy nezabudnite zmeny publikovať.
V ďalšej lekcii, Záhlavie stránky , si ukážeme ako upraviť záhlavie stránky, nastavíme si pozadie záhlavia, pridáme si do záhlavia logo a taktiež si upravíme vzhľad hlavného menu.
