Lekce 21 - Domovská stránka ve WordPressu - Sekce s medailonkem Nové

V předchozí lekci, Domovská stránka ve WordPressu - Pozadí a tlačítka, jsme v editoru Elementor začali tvořit domovskou stránku. Nastavili jsme obrázek na pozadí, vysvětlili si rozlišení a zobrazení obrázků a vytvořili úvodní sekci s nadpisem, textem, tlačítky i kotvovými odkazy.

V tomto tutoriálu základů WordPressu budeme pokračovat ve tvorbě obsahu domovské stránky. Navážeme na předchozí sekci a přidáme si druhou část stránky, která bude obsahovat textový výčet předností a náš osobní medailonek s kontaktními údaji. Ukážeme si také, jak sekci vizuálně oddělit, aby stránka působila přehledněji a strukturovaně. Při tvorbě opět využijeme editor Elementor, tentokrát si ale zkusíme některé kroky provést přímo z layoutu stránky.

Druhá sekce domovské stránky

Po dokončení úvodní části domovské stránky si nyní vytvoříme další sekci, která návštěvníkům krátce představí naši práci i osobní přístup. Vlevo bude jednoduchý výčet předností, vpravo pak přidáme medailonek s kontaktními údaji a fotografií. Díky tomu stránka působí profesionálněji a zároveň přívětivěji.

Stránku otevřeme v editoru Elementor a začneme tím, že si pod první sekci vložíme nový kontejner přímo pomocí nabídky layoutu stránky. Pod první sekcí klikneme na tlačítko +:

Zobrazí se nabídka s výběrem typu rozvržení. Elementor nám umožňuje použít buď mřížku, nebo flexbox. My zvolíme flexbox, který je pro tuto sekci vhodnější:

V dalším kroku si nastavíme konkrétní strukturu kontejneru, tedy jak budou jednotlivé prvky ve flexboxu rozmístěné. Vybereme si rozvržení se dvěma stejně širokými částmi, do kterých následně vložíme obsah:

Textový editor

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

Do tohoto editoru vložíme text:

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

Text 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 30 px:

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

Medailonek

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

Jakýkoli prvek z nabídky Elementoru můžeme rychle najít zadáním jeho názvu do pole Hledat widget v horní části panelu.

Obrázek

Do medailonku si nyní přidáme fotografii, která bude sloužit jako náš profilový obrázek. Použijeme ilustrační soubor s názvem portret.jpg:

Obrázek si stáhneme tak, že na něj klikneme pravým tlačítkem myši a vybereme možnost Uložit obrázek jako…. Soubor si uložíme do počítače, abychom ho mohli nahrát do knihovny médií.

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

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

Bio

Přejdeme do sekce Bio, kde 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 můžeme do medailonku přidat odkazy na naše sociální sítě, případně přidat další ikonu pomocí tlačítka + Add Icon. V této lekci se ale na sociální sítě zaměřovat nebudeme a přejdeme do sekce CTA Link Buttons, kde si upravíme kontaktní tlačítka.

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 naši emailovou adresu. Pole Subject nabízí možnost předvyplnit předmět emailu, vložíme do něj text:

Nová poptávka

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

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

Úprava vzhledu

Nyní přejdeme do záložky CSS, kde si v sekci Identity nastavíme velikost obrázku na 115 px 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 kód #FFFFFF:

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

Když si medailonek zobrazíme, můžeme si všimnout, že se barva textu u jména Karel Král a titulku Webdesigner nezměnila, i když jsme jí nastavili bílou barvu. Je to tím, že Elementor v tomto případě upřednostňuje globální styl nadpisů a tyto texty jsou nastaveny jako nadpisy (mají HTML značku H2 a H3).

Řešení je jednoduché – změníme HTML značku na běžný blok div, aby se na text nevztahoval globální styl. Vrátíme se tedy do záložky Obsah, přejdeme do sekce Bio a u položek Nadpis a Title v poli HTML značka vybereme možnost div:

Vrátíme se do záložky CSS a nastavíme vzhled tlačítek. V medailonku se nejedná o klasická tlačítka, proto zde není vzhled nastaven podle globálního nastavení. Přejdeme do sekce CTA Link Buttons, kde nastavíme barvu pozadí na fialovou – Hex kód #721FAE:

Nakonec u tlačítek odstraníme podtržení textu. U položky Písmo rozklikneme tužku a v poli Dekorace nastavíme hodnotu Žádné:

Aby text ve sloupci vlevo lépe lícoval s obsahem medailonku, zarovnáme jej vertikálně na střed. Označíme tedy kontejner, ve kterém se nachází textový editor, a upravíme jeho zarovnání:

Vizuální oddělení sekcí

Druhou sekci si nyní vizuálně odlišíme od zbytku stránky – přidáme jí jemné pozadí a větší vnitřní odsazení. Označíme celý kontejner, ve kterém se nachází text i medailonek, přejdeme do záložky CSS a v sekci Pozadí klikneme na ikonu štětce a nastavíme barvu s vysokou průhledností – Hexa kód #FFFFFF1C:

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

Dolní odsazení nastavíme i u první sekce. Označíme 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 150 px:

Odsazení nastavujeme pouze na spodní stranu první sekce, protože jde o první prvek na stránce. Mezera mezi hlavičkou a obsahem je totiž nastavena globálně, takže další horní odsazení už není potřeba.

V další lekci, Domovská stránka ve WordPressu - Obrázkový kolotoč, dokončíme domovskou stránku. Do třetí sekce vložíme obrázkový kolotoč s ukázkami práce a ukážeme si, jak zkopírovat styl z jiného prvku. Závěrečná sekce bude obsahovat už jen krátký text.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.