Jak jednoduše vytvořit web ve WP Elementoru: Návod pro začátečníky

Elementor je v současnosti jedním z nejoblíbenějších nástrojů pro tvorbu webových stránek ve WordPressu. Jedná se o vizuální stavebnici stránek (page builder), která umožňuje vytvářet moderní a atraktivní weby, aniž byste museli ovládat HTML/CSS kódování.Hlavní výhodou Elementoru je jeho jednoduchost a intuitivní ovládání. Webové stránky se vytváří metodou „táhni a pusť“ (drag and drop) pomocí předpřipravených prvků, tzv. widgetů. Stačí je vzít z levého panelu widgetů a umístit na požadované místo ve stránce.Elementor také nabízí spoustu předpřipravených šablon, které můžete použít jako základ a dále upravovat podle svých představ. Vytvořit moderní web je tak opravdu snadné a zvládne to i začátečník.V tomto článku se podíváme, jak začít s Elementorem, jaké jsou jeho základní funkce a jakým způsobem lze pomocí něj vytvářet webové stránky.

Instalace a aktivace Elementoru

Prvním krokem je samozřejmě instalace a aktivace Elementoru. Jelikož se jedná o rozšiřující plugin pro WordPress, je potřeba nejprve mít funkční WordPress. Jakmile máte WordPress nainstalovaný, přejděte do sekce Pluginy → Přidat nový. Do vyhledávacího pole zadejte „Elementor“ a plugin nainstalujte. Poté ho aktivujte a můžete začít pracovat.Celý proces trvá jen pár minut. Elementor je zdarma jak pro instalaci, tak pro používání. Existuje sice i placená verze Elementor Pro s rozšířenými funkcemi, ale pro většinu webů bohatě postačí bezplatná verze.

Začínáme s Elementorem

Po aktivaci Elementoru uvidíte v administraci WordPressu novou položku s názvem Elementor. Zde můžete plugin spravovat a nastavit si některá základní nastavení.Samotnou tvorbu stránek ale budete provádět přímo na jednotlivých stránkách a příspěvcích. Jakmile chcete začít tvořit nebo editovat stránku pomocí Elementoru, přejděte na požadovanou stránku a klikněte na tlačítko „Editovat pomocí Elementoru“.Otevře se WYSIWYG editor, ve kterém uvidíte náhled stránky. Po levé straně je panel widgetů, ze kterého budete postupně přidávat jednotlivé prvky na stránku.

Základní funkce Elementoru

Mezi základní funkce Elementoru patří:

• Drag and drop – jednoduché vytváření stránek metodou „táhni a pusť“
• Widgety – předpřipravené prvky jako text, obrázky, tlačítka atd.
• Sekce a sloupce – možnost dělit stránku do sloupců a sekcí
• Šablony – hotové šablony, které stačí upravit podle sebe
• Responzivita – možnost nastavit různé rozložení pro mobilní telefony
• Revize – náhledy a porovnávání různých verzí stránek

Mezi pokročilejší funkce pak patří animace, interaktivní prvky, tvorba vlastních widgetů nebo integrace s WooCommerce.Ty jsou ale dostupné až v placené verzi Elementor Pro. I tak ale základní Elementor nabízí opravdu široké možnosti pro vytváření moderních stránek.

Tvorba stránky s Elementorem

Pojďme se nyní podívat, jak konkrétně vypadá tvorba stránky s Elementorem. Nejprve je potřeba vytvořit novou stránku ve WordPressu.V administraci přejděte na Stránky → Přidat novou. Zadejte název stránky, publikujte ji a klikněte na tlačítko „Editovat pomocí Elementoru“.Nyní už se nacházíte ve WYSIWYG editoru. V levém panelu widgetů najdete všechny dostupné prvky, které můžete vložit na stránku. Nejčastěji se jedná o:

• Text
• Nadpis
• Obrázek
• Tlačítko
• Seznam
• Ikony
• Galerie
• Video

A mnoho dalších. Stačí prvek chytit a přetáhnout na požadované místo ve stránce. Pomocí levého panelu můžete stránku rozdělit do více sloupců či sekcí.Na pravé straně pak najdete detailní nastavení vybraného prvku. Zde můžete měnit velikost písma, barvy, odsazení a další vlastnosti.Tvorba stránky je opravdu velmi jednoduchá a intuitivní. I začátečník dokáže pomocí Elementoru vytvořit moderní a pěkný web.

