22. diel - Domovská stránka - druhá sekcia

V predchádzajúcej lekcii, Domovská stránka - pozadie stránky a prvá sekcia , sme si začali vytvárať obsah domovskej stránky. Nastavili sme jej pozadie, povedali sme si niečo o rozlíšení a zobrazení obrázkov a vytvorili sme si prvú sekciu domovskej stránky, kde sme si vložili nadpis, textový editor, tlačidlá, pozreli sme sa na kotevné odkazy a taktiež sme si ukázali ako si elementy na stránke duplikovať.

V dnešnej lekcii základov WordPress budeme pokračovať vo vytváraní obsahu domovskej stránky. Do druhej sekcie si vložíme textový editor a medailónik a skúsime si ju vizuálne oddeliť od prvej sekcie.

Druhá sekcia

Prvú sekciu máme hotovú, vytvoríme si teda druhú. Opäť si vložíme na stránku kontajner. Tentokrát si ho skúsime vložiť priamo z layoutu stránky. Pod prvou sekciou klikneme na tlačidlo +:

V ďalšom kroku si vyberieme, aké chceme rozloženie kontajnera, či flexbox, alebo mriežku. Vyberieme si flexbox:

Navyše tu v ďalšom kroku vyberáme ešte štruktúru. Jedná sa o rozmiestnenie prvkov, ktoré budeme do nášho kontajnera pridávať. My si rozdelíme flexbox na dve rovnako veľké časti:

Textový editor

Do ľavej časti kontajnera si pretiahneme textový editor:

Do tohto editora si pridáme text:

✔ Responzivní design
✔ Jasná struktura a UX
✔ Moderní vzhled
✔ Web na míru

Tento text si opäť pridáme cez editor v ľavom stĺpci:

Prejdeme do záložky CSS, zarovnáme si text na stred a pri položke Písmo, cez ikonu ceruzky nastavíme veľkosť textu na 30px:

Farbu textu si nastavíme na bielu. Prejdeme teda k položke Farba textu a nastavíme hex - #FFFFFF:

Medailónik

Do pravého stĺpca si pridáme náš medailónik. V zozname prvkov, prejdeme do sekcie Link In Bio, vyberieme Minimalist a pretiahneme ho do pravého stĺpca nášho kontajnera:

Obrázok

Do medailónu si pridáme fotku. Môžete vybrať ilustračnú fotku s názvom /portret.webp, zo zložky so zdrojovými súbormi, ktorú už máte stiahnutú z minula. Ak ste archív so zdrojovými súbormi ešte nestiahli, nájdete ich na stiahnutie v archíve aj pod touto lekciou.

Zložku z archívu si rozbaľte do svojho počítača. Nájdete tu viacero súborov, ktoré budeme postupne vkladať na domovskú stránku.

V záložke Obsah v sekcii Identity klikneme na voľbu Zvoliť obrázok:

Ako vždy sa nám otvorí knižnica médií, do ktorej si nahráme obrázok /portret.webp. Následne ho označíme a klikneme na tlačidlo Vybrať:

Bio

Prejdeme do sekcie Bio, kde si vyplníme základné údaje. Do poľa Nadpis vložíme meno:

Karel Král

Do poľa Title or Tagline vložíme text:

Webdesigner

A do poľa Popis vložíme naše motto:

Tvořím weby, které mají smysl.

Výsledok vyzerá takto:

Ikony sociálnych sietí

V sekcii Icons si môžeme pridať odkazy na naše sociálne siete, alebo pridať nejakú ďalšiu pomocou tlačidla + Add Icon. My sa tým ale teraz nebudeme zaoberať a prejdeme do sekcie CTA Link Buttons.

Tlačidlá

V tejto sekcii môžeme spravovať tlačidlá, ktoré sú súčasťou medailónku. Namiesto tlačidla Get Healthy si nastavíme telefón. Rozklikneme si teda prvé tlačidlo a do políčka HTML napíšeme:

Telefon

V poli Link Type vyberieme možnosť Telephone a do poľa Počet vložíme telefónne číslo:

Namiesto tlačidla Top 10 Recipes, si vytvoríme tlačidlo pre email. Do poľa HTML napíšeme:

Email

V poli Link Type vyberieme možnosť Email a do poľa Mail vložíme náš email, na ktorý chceme, aby nám maily chodili. Ďalej tu máme možnosť predvyplniť predmet emailu. Vložíme si tu text:

Nová poptávka

Do poľa Message potom môžeme predpripraviť aj text samotného emailu. My si toto pole ale necháme prázdne:

Posledné dve tlačidlá si krížikom zmažeme, nebudeme ich potrebovať.

Úprava vzhľadu

Prejdeme do záložky CSS, kde si v sekcii Identity nastavíme veľkosť obrázku na 115px av poli Image Shape vyberieme možnosť Štvorček:

Prejdeme do sekcie Bio, kde si nastavíme farbu textu pre Heading, Tag or Tagline a Description na bielu - hex #FFFFFF:

V sekcii Icons nastavíme rovnakú farbu aj ikonkám sociálnych sietí:

Keď sa teraz pozrieme na medailónik, môžeme si všimnúť, že sa nám nezmenila farba textu pri nadpise "Karel Kráľ" a ani pri titulku "Webdesigner". Je to preto, že tu Elementor uprednostnil naše globálne nastavenia. A preto, že nadpis aj title tu má nastavenú HTML značku H2 a H3, teda nadpisy, text zostal fialový. Vyriešime to jednoducho tak, že zmeníme HTML značku. Vrátime sa do záložky Obsah av sekcii Bio nastavíme pre nadpis a title HTML značku div:

Vidíme, že farba textu sa nám zmenila na bielu. Vrátime sa späť do záložky CSS a nastavíme si vzhľad tlačidiel. V medailóne nejde o klasické tlačidlá a tak tu nie je vzhľad nastavený podľa globálneho nastavenia. Prejdeme do sekcie CTA Link Buttons, kde nastavíme farbu pozadia na fialovú-hex #721FAE:

A nakoniec si ešte pri tlačidlách odstránime podčiarknutie textu. Pri položke písmo si rozklikneme ceruzku av poli Dekorácie nastavíme hodnotu Žiadne:

Teraz si označíme kontajner, v ktorom máme textový editor a zarovnáme si text vertikálne na stred:

Vizuálne oddelenie sekcií

Ešte si trochu upravíme hlavný kontajner, v ktorom máme text aj medailónik, aby sme ho vizuálne oddelili od prvej sekcie. Označíme si teda celý kontajner, prejdeme do záložky CSS, do sekcie Pozadie a pri položke Farba si nastavíme farbu na bielu, s veľkou transparentnosťou - hex #FFFFFF1C:

Potom prejdeme do záložky Pokročilé av sekcii Rozvrhnutie nastavíme horné a spodné odsadenie (padding) na hodnotu 150px:

Odsadenie si nastavíme aj pri prvej sekcii. Označíme si prvý kontajner, v ktorom máme nadpis, text a tlačidlá, prejdeme do záložky Pokročilé av sekcii Rozvrhnutie nastavíme odsadenie spodnej strany na 150px:

Určite ste si všimli, že tu nastavujeme odsadenie iba spodnej strany. Je to preto, že je to prvý element na stránke. Odsadenie hlavičky od obsahu stránky máme nastavené globálne a tak už na hornej strane kontajnera nebudeme nastavovať žiadne ďalšie odsadenie.

V nasledujúcom cvičení, Riešené úlohy k 11.-14. lekciu základov WordPress, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.