7. Tvorba stránky ve WordPressu

Jak vytvořit první stránku ve WordPressu krok za krokem: rozdíl mezi stránkou a příspěvkem, vložení textu a obrázků, nastavení URL, publikace. Hotovo za pár minut.

Stránka vs. příspěvek – 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ů.

Vytvoření stránky - základní editor ve WordPressu Gutenberg

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

Otevře se vám prázdná stránka. 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 Ukážeme si to v dalších krocích níže kdy budeme dělat tlačítko, tam budeme zadávat URL stránky "Kontakt"

Vložte první blok "Odstavec", pod nadpisem kliknete do prázdného řádku je tam text "Napište / pro výběr bloku" objeví se ikona plus „+“. Kliknete na ikonku plus "+" a vyberete Odstavec.

Napište třeba: Náš penzion poskytuje spolehlivé ubytování už od roku 2010…

Přidejte obrázek, klikněte na plus "+" a vyberte obrázek /pokud nevidíte plus, klikněte někam do volného místa. Nahrajete obrázek z počítače nebo vyberete z knihovny médií.

Soubory můžete nahrát: přímo z knihovny (tlačítko „Přidat nový“) nebo přímo při psaní článku/stránky (např. vložením obrázku a nahrání přímo z počítače, takové obrázky se automaticky uloží i do knihovny médií).

Knihovna médií = místo v administraci WordPressu, kam se ukládají všechny obrázky, videa, PDF nebo jiné soubory, které na web nahrajete. Najdete ji vlevo v menu jako Média -> Knihovna médií.

Vložte nadpis sekce, klikněte na „+“ -> vyhledejte "Nadpis". Zadejte třeba: "Vybavení penzionu". Vpravo vyberte úroveň nadpisu H2 (sekundární nadpis pod hlavním H1 správně dle SEO)..

Přidejte seznam (např. co penzion pokytuje za vybavení) Klikněte na „+“ -> vyhledejte "Seznam" a napište vybavení pod sebe, tlačítkem Enter vytvoříte další položku v seznamu, tlačítkem Delete zase mažete položky.

Vložte tlačítko opět přes ikonu "+" vyhledáte "Tlačítka" kliknete do přidaného tlačítka uvidíte tam text "Zadejte text" a napíšete třeba "Kontaktujte nás" do pole odkaz vložíte např. odkaz /kontakt/ a stisknete ENTER a vpravo si můžete zvolit např. barvu tlačítka.

nastavení barvy tlačítka a textu.

Uložíte -> klikněte vpravo nahoře na Publikovat. Potvrďte ještě jednou.

Klikněte na tlačítko "Zobrazit stránku" -> uvidíte, jak vypadá vytvořená stránka na webu.

U mě to vypadá takto.

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

Důležitá tlačítka v Gutenbergu ikonka čtverce a šipky = dostanete se na náhled stránky. Ikonka s počítačem = můžete si přepnout jak vypadá stránka na mobilu, tabletu. Ikonka "Uložit" pro uložení vaší práce.

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 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 nastavit úvodní stránku webu

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

Instalace Elementoru - Nestačí vám základní editor? Zkuste Elementor, získáte daleko více možností

Získejte více možností jak snadno vytvořit krásný web. Elementor existuje ve verzi zdarma, ale pokud chcete maximum, tak si vyberte Elementor PRO, který se používá běžně mezi profesionály pro tvorbu webových stránek.

Chcete více možností jak stránku vylepšit? Pluginy -> Přidat plugin -> a vyhledejte Elementor jde o skvělý website builder se spoustou možností od autora Elementor.

Navíc s verzí Elementor Pro můžete upravovat i hlavičku a patičku webu.

Vytvoření stránky přes Elementor - vynikající editor pro WordPress

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

Zadáte název stránky, poté kliknete na "Publikovat" potvrdíte 2x a nakonec kliknete na tlačítko "Upravit s Elementorem."

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.

Pojďme si zkusit vytvořit 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.

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

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

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.

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

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.

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.

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

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.

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).

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ší.

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.

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

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

Časté dotazy