Gutenberg ve WordPressu krok za krokem

Úvod: Co je Gutenberg a proč ho používat

Když si dnes založíte nový web na WordPressu a otevřete první stránku k úpravám, přivítá vás prostředí, kterému se říká Gutenberg neboli blokový editor. Je to nástroj, ve kterém píšete texty, vkládáte obrázky, tvoříte tlačítka a skládáte celé stránky. Jinými slovy: je to místo, kde vzniká skoro celý obsah vašeho webu.

Název Gutenberg není náhodný. Odkazuje na Johannese Gutenberga, vynálezce knihtisku, který kdysi zásadně změnil způsob, jakým lidé šíří informace. Tvůrci WordPressu tím chtěli naznačit, že i tento editor je pokusem o velkou změnu — o to, aby si běžný člověk mohl sám poskládat hezky vypadající stránku bez pomoci programátora.

Proč Gutenberg vznikl

Dřívější WordPress měl takzvaný klasický editor. Vypadal zhruba jako jednoduchý textový procesor: velké bílé pole, nahoře několik tlačítek pro tučné písmo, kurzívu, odkaz nebo seznam. Psalo se do něj podobně jako do Wordu.

Problém byl v tom, že jakmile jste chtěli něco složitějšího než prostý text s obrázkem — třeba dva sloupce vedle sebe, barevný box s nabídkou nebo tlačítko s výraznou barvou — narazili jste. Buď jste museli sáhnout po takzvaných zkrácených kódech (krátké příkazy v hranatých závorkách, které dodával šablona nebo plugin), nebo psát HTML kód ručně, případně si nainstalovat další rozšíření. Pro běžného uživatele to byla nepříjemná bariéra.

Gutenberg vznikl přesně proto, aby tuhle bariéru odstranil. Místo jednoho velkého textového pole nabízí stavebnici. Každý prvek obsahu je samostatný dílek, který můžete přidat, nastavit, přesunout jinam nebo smazat — a to všechno myší, bez jediného řádku kódu.

V čem se liší od klasického editoru

Rozdíl se dá shrnout jednoduše:

• Klasický editor byl jedno souvislé pole textu. Obsah v něm byl „jedna hmota“, ve které se špatně orientovalo.
• Gutenberg je sada samostatných bloků. Každý odstavec, nadpis nebo obrázek je vlastní prvek, který má své vlastní nastavení.

Praktický dopad je obrovský. V klasickém editoru jste museli obrázek přesouvat tak, že jste ho vystřihli a vložili jinam — a často se přitom rozpadlo formátování. V Gutenbergu vezmete blok s obrázkem a jednoduše ho posunete o tři pozice výš. Nic se nerozbije.

Proč zrovna bloky

Princip bloků se nejlépe vysvětlí přirovnáním. Představte si stavebnici Lego. Máte krabici plnou dílků různých tvarů a barev. Jeden je dlouhý, druhý plochý, třetí má kolečka. Když stavíte domeček, neřešíte, z čeho jsou dílky vyrobené ani jak se lisují ve výrobě. Prostě je skládáte na sebe, dokud nemáte to, co jste chtěli. A když se vám něco nelíbí, dílek vyndáte a dáte tam jiný.

Gutenberg funguje přesně takhle. Dílky jsou bloky: odstavec, nadpis, obrázek, tlačítko, tabulka. Vaše stránka je stavba z těchto dílků. Nemusíte vědět, jak blok funguje uvnitř — stačí vědět, k čemu slouží a kam ho postavit.

Druhé užitečné přirovnání je nástěnka s lístečky. Každý blok je lísteček připíchnutý na korkové desce. Můžete lístečky přeskládat, jeden vyhodit, jiný přidat, dva dát vedle sebe. Nemusíte kvůli tomu přepisovat celou nástěnku.

Pro koho je Gutenberg vhodný

Krátká odpověď: pro každého, kdo spravuje obsah webu na WordPressu.

• Pro majitele malých firem, kteří si sami píšou stránky o službách, ceníky a kontakty.
• Pro blogery a autory, kteří potřebují hlavně dobře strukturovaný text s obrázky.
• Pro spolky, školy a neziskovky, kde web spravuje někdo „při práci“ a nemá čas učit se složité nástroje.
• Pro e-shopy a firmy, které chtějí tvořit vlastní landing pages bez čekání na externí firmu.

Proč se ho začátečníci nemusí bát

Gutenberg vypadá při prvním otevření trochu prázdně a to leckoho zaskočí. Jenže právě ta prázdnota je záměr: editor vám nenutí nic, dokud si nevyberete. A hlavně platí tři uklidňující věci:

1. Nic nezničíte. Dokud nekliknete na Publikovat, veřejnost vaši práci nevidí. A i po publikování jde všechno upravit.
2. Všechno jde vrátit zpět. Kombinace kláves Ctrl+Z (na Macu Cmd+Z) funguje spolehlivě, a WordPress si navíc ukládá starší verze obsahu.
3. Nemusíte umět všechno. V praxi si vystačíte s pěti až sedmi bloky. Zbytek se naučíte, až ho budete potřebovat.

Tip: Než začnete tvořit ostrý obsah, vytvořte si na webu jednu testovací stránku s názvem „Pískoviště“. Nepublikujte ji. Zkoušejte v ní všechno, co si chcete osahat. Nic se nemůže pokazit a získáte jistotu mnohem rychleji než čtením návodů.

Co je blok a jak Gutenberg funguje

Blok je nejmenší samostatná část obsahu, se kterou umí Gutenberg pracovat. Má vlastní obsah, vlastní nastavení a vlastní místo na stránce.

Když napíšete odstavec textu a stisknete Enter, WordPress automaticky vytvoří nový blok. Tím pádem každý odstavec článku je vlastní blok. Když vložíte obrázek, vznikne blok obrázku. Když přidáte tlačítko, vznikne blok tlačítka.

Jaké prvky mohou být blokem

Blokem může být prakticky cokoliv, co na stránce vidíte:

• odstavec — základní běžný text,
• nadpis — H1 až H6, tedy různé úrovně nadpisů,
• obrázek — jedna fotografie nebo grafika,
• tlačítko — výrazný odkaz, na který se dá kliknout,
• seznam — odrážkový nebo číslovaný,
• citace — zvýrazněný výrok, ohlas zákazníka nebo úryvek,
• video — nahrané na web nebo vložené z YouTube či Vimea,
• tabulka — data v řádcích a sloupcích,
• galerie — několik obrázků poskládaných do mřížky,
• sloupce — obsah vedle sebe,
• skupina — obal, do kterého se vejde více jiných bloků,
• oddělovač — vodorovná dělící čára,
• mezera — prázdné místo mezi prvky,
• obálka — obrázek s textem přes něj,
• soubor — odkaz na PDF nebo dokument ke stažení,
• kód, HTML, seznam nejnovějších příspěvků, kalendář a další.

Konkrétní nabídka se může trochu lišit podle verze WordPressu, podle šablony a podle nainstalovaných pluginů. Základní bloky ale najdete všude stejné.

Proč jsou bloky užitečné

1. Každý blok má vlastní nastavení. Když kliknete na obrázek, editor vám nabídne přesně to, co se obrázku týká: zarovnání, velikost, popisek, odkaz. Nemusíte se prokousávat nastavením, které se vás netýká.

2. Bloky se dají přesouvat. Chcete přesunout odstavec o dvě pozice níž? Kliknete na šipku. Chcete dát obrázek nad text místo pod něj? Přetáhnete ho.

3. Bloky se nerozbíjejí. V klasickém editoru se stávalo, že špatné kopírování rozhodilo formátování celého článku. Blok je uzavřená jednotka — když s ním hýbete, nese si své nastavení s sebou.

4. Bloky se dají opakovaně používat. Jednou vytvořený hezký box s nabídkou můžete zkopírovat na jinou stránku, nebo si ho uložit jako vzor a vkládat opakovaně.

5. Vidíte, jak stránka bude vypadat. Gutenberg zobrazuje obsah zhruba tak, jak dopadne na webu. Není to stoprocentní shoda, ale je to velmi blízko.

Praktický příklad: jednoduchá stránka ze čtyř bloků

Řekněme, že potřebujete stránku „Kontakt“. Poskládáte ji z těchto bloků:

1. Blok Nadpis (H1) — napíšete „Kontakt“.
2. Blok Odstavec — napíšete „Rádi vám odpovíme na jakýkoliv dotaz. Ozvěte se telefonicky nebo e-mailem, obvykle odpovídáme do 24 hodin.“
3. Blok Seznam — vypíšete telefon, e-mail a adresu.
4. Blok Tlačítko — s textem „Napsat e-mail“ a odkazem na váš e-mail.

Hotovo. Čtyři bloky, pět minut práce, funkční stránka. Přesně o tomhle je Gutenberg.

Seznámení s prostředím Gutenberg editoru

Když otevřete novou stránku, editor je rozdělený do několika oblastí. Pojďme si je projít tak, jak je při práci budete skutečně používat.

Horní panel nástrojů

Táhne se přes celou šířku obrazovky. Vlevo najdete:

• Modré tlačítko s plusem — přidat nový blok. Nejpoužívanější tlačítko v celém editoru.
• Šipky zpět a vpřed — vrátí poslední krok nebo ho zopakuje. Funguje stejně jako Ctrl+Z.
• Ikona „i“ (informace o dokumentu) — ukáže počet slov, znaků, odstavců a přehled nadpisů. Užitečné, když píšete text na míru určité délce.
• Ikona seznamu / „Přehled dokumentu“ — vypíše všechny bloky na stránce pod sebou. Ke stránce s padesáti bloky je to záchrana.

Vpravo nahoře pak:

• Uložit koncept — uloží rozpracovaný obsah, aniž by se zveřejnil.
• Náhled — ukáže, jak bude stránka vypadat na webu.
• Publikovat / Aktualizovat — zveřejní obsah, případně uloží změny už publikované stránky.
• Ikona ozubeného kola — zapíná a vypíná pravý postranní panel s nastavením.
• Tři tečky — další volby: režim zobrazení, klávesové zkratky, přepnutí do kódového editoru, předvolby.

Hlavní pracovní plocha

Prostřední bílá část, kde vzniká obsah. Nahoře je pole pro název stránky nebo příspěvku, pod ním prostor pro bloky.

Pracovní plocha se snaží zobrazit obsah podobně, jak vypadá na webu — používá barvy a písmo vaší šablony. Neberte to ale jako přesný obraz. Šířka editoru je jiná než šířka webu a některé prvky se v editoru chovají mírně odlišně.

Panel nástrojů vybraného bloku

Jakmile kliknete na jakýkoliv blok, objeví se nad ním malá lišta s ikonami. Obsah lišty se mění podle typu bloku:

• U odstavce: změna typu bloku, zarovnání, tučné písmo, kurzíva, odkaz.
• U obrázku: zarovnání, oříznutí, nahrazení obrázku, přidání odkazu.
• U tlačítka: zarovnání, formátování textu, odkaz.

Vždy je tam také ikona šesti teček (přesunout přetažením), šipky nahoru a dolů (posun o pozici) a tři tečky s dalšími volbami (duplikovat, odstranit, vložit blok před/za, kopírovat, seskupit).

Pravý panel s nastavením

Zapíná se ikonou ozubeného kola. Má dvě záložky:

• Příspěvek / Stránka — nastavení celého dokumentu: viditelnost, datum, rubriky, štítky, náhledový obrázek, výňatek, diskuse.
• Blok — nastavení právě vybraného bloku: velikost písma, barvy, mezery, rozměry, alternativní text u obrázku a podobně.

Toto je nejčastější zdroj zmatku u začátečníků. Pokud v panelu nevidíte to, co hledáte, zkontrolujte, kterou záložku máte otevřenou a jestli máte vybraný správný blok.

Přidávání nových bloků

Plus tlačítek je v editoru několik a všechna dělají v podstatě totéž:

• Velké modré plus vlevo nahoře — otevře kompletní nabídku bloků.
• Malé plus na prázdném řádku — vloží blok na dané místo.
• Plus mezi dvěma bloky — objeví se, když najedete myší do mezery mezi bloky.

Přehled dokumentu (seznam bloků)

Ikona vypadající jako odsazený seznam otevře panel, kde jsou všechny bloky vypsané pod sebou ve stromové struktuře. Vidíte tu například, že blok Sloupce obsahuje dva bloky Sloupec a v každém je Obrázek a Odstavec.

Praktické využití je trojí:

1. Rychlý skok na konkrétní blok kliknutím.
2. Kontrola struktury — hned poznáte, jestli je něco vnořené omylem.
3. Vybrání rodičovského bloku — třeba když potřebujete označit celou skupinu, ne jen text uvnitř.

Ve stejném panelu bývá i záložka Osnova s přehledem nadpisů. Skvělý nástroj pro kontrolu, jestli je struktura článku logická.

Náhled

Tlačítko Náhled nabízí obvykle možnosti Počítač, Tablet, Mobil a Náhled v novém panelu. První tři jen zúží pracovní plochu — je to orientační. Poslední otevře skutečnou stránku v nové záložce prohlížeče a tam už vidíte realitu.

