Základy WordPress, šablona Astra, editor Elementor

Přihlášení do webu

  1. nejčastěji se přihlásíte do administrace webu přes koncovku, kterou zadáte za celý název vašeho webu wp-admin nebo wp-admin/ nebo wp-login
  2. vypadat to bude nějak takto https://radkajirankova.cz/wp-admin
  3. níže je obrázek, jak vypadá administrace WordPress, vlevo je menu, přes které všechno řídíte
jak vypadá administrace WordPress

Jak vypadají stránky po instalaci šablony Astra a Elementoru Pro

jak vypadá web po instalaci Astra šablony a editoru Elementor

Tlačítko s ikonou domečku, přechod na frontend a zpět

Tlačítko s ikonou domečku používejte pro přechod na frontend = přední část webu jako vidí nepřihlášený návštěvník webu a nopak z přední části zase zpět do admministrace WordPress

Ikonka domečku - dostanete se na frontend přední část webu - jak se zorientovat v administraci - WordPress

Horní lišta/admin bar

Rychlé odkazy na web, +Nový obsah, cache plugin (pokud je), Yoast/AIOSEO notifikace.

Naříklad - Simple History je log (kdo co dělal).

Nastavení zobrazených informací

Nastavení zobrazených informací (je to celkem nenápadná lišta se zobáčkem najdete ji vpravo nahoře) - skrýt nebo zobrazit více informací na dané položce z menu, např. stojíme na položce "Příspěvky" klikneme na Nastavení zobrazených informací, vyjede nám seznam položek a my si je můžeme nastavit tak jak nám vyhovuje, něco skrýt, něco zobrazit něco nastavit např. počet položek na stránce (používá se hlavně u stránek a článků - pozor nepřepísknout to a nenastavovat více jak 100 položek, web se může seknout/zacyklit prostě toto nedá hosting někdy..)

Levý postranní panel

Hlavní navigace – položky, které budeme používat: Příspěvky, Média, Stránky, Vzhled, Pluginy, Uživatelé, Nástroje, Nastavení

Další položky (pluginy), které vzniknou dodatečnou instalací do WordPressu: All in One SEO, WPForms, WP Mail SMTP, All‑in‑One WP Migration, TranslatePress, Woody Snippets, Simple History, Elementor.

Nástěnka

Nástěnka > Aktualizace

Zobrazíte si zde co je zastaralé a co je potřeba aktualizovat, jsou tu jak pluginy, tak šablony.

Jak aktualizovat pluginy ve WordPressu - Nástěnka, aktualizace
jak aktualizovat ve WordPressu šablony - Nástěnka, Aktualizace, zakliknout šablony a klikneme na tlačítko Aktualizovat šablony

Příspěvek versus Stránka – co kdy použít?

  • Stránka: stálý obsah (Domů, Služby, O mně, Kontakt). Neobsahuje datum.
  • Příspěvek: blogové články, novinky, tipy. Má datum a patří do rubrik/štítků.

Příspěvky

Příspěvky > Přehled příspěvků

Zobrazíte si zde seznam "článků"

Příspěvky - Přehled příspěvků - jak se zorientovat v administraci - WordPress

Příspěvky > Přidat příspěvek (nebo) Nástěnka > Příspěvky > Přehled příspěvků > Přidat příspěvek

Vytvoříte článek - ve WordPressu se tak nazývá "příspěvek". Články lze vytvářet v editoru Gutenberg (ten je dán jako základ již při instalaci WordPressu) nebo lepší řešení je Elementor, který se instaluje přes "Pluginy" a dává nám více možností úprav jednotlivých stránek nebo článků.

Příspěvky - Přidat příspěvek - jak se zorientovat v administraci - WordPress

Příspěvky > Rubriky

Vytvoříte si zde kategorie (ve WordPressu se nazývají "Rubriky"), do kterých můžete přiřazovat články (Příspěvky) se stejnými tématy.

Příspěvky - Rubriky - jak se zorientovat v administraci - WordPress