Návrh webu v Elementoru

Vytvoření vlastního designu bez použití šablony

Postup, jak si vytvořit vlastní stránku bez využití předpřipravené šablony:

• Začněte s prázdnou stránkou a přidejte sekce a sloupce podle potřeby
• Přidávejte a upravujte widgety – text, obrázky, tlačítka apod.
• Umístěte prvky na požadované pozice metodou drag and drop
• Upravte vlastnosti widgetů – velikost písma, barvy, odsazení atd.
• Inspirujte se z již existujících webů a vytvořte originální design
• Nezapomeňte na responzivitu pro mobilní zařízení

Použití předpřipravené šablony

Jednodušší varianta je využít hotovou šablonu:

• Nainstalujte z knihovny Elementoru vhodnou šablonu
• Upravte obsah a vzhled šablony podle potřeb
• Přizpůsobte strukturu stránek a umístění jednotlivých prvků
• Využijte předpřipravené bloky obsahu v šabloně
• Dodržujte doporučení pro SEO

Text je formátován pomocí Markdownu. Klíčová slova jsou zvýrazněna kurzívou. Použity jsou nadpisy, odrážky a další formátovací prvky.

Pokročilé funkce Elementoru

Elementor Pro – placená verze s rozšířenými možnostmi:

• Obsahuje přes 50 exkluzivních widgetů navíc
• Umožňuje vytvářet animace a interaktivní prvky
• Nabízí širokou škálu profesionálních šablon
• Má vlastní nástroje pro tvorbu vlastních widgetů a šablon
• Integruje se s WooCommerce pro tvorbu eshopů

Mezi pokročilé funkce patří:

Animace a interaktivní prvky

• Animované nadpisy, texty a tlačítka
• Efekty při najetí myší na prvky
• Interaktivní obrázky, galerie a prezentace
• Vyskakovací okna lightbox
• Paralax efekty

Práce s médii

• Pokročilé fotogalerie a prezentace
• Video pozadí
• Responzivní obrázky
• Podpora SVG obrázků

Vlastní widgety a šablony

• Tvorba vlastních widgetů pro opakované použití
• Uložení fragmentů kódu pro rychlé vkládání
• Export a import šablon

Nejlepší alternativní WordPress buildery

1.Beaver Builder

• Snadno použitelný vizuální editor
• Spousta předpřipravených šablon a modulů
• Dobrá optimalizace pro vyhledávače
• Cena od 99$ za neomezený počet webů

2.Thrive Architect

• Rychlá tvorba přistupných stránek
• Vhodný pro vytváření landing page
• Automatické generování obsahu
• Cena od 19$ měsíčně

3.WP Bakery

• Populární page builder pro WordPress
• Podpora pro vlastní CSS a JavaScript
• Kompatibilní s řadou šablon
• Zdarma i placená verze

4.Bricks

• Jednoduchý a rychlý page builder
• Minimum zbytečných funkcí
• Dobrá optimalizace stránek
• Zdarma i placená verze

5.Oxygen

• Vizuální návrhář i pro pokročilé
• Tvorba vlastních modulů a šablon
• Integrace s dalšími službami
• Cena od 99$ za rok

6. Divi builder

• Obrovská knihovna předpřipraveného obsahu
• Výkonný vizuální builder
• Dobrá optimalizace pro vyhledávače
• Cena od 89$ ročně

Divi představuje silnou konkurenci pro Elementor díky rozsáhlým možnostem pro tvorbu webů. Určitě stojí za vyzkoušení.

Tyto buildery představují kvalitní alternativy k Elementoru s řadou pokročilých funkcí. Beaver Builder a Thrive Architect jsou asi nejbližší, co se týče možností a způsobu použití

Často Kladené Otázky

Závěr

Shrnutí postupu tvorby webu v Elementoru:

• Elementor je výborným nástrojem pro tvorbu moderních webů
• Umožňuje vytvářet weby metodou „táhni a pusť“ bez znalosti kódování
• Lze použít předpřipravené šablony nebo vytvořit vlastní design
• Základní verze Elementoru je zdarma, placená verze má pokročilé funkce
• Mezi základní prvky patří text, obrázky, tlačítka, sekce, sloupce atd.
• Weby vytvořené v Elementoru lze snadno optimalizovat pro vyhledávače i mobily