Elementor #1: Tvorba webu v Elementoru s Base Theme šablonou

V tomto podrobném průvodci WordPress vám ukážeme, jak pomocí Elementoru vytvořit krásný 5stránkový web.

Přihlaste se k odběru Elementor kanálu YouTube

Chcete se naučit, jak používat Elementor?

Mnohokrát jsem byl zklamán slibnými prémiovými šablonami, které se ukázaly být jako neuvěřitelně pomalé a nepřehledné.

Většinou to byly opravdu zbytečné peníze, protože jsem neměl šanci zůstat s jakoukoliv víceúčelovou šablonou, která slibovala hory doly a skončilo to se stránkami tak, že načítání trvalo 4–5 sekund. Z hlediska technického SEO (optimalizace pro vyhledávače) úplná katastrofa…

Proto jsem byl tak nadšený vydáním takzvané „Základní šablony“ , kterou vytvořil profesionální tým ze Sitepoint s ohledem na rychlost a minimalismus. Základní motiv také zahrnuje plnou kompatibilitu s page buildery, což z něj činí perfektního kandidáta pro testování s Elementorem.

Jak používat Elementor?

  1. Nainstalujte si Elementor
    Ujistěte se, že máte připravenou instalaci WordPressu spolu s nainstalovaným page builderem Elementor . Na hlavním panelu WordPress přejděte na „Pluginy“> „Instalace pluginů“ a do vyhledávacího pole zadejte „Elementor“. Poté klikněte na tlačítko „Instalovat“ a poté na tlačítko „Aktivovat“.
  2. Úpravy nové stránky pomocí Elementoru
    Přejděte na „Stránky“> „Přidat novou“. Poté klikněte na tlačítko Upravit pomocí elementu.
  3. Vložení šablony Elementor
    Nyní byste měli být v editoru Elementor. Klikněte na „Přidat šablonu“ a vyberte si z široké nabídky bezplatných a placených šablon. Doporučuje se začít se šablonou, abyste se dozvěděli, jak se vytvářejí různé prvky stránky. Také bych doporučil sledovat toto krátké video o struktuře Elementor.
  4. Vytvoření plné šířky šablony tzv. “full width”
    Můžete vytvořit libovolnou stránku v plné šířce Elementoru přechodem do dané Sekce> Rozvržení a kliknout ano vedle “roztáhnout na celou šířku”. Poté sekci přepněte ještě do “full-width” . Podívejte se na video ukazující, jak to udělat
  5. Porozumění struktuře elementu
    Každá stránka elementu je tvořena sekcemi, sloupci a widgety. Sekce rozdělují stránku na vodorovné řádky. Sloupce rozdělují každou sekci na svislé sloupce a widgety jsou přetahovány uvnitř sloupce. 
  6. Přidání widgetu
    Zkuste přidat nový widget na stránku. Vymažte jeden z widgetů v šabloně, který jste vložili kliknutím na widget a poté na ikonu X. Poté na levém panelu vyhledejte widget a přetáhněte jej do prázdné oblasti, kde jste widget právě odstranili.
  7. Změnit obrázek
    Pro změnu pozadí klikněte na jednu z částí. Tím se otevře nastavení sekce na levém panelu. Přejděte na prostřední kartu Style (v češtině CSS) a klikněte na obrázek na pozadí. Nyní vyberte jiný obrázek a stiskněte ‘Vložit média’. Podívejte se na video ukazující, jak to udělat
  8. Změna písem
    Přejděte na záhlaví na stránce a klikněte na něj. Otevře se nastavení nadpisu na levém panelu. Přejděte na prostřední kartu CSS/Style a zapněte typografii. Nyní v části „Font family“ můžete procházet různá písma a vybrat jinou rodinu písem.
  9. Další informace. 
    Podrobnější 30 minutové video naleznete v tomto tutoriálu Elementor + WordPress, který je přímo od tvůrců.