Tip: Pokud vám editor připadá přeplácaný, klikněte na tři tečky vpravo nahoře a zapněte režim bez rušivých prvků (bývá pod názvem „Režim bez rozptylování“ nebo „Spotlight“). Zvýrazní se jen blok, na kterém právě pracujete, a zbytek zešedne.

Jak vytvořit nový článek nebo stránku

Rozdíl mezi příspěvkem a stránkou

Toto je nejčastější otázka začátečníků a odpověď je jednodušší, než se zdá.

Příspěvek je obsah, který se váže k času. Řadí se chronologicky, patří do rubrik, dá se opatřit štítky a obvykle se objevuje ve výpisu blogu. Typicky jde o článek, novinku, aktualitu, recept nebo případovou studii.

Stránka je obsah, který platí trvale. Nemá datum v popředí, nepatří do rubrik a obvykle se na ni odkazuje z hlavního menu. Typicky jde o „O nás“, „Služby“, „Ceník“, „Kontakt“ nebo „Obchodní podmínky“.

Jednoduchá pomůcka: Kdyby byl váš web knihou, stránky jsou kapitoly a příspěvky jsou deníkové zápisy.

Kdy použít příspěvek: „5 tipů na zimní údržbu zahrady“, „Otevřeli jsme novou pobočku v Brně“, „Jak jsme řešili zakázku pro klienta X“.

Kdy použít stránku: „O nás“, „Naše služby“, „Ceník“, „Kontakt“, „Časté dotazy“, „Ochrana osobních údajů“.

Postup krok za krokem

1. Přihlaste se do administrace WordPressu — obvykle na adrese vasweb.cz/wp-admin.
2. V levém menu klikněte na Příspěvky → Vytvořit příspěvek, nebo na Stránky → Vytvořit stránku. Rychlejší cesta: nahoře v černé liště je odkaz + Vytvořit.
3. Napište název do horního velkého pole. Toto pole je zvláštní — není to obyčejný blok. Většina šablon ho zobrazí jako hlavní nadpis stránky (H1). Proto do obsahu už další H1 zpravidla nepřidávejte.
4. Stiskněte Enter nebo klikněte pod název. Kurzor skočí do prvního odstavce a můžete psát.
5. Pište obsah. Každý Enter vytvoří nový odstavec, tedy nový blok. Pokud chcete zalomit řádek uvnitř jednoho odstavce, použijte Shift+Enter.
6. Přidávejte bloky podle potřeby — obrázky, nadpisy, seznamy, tlačítka. (Podrobně v následující kapitole.)
7. Průběžně ukládejte tlačítkem Uložit koncept, nebo zkratkou Ctrl+S. WordPress sice ukládá automaticky, ale spoléhat se na to je zbytečné riziko.
8. Zkontrolujte náhled — klikněte na Náhled a otevřete stránku v nové záložce.
9. Publikujte. Klikněte na Publikovat, potvrďte v panelu, který se objeví.

Pozor: Automatické ukládání funguje jen tehdy, když je stránka načtená v prohlížeči a máte připojení k internetu. Když vám spadne wi-fi nebo omylem zavřete záložku uprostřed psaní, o nedávné změny přijít můžete. Zvykněte si na Ctrl+S přibližně po každém dokončeném odstavci.

Jak přidávat nové bloky

Existuje několik cest a každá se hodí do jiné situace. Vyplatí se znát alespoň dvě.

1. Tlačítko plus

Nejviditelnější způsob. Klikněte na modré plus vlevo nahoře a otevře se panel se všemi dostupnými bloky rozdělenými do kategorií:

• Text — odstavec, nadpis, seznam, citace, tabulka, kód,
• Média — obrázek, galerie, zvuk, video, obálka, soubor,
• Design — tlačítka, sloupce, skupina, oddělovač, mezera, více,
• Widgety — nejnovější příspěvky, kalendář, vyhledávání, sociální ikony,
• Motiv — prvky navázané na šablonu,
• Vložení — YouTube, Vimeo, Spotify, mapy a další externí obsah.

Blok vložíte kliknutím nebo přetažením na požadované místo.

2. Lomítko — nejrychlejší způsob

Toto je zdaleka nejefektivnější metoda a vyplatí se ji naučit hned.

Na prázdném řádku napište lomítko / a hned za ním začátek názvu bloku. Editor okamžitě nabídne odpovídající bloky a vy jen šipkami vyberete a stisknete Enter.

Příklady:

• /obr → Obrázek
• /nad → Nadpis
• /tla → Tlačítka
• /sez → Seznam
• /tab → Tabulka
• /sloup → Sloupce
• /cit → Citace

Než dojdete myší k tlačítku plus, máte přes lomítko blok vložený. Za den práce to ušetří dost času.

Pozor: Lomítko funguje pouze na prázdném odstavcovém bloku. Pokud už na řádku něco napsaného máte, editor lomítko bere jako obyčejný znak.

3. Plus mezi bloky

Najeďte myší do mezery mezi dva existující bloky. Objeví se malé plus s vodorovnou čárou. Kliknutím vložíte nový blok přesně sem — mezi ně.

Toto je nejlepší způsob, jak vložit obrázek doprostřed hotového článku, aniž byste museli cokoliv přesouvat.

4. Enter na konci bloku

Když jste v odstavci na konci textu a stisknete Enter, vytvoří se nový prázdný odstavcový blok. Na něm můžete rovnou napsat lomítko a změnit ho na cokoliv jiného.

Jak se v nabídce neztratit

Nabídka bloků obsahuje ve výchozím WordPressu několik desítek položek a s pluginy jich mohou být stovky. Tři rady:

1. Používejte vyhledávání. V panelu bloků je nahoře vyhledávací pole. Napište, co hledáte — funguje i podle účelu, ne jen podle přesného názvu.
2. Sledujte sekci „Nejpoužívanější“. Editor si pamatuje, co používáte často, a nabízí to nahoře.
3. Nesnažte se znát všechno. Devadesát procent běžného obsahu vytvoříte pomocí sedmi bloků: odstavec, nadpis, obrázek, seznam, tlačítko, sloupce, skupina.

Nejdůležitější bloky, které by měl znát každý

Odstavec

Co to je: Základní blok pro běžný text. Vzniká automaticky, kdykoli začnete psát.

K čemu slouží: Nese hlavní sdělení stránky. Tvoří většinu obsahu jakéhokoliv webu.

Jak s ním pracovat:

Klikněte a pište. Enter vytvoří nový odstavec, Shift+Enter zalomí řádek uvnitř stávajícího odstavce (to se hodí například u adresy, kde chcete každý řádek zvlášť, ale je to jeden logický celek).

Formátování textu provedete přes lištu nad blokem nebo klávesovými zkratkami:

• Tučné — Ctrl+B
• Kurzíva — Ctrl+I
• Odkaz — Ctrl+K
• Pod šipkou dolů v liště najdete navíc: přeškrtnutí, horní a dolní index, vložený kód, zvýraznění barvou.

V pravém panelu u vybraného odstavce nastavíte:

• velikost písma (malé, střední, velké, obří nebo vlastní hodnota),
• barvu textu a pozadí,
• odsazení prvního řádku a velikost mezer,
• kapitálku — velké dekorativní první písmeno odstavce.

Na co si dát pozor:

• Nepoužívejte tučné písmo na celé odstavce. Ztratí smysl. Tučné má zvýrazňovat, a když zvýrazníte všechno, nezvýrazníte nic.
• Neměňte velikost písma u každého odstavce zvlášť. Vzniká z toho nepřehledná změť.
• Vyhněte se dlouhým blokům textu. Tři až pět řádků je na webu ideální délka odstavce.
• Nepoužívejte odstavec místo nadpisu jen proto, že si zvětšíte písmo a dáte ho tučně. Vypadá to podobně, ale vyhledávače ani čtečky pro nevidomé to jako nadpis nepoznají.

Příklad z praxe: Píšete text o službách. Místo jednoho odstavce na deset řádků ho rozdělte na tři kratší. Čtenář na mobilu vidí najednou jen malý výřez obrazovky a souvislá zeď textu ho odradí dřív, než se do ní pustí.

Nadpis

Co to je: Blok pro nadpisy různých úrovní — H1 až H6.

K čemu slouží: Rozděluje obsah do logických částí a dává mu strukturu.

Rozdíly mezi úrovněmi:

• H1 — hlavní název celé stránky. Na stránce má být pouze jeden. Ve WordPressu ho většinou automaticky vytváří pole s názvem nahoře, takže do obsahu už H1 nepřidávejte.
• H2 — hlavní kapitoly. Toto je nejpoužívanější úroveň v obsahu.
• H3 — podkapitoly uvnitř H2.
• H4 — dělení uvnitř H3. Používá se zřídka.
• H5, H6 — v běžném obsahu je téměř nepotřebujete.

Jak nadpis vytvořit:

1. Na prázdném řádku napište /nadpis a stiskněte Enter.
2. Napište text nadpisu.
3. V liště nad blokem vyberte úroveň (H2, H3…) přes ikonu s označením úrovně.

Rychlejší cesta: na prázdném řádku napište ## a mezeru — vznikne H2. Tři křížky ### udělají H3. Funguje to jako v Markdownu.

Proč je struktura nadpisů důležitá:

Tohle je bod, který začátečníci nejčastěji podceňují. Nadpis totiž není jen větší tučný text. Je to informace o struktuře dokumentu, kterou čte:

1. Vyhledávač. Google podle nadpisů chápe, o čem stránka je a jak je uspořádaná. Logická hierarchie nadpisů pomáhá stránce v hodnocení a umožňuje Googlu zobrazit ve výsledcích odkazy na jednotlivé sekce.
2. Čtečky obrazovky. Nevidomí uživatelé se po stránce pohybují přeskakováním mezi nadpisy. Když nadpisy chybí nebo jsou v chaotickém pořadí, stránka je pro ně prakticky nepoužitelná.
3. Běžný čtenář. Většina lidí stránku nejdřív prolétne očima a čte jen nadpisy. Podle nich se rozhodne, jestli bude číst dál.
4. Automatické obsahy. Pluginy generující obsah článku pracují právě s nadpisy.

Základní pravidlo: Úrovně nadpisů nikdy nepřeskakujte. Po H2 přijde buď další H2, nebo H3 — nikdy rovnou H4.

Špatně:

H1 Naše služby
  H4 Účetnictví
  H4 Daňové poradenství

Správně:

H1 Naše služby
  H2 Účetnictví
    H3 Měsíční zpracování
    H3 Roční uzávěrka
  H2 Daňové poradenství

Tip: V panelu Přehled dokumentu je záložka Osnova. Otevřete ji před publikováním a projděte strukturu nadpisů. WordPress vás sám upozorní, pokud jste přeskočili úroveň.

Obrázek

Co to je: Blok pro jednu fotografii nebo grafiku.

Jak obrázek vložit:

Máte tři možnosti:

1. Nahrát — vyberete soubor z počítače.
2. Knihovna médií — vyberete obrázek, který je už na webu nahraný.
3. Vložit z URL — zadáte adresu obrázku umístěného jinde. Tuhle možnost používejte opatrně, protože pokud obrázek na cizím serveru zmizí, na vašem webu zůstane prázdné místo.

Nejrychlejší způsob vůbec: přetáhněte soubor z počítače přímo do editoru. Gutenberg sám vytvoří blok obrázku a soubor nahraje.

Nastavení velikosti:

V pravém panelu najdete rozbalovací seznam Rozlišení s možnostmi jako Náhled, Střední, Velký, Plná velikost. WordPress totiž z každého nahraného obrázku automaticky vytvoří několik zmenšených verzí. Pod tím jsou pole pro šířku a výšku, kde můžete rozměry doladit ručně, a rychlá tlačítka s procenty (25 %, 50 %, 75 %, 100 %).

Zarovnání:

V liště nad blokem vyberete zarovnání vlevo, na střed, vpravo, na šířku obsahu nebo na celou šířku. Poslední dvě možnosti nemusí být dostupné ve všech šablonách.

Zarovnání vlevo nebo vpravo způsobí obtékání textem — text poteče vedle obrázku. Vypadá to hezky na počítači, ale u úzkých obrázků a dlouhých slov to na mobilu občas působí zmateně.

Alternativní text:

V pravém panelu je pole Alternativní text. Napište sem stručný popis toho, co je na obrázku vidět.

Proč je alternativní text důležitý:

• Přístupnost. Nevidomí uživatelé používají čtečku obrazovky, která jim alternativní text přečte nahlas. Bez něj slyší jen „obrázek“ nebo název souboru.
• Situace, kdy se obrázek nenačte. Pomalé připojení, chyba serveru — místo obrázku se zobrazí alternativní text.
• SEO. Vyhledávače nevidí obsah fotografie. Alternativní text je hlavní způsob, jak jim sdělit, co na ní je. Pomáhá to i k zobrazení ve vyhledávání obrázků.

Jak ho psát:

• Špatně: „obrázek“, „foto1″, „IMG_20240612″, „kolo kolo bicykl jízdní kolo levné kolo“
• Dobře: „Mechanik seřizuje přehazovku na horském kole v dílně“

Popisujte, co je vidět, přirozenou větou. Nesnažte se do něj cpát klíčová slova.

Pokud je obrázek čistě dekorativní (například ozdobná čára nebo pozadí), nechte alternativní text prázdný. Čtečka ho pak přeskočí a neruší uživatele zbytečným popisem.

Popisek:

Pod obrázkem je pole pro popisek (caption). Zobrazí se čtenářům pod obrázkem. Používejte ho, když je potřeba vysvětlit kontext, uvést autora fotografie nebo dodat informaci, která z obrázku není zřejmá. Nepoužívejte ho, když by jen opakoval to, co je zjevné.

Seznam

Co to je: Blok pro odrážkový nebo číslovaný seznam.

Kdy který použít:

• Odrážkový — když na pořadí položek nezáleží. Výčet vlastností, seznam služeb, co si vzít s sebou.
• Číslovaný — když pořadí záleží. Postup krok za krokem, žebříček, chronologie.

Jak s ním pracovat:

1. Napište /seznam nebo začněte řádek pomlčkou a mezerou (- ) — WordPress automaticky vytvoří odrážkový seznam. Číslovaný vznikne, když napíšete 1. a mezeru.
2. Každý Enter přidá další položku.
3. Tab odsadí položku o úroveň níž (vytvoří podseznam), Shift+Tab ji vrátí zpět.
4. Dvojím stiskem Enteru seznam ukončíte.

Zajímavost, která mate začátečníky: seznam je jeden blok, ale každá jeho položka je vlastní vnořený blok. Proto se dá jednotlivá položka posunout šipkami nahoru a dolů.

Na co si dát pozor:

• Nepoužívejte seznam pro celý text. Když je všechno odrážka, čte se to hůř než souvislý text.
• Držte položky přibližně stejně dlouhé. Seznam, kde první bod má dvě slova a druhý pět vět, vypadá nevyváženě.
• Nepište za odrážky tečky, pokud nejde o celé věty.

Tlačítko

Co to je: Blok Tlačítka obsahuje jedno nebo více tlačítek — výrazných odkazů, které mají čtenáře přimět k akci.

Jak tlačítko vytvořit:

1. Napište /tlacitka a stiskněte Enter.
2. Napište text tlačítka.
3. Označte text a stiskněte Ctrl+K, nebo klikněte na ikonu odkazu v liště.
4. Zadejte adresu. Pokud odkazujete na vlastní stránku, začněte psát její název — WordPress vám ji nabídne a odkaz doplní sám.
5. V pravém panelu nastavte barvu pozadí, barvu textu, zaoblení rohů a případně orámování.

Chcete-li přidat druhé tlačítko vedle prvního, klikněte na plus uvnitř bloku Tlačítka. Obě pak budou v jedné řadě.

Kdy tlačítka používat:

Tlačítko má být jasná výzva k jedné konkrétní akci. Použijte ho, když chcete, aby čtenář:

• napsal e-mail nebo zavolal,
• odeslal poptávku,
• stáhl si ceník,
• přešel na stránku s objednávkou,
• zarezervoval termín.

Jak formulovat text:

Text tlačítka má říct, co se stane po kliknutí. Ideálně slovesem v první osobě nebo v rozkazu.

Držte text krátký — dvě až čtyři slova jsou ideální. Delší text se na mobilu zalomí a tlačítko se rozpadne.

Jak se vyhnout přemíře tlačítek:

Nejčastější chyba je dát na stránku sedm tlačítek v naději, že aspoň na jedno někdo klikne. Efekt je opačný — čtenář se rozhoduje mezi možnostmi a nakonec neklikne na žádnou.

Praktické pravidlo: jedna stránka, jeden hlavní cíl. Hlavní tlačítko může být na stránce zopakované (nahoře a dole u dlouhé stránky), ale mělo by vést na stejné místo a mít stejný text. Vedlejší akci klidně udělejte obyčejným textovým odkazem.

Citace

Co to je: Blok pro zvýrazněný výrok, obvykle s odsazením a svislou čarou nebo jiným vizuálním odlišením podle šablony.

Kdy citaci použít:

• Reference od zákazníka. „Práce byla hotová dřív, než jsme čekali, a v perfektní kvalitě.“ — Jana Nováková, Truhlářství Novák
• Výrok odborníka nebo úryvek z jiného textu, na který se odkazujete.
• Zvýraznění klíčové myšlenky uprostřed dlouhého textu.

Kdy použít běžný odstavec:

Pokud jde o váš vlastní text, který jen chcete zvýraznit, není citace vždy správná volba. Vizuálně tvrdí čtenáři: „toto někdo řekl“. Pro pouhé zvýraznění je lepší použít skupinu s barevným pozadím.

Jak s ní pracovat:

Napište /citace, vložte text a do pole pod ním doplňte zdroj — jméno člověka, firmu nebo název publikace. Pole pro zdroj se dá nechat prázdné.

Galerie

Co to je: Blok pro několik obrázků poskládaných do mřížky.

Jak ji vytvořit:

1. Napište /galerie.
2. Klikněte na Knihovna médií nebo nahrajte obrázky.
3. Podržte Ctrl (Cmd na Macu) a klikněte na více obrázků — vyberete jich takhle několik najednou.
4. Potvrďte tlačítkem Vytvořit novou galerii.
5. V pravém panelu nastavte počet sloupců a oříznutí obrázků (aby všechny měly stejnou výšku).
6. V poli Odkaz vyberte, co se stane po kliknutí: nic, otevření souboru s médiem, nebo stránka s přílohou. Většina šablon umí obrázek zvětšit v překryvném okně.

Pořadí obrázků změníte přetažením. Jednotlivý obrázek smažete kliknutím na něj a stiskem klávesy Delete.

Na co si dát pozor:

Galerie s třiceti fotografiemi v plné velikosti dokáže stránku citelně zpomalit. Pro velké množství fotek raději vyberte reprezentativní výběr, nebo zvažte plugin, který obrázky načítá postupně.

Tabulka

Co to je: Blok pro data uspořádaná do řádků a sloupců.

Jak ji vytvořit:

1. Napište /tabulka.
2. Zadejte počet sloupců a řádků. Nemusíte se trefit přesně — dají se přidávat i později.
3. Klikněte do buňky a pište. Tab přeskočí do další buňky.
4. Přes ikonu v liště přidáte nebo odeberete řádky a sloupce.
5. V pravém panelu zapnete hlavičku a patičku tabulky a vyberete styl (běžný nebo pruhovaný).

Kdy tabulku použít:

Když srovnáváte několik věcí podle stejných kritérií: ceník s variantami, technické parametry, otevírací doba, porovnání dvou služeb.

Kdy tabulku raději nepoužít:

• Když má víc než čtyři sloupce. Na mobilu se to nevejde a čtenář musí posouvat do stran.
• Když v ní jsou dlouhé texty. Tabulka je na krátká data, ne na odstavce.
• Když chcete jen srovnat dvě věci. Často stačí dva odstavce nebo dva seznamy.
• Nikdy pro rozvržení stránky. Na vytvoření sloupců používejte blok Sloupce, ne tabulku.

Pozor: Tabulky jsou největší nepřítel mobilního zobrazení. Než tabulku publikujete, otevřete si stránku na telefonu. Pokud se musí posouvat do stran, zvažte, jestli by stejnou informaci nešlo podat jako seznam.

Video

Co to je: Existují dvě různé cesty a je důležité znát rozdíl.

Možnost A: Blok Video (nahrání na web)

Nahraje videosoubor přímo na váš hosting a přehrává ho z něj.

• Výhoda: video je jen vaše, bez reklam a bez odkazů na jiný obsah.
• Nevýhoda: velké soubory zabírají místo na hostingu, zatěžují server a při větší návštěvnosti se video seká. Běžný sdílený hosting není na streamování videa stavěný.

Možnost B: Vložení z YouTube nebo Vimea

Zkopírujete adresu videa z YouTube a vložíte ji do prázdného odstavcového bloku. WordPress ji sám rozpozná a video vloží.

• Výhoda: nezabírá místo, načítá se rychle, funguje na všech zařízeních, YouTube se postará o kvalitu podle rychlosti připojení diváka.
• Nevýhoda: může se zobrazit branding platformy a po dohrání nabídky dalších videí.

Doporučení pro běžný web: Pro cokoliv delšího než pár vteřin používejte YouTube nebo Vimeo. Přímé nahrání na web má smysl jen u krátkých ukázek bez zvuku, například u animované ukázky produktu.

Oddělovač a mezera

Dva jednoduché bloky, které dělají velkou službu přehlednosti.

Oddělovač je vodorovná čára. Vloží se napsáním /oddelovac nebo napsáním tří pomlček --- a Enteru. V pravém panelu si vyberete styl: široká čára, tenká čára nebo tři tečky.

Použijte ho, když se mění téma a chcete to čtenáři vizuálně naznačit. Například mezi hlavním textem článku a závěrečnou výzvou k akci.

Mezera je prázdné místo s nastavitelnou výškou. Vloží se přes /mezera. Výšku upravíte tažením za spodní okraj nebo číselně v pravém panelu.

Kdy mezeru použít: Když je obsah namačkaný na sebe a potřebuje vzduch. Typicky před a za výraznou sekcí, kterou chcete oddělit.

Pozor: Nepoužívejte prázdné odstavce pro vytvoření mezery. Je to častý zlozvyk přenesený z Wordu. Prázdné odstavce se v každé šabloně chovají jinak, na mobilu vytvářejí nepředvídatelné mezery a čtečky obrazovky je hlásí jako prázdný obsah. Blok Mezera je k tomu určený a chová se spolehlivě.

Jak upravovat existující bloky

Jak blok označit

Kliknutím do bloku ho vyberete a zároveň umístíte kurzor dovnitř — můžete rovnou psát.

Kliknutím na ikonu bloku v liště nad ním (nebo stiskem klávesy Escape) vyberete celý blok jako objekt. Poznáte to podle modrého rámečku okolo celého bloku. V tomto stavu ho můžete zkopírovat, smazat klávesou Delete nebo přesunout šipkami.

Tenhle rozdíl je důležitý. Když chcete smazat celý blok a stisknete Delete uvnitř textu, smažete jen znak. Musíte nejdřív stisknout Escape.

Jak změnit obsah

Klikněte do bloku a pište. U obrázku klikněte na Nahradit v liště. U tlačítka přepište text a upravte odkaz.

Jak blok přesunout

Tři způsoby:

1. Šipky nahoru a dolů v liště nad blokem — posun o jednu pozici. Nejpřesnější.
2. Ikona šesti teček — chytnete a přetáhnete blok myší kamkoliv. Modrá čára ukazuje, kam se blok umístí.
3. Klávesová zkratka Ctrl+Alt+T (vložit před) a Ctrl+Alt+Y (vložit za).

Přesouvání přetažením je pohodlné, ale u složitějších stránek se snadno spletete a blok se vám vloží dovnitř jiného bloku. Šipky jsou spolehlivější.

Jak blok duplikovat

Klikněte na tři tečky v liště bloku → Duplikovat. Nebo zkratkou Ctrl+Shift+D.

Kopie se vloží hned pod původní blok se vším nastavením včetně barev a velikostí. Toto je nejrychlejší cesta, jak vytvořit tři stejně vypadající boxy — uděláte jeden pořádně a dvakrát ho zduplikujete.

Jak blok odstranit

• Tři tečky → Odstranit blok
• Zkratka Shift+Alt+Z
• Označte celý blok Escapem a stiskněte Delete

Když blok smažete omylem, stačí Ctrl+Z.

Jak zkopírovat styl a nastavení

Novější verze WordPressu nabízejí v nabídce tří teček položky Kopírovat styly a Vložit styly. Zkopírujete tím barvy, velikost písma a mezery z jednoho bloku do druhého, aniž byste kopírovali obsah.

Pokud tuto možnost ve své verzi nemáte, funguje osvědčený obchvat: blok zduplikujte a v kopii přepište obsah. Nastavení zůstane zachované.

Jak rychle pracovat s větším množstvím bloků

Výběr více bloků najednou: Klikněte do prvního bloku, podržte Shift a klikněte do posledního. Označí se všechny bloky mezi nimi. Můžete je pak najednou zkopírovat, smazat nebo seskupit.

Vybrat všechno: Stiskněte Ctrl+A. První stisk označí obsah bloku, druhý stisk označí všechny bloky.

Hromadné seskupení: Označte více bloků, klikněte na tři tečky → Seskupit. Vznikne kolem nich obal, který můžete přesouvat jako celek.

Praktické scénáře

Scénář 1: Přesun odstavce, který patří jinam. Napsali jste dlouhý článek a zjistili, že třetí odstavec by logicky patřil na konec. Klikněte na něj, stiskněte Escape, pak držte tlačítko se šipkou dolů, dokud se nedostane na místo. Hotovo za pět vteřin.

