Elementor editor

Instalace Elementoru

Získejte více možností jak snadno vytvořit krásný web. Elementor existuje ve verzi zdarma, ale pokud chcete maximum, tak si vyberte Elementor PRO, který se používá běžně mezi profesionály pro tvorbu webových stránek.

Chcete více možností jak stránku vylepšit? Pluginy -> Přidat plugin -> a vyhledejte Elementor jde o skvělý website builder se spoustou možností od autora Elementor.

Navíc s verzí Elementor Pro můžete upravovat i hlavičku a patičku webu.

Vytvoření stránky přes Elementor

V administraci vašesho webu půjdete na Stránky -> Přehled stránek -> Přida stránku.

Zadáte název stránky, poté kliknete na "Publikovat" potvrdíte 2x a nakonec kliknete na tlačítko "Upravit s Elementorem."

Zobrazí se vám Elementorské rozvržení kde můžete stavět jednotlivé stránky webu velice snadno a funguje to Drag&Drop = chytnete prvek myší a táhnete ho tam kde ho chcete na stránce mít.

Levý panel = nabídka prvků (říká se jim widgety). Pravá strana = náhled Vaší stránky, kam prvky skládáte.

ROZVRŽENÍ -> Kontejnery (Flexbox Container) - fungují na Flexboxu (moderní CSS standard), nahradily staré „Sekce + Sloupce“, umožňují snadno zarovnávat prvky (vodorovně i svisle), nastavovat mezery, paddingy, pořadí na mobilu vs. desktopu, jsou rychlejší a čistší kód (méně vnoření = lepší výkon a SEO). Vhodné pro: běžné rozvržení stránek (hlavička, text + obrázek vedle sebe, CTA sekce, patička…), když chcete mít maximální kontrolu nad zarovnáním.

ZÁKLADNÍ -> Nadpis, Obrázek, Textový editor ve WordPressu (ať už v Gutenbergu nebo Elementoru) máte vždycky „základní bloky / widgety“, ze kterých skládáte stránku.

NADPIS -> Vloží velký text jako titulek (H1, H2, H3…).

OBRÁZEK -> Umožní vložit obrázek z knihovny médií nebo z počítače. Máte možnost nastavit zarovnání, velikost, odkaz, alt text.

TEXTOVÝ EDITOR -> Normální widget, do kterého píšete běžný text. Má podobné funkce jako Word/WordPad – tučné, kurzíva, odrážky, odkazy.

Pojďme si zkusit vytvořit první stránku budete nadšeni, jak se do toho trochu dostanete, bude to brnkačka.

Vytvoření první sekce: Klikněte na velké „+“ uprostřed obrazovky.

Jaké rozložení chcete použít? vyberte: Flexbox

Vyberte svou strukturu směrový sloupec (obdélník se šipkou dolů)

Vznikne první sekce – místo, kam můžete začít přidávat obsah. Můžete začít nadpisem. Přidání nadpisu: Kliknete na plus "+" a v levém panelu vyberte prvek Nadpis. Přetáhněte jej do sekce. Zadejte text: Vítejte v našem penzionu v Jižních Čechách.

V levém panelu můžete změnit zarovnání (např. na střed), velikost písma nebo barvu.

Návrat do widgetů -> klik nahoře na tlačítko "+"

Přidání obrázku: přetáhnete widget "Obrázek" pod text nebo spíše do textu "Vítejte v našem penzionu v Jižních Čechách" musí se vám objevit mini ikonka s plusem, když budete přetahovat widget, jinak se netrefíte do místa, kam lze "widget" nyní obrázek vložit a Elementor to nevezme (nevloží ho tam) a musíte to znovu zkusit přetáhnout.

Přejeďte myší nad prázdným obrázkem v levém menu: Zobrazí se možnost „Vybrat obrázek“ na to kliknete a nahrajete fotografii z počítače nebo vyberte z knihovny médií. Klikněte na Vložit média -> obrázek se zobrazí na stránce.

Tady si můžete překlikávat možnost, zda nahrát obrázek z knihovny nebo z počítače.

Obrázek je nahraný, nezapomeňte nahrávat obrázky v menší velikosti 250 - 500 kb, když bude obrázek třeba 4 GB, tak je to moc a WordPress jej automaticky zmenší, ale dává za název obrázku dodatek "scaled" a to není úplně ok a i tak pak zbytečně velkými obrázky zatěžujete rychlost webu. Dobrý je na to plugin Imagify, zmenšuje vám obrázky automaticky na super velikost, umí toho více, ale to rozebereme v budoucnu.

Přidání textu: Zase klikem na plus nahoře se vrátíte do seznamu widgetů a dále v levém panelu vyberte Textový editor. Přetáhněte ho pod obrázek (lehce do obrázku).

Napište například: „Náš rodinný penzion se nachází v srdci Jižních Čech. Nabízíme pohodlné ubytování pro turisty, rodiny i firemní pobyty.“ Text si můžete různě upravovat, tučné písmo, kurzíva, vložit odkaz pomocí ikonky "SPONKA" a na záložce CSS můžete upravit zarovnání textu, barvu, velikost, font a další.

Přidání tlačítka: V levém panelu vyberte Tlačítko. Přetáhněte ho pod text. Změňte text na: Rezervujte si pobyt. Do pole Odkaz vložte /kontakt/. V záložce Styl nastavte barvu tlačítka (například zelenou) a větší písmo, zarovnání tlačítka.

Publikace stránky: v levém dolním rohu klikněte na fialové možná růžové tlačítko Publikovat. Potvrďte volbu.

Klikněte na Zobrazit stránku: nyní vidíte hotovou stránku jak vypadá na webu.

Některé odkazy mohou být partnerské. Pokud přes ně objednáte, získám malou provizi. Vás to nestojí nic navíc a pomůžete mi tvořit další návody.