Příspěvky > Štítky

Vytvoříte si zde štítky, které můžete přiřazovat ke článkům. Štítky neboli "Tagy" pomáhájí lepší dohledatelnosti ve vyhledávačích a orientaci návštěvníka webu.

Příspěvky - Štítky - jak se zorientovat v administraci - WordPress

Média

Média > Knihovna médií

Zobrazíte si zde seznam obrázků, videí, PDF nebo jiných souborů a můžete zde obrázky také nahrávat přes tlačítko "Přidat média" nebo "Vybrat soubory", jednoduše pak vyberete soubory v počítači a nahrajete. Zde najdete všechny obrázky, které na webu máte.

Média - Knihovna médií - jak se zorientovat v administraci - WordPress

Fotografie, videa a další zde můžete snadno filtrovat podle názvu.

Klikem na obrázek uvidíte detaily obrázku, název, alt text, rozměry, velikost. DŮLEŽITÉ: pojmenovat smysluplně a správně obrázek dle klíčových slov ještě před nahráním do webu, nenahrávat obrázky s názvem 1234.jpg, ale dle toho co na obrázku je a zakomponovat vhodně i ta klíčová slova, po nahrání obrázku doplňujte ALT texty má to vliv na SEO - vyhledatelnost webu.

Velikost obrázků si ještě probereme podrobně, ale: nenahrávejte obrázky nad 1MB je to zbytečné a zpomalujete si web. Už 1MB je strašně moc.

Stránky

Stránky > Přehled stránek

Použití pro statické podstránky (Domů, O nás, Služby, Kontakt…). Zobrazíte si zde seznam stránek a můžete zde stránky také vytvářet přes tlačítko "Přidat stránku", upravit již vytvořené stránky přes tlačítko "Upravit" to se objeví po přejetí myši nad názve dané stránky, kterou chcete upravit.

Stránky - Přehled stránek - jak se zorientovat v administraci - WordPress

Komentáře

Zobrazíte si zde seznam komentářů, které návštěvníci webu "pokud je máte povoleny" mohou přidávat pod jednotlivé články. Můžete je zde vybírat, schvalovat, označit jako spam, odstranit.

Komentáře - jak se zorientovat v administraci - WordPress

Elementor

Nastavení editoru Elementor.

Elementor - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Šablony

Pozor nejde o klasické šablony pro WordPress tak jak je znáte, jde o šablony, které jsou součást Elementoru. Pozor neplést. Jak to souvisí s Astrou? Astra zůstává základní WordPress šablonou. Editor Elementor však umožní části šablony nahradit vlastními layouty, např. vytvořit vlastní hlavičku či patičku.

  • Můžete ponechat Astru jako rámec a vkládat do ní obsah.
  • Nebo většinu prvků webu postavit přímo v Elementoru.
  • U větších webů je klíčová konzistence stylů (globální styly, typografie určit si co se bude používat a toho se držet).

Šablony > Uložené šablony

Seznam šablon vytvořených právě přes editor Elementor. Jsou to vámi vytvořené stránky, sekce, popupy, ale i hlavičky, patičky webu nebo chybová stránka 404.

Šablony - Uložené šablony - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Šablony > Popups

Umožní vám vytvářet vlastní popup okna (newsletter, upozornění, akce) přímo v Elementoru a přesně řídit, kdy a komu se zobrazí.

  • Nastavení spuštění: když někdo chce odejít ze stránky, když někdo vstoupí na stránku, po určitém čase může vyskočit okno, při scrollu, klikem.
  • Cílení podle stránek, zařízení nebo podmínek.
  • Náhrada pluginů typu Popup Maker.
Šablony - Popups - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Šablony > Theme Builder (Tvůrce šablon)