Scénář 2: Tři stejné boxy se službami. Vytvořte jednu skupinu s nadpisem, textem a tlačítkem. Nastavte jí pozadí a mezery. Pak ji dvakrát zduplikujte (Ctrl+Shift+D) a v kopiích přepište texty. Všechny tři boxy budou vypadat naprosto stejně bez jediné chyby.

Scénář 3: Odstranění celé sekce. Chcete smazat nadpis a tři odstavce pod ním. Klikněte do nadpisu, podržte Shift a klikněte do posledního odstavce. Stiskněte Delete. Všechny čtyři bloky zmizí najednou.

Scénář 4: Změna všech nadpisů z H3 na H2. Bohužel to nejde hromadně. Musíte kliknout na každý nadpis a změnit úroveň v liště. Je to argument pro to, aby se struktura promyslela předem.

Jak přesouvat bloky a organizovat obsah

Jednoduché přesouvání

Nejzákladnější operace — blok putuje o pozici nahoru nebo dolů, nebo ho přetáhnete myší. Obsah zůstává na stejné úrovni, jen v jiném pořadí.

Hodí se pro běžnou práci s textem: přehodit odstavce, posunout obrázek, dát seznam pod jiný odstavec.

Skupiny

Skupina obalí několik bloků do jednoho celku. Od té chvíle se s nimi dá manipulovat jako s jedním prvkem a celé skupině se dá nastavit společné pozadí, mezery a rámeček.

Rozdíl proti prostému přesouvání: se skupinou přesunete pět bloků najednou a nemusíte hlídat, že jste na nějaký zapomněli.

Sloupce

Blok Sloupce postaví obsah vedle sebe. Uvnitř každého sloupce může být cokoliv — text, obrázek, tlačítko, dokonce další skupina.

Rozdíl proti skupině: skupina staví obsah pod sebe (a slouží hlavně ke stylování), sloupce staví obsah vedle sebe (a slouží k rozvržení).

Rozvržení a zarovnání

U skupiny a sloupců najdete v pravém panelu sekci Rozvržení. Obsahuje volby jako:

• Zarovnání na obsah / na šířku / na celou šířku — určuje, jak široký prvek bude.
• Řádkové rozvržení (u varianty skupiny nazvané Řádek) — postaví položky vedle sebe s možností zalomení.
• Mezery mezi položkami — nastaví jednotné rozestupy.

Tyto možnosti se liší podle verze WordPressu a podle šablony. Pokud některou nevidíte, není to chyba — vaše šablona ji prostě nepodporuje.

Nejčastější chyby při organizaci

1. Blok skončí uvnitř jiného bloku omylem. Při přetahování se snadno stane, že blok spadne dovnitř skupiny místo vedle ní. Poznáte to podle toho, že se chová divně — třeba zdědil barvu pozadí. Řešení: otevřete Přehled dokumentu a podívejte se na strukturu. Blok vytáhnete ven přetažením v tomto panelu.

2. Příliš mnoho vnoření. Skupina ve sloupci ve skupině v obálce. Editor to zvládne, ale vy se v tom přestanete orientovat a na mobilu se to bude chovat nepředvídatelně. Držte se maximálně dvou úrovní vnoření.

3. Snaha vytvořit rozvržení pomocí mezer. Nesnažte se posouvat obsah doprava přidáváním mezer nebo prázdných znaků. Použijte sloupce nebo nastavení odsazení ve skupině.

4. Nekonzistentní mezery. Mezi jednou sekcí je mezera 60 px, mezi druhou 25 px. Stránka pak působí neuspořádaně. Zvolte si dvě hodnoty (menší mezi souvisejícím obsahem, větší mezi sekcemi) a držte se jich.

Skupiny a kontejnery obsahu

Co je blok Skupina

Skupina je obal. Sama o sobě nic nezobrazuje — slouží k tomu, aby držela jiné bloky pohromadě a dala jim společný vzhled.

Představte si ji jako krabici. Do krabice dáte několik věcí, krabici polepíte barevným papírem a můžete ji přenášet celou najednou.

Jak skupinu vytvořit

Způsob A — ze stávajícího obsahu: Označte několik bloků (Shift+klik), klikněte na tři tečky → Seskupit.

Způsob B — od začátku: Napište /skupina, pak dovnitř přidávejte bloky přes plus uvnitř skupiny.

Co se dá skupině nastavit

V pravém panelu:

• Barva pozadí a barva textu,
• Vnitřní odsazení (padding) — vzdálenost mezi okrajem skupiny a obsahem uvnitř,
• Vnější mezery (margin) — vzdálenost od okolních prvků,
• Rámeček a zaoblení rohů,
• Minimální výška a zarovnání obsahu,
• Šířka obsahu.

Pozor: Nejčastější chyba u skupin je zapomenuté vnitřní odsazení. Nastavíte barevné pozadí, ale text se lepí přímo na okraj a vypadá to zmačkaně. Vždycky přidejte odsazení alespoň 20 až 30 pixelů.

Praktické příklady

Příklad 1: Skupina s nadpisem, textem a tlačítkem

Klasický blok pro nabídku služby:

1. Vložte skupinu.
2. Dovnitř: Nadpis (H3) „Vedení účetnictví“.
3. Odstavec: „Kompletní zpracování účetnictví pro malé firmy a živnostníky. Vždy včas a bez starostí.“
4. Tlačítko: „Zjistit cenu“.
5. Skupině nastavte světle šedé pozadí, zaoblení rohů 8 px a vnitřní odsazení 30 px.

Výsledek vypadá jako profesionálně navržený box — a přitom jste jen poskládali tři bloky do jednoho obalu.

Příklad 2: Zvýrazněná sekce s barevným pozadím

Uprostřed dlouhé stránky potřebujete něco vypíchnout. Vytvořte skupinu s nadpisem „Novinka: prodloužená otevírací doba“ a odstavcem s podrobnostmi. Skupině dejte světle žluté pozadí. Čtenář to při prolétnutí stránky nepřehlédne.

Příklad 3: Výzva k akci na konci stránky

Na konci stránky o službách vytvořte skupinu s tmavým pozadím, bílým textem a jedním výrazným tlačítkem. Nastavte jí zarovnání na celou šířku, aby vizuálně uzavírala stránku.

Příklad 4: Informační box s upozorněním

Skupina s bledě modrým pozadím, tenkým rámečkem vlevo a odstavcem začínajícím slovem „Poznámka:“. Vytvoříte si tak vlastní styl upozornění, který můžete duplikovat po celém webu.

Varianty skupiny

Novější WordPress nabízí u bloku Skupina tři varianty:

• Skupina — obsah pod sebou (výchozí),
• Řádek — obsah vedle sebe v jedné řadě, na mobilu se zalomí,
• Sloupec (stack) — obsah pod sebou s jednotnými mezerami.

Varianta Řádek je praktická pro věci jako ikona vedle textu nebo dvě tlačítka vedle sebe. Na rozdíl od bloku Sloupce se nepokouší dělit šířku na pevné části — jen postaví prvky do řady.

Sloupce a rozvržení stránky

Jak sloupce vytvořit

1. Napište /sloupce a stiskněte Enter.
2. Editor nabídne přednastavené varianty: 100 %, 50/50, 33/66, 33/33/33 a další. Vyberte tu nejbližší.
3. V každém sloupci klikněte na plus a vložte obsah.
4. Šířku můžete doladit v pravém panelu jednotlivého sloupce (klikněte do sloupce a v Přehledu dokumentu vyberte blok Sloupec).

Kdy jsou sloupce vhodné

• Text vedle obrázku. Nalevo fotka služby, napravo popis. Klasické a funguje to.
• Tři nabídky vedle sebe. Tři varianty balíčků, tři služby, tři výhody.
• Krátké dlaždice. Ikona, nadpis, dvě věty. Čtyři vedle sebe.
• Porovnání dvou možností. Vlevo „Před“, vpravo „Po“.

Kdy sloupce naopak škodí

• Když do nich dáte dlouhý text. Úzký sloupec s dvaceti řádky textu se čte hůř než jeden široký odstavec.
• Když jich uděláte pět a víc. Na počítači to snad projde, na mobilu vznikne pět úzkých proužků pod sebou.
• Když v nich obsah není vyrovnaný. Vlevo tři řádky, vpravo patnáct — vzniká velké prázdné místo.
• Když se snažíte simulovat tabulku. Na data používejte tabulku.

Sloupce na mobilu

Toto je klíčová věc. Na telefonu se sloupce standardně zalomí pod sebe — první sloupec navrch, druhý pod něj a tak dál. Editor pro to má v pravém panelu přepínač „Na mobilu zalomit do sloupce“ (nebo podobně pojmenovaný). Ve výchozím stavu je zapnutý a doporučuji ho zapnutý nechat.

Důsledek, který se často přehlédne: pořadí sloupců na mobilu odpovídá pořadí v editoru zleva doprava. Pokud máte vlevo obrázek a vpravo důležitý text, na mobilu uvidí návštěvník nejdřív obrázek. U střídavého rozvržení (obrázek-text, text-obrázek) tak na mobilu vznikají dva obrázky za sebou. Když vám to vadí, sjednoťte pořadí tak, aby byl text vždy první.

Praktické příklady rozvržení

Rozvržení A: Představení služby

Sloupce 50/50
├── Sloupec 1: Obrázek (fotka práce)
└── Sloupec 2: Nadpis H3 + Odstavec + Tlačítko

Rozvržení B: Tři výhody

Sloupce 33/33/33
├── Sloupec 1: Nadpis H3 „Rychle" + Odstavec
├── Sloupec 2: Nadpis H3 „Kvalitně" + Odstavec
└── Sloupec 3: Nadpis H3 „Za rozumnou cenu" + Odstavec

Rozvržení C: Text s postranní poznámkou

Sloupce 66/33
├── Sloupec 1: Hlavní text (několik odstavců)
└── Sloupec 2: Skupina s barevným pozadím a kontaktem

Tip: Než začnete stavět sloupce, načrtněte si rozvržení na papír. Deset vteřin s tužkou ušetří deset minut přetahování bloků.

Vkládání obrázků a správná práce s médii

Jak funguje knihovna médií

Knihovnu najdete v levém menu administrace pod položkou Média. Je to úložiště všech souborů nahraných na web — obrázků, PDF, videí, zvuků.

Když nahrajete obrázek v editoru, automaticky se uloží i sem. Naopak obrázek nahraný do knihovny můžete opakovaně používat na různých stránkách bez opětovného nahrávání.

Knihovna nabízí dvě zobrazení: mřížku s náhledy a seznam s podrobnostmi. V seznamu vidíte název souboru, datum nahrání a kde všude je obrázek použitý.

Pozor: Když v knihovně smažete obrázek, zmizí ze všech stránek, kde byl použitý. WordPress vás na to neupozorní. Před mazáním se v zobrazení seznamu podívejte do sloupce s informací o použití.

Proč záleží na názvu souboru

Fotoaparát ani telefon nedávají souborům smysluplná jména. Dostanete IMG_20240612_143022.jpg nebo DSC_0042.jpg. Takový název:

• neříká nic vyhledávači,
• neříká nic vám, když soubor hledáte v knihovně,
• vypadá neprofesionálně v adrese obrázku.

Přejmenujte soubory ještě před nahráním. Používejte malá písmena, pomlčky místo mezer a bez diakritiky:

• IMG_4821.jpg → truhlarska-dilna-kuchynska-linka.jpg
• DSC_0033.jpg → tym-uctarna-brno.jpg
• Snímek obrazovky 2024-06-12.png → ukazka-administrace-eshopu.png

Po nahrání už název souboru změnit nejde (respektive jde, ale rozbily by se odkazy na obrázek). Proto to udělejte předem.

Optimalizace velikosti obrázků

Proč velké obrázky škodí:

Fotka z moderního telefonu má běžně 4000 pixelů na šířku a váží 5 MB. Na webu se ale zobrazí v šířce nanejvýš 1200 pixelů. Návštěvník tedy stahuje pětkrát víc dat, než potřebuje.

Důsledky:

• Stránka se načítá pomalu. Lidé odcházejí. Statistiky říkají, že po třech vteřinách čekání odejde velká část návštěvníků.
• Google penalizuje pomalé weby. Rychlost načtení je jedním z faktorů hodnocení.
• Zvlášť špatné je to na mobilních datech. Návštěvník na horším signálu čeká několik vteřin na jednu fotku.
• Plní se vám hosting. Sto fotek po 5 MB je půl gigabajtu.

Doporučené rozměry:

Jak obrázek zmenšit:

• Před nahráním v jakémkoliv editoru obrázků — i základní prohlížeč ve Windows nebo Náhled na Macu umí změnit rozměry.
• Online nástroje pro kompresi (například Squoosh, TinyPNG) — zmenší velikost souboru bez viditelné ztráty kvality.
• Plugin pro optimalizaci — nainstaluje se jednou a pak zpracovává obrázky automaticky při nahrání. Pro běžný web nejpohodlnější řešení.

Formát souboru:

• JPG — fotografie. Nejmenší soubory při dobré kvalitě.
• PNG — grafika s průhledným pozadím, loga, snímky obrazovky s textem.
• WebP — moderní formát, menší soubory než JPG. Podporují ho všechny současné prohlížeče a WordPress ho zvládá.

Alternativní text, popisek, titulek a legenda

WordPress u obrázku nabízí několik textových polí a lidé si je pletou. Pojďme si je rozlišit:

• Alternativní text — popis pro čtečky obrazovky a vyhledávače. Nezobrazuje se návštěvníkům (pokud se obrázek načte). Vyplňujte vždy.
• Popisek (caption) — text pod obrázkem. Zobrazuje se návštěvníkům. Vyplňujte, jen když je potřeba.
• Název (titulek) — interní název v knihovně médií. Slouží hlavně vám k orientaci.
• Popis — delší text v knihovně médií. Na běžném webu se prakticky nevyužívá.

Kdy použít popisek

Popisek přidejte, když:

• fotka potřebuje vysvětlení („Rekonstrukce koupelny v Chrudimi, realizace 2024″),
• uvádíte autora nebo zdroj fotografie,
• jde o graf nebo schéma, kde je potřeba doplnit kontext.

Popisek nepřidávejte, když by jen popisoval zjevné. Fotka kávy s popiskem „káva“ nikomu nepomůže.

Praktický pracovní postup

Než nahrajete obrázky na web, projděte tenhle postup:

1. Vyberte fotky, které skutečně použijete.
2. Ořízněte je do rozumného poměru stran.
3. Zmenšete šířku na potřebnou hodnotu (obvykle 1200–1600 px).
4. Zkomprimujte je online nástrojem.
5. Přejmenujte soubory smysluplně.
6. Nahrajte je do WordPressu.
7. U každého vyplňte alternativní text.

Vypadá to jako hodně práce, ale u pěti fotek to zabere pět minut a váš web bude znatelně rychlejší.

Odkazy v Gutenberg editoru

Jak vytvořit odkaz

1. Označte text, který má být odkazem.
2. Stiskněte Ctrl+K (nebo klikněte na ikonu řetězu v liště bloku).
3. Zadejte adresu, nebo začněte psát název vlastní stránky.
4. Stiskněte Enter.

Interní odkaz (na vlastní stránku)

Když do pole začnete psát název existující stránky nebo článku, WordPress vám je nabídne v seznamu. Kliknutím vyberete a adresa se doplní sama.

Proč to dělat takhle: Když se v budoucnu změní adresa stránky, WordPress si s tím u takto vytvořeného odkazu často poradí. A hlavně se vyhnete překlepům.

Proč interní odkazy dělat: Propojují váš web dohromady. Čtenáři se snáz dostanou na související obsah a vyhledávače lépe pochopí strukturu webu.

Odkaz na jiný web

Zkopírujte celou adresu včetně https:// a vložte ji do pole. WordPress ji přijme tak, jak je.

Jak upravit existující odkaz

Klikněte do textu odkazu. Objeví se malá bublina s adresou a ikonou tužky. Kliknutím na tužku odkaz upravíte, kliknutím na přeškrtnutý řetěz ho odstraníte (text zůstane, jen přestane být odkazem).

Otevírání v novém okně

V nastavení odkazu je přepínač Otevřít v novém panelu.

Zapněte ho, když:

• odkazujete na cizí web a nechcete, aby návštěvník opustil ten váš,
• odkazujete na PDF ke stažení,
• odkazujete na formulář nebo rezervační systém na jiné doméně.

Nechte ho vypnutý, když:

• odkazujete v rámci vlastního webu.

Otevírání vlastních stránek v nových panelech je otravné. Návštěvníkovi se hromadí záložky a přestane fungovat tlačítko Zpět. Uživatel si navíc umí nové okno otevřít sám, když chce.

Jak psát texty odkazů

Text odkazu má popisovat cíl, ne akci kliknutí. Důvod je praktický i technický: uživatelé čteček obrazovky si často nechají přečíst jen seznam odkazů na stránce. „Klikněte zde, klikněte zde, více“ jim neřekne vůbec nic.

Poslední řádek stojí za komentář: nikdy nepoužívejte holou adresu jako text odkazu. Je nečitelná, na mobilu se rozbíjí a čtečka ji přečte znak po znaku.

Tip: U odkazu na PDF nebo velký soubor napište do textu odkazu formát a velikost. Návštěvník pak ví, do čeho jde, a nebude překvapený, že se mu místo stránky stahuje soubor.

Nastavení stránky nebo příspěvku

Vpravo v panelu, na záložce Příspěvek nebo Stránka, najdete nastavení celého dokumentu. Projděme si ho položku po položce.

Stav a viditelnost

Stav říká, v jaké fázi obsah je:

• Koncept — rozepsaný obsah, veřejnost ho nevidí.
• Čeká na revizi — hodí se, když má obsah někdo schválit před publikováním.
• Publikováno — veřejně dostupné.
• V koši — smazané, ale ještě obnovitelné.

Viditelnost má tři možnosti:

• Veřejné — vidí každý. Výchozí volba.
• Chráněno heslem — návštěvník musí zadat heslo, které nastavíte. Použití: ceník jen pro vybrané klienty, materiály pro účastníky kurzu, obsah pro členy spolku.
• Soukromé — vidí jen přihlášení administrátoři a editoři. Použití: rozpracovaná stránka, kterou chcete ukázat kolegovi, ale ne veřejnosti.

Datum publikování

Kliknutím na datum otevřete kalendář. Můžete:

• Naplánovat do budoucna — obsah se sám zveřejní ve zvolený čas. Tlačítko Publikovat se změní na Naplánovat. Skvělé pro pravidelné vydávání článků nebo pro spuštění akce přesně v poledne.
• Nastavit datum do minulosti — obsah se ve výpisu blogu zařadí podle tohoto data. Používá se při přenášení starších článků z jiného webu.

Autor

Pokud má web víc uživatelů, můžete zde změnit, kdo je uveden jako autor. Praktické, když někdo píše texty za jiného člověka nebo když přebíráte správu po kolegovi.

Rubriky (kategorie)

Pouze u příspěvků. Rubrika je hlavní tematické zařazení článku.

Jak s nimi pracovat:

• Vyberte existující rubriku zaškrtnutím, nebo vytvořte novou přímo v panelu.
• Každý příspěvek by měl mít alespoň jednu rubriku, ale ideálně jen jednu nebo dvě.
• Rubriky mohou být hierarchické — rubrika „Účetnictví“ může být podřazená rubrice „Služby“.

Časté chyby:

• Zaškrtnutí pěti rubrik u jednoho článku. Ztrácí to smysl.
• Vytvoření třiceti rubrik na webu s dvaceti články.
• Ponechání článku v rubrice „Nezařazené“, což je výchozí rubrika WordPressu.

Rozumná struktura pro malý web: tři až sedm rubrik, které pokrývají hlavní témata.

Štítky

Pouze u příspěvků. Štítky jsou volnější klíčová slova popisující konkrétní věci v článku.

Rozdíl proti rubrikám: rubrika je zásuvka ve skříni, štítek je nálepka na krabici. Rubrika říká „toto je článek o zahradě“, štítek říká „v článku se mluví o růžích, hnojivu a jarním řezu“.

Používejte tři až pět štítků na článek a hlavně buďte konzistentní. Nemíchejte „účetnictví“ a „ucetnictvi“ a „Účetnictví“ — vzniknou tři různé štítky.

Poznámka: Štítky nejsou nutné. Spousta menších webů si bez nich vystačí a nic tím neztratí.

Náhledový obrázek

Obrázek reprezentující článek nebo stránku. Zobrazuje se:

• ve výpisu článků na blogu,
• v souvisejících článcích,
• při sdílení odkazu na sociálních sítích,
• v některých šablonách nahoře na stránce jako velká hlavička.

Doporučení:

• Nastavte ho vždy u článků. Výpis blogu bez obrázků vypadá nedodělaně.
• Zvolte poměr stran zhruba 16:9 nebo 3:2 a šířku alespoň 1200 px.
• Počítejte s tím, že šablona obrázek může oříznout. Nedávejte důležité detaily ke krajům.

Výňatek (perex)

Krátké shrnutí obsahu, obvykle dvě až tři věty.

Kde se zobrazí:

• ve výpisu článků pod nadpisem,
• ve výsledcích vyhledávání na webu,
• někdy jako popisek při sdílení.

Když ho nevyplníte, WordPress obvykle vezme prvních pár desítek slov z článku. To ale často znamená useknutou větu uprostřed.

Doporučení: Napište ho ručně, 120 až 160 znaků, a formulujte ho tak, aby čtenáře navnadil na kliknutí. Není to jen zkrácený úvod — je to pozvánka.

Diskuse a komentáře

Přepínače Povolit komentáře a Povolit zpětné odkazy.

• U článků komentáře většinou zapněte, pokud o diskusi stojíte a máte čas ji moderovat.
• U stránek typu Kontakt nebo Obchodní podmínky je vypněte. Nemá to smysl a přitáhne to jen spam.

Zpětné odkazy (trackbacky a pingbacky) jsou dnes prakticky mrtvá funkce, která přitahuje především spam. Klidně je vypněte.

Trvalý odkaz (URL adresa)

Pod polem s odkazem najdete pole pro koncovku URL — poslední část adresy stránky.

WordPress ji vytvoří automaticky z názvu, ale často stojí za úpravu:

• Zkraťte ji. Z 10-nejlepsich-tipu-jak-se-postarat-o-zahradu-na-jare udělejte jarni-pece-o-zahradu.
• Odstraňte spojky a předložky.
• Používejte malá písmena a pomlčky, bez diakritiky.

Pozor: URL adresu měňte jen před publikováním. Když ji změníte u stránky, která je už nějakou dobu na webu, přestanou fungovat všechny odkazy, které na ni vedou zvenčí, a stránka může ztratit pozici ve vyhledávačích. Pokud změnu opravdu potřebujete, nastavte přesměrování ze staré adresy na novou (obvykle pomocí pluginu).

Šablona stránky

U stránek bývá v panelu volba Šablona. Nabízí varianty jako Výchozí, Na celou šířku, Bez postranního panelu a podobně. Konkrétní nabídka závisí na použité šabloně webu.

Vyzkoušejte, jak která varianta vypadá. Pro landing page je typicky nejlepší varianta na celou šířku bez postranního panelu.

Jak používat náhled a kontrolovat stránku před publikováním

Proč kontrolovat

Editor zobrazuje obsah přibližně tak, jak bude vypadat na webu. Rozdíly vznikají proto, že:

• editor má jinou šířku než skutečná stránka,
• šablona přidává hlavičku, patičku a někdy postranní panel,
• některé styly šablony se v editoru neuplatní,
• na mobilu se obsah přeskládá.

Náhled je jediný způsob, jak vidět realitu.

Jak náhled otevřít

Klikněte na tlačítko Náhled vpravo nahoře. Nabídne se:

• Počítač / Tablet / Mobil — jen zúží pracovní plochu editoru. Orientační, ale rychlé.
• Náhled v novém panelu — otevře skutečnou stránku v nové záložce. Toto je ten důležitý.

Nejlepší kontrola: otevřete náhled na počítači a zároveň si adresu náhledu pošlete do telefonu (nebo se na mobilu přihlaste do administrace a otevřete náhled tam).

Kontrolní seznam před publikováním

Projděte tyto body. Zabere to tři minuty a ušetří to trapné opravy po zveřejnění.

Text a struktura:

• [ ] Je název stránky výstižný a bez překlepů?
• [ ] Je na stránce jen jeden H1?
• [ ] Jdou nadpisy v logickém pořadí (H2 → H3, nikde neskáčou)?
• [ ] Jsou odstavce rozumně dlouhé (max. 4–5 řádků)?
• [ ] Prošel jsem text kontrolou pravopisu?
• [ ] Nezůstal někde rozepsaný nebo zástupný text („lorem ipsum“, „doplnit později“)?

Obrázky:

• [ ] Mají všechny obrázky alternativní text?
• [ ] Nejsou soubory zbytečně velké?
• [ ] Zobrazují se všechny správně (žádné prázdné rámečky)?
• [ ] Jsou obrázky zarovnané konzistentně?

Odkazy:

• [ ] Fungují všechny odkazy? (Proklikejte je v náhledu.)
• [ ] Mají odkazy smysluplný text?
• [ ] Otevírají se externí odkazy v novém panelu?

Tlačítka:

• [ ] Vede tlačítko tam, kam má?
• [ ] Je text tlačítka jasný?
• [ ] Není tlačítek příliš mnoho?

Vzhled:

• [ ] Vypadá stránka dobře na mobilu?
• [ ] Nejsou někde nechtěné velké mezery?
• [ ] Jsou barvy konzistentní se zbytkem webu?
• [ ] Nevytéká tabulka nebo obrázek ze stránky?

Nastavení:

• [ ] Je nastavená rubrika (u příspěvku)?
• [ ] Je vybraný náhledový obrázek?
• [ ] Je vyplněný výňatek?
• [ ] Je URL adresa krátká a smysluplná?

