Navrhování profesionálně vypadajícího webu nebylo pro každého, zejména proto, že jsme se všichni cítili, jako bychom naprosto potřebovali být profesionálem v oblasti kódování a webdesignu. V dnešní době vidíme, že se pro ekosystém WordPress objevují nové nástroje, které nám poskytnou stále jednodušší řešení při navrhování webových stránek, a to v dosahu těch začátečníků.
Pokud jde o návrh rozvržení WordPress, již jsme museli plugin odeslat Vizuální skladatel, což je rozhodně jeden z nejlepších nástrojů, pokud jde o návrh rozložení. Je však třeba poznamenat, že toto řešení není vhodné pro každého. To je důvod, proč vám v tomto tutoriálu představíme více WordPress Plugin Elementor, což je a WordPress Plugin freemium (zdarma, ale rozšiřitelné v rámci předplatného).
Kde získat Elementor pro WordPress
Vážně uvažujeme o tom, abyste viděli potenciál pluginu a bezplatné řešení vám pomůže začít bez placení penny. Toto bezplatné řešení je k dispozici na webu WordPress.org. Být a WordPress Plugin, druhý se instaluje jako každý jiný plugin z palubní desky.
Pokud se vám plugin podaří zcela uspokojit, budete moci získat úplnou licenci se všemi funkcemi na webu oficiální elementor.
Hlavní rysy Elementoru
Před zahájením kurzu s přehledem pluginu vám nejprve představíme hlavní funkce pluginu (bezplatná verze a plná verze).
| verze zdarma | Plná verze |
|---|---|
| Více sloupců | Navigační nabídka, článek |
| Moduly Texty, tituly | Modul WooCommerce (produkty, kategorie) |
| Video moduly, obrázek, kolotoč, galerie, Soundcloud | Integrace na Facebooku (stránka, tlačítko, komentáře) |
| Modul sdílení | Tabulka cen |
| Modul HTML | Portfolio, Formulář |
| Modul pro widget WordPress | Výzkumný modul |
Toto je poněkud vyčerpávající seznam různých funkcí nabízených pluginem. Více podrobností najdete v prozkoumat jejich webové stránky.
Začínáme s Elementorem
Nebudeme zde pokrývat celý proces instalace. Jelikož se jedná o plugin WordPress, postup instalace již byl vysvětlen v předchozí výukový program. Po instalaci se však dostanete na domovskou stránku pluginu.
Pokud máte tuto stránku na obrazovce, pak jste správně nainstalovali Elementor plugin. V současné době používáme plnou verzi pro tento tutoriál, ale rozhraní by se nemělo příliš lišit od bezplatné verze.
Před přechodem na editační rozhraní vás vyzvu k registraci licence. To platí pouze pro ty, kteří se rozhodli pro plnou verzi. Pokud máte bezplatnou verzi, můžete přejít na další část. Chcete-li zaregistrovat svou licenci, na WordPressu si všimnete oznámení, které vás vyzve k registraci vaší licence.
Musíte na něj kliknout, přejít na registrační stránku a kliknout na Aktivovat.
Budete obvykle potřebovat vaši stránku s potvrzením, pokud je vaše licence platná.
Pokud se na tuto stránku nedostanete, vyzývám vás, abyste kontaktovali vývojáře pluginu pro další informace pomoc s problémem.
Jak používat Elementor
Elementor pracuje na stránkách a příspěvcích na WordPress. Ať už používáte klasické rozhraní nebo nové rozhraní Gutenberg, uvidíte tlačítko, které vás vyzve k použití nástroje Builder Elementor.
V praxi nebudete vždy muset své příspěvky upravovat pomocí Elementoru. Proto vás vyzývám k použití pluginu pouze na stránkách. Kliknutím na toto tlačítko přejdete do návrhového rozhraní Elementor, které poskytuje atmosféru déjà vu (pro ty, kteří používají WordPress Customizer).
Na levé straně tedy máte různé ovládací prvky nabízené pluginem a na pravé straně máte živý náhled svých úprav. V tomto tutoriálu používáme téma WordPress Twenty Sixteen.
Sekce elementů
Sekce v Elementoru jsou skupiny bloků funkcí, které Elementor nabízí. Počet sekcí závisí na tom, zda používáte plnou verzi a zda používáte WooCommerce, Yoast SEO nebo jiné kompatibilní pluginy. V závislosti na těchto podmínkách budete mít ve svém rozhraní více nebo méně sekcí. Protože používáme plnou verzi s pluginem WooCommerce aktivováno, takto vypadá naše rozhraní.
Jak umístit blok Elementor
Jakmile rozbalíte sekci, najdete bloky elementů. Různé bloky Elementor jsou umístěny „Drag & Drop“ na oblast zvýrazněnou tečkovanými čarami.
Jak si vybrat Elementor
Před přidáním bloku na Elementor je třeba si vybrat rozložení kliknutím na tlačítko „+“ ve zvýrazněné části.
Podle svých potřeb si vyberete rozložení, které vám nejlépe vyhovuje. Jakmile vyberete rozložení, zvýrazní se reprezentace této sekce ve stejné oblasti. V této části se zobrazí stejný počet sloupců, který odpovídá vašemu výběru. V mém případě jsem vybral sloupec se 3 sloupci.
Různé bloky se znakem „+“ uvnitř jsou oblasti, které mohou přijímat bloky Elementor. Pokud přidáte blok Elementor, aniž byste nejprve vybrali rozložení, bude ve výchozím nastavení vybráno rozložení jednoho sloupce.
Sekce elementů lze mezi sebou přeskupovat podle stejného principu „drag & drop“. Sekce můžete také odstranit, pokud ji již nechcete používat.
Zde je příklad sekce, která obsahuje 2 bloky, jmenovitě razítko a textový blok.
Jak používat jiné návrhářské nástroje
Jakmile dokončíte návrh, jednou z věcí, které budete chtít udělat, je uložit svou práci. Tuto možnost najdete v dolní části sekce zobrazující různé sekce Elementor.
Můžete se rozhodnout uložit přímo (Publikovat) a uložit jako koncept nebo jako šablonu. Tyto různé body prozkoumáme později.
Během návrhu můžete také chtít zobrazit náhled změn bez dalšího rozhraní Elementoru. Jediné, co musíte udělat, je kliknout na ikonu oka.
Stává se, že během návrhu dojde k chybě (nedobrovolná akce). V tomto případě nabízí Elementor historii, která vám umožní procházet všemi vašimi činnostmi.
To vám umožní snadno se vrátit.
Možnost „Prohlížeč“, která se objevuje těsně před tlačítkem historie, umožňuje dále upravovat různé sekce ve vztahu k prohlížeči používanému návštěvníky. Tato možnost umožňuje přístup k pokročilým úpravám struktur řezů (šířka sloupce). Zde musíte provádět změny velmi opatrně.
Tlačítko „Nastavení“ umožňuje upravit určité možnosti specifické pro stránku, například název, doporučený obrázek nebo stav.
To je pro tento kurz vše, Elementor prozkoumáme více v našem dalším kurzu. Neváhejte se podívat na Oficiální stránka který nabízí mnohem úspěšnější příklady.
