5. Jak vybrat šablonu pro WordPress

Šablony a editory WordPress určují vzhled i způsob práce s obsahem. Tady zjistíte, co přesně šablona dělá, jak se liší od editoru a jak vybrat správnou šablonu a editor pro web, aby se vám dobře a snadno pracovalo.

Co je šablona

Šablona (theme) určuje vzhled webu – typografii, barvy i rozvržení stránek.

Pokud chcete, aby váš web působil profesionálně, vyplatí se využít předpřipravený design, který má v sobě šablona a ten si pak jen doladíte podle svých potřeb. Zkušenosti ukazují, že laik jen těžko dosáhne čistého a moderního vzhledu od nuly – a pokud ano, stojí ho to spoustu času a nervů. Investice do kvalitní šablony se proto vyplatí. Úpravy pak zvládnete rychleji a výsledek bude působit lépe.

Kde najdete šablony pro web

Šablony pro web s redakčním systémem WordPress najdete přímo v administraci WordPressu kliknete v levém menu na záložku "Vzhled" dále na "Šablony" a nakonec na "Přidat šablonu" následně vám vyjede seznam stovek šablon. Vidíte tam náhledy a možnost si na klikutí vybranou šablonu vyzkoušet přímo na vašem webu. Moderní šablony fungují spolu s vizuálními editory jako je např. Elementor, takže dostanete více možností jak si webové stránky snadno přizpůsobit a poskládat zcela tak jak potřebujete i bez znalosti kódu.

Existují stovky šablon "zdarma". Pro první vyzkoušení WordPressu mohou být dobrou volbou. Šablony zdarma většinou nejsou úplně zdarma, nějaké omezení mají například vám nedovolí měnit všechny části vzhledu nebo postrádají pokročilé nastavení. V okamžiku, kdy chcete mít web pod plnou kontrolou a přizpůsobit si každý detail, je většinou potřeba přejít na placenou licenci. Je tedy lepší sáhnout po placené variantě. Ty bývají nejen vizuálně propracovanější, ale také rychlejší, modernější a dlouhodobě udržované.

Prémiové šablony

Dostáváme se k perémiovým šablonám až editorům, které když si zakoupíte, tak mají téměř neomezeně možností co si na webu nastavit. Mezi nejoblíbenější a nejspolehlivější šablony patří Astra, Hello Elementor nebo Divi. Editory zase Divi a Elementor. Abychom se v tom nemotali, DIVI (je jak šablona, tak editor) a nabízí přes 370 hotových designů webů, které stačí vložit a upravit na míru. Elementor je spíše editor (ale má i svou základní šablonu Hello Elementor), nicméně je zase známý svou flexibilitou a obrovským množstvím doplňků.

Pokud byste hledali ještě další profesionální šablony, pak největším tržištěm je ThemeForest, kde najdete tisíce vzhledů pro různé obory. Ale pravda je, že Divi nebo Elementor většině lidí a firem vystačí na mnoho let, protože kombinují snadné použití, moderní design a dlouhodobou podporu, tedy neustále jsou aktualizovány, fungují desítky let a mají tak obrovskou komunitu, že budou funhgovat dlouhodobě nadále, takže proto bych úplně ThemeForest nebrala, protože tam vydají nějakou šablonu a za rok může padnout.

Pokud chcete mít jistotu moderního vzhledu a snadného ovládání, sáhněte po Divi, kde máte vše komplet jak šablonu tak editor nebo po výborné šabloně Astra a k ní mějte Elementor. Obě varianty patří mezi nejpoužívanější na světě, nabízejí stovky hotových designů a umožní vám upravit web opravdu do detailu – i bez programování.

Co je editor

Přes editor skládáte jednotlivé stránky, snadno bez programování. Základní editor ve WordPressu je Gutenberg, jde o jednoduchý editor, který nemá tak snadné ovládání, je to základ, který je součástí WordPressu již při instalaci. Nejlepší editory pro tvorbu webových stránek jsou DIVI a Elementor.

Gutenberg editor

• Je výchozí editor WordPressu (od verze 5.0).
• Říká se mu také blokový editor – stránky skládáte z bloků (nadpis, odstavec, obrázek, tlačítko…).
• Je zdarma, přímo součástí WordPressu.
• Je rychlý a čistý, ale designové možnosti jsou jednodušší.
• Je to úplný základ a moderní web v něm snadno určitě nevytvoříte, lepší pokud nechcete platit, tak vyzkoušet Elementor ve FREE verzi zdarma.

Divi šablona a editor

Divi není jen editor, ale zároveň i šablona., když si koupíte licenci, dostanete šablonu a k tomu i Divi Builder/Editor (vizuální editor). Po aktivaci šablony můžete přejít na libovolnou stránku a kliknout na Povolit vizuální editor. Web upravujete přímo „naživo“ – měníte barvy, písma, rozvržení obsah, hlavičku i patičku webu, cokoli si vzpomenete si můžete upravit. Okamžitě vidíte výsledek. Divi obsahuje také desítky modulů (např. galerie, formuláře, tlačítka, počítadlo, slider, ikony, CTA boxy) a vestavěné předpřipravené vzhledy, které lze jednoduše načíst a dále upravit podle sebe.