Umožní vám nahradit části šablony Astra (nebo jiné) vlastními layouty v Elementoru. Můžete vytvořit 404 page nebo Search results page. V praxi: nechcete být omezeni Astrou? Použijete Theme Builder, který vám dá plnou kontrolu, to znamená, když si zde něco nastavíte tak tyto vaše šablony, přebírají kontrolu nad vzhledem daných částí webu. Můžete si nastavit:

  • Header (hlavička) – logo, menu, tlačítko.
  • Footer (patička) – kontakty, odkazy.
  • Single Post – jak vypadá detail článku.
  • Archive – jak vypadá výpis blogu, kategorie.
Šablony - Theme Builder - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Ve vytvořených elementech si můžete tyto elementy (např. hlavička, patička webu následně upravovat ikona "tužka" a také přiřazovat k jednotlivým stránkám kde mají být použity, každá stránka může mít například jiné menu.

Šablony - Theme Builder - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Kdy sahat do ASTRY a kdy do ELEMENTORU:

Úprava globální typografie či barev → často Vzhled > Přizpůsobit (Astra > Přizpůsobit) nebo "Nastavení stránky" přímo v editoru Elementoru. (globální styly Elementoru). Kde to najít? Otevřete si libovolnou stránku a dejte Upravit v Elementoru. V levém horním rohu kliknete na ikonu s názvem "Nastavení stránky" (ikona v horní liště / nabídka). Zde najdete Globální barvy, Globální písma a další globální volby.

Úprava obsahu sekcí na stránce přímo na určité stránce, kterou upravujete pomocí Elementoru.

Úprava hlavičky/patičky tvořených Elementorem Šablony > Theme Builder.

Kde se vypínají „výchozí barvy/písma“ Elementoru?

Pokud chcete, aby se prosazovaly vaše globální styly nebo styly šablony (Astra), běžte do WP administrace → Elementor → Nastavení a tam zapněte/zaškrtněte zakázat výchozí barvy, deaktivovat původní fonty.

Šablony > Floating Elements (plovoucí prvky)

S pomocí doplňku můžete vytvářet prvky „nad obsahem“ (v čistém Elementoru to není základní funkce) — hodí se pro rychlý kontakt či navigaci.

  • Typicky plovoucí tlačítko: chat, telefon, „zpět nahoru“.
  • Vytvoříte sekci nebo widget a nastavíte fixní/absolutní pozici.
  • Element zůstává viditelný při scrollování.
Šablony - Floating Elements - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Šablony > Website Templates

Naimportujete hotové designy webu jedním klikem a získáte startovací bod s předpřipravenými stránkami a styly.

  • Podobné jako Astra Starter Templates, ale čistě pro Elementor.
  • Obsahuje stránky, barvy, globální styly a sekce.
  • Urychlí start projektu a sjednotí vizuál.
Šablony - Website Templates - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Šablony > Přidat nový

  • Přidat nový (vytvoříte novou šablonu (header, footer, popup, sekci, blok). Vyberete o co jde, my si nyní vytvoříme sekci, kterou pak budeme chtít vkládat snadno do různých stránek na různá místa (nebudeme muset sekci tvořit znovu a znovu ručně, ale toto nám umožní ji jednou vytvořit a pak už jen vkládat na klik).
  • Rychlejší opětovné použití opakujících se prvků.

Z nabídky si vybereme např "Benfits" a budeme na kartě "Bloky" možností je daleko více, vybírat můžete celé stránky, šablony a i jiné prvky než bloky. Jakmile máte vybráno kliknete na prvek, který jste si vybrali a dále kliknete na "Vložit"

Tím se vám prvek vloží do rozhraní s Elementorem, kde můžete ještě prvek poupravit tak jak potřebujete a následně jej uložíte přes tlačítko "Publikovat"

nyní skočíte zpět do administrace WordPress

Půjdete do Šablony > Uložené šablony a uvidíte vámi vytvořenou šablonu

V elementoru, když tvoříte stránku vložíte vámi vytvořenou šablonu přes ikonu složky

Šablony > Kategorie

Umožní vám třídit a spravovat vlastní šablony v Elementoru pro přehlednou práci na větších webech.

  • Kategorie pro šablony (např. „Hlavičky“, „Sekce CTA“).
Šablony - Kategorie - WordPress úvodní nastavení - jak se zorientovat v administraci - Elementor

Astra

Astra > Nástěnka

Hlavní nastavení šablony Astra. Snadný přístup k importu hotových šablon → ideální, když potřebujete rychle rozjet web. Přehled o tom, co je aktivní a co se dá rozšířit. Pokud máte Astra Pro, právě tady ovládáte, které moduly chcete mít zapnuté (aby se web načítal rychleji).

Astra - Nástěnka - WordPress úvodní nastavení - jak se zorientovat v administraci - při používání šablony Astra

Astra > Přizpůsobit

Dostanete se do nastavení, kde Astra nabízí svá vlastní rozšířená nastavení. Je to jakýsi centrální ovládací panel vzhledu celé šablony Astra. Nastavujete globální vzhled celého webu – tedy věci, které se opakují a nechcete je řešit ručně u každé stránky. Platí pro celý web, pokud nejsou přepsány Elementorem. Nastavit zde můžete: barvy, fonty, logo, menu, šířku webu, tlačítka, copyright text, rozložení patičky a další.

Astra - Přizpůsobit - WordPress úvodní nastavení - jak se zorientovat v administraci - při používání šablony Astra

Astra > Skrýt Builder

Funkce „Astra Hide/Show Builder“ (česky se to někdy zobrazuje jako Astra Skrýt Builder). Šablona Astra má svůj Header & Footer Builder (vlastní editor hlavičky a patičky, kde skládáte logo, menu, tlačítka, widgety apod.).

Pokud ale chcete používat jiný nástroj (např. Elementor Theme Builder, Beaver Builder, Brizy), je nutné, aby se hlavička nebo patička od Astry nenačítala dvakrát. A právě k tomu slouží volba Astra Hide/Show Builder.

Hide (Skrýt Builder) = vypne vykreslování hlavičky/patičky z Astry, aby ji mohl kompletně nahradit Elementor (nebo jiný page builder).

Show (Zobrazit Builder) = zapne zpět hlavičku/patičku z Astry. Pokud stavíte web čistě v Elementoru Theme Builderu → zapnete Hide Builder, aby se Astra header/footer nevykresloval.

Pokud používáte jen Elementor pro obsah stránek, ale hlavičku a patičku chcete z Astry → necháte Show Builder.

Astra - Skrýt builder - WordPress úvodní nastavení - jak se zorientovat v administraci - při používání šablony Astra

Astra > Spectra

Možnost instalace dalšího editoru, který funguje se šablonou Astra.

Astra - Spectra - WordPress úvodní nastavení - jak se zorientovat v administraci - při používání šablony Astra

Vzhled

Vzhled > Šablony

Zde nastavíte a aktivujete šablonu webu.

Vzhled - Šablony - WordPress úvodní nastavení - jak se zorientovat v administraci

Vzhled > Vzhled

Pokud používáte Astru + Elementor, tak tento Editor vzhledu (FSE) v levém menu „Vzhled > Vzhled“ zatím nemá smysl používat. Je to zbytečné a jen by vás to mátlo. Jinak je to blokový editor vzhledu, zavedený od WordPressu 5.9. Umožňuje upravovat celý web (hlavičku, patičku, šablony článků, stránky 404, archivy…) přímo pomocí Gutenberg bloků – ne jen obsah stránek.

Vzhled - Vzhled - WordPress úvodní nastavení - jak se zorientovat v administraci

Vzhled > Přizpůsobit

Už jsem to tu jednou rozepisovala, opět se dostanete do WordPress nastavení, kde Astra nabízí svá vlastní rozšířená nastavení. Je to jakýsi centrální ovládací panel vzhledu celé šablony Astra. Nastavujete globální vzhled celého webu – tedy věci, které se opakují a nechcete je řešit ručně u každé stránky. Nastavit zde můžete: barvy, fonty, logo, menu, šířku webu, tlačítka, copyright text, rozložení patičky a další.

Vzhled - Přizpůsobit - WordPress úvodní nastavení - jak se zorientovat v administraci

Vzhled > Widgety

Starší část WordPressu, která slouží k vkládání obsahu do tzv. widgetových oblastí. Widget = malý obsahový blok, který se zobrazuje na specifickém místě webu. Typicky to bývá: Sidebar (postranní panel) – např. vyhledávání, kategorie, poslední příspěvky. Footer (patička) – odkazy, menu, kontakty, sociální sítě. Někdy i speciální oblasti v hlavičce nebo nad obsahem (záleží na šabloně).

Astra má v patičce (footer) typicky 3–4 widgetové oblasti → tam můžete vkládat obsah přes Vzhled > Widgety. Elementor widgety nepotřebuje, protože si sekce stavíte přímo vizuálně. Pokud chcete rychle vložit jednoduché prvky (menu, text, kontakty) do patičky nebo sidebaru, je to rychlejší přes widgety.

Vzhled - Widgety - WordPress úvodní nastavení - jak se zorientovat v administraci

Vzhled > Menu

Slouží pro vytvoření menu a vožení položek do menu.

Vzhled - Menu - WordPress úvodní nastavení - jak se zorientovat v administraci

Jak vytvořit menu

Jak vytvořit menu - půjdete do Vzhled -> Menu, tam si zadáte název menu, já tvořím horní menu, tak jsem dala k názvu i "hlavicka", abych věděla, že to bude menu nahoře na stránce, doporučuji zaškrtnout "Automaticky přidávat nově publikované stránky, abyste nemuseli do menu každou stránku po vytvoření ručně vkládat a nakonec klinete na tlačítko "Vytvořit menu"

“Jak

Jak vložit stránky do menu, menu máte vytvořeno tak nyní do něj jen naklikáte co v něm má být, (měli byste mít automaticky otevřenou boční záložku "Stránky" (stále jste ve Vzhled -> Menu) naklikáte si stránky, které chcete mít v menu uvedeny, položky se vám přidají do seznamu, (s položkami můžete myší hýbat nahoru, dolů i do stran, pokud byste měli položky vedlejší např. hlavní položku "Služby" a pod tím několik dalších položek dle rozdělení služeb).

Nechte zaškrtnuto nebo zaškrtněte "Automaticky přidávat nově publikované stránky" a "Hlavní menu" a uložte tlačítkem "Aktualizovat menu"

“Jak

Vzhled > Starter Templates

Starter Templates (plugin, který rozšiřuje funkce/vzhled šablony Astra) slouží k rychlému startu – u hotového webu spíše jako inspirace, nepouštět generování přes existující web.

Vzhled - Editor souboru šablony - WordPress úvodní nastavení - jak se zorientovat v administraci

Vzhled > Editor souboru šablony

Můžete zde upravovat kód šablony "natvrdo" nedoporučuji používat nezkušeným, kdo se nevyzná v kódu, můžete si snadno web "rozbít".

Vzhled - Editor souboru šablony - WordPress úvodní nastavení - jak se zorientovat v administraci

Pluginy

Pluginy > Přehled pluginů

Zobrazíte si seznam pluginů (plugin = rozšiřuje funkce nebo vzhled webu), které máte instalovány na webu. Můžete zde také instalovat nové pluginy nebo mazat staré či nepotřebné.

Pluginy - Přehled pluginů - WordPress úvodní nastavení - jak se zorientovat v administraci

Uživatelé

Zobrazíte si seznam lidí, kteří mají přístup do administrace nebo k obsahu webu. Každý uživatel má roli, která určuje, co může a nemůže dělat.

Uživatelé - WordPress úvodní nastavení - jak se zorientovat v administraci

Nástroje

Obsahuje pomocné funkce pro import, export, diagnostiku a někdy i doplňky od pluginů.

Nástroje - WordPress úvodní nastavení - jak se zorientovat v administraci

Nastavení

Nastavení > Obecné

Ve WordPressu slouží k určení základní identity webu – název, slogan, email správce, jazyk a časové pásmo. Důležité je také nastavení adres URL, aby web běžel správně na požadované doméně. Většinu voleb nastavíte jednou při spuštění webu a pak už se k nim vracíte jen výjimečně.

Nastavení - Obecné - WordPress úvodní nastavení - jak se zorientovat v administraci

Nastavení > Publikování

Základní parametry pro to, jak se chovají příspěvky: jaká rubrika a formát se mají přiřadit automaticky, možnost publikovat přes email (zastaralé), notifikační služby pro rychlejší informování vyhledávačů. Pro běžný web dnes nastavíte jen výchozí rubriku a zbytek necháte být.

Nastavení - Publikování - WordPress úvodní nastavení - jak se zorientovat v administraci

Nastavení > Zobrazování

Toto nastavení určuje, zda bude úvodní stránka webu blog (stránka s články) nebo si nastavíte určitou stránku (většinou úvodní - Úvod), kolik příspěvků se ukazuje na stránce/RSS a jestli má být web viditelný pro vyhledávače. Nejčastější použití: nastavíte úvodní stránku webu a zkontrolujete jestli není prohledávání zablokováno.

Nastavení Zobrazování - WordPress úvodní nastavení - jak se zorientovat v administraci

Jak nastavit úvodní stránku webu

Jak nastavit úvodní stránku webu Nastavení -> Zobrazování -> Statickou stránku -> Vyberte ze seznamu

“Jak

Nastavení > Komentářů

Nastavíte zde, zda komentáře na webu vůbec povolíte, kdo je může psát a jak je budete schvalovat. Na firemních webech se často komentáře úplně vypínají, zatímco na blozích se nechávají aktivní, ale s tíém, že komentáře si schvalujete ručně (kvůli spamu).

Nastavení - Nastavení komentářů - WordPress úvodní nastavení - jak se zorientovat v administraci

Nastavení > Média

Nastavení pro obrázky, jaké velikosti obrázků má WordPress při nahrávání vytvářet a kam se ukládají. Díky tomu nemusíte ručně zmenšovat obrázky pro různé části webu – WordPress si je připraví automaticky. Výchozí hodnoty ve WordPressu (150×150, 300×300, 1024×1024) jsou univerzální, ale ne vždy ideální. Pokud používáte Astru + Elementor, dává smysl si je trochu přizpůsobit, aby obrázky nebyly zbytečně velké a přitom ostré. Doporučené velikosti (pro Astra + Elementor):

  • Thumbnail (náhled): 300×300 px.
  • Medium (střední): 600×400 px (poměr 3:2).
  • Large (velký): 1200×800 px (poměr 3:2).
  • Hero a full-width obrázky: připravit ručně 1920 px na šířku.
  • Proč nastavit větší hodnoty? Blog a archivy – když má náhled článku 600–800 px na šířku, obrázek 300 px bude rozmazaný. Obsah a galerie – 1024 px na velký obrázek je na dnešní monitory málo → obrázek se roztáhne a vypadá špatně. Hero sekce a bannery – ty potřebují 1600–1920 px. Proto se doporučuje nastavit větší základní velikosti, ale zároveň optimalizovat formát (WebP, JPEG 70–80 % kvalita), aby web zůstal rychlý.

    Nastavení - Média - WordPress úvodní nastavení - jak se zorientovat v administraci

    Nastavení > Trvalé odkazy

    Doporučuji nastavení pro firemní web / blog používat „Název příspěvku“ je to jednoduché, čitelné a pro SEO optimální. Pokud máte blog jako podsekci firemního webu, můžete použít vlastní strukturu: /blog/%postname%/ a u magazínů, kde záleží na datu, se hodí /2025/09/nazev-clanku/.

    Nastavení - Trvalé odkazy - WordPress úvodní nastavení - jak se zorientovat v administraci

    Nastavení > Soukromí

    Přidaná funkce kvůli GDPR a podobným zákonům o ochraně osobních údajů.

    Nastavení - Soukromí - WordPress úvodní nastavení - jak se zorientovat v administraci

    Tvorba stránky v Elementoru

    Elementor je website builder, snadno si s jeho pomocí "naklikáte stránky",ale i menu nebo patičku webu. Najdete ho v Pluginy > Přehled pluginů

    Přidání editoru Elementor přes Puginy - Přidat plugin

    Vytvoření stránky

    V administraci vašesho webu půjdete na Stránky -> Přehled stránek -> Přidat stránku.

    Jak vytvořit první stránku ve WordPressu - Stránky, přehled stránek, přidat stránku

    Otevře se vám nejprve prázdná stránka v základním editoru, který se jmenuje Gutenberg (ten používat nebudeme, ale vytvoření stránky většinou jde takto přes ten Gutenberg). Nahoře je pole s názvem "Zadejte název" tam napíšete text (např. „Pronájem penzionu Jižní Čechy“). To se automaticky stane hlavním H1 nadpisem stránky.

    Všimněte si URL adresy, která se vytvořila to je URL adresa dané stránky, tu můžete případně změnit a pokud takto vytvoříte více stránek, tak z jedné stránky můžete např. tlačítky odkazovat na druhou

    Jak funguje editor Gutenberg, nadpis bude H1, URL adresa se vytvoří nejprve automaticky

    Jak se dostat z Gutenberg editoru, z editace stránky zpět do administrace WordPress? Kliknete na tlačítko s ikonkou "W".

    Jak se vrátit z Gutenberg editoru do administrace WordPress

    Dále kliknete na "Publikovat" potvrdíte 2x a nakonec kliknete na tlačítko "Upravit s Elementorem."

    Uložení stránky - Upravit Elementorem základy práce s webem

    Zobrazí se vám Elementorské rozvržení kde můžete stavět jednotlivé stránky webu velice snadno a funguje to Drag&Drop = chytnete prvek myší a táhnete ho tam kde ho chcete na stránce mít.

    Levý panel = nabídka prvků (říká se jim widgety). Pravá strana = náhled Vaší stránky, kam prvky skládáte.

    ROZVRŽENÍ -> Kontejnery (Flexbox Container) - fungují na Flexboxu (moderní CSS standard), nahradily staré „Sekce + Sloupce“, umožňují snadno zarovnávat prvky (vodorovně i svisle), nastavovat mezery, paddingy, pořadí na mobilu vs. desktopu, jsou rychlejší a čistší kód (méně vnoření = lepší výkon a SEO). Vhodné pro: běžné rozvržení stránek (hlavička, text + obrázek vedle sebe, CTA sekce, patička…), když chcete mít maximální kontrolu nad zarovnáním.

    ZÁKLADNÍ -> Nadpis, Obrázek, Textový editor ve WordPressu (ať už v Gutenbergu nebo Elementoru) máte vždycky „základní bloky / widgety“, ze kterých skládáte stránku.

    NADPIS -> Vloží velký text jako titulek (H1, H2, H3…).

    OBRÁZEK -> Umožní vložit obrázek z knihovny médií nebo z počítače. Máte možnost nastavit zarovnání, velikost, odkaz, alt text.

    TEXTOVÝ EDITOR -> Normální widget, do kterého píšete běžný text. Má podobné funkce jako Word/WordPad – tučné, kurzíva, odrážky, odkazy.

    Přetahování widgetů - základy práce s Elementorem

    >> ODBOČÍM: Nejprve si u stránky vypneme zobrazení názvu stránky, pokud to vyloženě nechceme záměrně zobrazovat a chceme si dát na stránku vlastní H1 nadpis.

    Ozubené kolečko > Nastavení > Skrýt nadpis (ANO)

    Jak vypnout nadpis u stránky v Elementoru

    Pojďme si zkusit poskládat první stránku budete nadšeni, jak se do toho trochu dostanete, bude to brnkačka.

    Vytvoření první sekce: Klikněte na velké „+“ uprostřed obrazovky.

    Ikona plus - vložení widgetu - základy práce s Elementorem

    Jaké rozložení chcete použít? vyberte: Flexbox

    Rozložení Flexbox nebo Mřížka - základy práce s Elementorem

    Vyberte svou strukturu směrový sloupec (obdélník se šipkou dolů)

    Struktura - základy práce s Elementorem

    Vznikne první sekce – místo, kam můžete začít přidávat obsah. Můžete začít nadpisem. Přidání nadpisu: Kliknete na plus "+" a v levém panelu vyberte prvek Nadpis. Přetáhněte jej do sekce. Zadejte text: Vítejte v našem penzionu v Jižních Čechách.

    Jak vložit nadpis - základy práce s Elementorem

    V levém panelu můžete změnit zarovnání (např. na střed), velikost písma nebo barvu.

    Jak upravit nadpis - základy práce s Elementorem

    Návrat do widgetů -> klik nahoře na tlačítko "+"

    Přidání obrázku: přetáhnete widget "Obrázek" pod text nebo spíše do textu "Vítejte v našem penzionu v Jižních Čechách" musí se vám objevit mini ikonka s plusem, když budete přetahovat widget, jinak se netrefíte do místa, kam lze "widget" nyní obrázek vložit a Elementor to nevezme (nevloží ho tam) a musíte to znovu zkusit přetáhnout.

    Jak vložit obrázek - základy práce s Elementorem

    Přejeďte myší nad prázdným obrázkem v levém menu: Zobrazí se možnost „Vybrat obrázek“ na to kliknete a nahrajete fotografii z počítače nebo vyberte z knihovny médií. Klikněte na Vložit média -> obrázek se zobrazí na stránce.

    Jak nahrát obrátek - Elementor

    Tady si můžete překlikávat možnost, zda nahrát obrázek z knihovny nebo z počítače.

    Jak nahrát obrátek - knihovna médií

    Obrázek je nahraný, nezapomeňte nahrávat obrázky v menší velikosti 250 - 500 kb, když bude obrázek třeba 4 GB, tak je to moc a WordPress jej automaticky zmenší, ale dává za název obrázku dodatek "scaled" a to není úplně ok a i tak pak zbytečně velkými obrázky zatěžujete rychlost webu. Dobrý je na to plugin Imagify, zmenšuje vám obrázky automaticky na super velikost, umí toho více, ale to rozebereme v budoucnu.

    Vložení obrázku - Elementor tvorba první stránky

    Přidání textu: Zase klikem na plus nahoře se vrátíte do seznamu widgetů a dále v levém panelu vyberte Textový editor. Přetáhněte ho pod obrázek (lehce do obrázku).

    Vložení textů - Elementor tvorba první stránky

    Napište například: „Náš rodinný penzion se nachází v srdci Jižních Čech. Nabízíme pohodlné ubytování pro turisty, rodiny i firemní pobyty.“ Text si můžete různě upravovat, tučné písmo, kurzíva, vložit odkaz pomocí ikonky "SPONKA" a na záložce CSS můžete upravit zarovnání textu, barvu, velikost, font a další.

    Nastavení textů - Elementor tvorba první stránky

    Přidání tlačítka: V levém panelu vyberte Tlačítko. Přetáhněte ho pod text. Změňte text na: Rezervujte si pobyt. Do pole Odkaz vložte /kontakt/. V záložce Styl nastavte barvu tlačítka (například zelenou) a větší písmo, zarovnání tlačítka.

    Nastavení tlačítka - Elementor tvorba první stránky

    Publikace stránky: v levém dolním rohu klikněte na fialové možná růžové tlačítko Publikovat. Potvrďte volbu.

    Uložení stránky - Elementor tvorba první stránky

    Klikněte na Zobrazit stránku: nyní vidíte hotovou stránku jak vypadá na webu.

    Zobrazení stránky po úpravách a uložení - Elementor tvorba první stránky