Tip: Nechte hotovou stránku přes noc uležet a přečtěte si ji ráno znovu. Chyby, které jste večer neviděli, vám najednou skočí do očí. Ještě lepší je nechat text přečíst někoho dalšího.

Uložení konceptu, aktualizace a publikování

Čtyři stavy obsahu

1. Rozepsaný, neuložený obsah Text existuje jen v prohlížeči. Když zavřete okno, přijdete o něj. WordPress sice ukládá automatický koncept každou minutu, ale spoléhat se na to je hazard.

2. Uložený koncept Obsah je bezpečně v databázi. Veřejnost ho nevidí. Můžete zavřít prohlížeč, vypnout počítač a za týden pokračovat.

3. Publikovaný obsah Stránka je veřejně dostupná na své adrese. Objevila se v menu (pokud jste ji tam přidali) nebo ve výpisu blogu.

4. Publikovaný obsah s neuloženými změnami Nejzrádnější stav. Něco jste změnili, ale neklikli jste na Aktualizovat. Návštěvníci pořád vidí starou verzi. Editor to naznačuje tím, že se objeví tlačítko Aktualizovat a je zvýrazněné.

Jak publikovat

1. Klikněte na Publikovat.
2. WordPress otevře postranní panel s kontrolou před publikováním — ukáže viditelnost, datum, rubriky, náhledový obrázek.
3. Zkontrolujte a klikněte na Publikovat znovu.
4. Objeví se potvrzení s odkazem na živou stránku a možností zkopírovat adresu.

Jak bezpečně upravit publikovanou stránku

Toto je oprávněná obava začátečníků: „Když stránku upravím, uvidí návštěvníci polovičatou verzi?“

Ne. Změny v editoru se projeví na webu teprve po kliknutí na Aktualizovat. Můžete v editoru dělat cokoliv — mazat, přesouvat, přepisovat — a dokud neaktualizujete, veřejnost vidí původní verzi.

Bezpečný postup pro větší úpravu:

1. Otevřete stránku v editoru.
2. Proveďte změny.
3. Klikněte na Náhled v novém panelu a zkontrolujte výsledek.
4. Teprve když jste spokojení, klikněte na Aktualizovat.

Pro opravdu velký zásah (přestavba celé stránky) je bezpečnější jiný postup:

1. V přehledu stránek najeďte na stránku a klikněte na Klonovat nebo Nový koncept (tato možnost vyžaduje plugin, například Duplicate Post — bez něj tato volba není).
2. Přestavte kopii v klidu.
3. Když je hotová, přepněte obsah.

Bez pluginu můžete obsah zkopírovat ručně: v editoru stiskněte Ctrl+A dvakrát (označí všechny bloky), Ctrl+C, vytvořte novou stránku jako koncept a vložte Ctrl+V.

Revize (starší verze)

WordPress ukládá historii změn. V pravém panelu u publikovaného obsahu najdete položku Revize s počtem uložených verzí.

Kliknutím otevřete srovnávací zobrazení: vlevo starší verze, vpravo novější, změny barevně zvýrazněné. Posuvníkem nahoře se pohybujete v čase a tlačítkem obnovíte kteroukoliv starší verzi.

Je to záchranná síť pro situace typu „smazal jsem tři odstavce a už si nepamatuju, co v nich bylo“.

Pozor: Počet uchovávaných revizí může být na některých hostinzích omezený kvůli velikosti databáze. Nespoléhejte na revize jako na zálohu celého webu — na to slouží zálohovací plugin nebo služba hostingu.

Jak vytvořit hezkou stránku bez programování

Většina lidí, kteří si stěžují, že jim stránka vypadá „nějak divně“, nemá problém s nedostatkem funkcí. Mají problém s tím, že o struktuře nepřemýšleli předem.

Osvědčená struktura stránky

Fungující stránka má skoro vždycky stejnou kostru:

1. Hlavní nadpis (H1) — řekne, o čem stránka je. Konkrétně, ne poeticky.
2. Úvodní text — dvě až tři věty, které vysvětlí, co návštěvník získá. Odpovídá na otázku „proč bych měl číst dál?“
3. Vizuální prvek — fotka, ilustrace nebo výrazný box. Rozbije zeď textu a dodá důvěryhodnost.
4. Hlavní obsah — rozdělený do sekcí s nadpisy H2. Každá sekce jedno téma.
5. Výhody nebo klíčové body — seznam nebo tři sloupce s tím, co je na vaší nabídce dobré.
6. Výzva k akci — jasné tlačítko s jednou konkrétní akcí.
7. Kontakt nebo další krok — jak se s vámi spojit, případně odkaz na související stránku.

Jak to poskládat z bloků

Zásada, kterou si zapamatujte

Méně je víc. Stránka se třemi typy prvků, které se opakují, vypadá profesionálně. Stránka s deseti různými efekty vypadá jako web z roku 2004.

Když si nejste jistí, jestli něco přidat, nepřidávejte to.

Praktický příklad: vytvoření stránky „Naše služby“ krok za krokem

Postavme společně celou stránku od nuly. Modelový příklad: malé truhlářství, které dělá kuchyňské linky, vestavěné skříně a nábytek na míru.

Krok 0: Příprava

Než otevřete editor, připravte si:

• texty (aspoň hrubě, klidně v poznámkovém bloku),
• tři fotografie hotových zakázek, zmenšené na 1200 px a přejmenované (kuchynska-linka-dub.jpg, vestavena-skrin-predsin.jpg, jidelni-stul-masiv.jpg),
• rozhodnutí, co má být hlavní akce (u nás: nezávazná poptávka).

Krok 1: Vytvoření stránky a název

Stránky → Vytvořit stránku. Do pole názvu napište:

Nábytek na míru pro váš domov

Proč tenhle název: Není to jen „Naše služby“. Návštěvníkovi hned říká, co nabízíme. Zároveň se název stane hlavním nadpisem H1 a obsahuje slova, která lidé skutečně hledají.

Krok 2: Úvodní odstavec

Stiskněte Enter a napište:

Navrhujeme a vyrábíme kuchyňské linky, vestavěné skříně a nábytek na míru. Pracujeme s masivem i dýhou, měříme u vás doma a montáž zvládneme obvykle do šesti týdnů od objednávky.

Blok: Odstavec Proč: Odpovídá na tři otázky, které návštěvník má hned na začátku — co děláte, jak, jak dlouho to trvá. Úprava: V pravém panelu nastavte velikost písma na Střední nebo Velké. Úvodní odstavec by měl být o něco výraznější než běžný text.

Krok 3: Hlavní fotografie

Napište /obrazek a nahrajte nejlepší fotku.

Blok: Obrázek Proč: U řemeslné práce fotka prodává víc než jakýkoliv text. Návštěvník musí vidět kvalitu. Úprava:

• Zarovnání: Na šířku obsahu nebo Na celou šířku.
• Alternativní text: „Kuchyňská linka z dubového masivu s ostrůvkem“
• Popisek: nechte prázdný, fotka mluví sama.

Krok 4: Nadpis první sekce

Napište ## a mezeru, pak text:

Co vyrábíme

Blok: Nadpis (H2) Proč: Začíná hlavní část stránky. H2 proto, že H1 už zabral název stránky.

Krok 5: Tři služby ve sloupcích

Napište /sloupce, vyberte variantu 33/33/33.

Do každého sloupce vložte:

Sloupec 1:

• Obrázek (kuchynska-linka-dub.jpg), alternativní text „Kuchyňská linka z dubu“
• Nadpis H3: „Kuchyňské linky“
• Odstavec: „Návrh na míru vašemu prostoru, kvalitní kování a materiály. Včetně zaměření a montáže.“

Sloupec 2:

• Obrázek (vestavena-skrin-predsin.jpg), alternativní text „Vestavěná skříň v předsíni“
• Nadpis H3: „Vestavěné skříně“
• Odstavec: „Využijeme i šikmé stěny a nízké prostory. Vnitřní uspořádání navrhneme podle toho, co v ní budete mít.“

Sloupec 3:

• Obrázek (jidelni-stul-masiv.jpg), alternativní text „Jídelní stůl z masivního dřeva“
• Nadpis H3: „Nábytek na míru“
• Odstavec: „Stoly, komody, police, dětské pokoje. Cokoliv, co se do sériové výroby nevejde.“

Proč sloupce: Tři rovnocenné služby vedle sebe se dobře porovnávají a stránka díky tomu působí uspořádaně. Pozor na mobil: Sloupce se na telefonu zalomí pod sebe. Protože každý sloupec začíná obrázkem a pokračuje nadpisem, čtení zůstane logické. To je důvod, proč obrázek dáváme nahoru a ne dolů.

Krok 6: Sekce o postupu

Nadpis H2:

Jak spolupráce probíhá

Pod něj číslovaný seznam (napište 1. a mezeru):

1. Ozvete se nám telefonicky nebo přes formulář.
2. Domluvíme si nezávaznou schůzku u vás doma.
3. Zaměříme prostor a probereme vaše představy.
4. Do týdne dostanete návrh včetně ceny.
5. Po odsouhlasení začneme vyrábět.
6. Nábytek přivezeme a smontujeme.

Blok: Nadpis + Seznam (číslovaný) Proč číslovaný: Kroky mají jasné pořadí. Zároveň to snižuje obavu z neznámého — návštěvník vidí, že proces je jednoduchý a přehledný.

Krok 7: Oddělovač

Napište --- a Enter.

Blok: Oddělovač Proč: Vizuálně odděluje informační část stránky od části, která má vést k akci.

Krok 8: Reference

Napište /citace:

Kuchyň nám dělali před dvěma lety a pořád vypadá jako nová. Nejvíc oceňuju, že si dali práci s vyřešením rohové skříňky, kterou nám jinde odmítli.

Do pole zdroje: Martina H., Chrudim

Blok: Citace Proč: Reference od zákazníka je nejsilnější důkaz kvality. Citace ji vizuálně odliší od vašeho vlastního textu, takže je jasné, že to říká někdo jiný.

Krok 9: Výzva k akci

Napište /skupina. Do skupiny vložte:

• Nadpis H2: „Máte představu? Rádi si o ní popovídáme.“
• Odstavec: „Zaměření a návrh jsou zdarma a k ničemu vás nezavazují.“
• Tlačítko: „Poptat nábytek na míru“ s odkazem na stránku Kontakt.

Skupině nastavte:

• barvu pozadí (tmavá nebo výrazná barva vaší značky),
• barvu textu (bílá, aby byla čitelná),
• vnitřní odsazení 40 px,
• zarovnání obsahu na střed,
• zarovnání skupiny na celou šířku.

Proč skupina: Tři bloky drží pohromadě a mají společné pozadí. Sekce vizuálně vyskočí a čtenář ji nepřehlédne. Proč jedno tlačítko: Stránka má jeden cíl. Kdybychom sem dali tři tlačítka, oslabíme to.

Krok 10: Kontaktní informace

Nadpis H3:

Kde nás najdete

Pod ním seznam:

• Telefon: 777 123 456 (Po–Pá, 8:00–17:00)
• E-mail: info@truhlarstvi-priklad.cz
• Dílna: Průmyslová 12, Chrudim

Blok: Nadpis + Seznam Proč: I když má web samostatnou stránku Kontakt, člověk, který dočetl až sem, je připravený jednat. Nenuťte ho hledat. Úprava: Na telefonní číslo přidejte odkaz začínající tel: (například tel:+420777123456) — na mobilu pak stačí jedno klepnutí a volání se vytočí.

Krok 11: Nastavení stránky

V pravém panelu:

• Náhledový obrázek: hlavní fotka kuchyně.
• URL adresa: zkraťte na nabytek-na-miru.
• Komentáře: vypnout.
• Šablona: vyzkoušejte variantu na celou šířku.

Krok 12: Kontrola a publikování

1. Uložte koncept (Ctrl+S).
2. Otevřete Náhled v novém panelu.
3. Projděte kontrolní seznam z předchozí kapitoly.
4. Otevřete stránku na telefonu.
5. Proklikejte tlačítko a odkazy.
6. Klikněte na Publikovat.

Hotová stránka má zhruba 20 bloků, obsahuje všechno podstatné a nevyžadovala jedinou řádku kódu.

Vzory bloků a opakovaně používaný obsah

Co jsou vzory (patterns)

Vzor je předpřipravená sestava bloků. Místo abyste stavěli sekci od nuly, vložíte hotovou a jen přepíšete texty a vyměníte obrázky.

Najdete je v panelu pro vkládání bloků (modré plus) na záložce Vzory. Jsou rozdělené do kategorií jako Bannery, Text, Galerie, Volání k akci, Týmy, Ceníky.

Vzory dodává WordPress i vaše šablona. Kvalitnější šablony obsahují desítky vzorů přesně naladěných na svůj vzhled — to je jeden z hlavních důvodů, proč si vybrat dobrou šablonu.

Jak vzor použít:

1. Klikněte na plus → záložka Vzory.
2. Projděte kategorie a najděte, co se hodí.
3. Klikněte na vzor — vloží se do stránky.
4. Přepište texty, vyměňte obrázky, upravte barvy.