Jak můžete Divi použít

• Divi Theme – kompletní šablona s integrovaným editorem. Nejčastěji se Divi používá s vlastní Divi šablonou, protože je perfektně provázaná s editorem a obsahuje stovky hotových vzhledů.
• Divi Builder plugin – pokud chcete používat editor Divi, ale na jiné šabloně (např. Astra).

Výhody a nevýhody

• Je to prémiový vizuální editor a šablona v jednom od firmy Elegant Themes.
• Nabízí přes 300 hotových designů webů, které si instalujete na klik.
• Má v sobě obrovské množství modulů (galerie, CTA, formuláře…).
• Upravujete snadno hlavičku a patičku webu bez omezení.
• Vše si nastavujete přímo vizuálně (Drag&Drop) – vidíte, co upravujete.
• Je placený (buď roční licence, nebo jednorázově „doživotně“, v tom má DIVI opravdu velkou výhodu, jednou zaplatíte a máte to na vždy, to se vyplatí pořídit, než platit každý rok licenci).
• DIVI je nejdražší šablona s editorem, beru cenu kolem 6000 Kč, kdy si DIVI pořizujete celoživotně. Na druhou stranu získáte licence k nemomezeně webům za jednu cenu a jestli si budete platit Elementor každý rok 1500 Kč, tak máte prvotně vyšší investici za 4 roky zpět a pak již nemusíte platit což je velké plus.
• Snadno si kontrolujete responzivní design, tedy jak se stránka zobrazuje na mbilním telefonu, tabletu, počítači.
• Hodí se pro ty, kdo chtějí spoustu možností, hotové vzhledy a přitom snadné ovládání.
• Minus je, že DIVI nemá FREE bezplatnou verzi, ale nabízí 30 dní na vyzkoušení a záruku vrácení peněz.

✅ Získejte přes 370 hotových layoutů pro web, pořiďte si DIVI šablonu s editorem v jednom.

Elementor editor

Elementor je vizuální editor (page builder) pro WordPress, který můžete zdarma stáhnout jako plugin (více o pluginech si povíme v dalším kroku). Stránku stavíte ze sekcí -> řádků -> sloupců -> widgetů/prvků (např. nadpis, text, obrázek, tlačítko, formulář, galerie a další) Stránky v něm skládáte metodou Drag&Drop – jednoduše přetahujete jednotlivé prvky tam kde je potřebujete na stránce umístit a ihned vidíte výsledek. Každý prvek má vlastní nastavení stylu (barvy, písmo, rozestupy). Elementor Pro přidá formuláře, popupy, WooCommerce šablony (pro eshop) a možnost upravit i hlavičku/patičku webu.

• Chcete stavět web od nuly a mít vše pod kontrolou → Hello Theme + Elementor.
• Chcete rychlý a univerzální základ (firemní web, eshop) → Astra nebo GeneratePress + Elementor.

S jakou šablonou používat Elementor

Elementor funguje s téměř jakoukoli šablonou pro WordPress, nejlepší je kombinovat ho s „lehkými“ a plně kompatibilními šablonami:

• Hello Theme (od Elementoru) – ultra jednoduchá šablona; základ, vše ostatní děláte v Elementoru.
• Astra – populární rychlá šablona, připravená pro Elementor i WooCommerce.
• GeneratePress – minimalistická, rychlá a čistá šablona, skvěle funguje s Elementorem.
• OceanWP – šablona s mnoha možnostmi a dobrou kompatibilitou pro Elementor.

Výhody a nevýhody

• Jeden z nejpoužívanějších editorů pro tvorbu webů ve WordPressu.
• Funguje podobně jako Divi – stránky stavíte z bloků a widgetů přetažením myší (Drag&Drop).
• Má verzi zdarma, která zvládne základní web a placenou Pro verzi s pokročilými funkcemi (pro formuláře, dynamické obsahy, hlavičku, patičku webu nebo eshop ve WooCommerce).
• Výhoda je velká komunita, spousta doplňků a šablon od třetích stran.
• Snadno si kontrolujete responzivní design, tedy jak se stránka zobrazuje na mbilním telefonu, tabletu, počítači.
• Funguje s více šablonami, např. se šablonami Astra, Hello Elementor, GeneratePress, OceanWP, Kadence.
• S editorem se musíte naučit pracovat, zabere to tedy nějaký čas a začátky práce nemusí být zcela jednoduché, ale pokud se s ním naučíte, tak vám dá mnoho výhod a možností.

✅ Pořiďte si Elementor Pro a získejte absolutní volnost při tvorbě vašeho webu přesně podle vašich představ.

Jak vybrat šablonu a editor

Ujasněte si, co od webu čekáte

• Jednoduchá vizitka, blog, firemní web, nebo eshop?
• Čím složitější web, tím víc oceníte editor, který má široké možnosti úprav (např. Divi, Elementor).