Proč zvolit základní šablonu?

Zjistili jsme, že základní šablona funguje s Elementorem úžasně, protože je rychlá, ale přesto nabízí vše, co od šablony potřebujete:

Navrhněte 100% mobilní responzivní web

Základní šablona (base theme) je plně mobilní a má perfektní mobilní skóre v nástroji Google pro mobilní testování.

Zdarma a open source

Základní šablona je zcela open source a je zdarma a je opravdu vytvořena s ohledem na vývojáře.

Vícejazyčné a přátelské vůči RTL

Toto téma je kompatibilní s WPML pluginem, což je v dnešní době nutností.

Podpora WooCommerce

Base Theme usnadňuje přidání WooCommerce. Díky rozšířeným WC widgetům v Elementor Pro je perfektní kandidát pro online obchody.

Jak můžete vidět v 45minutovém videu, spárování s Base Theme a prvky Elementoru vám umožní vytvářet superrychlé weby WordPress za mnohem kratší dobu než dříve.

basetheme-elementor

Uvnitř Base Theme šablony

Co dělá Base Theme tak skvělým pro tvůrce stránek, kromě rychlosti a chmýří samozřejmě, je, že dostanete šest užitečných šablon zabudovaných:

Výchozí šablona: Toto je základní šablona s postranním panelem vpravo.

Stránka s celou šířkou: Tuto šablonu použijte, pokud nechcete, aby se zobrazoval postranní panel, a raději, aby obsah překročil 100% šířky

Levá strana postranního panelu: Pokud potřebujete změnit polohu postranního panelu.

Prázdný page builder: Toto je ideální pro vstupní stránky, protože dostanete prázdné plátno, žádné záhlaví a zápatí. Navrhněte celou stránku pomocí nástroje pro tvorbu stránek.

Page Builder Boxed: Jedná se o velmi užitečnou šablonu, protože odstraní název stránky a všechny související nepotřebné prostory.

Celá šířka stránky: Je to stejné jako Page builder, ale obsah přesahuje celou šířku obrazovky

wordpress-dashboard

Navrhněte web se šablonou Base Theme

Base Theme je ideální na weby pro malé firmy s 5-10 stránkami, pro vytváření superrychlých landing pages a pro vytváření tzv. Child theme. Vývojáři jej mohou použít k vytváření složitých webů přizpůsobením struktury každé stránky.

Base Theme je méně vhodná šablona pro začínajícího uživatele WordPress, který chce vytvořit web bohatý na obsah. Je to proto, že se stále jedná o startovací šablona a neumožňuje flexibilní a snadný způsob, jak změnit strukturu sekcí webových stránek, jako je např. oblast blogu. Chcete-li tyto oblasti přizpůsobit pomocí Base Theme, musíte přizpůsobit kód. Přesto pro většinu webových stránek, které používají Base Theme a Elementor, je dostačující.

Page builder pro Base Theme šablonu

Bezplatný page builder Elementor je perfektním doplňkem Base Theme a přidává dlouhý seznam návrhových funkcí, které dělají zázraky v pracovním postupu každého webového návrháře. To vám umožní navrhnout web mnohem rychleji než kdykoli předtím. Mezi tyto funkce patří:

  • Mobilní úpravy pro vizuální návrh stránky tak, aby umožňoval 100% mobilní reakci
  • Předem navržené šablony, které vám umožní rychle nastavit krásný design stránky jedním kliknutím
  • Efekty, jako jsou Box Shadows a animace, zvyšují poutavost stránek
  • Knihovna šablon pro uložení navržených stránek a následné opakované použití či export
  • Desítky užitečných widgetů, jako jsou reference a čítače

To je jen špička ledovce a další informace o widgetech, funkcích a možnostech Elementoru se můžete dozvědět ve více než 50 videích, která jsou publikovaná přímo na youtube kanálu Elementoru.

Přečtěte si také