Po vložení už je to obyčejná sestava bloků. Můžete v ní cokoliv měnit, mazat a přidávat.

Vlastní vzory

Ještě užitečnější je vytvořit si vlastní vzor z něčeho, co jste sami postavili:

1. Vyberte bloky, které chcete uložit (Shift+klik nebo vyberte celou skupinu).
2. Tři tečky → Vytvořit vzor (v některých verzích Přidat do opakovaně použitelných bloků).
3. Pojmenujte ho, například „Výzva k akci — poptávka“.
4. Rozhodněte o přepínači Synchronizováno.

Synchronizované vs. nesynchronizované vzory

Tohle je klíčový rozdíl:

Synchronizovaný vzor (dříve „opakovaně použitelný blok“) je propojený. Když ho změníte na jednom místě, změní se na všech stránkách, kde je použitý.

Použití: kontaktní údaje, otevírací doba, upozornění na dovolenou, patička s certifikáty. Když se změní telefonní číslo, opravíte ho jednou a je to všude.

Nesynchronizovaný vzor je jen šablona. Vloží se a od té chvíle žije vlastním životem — změny v jedné kopii se do ostatních nepromítnou.

Použití: rozvržení sekce se službou, box s výhodami, struktura článku. Chcete stejný tvar, ale jiný obsah.

Pozor: U synchronizovaného vzoru snadno zapomenete, že měníte obsah na deseti místech najednou. Editor to naznačuje jinou barvou rámečku, ale je dobré si to hlídat. Pokud potřebujete upravit jen jednu instanci, klikněte na tři tečky a vyberte Oddělit (obsah se rozpadne na běžné bloky a přestane být propojený).

Praktické příklady, co si uložit jako vzor

1. Výzva k akci — skupina s barevným pozadím, nadpisem, textem a tlačítkem. Vložíte na konec každé stránky se službou.

2. Kontaktní blok — telefon, e-mail, adresa a otevírací doba. Udělejte ho synchronizovaný, ať se změny propíšou všude.

3. Informační box — skupina se světlým pozadím a rámečkem, do které dáváte poznámky a upozornění. Nesynchronizovaný.

4. Sekce se službou — obrázek vlevo, nadpis a text vpravo, tlačítko pod tím. Postavíte jednou, použijete desetkrát.

5. Autorský medailonek — fotka, jméno, dvě věty o autorovi. Na konci každého článku. Synchronizovaný.

6. Upozornění na akci — banner s informací o slevě nebo dovolené. Synchronizovaný, aby se dal jedním zásahem odstranit ze všech stránek.

Proč nestavět všechno od začátku

Praktický dopad je jednoduchý: sekce, kterou stavíte poprvé, zabere dvacet minut. Vložení hotového vzoru zabere dvacet vteřin.

Navíc tím udržíte jednotný vzhled webu. Když každou sekci stavíte znovu, pokaždé jí dáte trochu jiné mezery, jiný odstín pozadí a jinou velikost tlačítka. Web pak působí neuspořádaně, aniž byste věděli proč.

Jak pracovat rychleji a efektivněji

Klávesové zkratky, které se vyplatí

Na Macu místo Ctrl použijte Cmd.

Nemusíte se naučit všechny. Ctrl+K, Ctrl+Shift+D a Escape vám ušetří nejvíc času.

Rychlé vkládání textovými zkratkami

Kromě lomítka funguje v editoru i tzv. rychlé formátování:

• ## + mezera → Nadpis H2
• ### + mezera → Nadpis H3
• - + mezera → odrážkový seznam
• 1. + mezera → číslovaný seznam
• > + mezera → citace
• --- + Enter → oddělovač
• ` text ` → vložený kód

Jsou to návyky z Markdownu a jakmile si je osvojíte, píšete strukturovaný text bez sáhnutí na myš.

Kopírování a duplikování

Nejrychlejší způsob, jak vytvořit několik podobných prvků:

1. Postavte první pořádně, včetně barev a mezer.
2. Ctrl+Shift+D pro každou další kopii.
3. V kopiích přepište obsah.

Funguje to i mezi stránkami: označte bloky, Ctrl+C, otevřete jinou stránku, Ctrl+V. Bloky se přenesou i s nastavením.

Práce s Přehledem dokumentu

U delších stránek si tento panel nechte trvale otevřený. Získáte:

• rychlou navigaci — kliknutím skočíte na blok,
• přesouvání přetažením ve stromu — přesnější než přetahování v pracovní ploše,
• kontrolu vnoření — hned vidíte, co je v čem.

Používání vzorů

Viz předchozí kapitola. Toto je největší časová úspora ze všech.

Postupná kontrola

Nekontrolujte všechno až na konci. Pracujte po sekcích:

1. Postavte sekci.
2. Zkontrolujte ji.
3. Uložte.
4. Pokračujte další sekcí.

Chyba nalezená hned se opraví za deset vteřin. Chyba nalezená v hotové stránce znamená hledání a přeskládávání.

Další drobnosti

• Vypněte si rozptylování. Tři tečky → Režim bez rozptylování.
• Přetahujte obrázky přímo z plochy do editoru místo procházení knihovnou.
• Pište texty mimo editor, pokud jde o dlouhý text. V poznámkovém bloku nebo v Dokumentech se píše svižněji. Do editoru pak vložte hotový text — WordPress ho automaticky rozdělí na odstavcové bloky.
• Používejte kontrolu pravopisu prohlížeče. Chrome i Firefox podtrhávají chyby, pokud máte nainstalovaný český slovník.

Nejčastější chyby začátečníků

1. Příliš mnoho různých stylů

Proč vzniká: Editor nabízí barvy, velikosti a efekty, a je lákavé je vyzkoušet všechny. Každá sekce pak dostane trochu jiný vzhled.

Jak se projevuje: Stránka působí neuspořádaně a amatérsky. Návštěvník nemá kam upřít pozornost.

Jak to opravit: Projděte stránku a sjednoťte. Vyberte dvě velikosti písma pro běžný text, dvě barvy pozadí, jeden styl tlačítka.

Jak předejít: Rozhodněte se na začátku pro několik pravidel a držte se jich. Sepište si je: „Nadpisy sekcí = H2, výchozí velikost. Boxy = světle šedé pozadí, zaoblení 8 px. Tlačítka = modrá, zaoblení 4 px.“

2. Nesprávná struktura nadpisů

Proč vzniká: Uživatel vybírá úroveň nadpisu podle toho, jak velký text chce mít. Chce menší nadpis → vybere H4.

Jak se projevuje: Navenek to vypadá dobře. Ale vyhledávače nechápou strukturu, čtečky obrazovky selhávají a automaticky generovaný obsah je nesmyslný.

Jak to opravit: Otevřete Přehled dokumentu → Osnova. Projděte hierarchii a opravte úrovně. Pokud vám nevyhovuje velikost, změňte ji v pravém panelu — úroveň nadpisu a jeho velikost jsou dvě nezávislé věci.

Jak předejít: Nejdřív si napište osnovu (jaké sekce, jaké podsekce), pak teprve pište obsah.

3. Příliš dlouhé odstavce

Proč vzniká: Zvyk z psaní na papír nebo do Wordu, kde jsou dlouhé odstavce běžné.

Jak se projevuje: Zeď textu. Na mobilu vyplní odstavec celou obrazovku a čtenář odchází.

Jak to opravit: Rozdělte odstavec v místě, kde se mění myšlenka. Klikněte kurzorem doprostřed a stiskněte Enter — vznikne nový blok.

Jak předejít: Držte se pravidla maximálně čtyř až pěti řádků na odstavec.

4. Příliš mnoho obrázků

Proč vzniká: Máte hezké fotky a chcete je ukázat všechny.

Jak se projevuje: Stránka se načítá pomalu a čtenář ztrácí nit textu.

Jak to opravit: Vyberte tři nejlepší a zbytek dejte do galerie na samostatné stránce.

Jak předejít: Ptejte se u každého obrázku: „Přidává tenhle obrázek informaci, nebo jen vyplňuje místo?“

5. Obrovské soubory obrázků

Proč vzniká: Nahrání fotky přímo z fotoaparátu nebo telefonu bez úpravy.

Jak se projevuje: Stránka se načítá několik vteřin, na mobilních datech ještě déle. Hosting se plní.

Jak to opravit: Stáhněte obrázky, zmenšete je, znovu nahrajte a v blocích vyměňte. Rychlejší cesta: nainstalujte optimalizační plugin, který umí zpracovat i už nahrané obrázky.

Jak předejít: Zmenšujte a komprimujte před nahráním. Zvykněte si na to jako na součást procesu.

6. Nepřehledné používání barev

Proč vzniká: Nabídka barev v editoru svádí. Každá sekce dostane jinou.

Jak se projevuje: Web vypadá jako paleta. Ztrácí se, co je důležité.

Jak to opravit: Zredukujte na tři barvy: hlavní (značková), doplňková (světlá pro pozadí boxů) a barva textu.

Jak předejít: Držte se barev, které nabízí vaše šablona v přednastavené paletě. Jsou navržené tak, aby spolu ladily.

7. Příliš mnoho různých tlačítek

Proč vzniká: Snaha nabídnout všechny možnosti najednou.

Jak se projevuje: Návštěvník neví, co má udělat, a neudělá nic.

Jak to opravit: Určete jednu hlavní akci pro stránku. Ostatní odkazy udělejte obyčejným textem.

Jak předejít: Před psaním si napište: „Co má návštěvník po přečtení této stránky udělat?“ Jednu věc.

8. Zbytečné prázdné mezery

Proč vzniká: Zvyk z Wordu, kde se mezery dělají opakovaným Enterem.

Jak se projevuje: Na počítači to vypadá dobře, na mobilu vzniknou obří prázdné plochy. Někdy naopak mezery úplně zmizí.

Jak to opravit: Smažte prázdné odstavce. Kde je potřeba mezera, použijte blok Mezera s konkrétní výškou, nebo nastavte odsazení skupině.

Jak předejít: Nikdy nemačkejte Enter pro vytvoření mezery.

9. Chaotická struktura stránky

Proč vzniká: Stránka roste postupně, přidává se, co zrovna napadne.

Jak se projevuje: Návštěvník neví, kde je a co má číst. Informace jsou roztroušené.

Jak to opravit: Otevřete Přehled dokumentu, projděte pořadí bloků a přeskládejte je do logického sledu.

Jak předejít: Osnova před psaním. I pět bodů na papíře stačí.

10. Nefunkční nebo špatné odkazy

Proč vzniká: Překlep v adrese, zapomenutá změna po přejmenování stránky, kopírování adresy z testovacího webu.

Jak se projevuje: Chyba 404. Návštěvník odchází.

Jak to opravit: Proklikejte všechny odkazy v náhledu.

Jak předejít: Interní odkazy vytvářejte vyhledáním stránky v poli odkazu, ne ručním psaním adresy.

11. Zapomenutý alternativní text

Proč vzniká: Není povinný a editor na něj neupozorňuje výrazně.

Jak se projevuje: Neviditelně — dokud nepřijde nevidomý uživatel nebo dokud si nestěžujete, že vás Google nenajde ve vyhledávání obrázků.

Jak to opravit: Projděte obrázky a doplňte popisy.

Jak předejít: Vyplňte alternativní text hned při vkládání obrázku. Trvá to deset vteřin.

12. Kopírování textu z Wordu i s formátováním

Proč vzniká: Text se píše ve Wordu a pak se kopíruje do editoru.

Jak se projevuje: Do stránky se přenese cizí písmo, velikosti a barvy. Text vypadá jinak než zbytek webu a jde to špatně opravit.

Jak to opravit: Text smažte a vložte znovu pomocí Ctrl+Shift+V (vložit jako čistý text).

Jak předejít: Používejte Ctrl+Shift+V vždycky, když kopírujete text odjinud.

13. Publikování bez kontroly na mobilu

Proč vzniká: Web se tvoří na počítači a je snadné na telefon zapomenout.

Jak se projevuje: Rozbité tabulky, obrovské obrázky, tlačítka mimo obrazovku. A přitom většina návštěvníků přichází právě z mobilu.

Jak to opravit a předejít: Kontrola na skutečném telefonu před každým publikováním. Ne v editoru — na telefonu.

Tipy pro přehledný a profesionálně vypadající obsah

Nebudeme si tu hrát na grafiky. Následující rady jsou z pohledu člověka, který spravuje vlastní web a chce, aby vypadal slušně.

Dostatek prázdného prostoru

Nejčastější rozdíl mezi amatérským a profesionálním webem není v barvách ani v písmu. Je v prostoru.

Amatér se snaží vyplnit každý pixel. Profesionál nechává obsah dýchat.

Prakticky: mezi sekcemi nechte větší mezeru (40–80 px), uvnitř sekce menší (16–24 px). Skupinám s barevným pozadím dejte vnitřní odsazení alespoň 30 px.

Kratší odstavce

Tři až pět řádků. Když se odstavec blíží k osmi řádkům, rozdělte ho.

Střídejte i délky — po dvou delších odstavcích jedna krátká věta. Text pak má rytmus a lépe se čte.

