Lekce 21 - Domovská stránka - druhá sekce Nové

V předchozí lekci, Domovská stránka - pozadí stránky a první sekce, jsme si začali vytvářet obsah domovské stránky. Nastavili jsme její pozadí, řekli jsme si něco o rozlišení a zobrazení obrázků a vytvořili jsme si první sekci domovské stránky, kde jsme si vložili nadpis, textový editor, tlačítka, podívali jsme se na kotvové odkazy a také jsme si ukázali jak si elementy na stránce duplikovat.

V dnešní lekci základů WordPress budeme pokračovat ve vytváření obsahu domovské stránky. Do druhé sekce si vložíme textový editor a medailonek a zkusíme si ji vizuálně oddělit od první sekce.

Druhá sekce

První sekci máme hotovou, vytvoříme si tedy druhou. Opět si vložíme na stránku kontejner. Tentokrát si jej zkusíme vložit přímo z layoutu stránky. Pod první sekcí klikneme na tlačítko +:

V dalším kroku si vybereme, jaké chceme rozložení kontejneru, zda flexbox, nebo mřížku. Vybereme si flexbox:

Navíc zde v dalším kroku vybíráme ještě strukturu. Jedná se o rozmístění prvků, které budeme do našeho kontejneru přidávat. My si rozdělíme flexbox na dvě stejně velké části:

Textový editor

Do levé části kontejneru si přetáhneme textový editor:

Do tohoto editoru si přidáme text:

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

Tento text si opět přidáme přes editor v levém sloupci:

Přejdeme do záložky CSS, zarovnáme si text na střed a u položky Písmo, přes ikonu tužky nastavíme velikost textu na 30px:

Barvu textu si nastavíme na bílou. Přejdeme tedy k položce Barva textu a nastavíme hex - #FFFFFF:

Medailonek

Do pravého sloupce si přidáme náš medailonek. V seznamu prvků, přejdeme do sekce Link In Bio, vybereme Minimalist a přetáhneme jej do pravého sloupce našeho kontejneru:

Obrázek

Do medailonku si přidáme fotku. Můžete vybrat ilustrační fotku s názvem /portret.webp, ze složky se zdrojovými soubory, kterou již máte staženou z minula. Pokud jste archiv se zdrojovými soubory ještě nestáhli, najdete je ke stažení v archivu také pod touto lekcí.

Složku z archivu si rozbalte do svého počítače. Najdete zde více souborů, které budeme postupně vkládat na domovskou stránku.

V záložce Obsah v sekci Identity klikneme na volbu Zvolit obrázek:

Jako vždy se nám otevře knihovna médií, do které si nahrajeme obrázek /portret.webp. Následně jej označíme a klikneme na tlačítko Vybrat:

Bio

Přejdeme do sekce Bio, kde si vyplníme základní údaje. Do pole Nadpis vložíme jméno:

Karel Král

Do pole Title or Tagline vložíme text:

Webdesigner

A do pole Popis vložíme naše motto:

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

Výsledek vypadá takto:

Ikony sociálních sítí

V sekci Icons si můžeme přidat odkazy na naše sociální sítě, nebo přidat nějakou další pomocí tlačítka + Add Icon. My se tím ale nyní nebudeme zabývat a přejdeme do sekce CTA Link Buttons.

Tlačítka

V této sekci můžeme spravovat tlačítka, které jsou součástí medailonku. Místo tlačítka Get Healthy si nastavíme telefon. Rozklikneme si tedy první tlačítko a do políčka HTML napíšeme:

Telefon

V poli Link Type vybereme možnost Telephone a do pole Počet vložíme telefonní číslo:

Místo tlačítka Top 10 Recipes, si vytvoříme tlačítko pro email. Do pole HTML napíšeme:

Email

V poli Link Type vybereme možnost Email a do pole Mail vložíme náš email, na který chceme, aby nám maily chodily. Dále zde máme možnost předvyplnit předmět emailu. Vložíme si zde text:

Nová poptávka

Do pole Message pak můžeme předpřipravit i text samotného emailu. My si toto pole ale necháme prázdné:

Poslední dvě tlačítka si křížkem smažeme, nebudeme je potřebovat.

Úprava vzhledu

Přejdeme do záložky CSS, kde si v sekci Identity nastavíme velikost obrázku na 115px a v poli Image Shape vybereme možnost Čtvereček:

Přejdeme do sekce Bio, kde si nastavíme barvu textu pro Heading, Tag or Tagline a Description na bílou - hex #FFFFFF:

V sekci Icons nastavíme stejnou barvu i ikonkám sociálních sítí:

Když se nyní podíváme na medailonek, můžeme si všimnout, že se nám nezměnila barva textu u nadpisu "Karel Král" a ani u titulku "Webdesigner". Je to proto, že zde Elementor upřednostnil naše globální nastavení. A proto, že nadpis i title zde má nastavenou HTML značku H2 a H3, tedy nadpisy, text zůstal fialový. Vyřešíme to jednoduše tak, že změníme HTML značku. Vrátíme se do záložky Obsah a v sekci Bio nastavíme pro nadpis a title HTML značku div:

Vidíme, že barva textu se nám změnila na bílou. Vrátíme se zpět do záložky CSS a nastavíme si vzhled tlačítek. V medailonku se nejedná o klasické tlačítka a tak zde není vzhled nastaven podle globálního nastavení. Přejdeme do sekce CTA Link Buttons, kde nastavíme barvu pozadí na fialovou - hex #721FAE:

A nakonec si ještě u tlačítek odstraníme podtržení textu. U položky písmo si rozklikneme tužku a v poli Dekorace nastavíme hodnotu Žádné:

Nyní si označíme kontejner, ve kterém máme textový editor a zarovnáme si text vertikálně na střed:

Vizuální oddělení sekcí

Ještě si trochu upravíme hlavní kontejner, ve kterém máme text i medailonek, abychom jej vizuálně oddělili od první sekce. Označíme si tedy celý kontejner, přejdeme do záložky CSS, do sekce Pozadí a u položky Barva si nastavíme barvu na bílou, s velkou transparentností - hex #FFFFFF1C:

Poté přejdeme do záložky Pokročilé a v sekci Rozvržení nastavíme horní a spodní odsazení (padding) na hodnotu 150px:

Odsazení si nastavíme i u první sekce. Označíme si první kontejner, ve kterém máme nadpis, text a tlačítka, přejdeme do záložky Pokročilé a v sekci Rozvržení nastavíme odsazení spodní strany na 150px:

Určitě jste si všimli, že zde nastavujeme odsazení jen spodní strany. Je to proto, že je to první element na stránce. Odsazení hlavičky od obsahu stránky máme nastaveno globálně a tak už na horní straně kontejneru nebudeme nastavovat žádné další odsazení.

V další lekci, Domovská stránka - obrázkový kolotoč a kopírovaní stylu, si dokončíme domovskou stránku. Do třetí sekce si vložíme obrázkový kolotoč s ukázkami naší práce a ukážeme jak si můžeme zkopírovat styl z jiného prvku. Čtvrtá - poslední sekce, bude obsahovat už jen krátký text.