Zvažte rozpočet a čas

• Zdarma → vhodné na vyzkoušení, pro menší projekty.
• Placené (cca 1 000–2 500 Kč) → profesionální vzhled, více možností, rychlejší práce.

Rychlost a kompatibilita

• Kvalitní šablona by měla být rychlá a responzivní (fungovat na mobilech i tabletech).
• Podívejte se, zda je kompatibilní s pluginy, které plánujete používat (např. WooCommerce pro eshop).

Podpora a aktualizace

• Bez pravidelných aktualizací šablona rychle stárne.
• Prémiové šablony (Divi, Astra, OceanWP, GeneratePress, Hello Elementor) mají obvykle pravidelné aktualizace a lepší podporu.

Snadnost ovládání

• Lidem, kteří neumí programovat a kódovat vyhovuje vizuální editor (Divi nebo Elementor).
• Gutenberg je rychlý a čistý, ale působí jednodušeji a někdy omezeně, pokud chcete složitější design.

Hotové designy

• Divi nabízí více než 370 předpřipravených vzhledů webů.
• Elementor má stovky šablon a velkou knihovnu doplňků.

Pokud chcete rychlý start, vyplatí se využít právě tyto možnosti.

Základní nastavení vzhledu

Ve WordPressu lze vzhled webu upravovat několika způsoby – podle toho, jestli používáte jen samotný WordPress nebo i editor jako je Elementor či Divi.

Základní nastavení vzhledu najdete v menu Vzhled -> Přizpůsobit.

Můžete zde změnit barvy, písma, logo, menu nebo patičku webu. Rozsah možností vždy záleží na konkrétní šabloně – jednoduché šablony nabídnou jen základní úpravy, moderní šablony (např. Astra, GeneratePress, Twenty Twenty-Four) umožňují přizpůsobit mnohem více prvků.

Klasické nastavení přímo ve WordPressu

• Najdete ho v menu Vzhled → Přizpůsobit (Customizer).
• Můžete tu změnit barvy, písma, logo, favicon, menu nebo patičku.
• Možnosti se liší podle šablony – ty zdarma nabídnou jen základ, nejlepší šablony (např. Astra, DIVI) umožní mnohem více možností jak si vzhled přizpůsobit. Pokud používáte Elementor, tak ten nabízí své vlastní globální nastavení.

Co je responzivní design a proč na něj myslet

Responzivní design znamená, že se web automaticky přizpůsobí velikosti obrazovky – vypadá dobře a funguje stejně na mobilu, tabletu i velkém monitoru. Nemusíte nic posouvat do stran, text je čitelný a tlačítka se dají pohodlně zmáčknout prstem.

WordPress s moderní šablonou nebo editorem vám hodně práce ulehčí, ale je potřeba myslet i na to, jak vkládáte texty, obrázky a bloky. Díky tomu bude váš web nejen responzivní „technicky“, ale i opravdu přehledný a použitelný.

Proč je to důležité

• Více než polovina lidí dnes chodí na weby z mobilních telefonů.
• Pokud se web na mobilu špatně používá, návštěvníci rychle odejdou.
• Google zvýhodňuje responzivní weby ve vyhledávání.

Jak to souvisí s WordPressem

WordPress sám o sobě nezaručí responzivitu, ale moderní šablony a editory ji většinou podporují. Znamená to, že základní rozvržení stránek se přizpůsobí mobilům a tabletům automaticky. Přesto je potřeba si při tvorbě webu dávat pozor na vlastní obsah – příliš velké obrázky, mnoho sloupců nebo drobná tlačítka mohou dělat problémy.

Editory, které s responzivitou pomohou

Elementor i DIVI – dovolí nastavit pro každý prvek jiné chování na mobilu, tabletu a desktopu (např. velikost písma nebo rozestupy). Mají přepínače náhledu pro mobil, tablet a počítač, takže hned vidíte, jak se web přizpůsobí.

Jak nainstalovat šablonu

Pokud chcete více možností jak web upravovat, hned od začátku, tak doporučuji nemít aktivovanou základní šablonu, která je ve WordPressu instalována automaticky. Šablonu si změňte na nějakou lepší. Vhodné šablony jsou nepř. Astra, Hello Elementor, GeneratePress, OceanWP, Kadence. Pro jednoduchý web, který budeme tvořit použijeme šablonu Astra, protože je rychlá, lehká, má spousty možností nastavení a funguje skvěle s editorem Elementor.

Instalace šablony Astra

Vzhled -> Šablony -> Přidat šablonu

Do kolonky "Hledat šablony" vepíšete Astra -> "Instalovat" -> "Aktivovat"

Pokud nevidíte tlačítko Instalovat tak - přejedete myší přes obrázek šablony a objeví se tlačítko "Instalovat" na to kliknete a šablona se vám do webu nainstaluje, po instalaci stačí kliknout na tlačítko "Aktivovat".

Aktivovaná šablona Astra

Aktivní Astra.

Časté dotazy