Vhodné nadpisy

Nadpis by měl říct, o čem sekce je, ne být vtipný nebo poetický.

• Slabé: „Trocha historie“
• Lepší: „Truhlařině se věnujeme od roku 2008″

Lidé stránku prolétnou a čtou nadpisy. Když nadpis nic neřekne, sekci přeskočí.

Logická struktura

Obsah má mít průběh: od obecného ke konkrétnímu, od problému k řešení, od nabídky k akci.

Nejjednodušší test: přečtěte si jen nadpisy stránky za sebou. Dává to smysl jako příběh? Pokud ano, struktura je v pořádku.

Střídmé používání barev

Tři barvy stačí. Hlavní barva pro tlačítka a zvýraznění, světlá pro pozadí boxů, tmavá pro text.

Barevné pozadí používejte pro odlišení, ne pro dekoraci. Když je barevná každá druhá sekce, přestane barva něco znamenat.

Konzistentní styl

Stejné věci mají vypadat stejně. Všechna tlačítka stejně. Všechny boxy stejně. Všechny nadpisy stejné úrovně stejně.

Nejjednodušší způsob, jak to zajistit: duplikujte místo tvoření od nuly, a používejte vzory.

Smysluplné obrázky

Obrázek má něco sdělovat. Ilustrační fotka usmívající se ženy s telefonem u sluchátka nic neříká — všichni ji viděli tisíckrát a nikdo jí nevěří.

Vlastní fotky, i když nejsou dokonalé, působí důvěryhodněji než kvalitní fotobanka. U řemesel, služeb a lokálních firem to platí dvojnásob.

Správné používání tlačítek

• Jedno hlavní tlačítko na stránku (může se zopakovat).
• Text říká, co se stane.
• Výrazná barva, která se jinde na stránce nepoužívá.
• Dostatek prostoru okolo — tlačítko namačkané mezi text zaniká.

Gutenberg a mobilní zařízení

Proč to řešit

Většina návštěvníků běžného českého webu přichází z mobilu. U některých oborů je to i tři čtvrtiny. Pokud stránka funguje jen na počítači, ztrácíte většinu lidí.

Většinu práce za vás udělá šablona — moderní šablony jsou navržené tak, aby se obsah automaticky přizpůsobil. Ale obsah, který do nich vložíte, může to přizpůsobení překazit.

Na co si dát pozor

Příliš široké tabulky Tabulka se šesti sloupci se na mobil nevejde. Buď vyteče ze stránky, nebo se objeví vodorovný posuvník, kterého si polovina lidí nevšimne.

Řešení: Maximálně tři až čtyři sloupce. U složitějších dat zvažte převedení na sérii krátkých bloků nebo seznamů.

Komplikované sloupcové rozvržení Čtyři sloupce, v každém obrázek s textem, uvnitř další vnořená struktura. Na mobilu z toho vznikne dlouhá nesourodá kaše.

Řešení: Maximálně tři sloupce. Nevnořujte sloupce do sloupců.

Příliš malé texty Nastavíte v editoru menší písmo, protože vám na velkém monitoru přijde velké. Na mobilu je pak nečitelné.

Řešení: Nezmenšujte základní text. Šablona má výchozí velikost nastavenou rozumně.

Velké obrázky Fotka o velikosti 4 MB se na mobilních datech načítá dlouho. Návštěvník mezitím odejde.

Řešení: Optimalizace před nahráním. Viz kapitola o médiích.

Příliš mnoho prvků vedle sebe Pět dlaždic v řadě, čtyři tlačítka vedle sebe, ikona plus text plus tlačítko v jedné lince.

Řešení: Držte se maximálně tří prvků v řadě.

Tlačítka příliš blízko u sebe Na počítači se trefíte kurzorem přesně. Na mobilu prstem ne. Dvě tlačítka těsně u sebe znamenají chybná klepnutí.

Řešení: Nechte mezi tlačítky alespoň 15 px mezeru.

Dlouhé texty na tlačítkách „Zjistit více informací o našich službách“ se na mobilu zalomí do tří řádků a tlačítko vypadá rozbitě.

Řešení: Dvě až čtyři slova.

Jak obsah kontrolovat

1. V editoru — tlačítko Náhled → Mobil. Orientační, ale rychlé.
2. V prohlížeči na počítači — zúžením okna prohlížeče uvidíte, jak se obsah přeskládá.
3. Na skutečném telefonu — jediná spolehlivá kontrola. Otevřete náhled nebo publikovanou stránku na svém mobilu.

Třetí způsob dělejte vždycky. Zabere to minutu.

Návrhové zásady pro mobil

• Nejdůležitější informace nahoru. Na mobilu je „nad ohybem“ mnohem méně prostoru.
• Jednoduchá struktura vyhrává. Co je jednoduché na počítači, funguje na mobilu. Co je složité na počítači, na mobilu selže.
• Kontakt musí být na klepnutí. Telefonní číslo jako odkaz tel:, e-mail jako odkaz mailto:.
• Počítejte s tím, že sloupce se zalomí. Pořadí sloupců zleva doprava = pořadí shora dolů na mobilu.

Nejčastější otázky a problémy

Je Gutenberg zdarma?

Ano. Gutenberg je součástí WordPressu a je zdarma, stejně jako celý WordPress. Neplatíte za něj nic navíc a nemusíte nic instalovat — od WordPressu verze 5.0 je součástí základní instalace.

Placené mohou být některé doplňkové sady bloků od třetích stran, ale k běžné práci je nepotřebujete.

Musím umět programovat?

Ne. Gutenberg je navržený přesně tak, aby programování nebylo potřeba. Všechno se dělá myší a klávesnicí, podobně jako v běžném textovém editoru.

Existuje sice blok Vlastní HTML pro ty, kdo kód umí, ale běžný uživatel se bez něj obejde.

Mohu upravit už publikovanou stránku?

Ano, kdykoliv. Otevřete ji v editoru, proveďte změny a klikněte na Aktualizovat.

Důležité: do kliknutí na Aktualizovat vidí návštěvníci starou verzi. Můžete tedy v klidu upravovat i dlouho, aniž by to někdo poznal.

Co když omylem smažu blok?

Stiskněte Ctrl+Z (Cmd+Z na Macu). Vrátí to poslední akci. Můžete zkratku použít opakovaně a vrátit se o několik kroků.

Pokud jste už mezitím uložili nebo zavřeli editor, otevřete stránku znovu, v pravém panelu najděte Revize a obnovte starší verzi.

Mohu blok přesunout na jiné místo?

Ano. Tři způsoby:

1. Šipky nahoru a dolů v liště nad blokem.
2. Přetažením za ikonu šesti teček.
3. Přetažením v panelu Přehled dokumentu.

Blok se dá také vyjmout (Ctrl+X) a vložit jinam (Ctrl+V) — a to i na úplně jiné stránce.

Mohu stejný obsah použít vícekrát?

Ano, a to hned několika způsoby:

• Zkopírovat a vložit bloky mezi stránkami (Ctrl+C, Ctrl+V).
• Vytvořit vzor a vkládat ho opakovaně.
• Vytvořit synchronizovaný vzor, který se při úpravě změní všude najednou.

Proč moje stránka po publikování vypadá jinak než v editoru?

Toto je nejčastější zdroj zmatku. Důvody:

1. Šablona přidává hlavičku a patičku, které v editoru nevidíte.
2. Šířka je jiná. Editor je užší než skutečná stránka.
3. Některé styly šablony se v editoru neuplatní. Editor se snaží vzhled napodobit, ale nedokáže to na sto procent.
4. Postranní panel. Pokud ho šablona zobrazuje, obsah je na webu užší než v editoru.

Řešení: Nekontrolujte vzhled v editoru. Používejte Náhled v novém panelu.

Pokud je rozdíl opravdu velký (například úplně jiné písmo), zkuste vyprázdnit mezipaměť prohlížeče (Ctrl+F5) a vypnout případný cachovací plugin.

Jak přidám obrázek mezi odstavce?

Najeďte myší do mezery mezi dva odstavce. Objeví se malé plus s vodorovnou čárou — klikněte na něj a vyberte blok Obrázek.

Alternativně klikněte na konec prvního odstavce, stiskněte Enter a na novém prázdném řádku napište /obrazek.

Jak vytvořím tlačítko?

1. Na prázdném řádku napište /tlacitka a stiskněte Enter.
2. Napište text tlačítka.
3. Označte text, stiskněte Ctrl+K a zadejte adresu.
4. V pravém panelu upravte barvu a zaoblení.

Jak změním velikost nadpisu?

Rozlišujte dvě věci:

• Úroveň nadpisu (H2, H3…) změníte v liště nad blokem. Ovlivňuje strukturu dokumentu.
• Velikost písma změníte v pravém panelu v sekci Typografie. Ovlivňuje jen vzhled.

Pokud chcete, aby nadpis vypadal menší, ale zůstal H2, změňte velikost písma, ne úroveň.

Jak zjistím, jaké bloky jsou na stránce použité?

Klikněte na ikonu Přehled dokumentu vlevo nahoře (vypadá jako odsazený seznam). Otevře se panel se stromem všech bloků.

Vidíte tam typ každého bloku, jeho pořadí a vnoření. Kliknutím na položku skočíte na daný blok v editoru.

Mohu Gutenberg používat i jako úplný začátečník?

Ano. Pro první stránku vám stačí čtyři bloky: odstavec, nadpis, obrázek a tlačítko. To zvládnete během jednoho odpoledne.

Zbytek se naučíte, až na něj narazíte. Není potřeba znát všechno předem.

Můj editor vypadá jinak než na obrázcích v návodech. Proč?

Gutenberg se s každou verzí WordPressu vyvíjí a některé ikony a názvy se mění. Kromě toho vzhled ovlivňuje šablona a nainstalované pluginy.

Principy zůstávají stejné: bloky, lišta nad blokem, pravý panel s nastavením. Jen ikony mohou být trochu jinde.

Můžu se vrátit ke klasickému editoru?

Ano, existuje plugin Classic Editor, který klasický editor vrátí. Doporučit to ale nemohu — vývoj WordPressu jde jednoznačně směrem k blokům a klasický editor má podporu jen po omezenou dobu.

Pokud vám Gutenberg nesedí, dejte mu týden. Většina lidí, kteří ho zpočátku odmítali, se k němu po pár dnech práce už nechce vracet.

Co je blok, který u sebe nemám? Šablona nebo plugin?

Nabídku bloků rozšiřují jak šablony, tak pluginy. Pokud v návodu vidíte blok, který u sebe nemáte:

• podívejte se, jestli není v jiné kategorii,
• zkuste vyhledávání v panelu bloků,
• pravděpodobně ho dodává plugin, který nemáte nainstalovaný.

Základní bloky (odstavec, nadpis, obrázek, seznam, tlačítko, sloupce, skupina, tabulka, citace, galerie) má každá instalace WordPressu.

Jak vložím video z YouTube?

Zkopírujte adresu videa z prohlížeče a vložte ji do prázdného odstavcového bloku. WordPress ji sám rozpozná a vytvoří vložené video.

Funguje to i pro Vimeo, Spotify, mapy a řadu dalších služeb.

Proč se mi text vložený z Wordu chová divně?

Word přenáší vlastní formátování, které se s webem nekamarádí. Použijte Ctrl+Shift+V (vložit jako čistý text) — vloží se holý text bez formátování a vy si ho naformátujete v editoru.

Závěr

Gutenberg vypadá při prvním setkání jako hodně věcí najednou. Panel s desítkami bloků, nastavení vpravo, ikony nahoře. Je pochopitelné, že člověk zaváhá.

Pravda je ale mnohem uklidňující: na běžnou práci potřebujete asi sedm bloků. Odstavec, nadpis, obrázek, seznam, tlačítko, sloupce a skupina. S těmito sedmi postavíte devadesát procent obsahu jakéhokoliv webu. Všechno ostatní jsou třešničky, které se doučíte, až je budete potřebovat.

Nesnažte se naučit Gutenberg celý najednou. Postupujte takhle:

1. První týden — pište obyčejný text s nadpisy a obrázky. Nic víc.
2. Druhý týden — přidejte tlačítka a seznamy.
3. Třetí týden — zkuste sloupce a skupiny.
4. Až později — vzory, opakovaně použitelný obsah, pokročilé nastavení.

A hlavně: zkoušejte. Založte si testovací stránku, kterou nepublikujete, a klidně v ní všechno rozbijte. Ctrl+Z funguje spolehlivě, koncepty veřejnost nevidí a nic, co uděláte, není nevratné.

Největší pokrok uděláte tehdy, když si vytknete konkrétní cíl — třeba postavit stránku „O nás“ nebo napsat první článek — a jednoduše to zkusíte. Naučíte se přitom víc než přečtením deseti návodů.

Gutenberg je nástroj, který vám má práci usnadnit, ne zkomplikovat. Jakmile si osaháte základ, zjistíte, že stránku, na kterou jste dřív potřebovali programátora, zvládnete sami za odpoledne. A to je docela dobrý pocit.