Navrhovanie profesionálne vyzerajúcich webových stránok nebolo pre každého, najmä preto, že sme sa všetci cítili, akoby ste nevyhnutne potrebovali byť profesionálom v oblasti kódovania a webového dizajnu. V súčasnosti vidíme, že sa pre ekosystém WordPress objavujú nové nástroje, ktoré nám majú poskytnúť čoraz jednoduchšie riešenie pri navrhovaní webových stránok, a to v dosahu tých naj začiatočníkov.
Pokiaľ ide o návrh rozloženia WordPress, už sme museli doplnok odoslať Visual Composer, čo je určite jeden z najlepších nástrojov, pokiaľ ide o návrh rozloženia. Treba však poznamenať, že toto riešenie nie je vhodné pre každého. To je dôvod, prečo vám v tomto návode predstavíme viac WordPress Plugin Elementor, ktorý je a WordPress Plugin freemium (zadarmo, ale rozšíriteľné v rámci predplatného).
Kde získať Elementor pre WordPress
Vážne uvažujeme o tom, aby ste videli potenciál doplnku a bezplatné riešenie vám pomôže začať bez platenia centu. Toto bezplatné riešenie je k dispozícii na stránke WordPress.org. Byť WordPress Plugin, posledný je nainštalovaný ako každý iný doplnok z palubnej dosky.
Ak sa vám doplnok podarí úplne uspokojiť, budete môcť získať úplnú licenciu so všetkými funkciami na webe úradný elementor.
Hlavné vlastnosti Elementoru
Pred začatím tutoriálu s prehľadom pluginu si najskôr predstavíme hlavné vlastnosti pluginu (bezplatná verzia a plná verzia).
| verzia zdarma | Plná verzia |
|---|---|
| Viac stĺpcov | Navigačné menu, článok |
| Moduly Texty, tituly | Moduly WooCommerce (produkty, kategórie) |
| Video moduly, Obrázok, Kolotoč, Galérie, Soundcloud | Integrácia Facebooku (stránka, tlačidlo, komentáre) |
| Modul zdieľania | Cenová tabuľka |
| Modul HTML | Portfólio, Formulár |
| Modul pre widget WordPress | Výskumný modul |
Toto je trochu vyčerpávajúci zoznam rôznych funkcií ponúkaných doplnkom. Viac podrobností nájdete v skúmať ich webové stránky.
Začnite s Elementorom
Nebudeme tu pokrývať celý proces inštalácie. Pretože sa jedná o doplnok WordPress, postup inštalácie bol už vysvetlený v predchádzajúci kurz. Po inštalácii sa však dostanete na domovskú stránku doplnku.
Ak máte túto stránku na obrazovke, potom ste správne nainštalovali Elementor plugin. V súčasnosti používame plnú verziu tohto návodu, ale rozhranie by sa nemalo príliš líšiť od bezplatnej verzie.
Pred prechodom na rozhranie úprav vás vyzvem, aby ste si zaregistrovali licenciu. Platí to iba pre tých, ktorí sa rozhodli pre plnú verziu. Ak máte bezplatnú verziu, môžete prejsť na ďalšiu časť. Ak chcete zaregistrovať svoju licenciu, na WordPress si všimnete upozornenie, ktoré vás vyzve na registráciu vašej licencie.
Takže stačí kliknúť na ňu, prejsť na registračnú stránku a kliknúť na Aktivovať.
Zvyčajne budete potrebovať vašu stránku s potvrdením, ak je vaša licencia platná.
Ak sa na túto stránku nedostanete, vyzývam vás, aby ste požiadali vývojárov doplnku o ďalšie informácie pomoc s problémom.
Ako používať Elementor
Elementor pracuje na stránkach a príspevkoch na WordPress. Či už používate klasické rozhranie alebo nové rozhranie Gutenberg, uvidíte tlačidlo, ktoré vás vyzve na použitie nástroja Builder Elementor.
V praxi nebudete musieť svoje príspevky vždy upravovať pomocou nástroja Elementor. Preto vás vyzývam, aby ste doplnok používali iba na stránkach. Kliknutím na tlačidlo sa dostanete do návrhového rozhrania Elementor, ktoré poskytuje atmosféru déjà vu (pre tých, ktorí používajú WordPress Customizer).
Naľavo máte teda rôzne ovládacie prvky ponúkané doplnkom a na pravej strane máte živý náhľad svojich zmien. V tomto tutoriáli používame tému WordPress dvadsaťšesťnásť.
Sekcie elementov
Sekcie v Elementore sú skupiny blokov funkcií, ktoré Elementor ponúka. Počet sekcií závisí od toho, či používate plnú verziu a či používate WooCommerce, Yoast SEO alebo iné kompatibilné pluginy. V závislosti od týchto podmienok budete mať vo svojom rozhraní viac alebo menej sekcií. Keďže používame plnú verziu s pluginom WooCommerce takto vyzerá naše rozhranie.
Ako umiestniť blok Elementor
Po rozšírení sekcie nájdete bloky elementov. Rôzne bloky Elementor sú umiestnené „Drag & Drop“ na oblasť zvýraznenú bodkovanými čiarami.
Ako si vybrať rozloženie na Elementor
Pred pridaním bloku na Elementor musíte nezabudnúť zvoliť rozloženie kliknutím na tlačidlo „+“ vo zvýraznenej časti.
Podľa svojich potrieb si vyberiete najvhodnejšie rozloženie. Po výbere rozloženia sa zvýrazní zobrazenie tejto časti v rovnakej oblasti. V tejto časti sa zobrazí rovnaký počet stĺpcov, ktorý zodpovedá vášmu výberu. V mojom prípade som zvolil stĺpec s 3 stĺpmi.
Jednotlivé bloky so znamienkom „+“ vo vnútri sú oblasťami, ktoré môžu prijímať bloky Elementor. Ak pridáte blok Elementor bez toho, aby ste najskôr vybrali rozloženie, predvolene sa vyberie rozloženie jedného stĺpca.
Sekcie elementov je možné medzi sebou meniť poradie podľa rovnakého princípu „drag & drop“. Sekciu môžete tiež odstrániť, ak ju už nechcete používať.
Tu je príklad sekcie, ktorá obsahuje 2 bloky, a to rohový blok a textový blok.
Ako používať iné dizajnové nástroje
Po dokončení návrhu bude jedna z vecí, ktoré budete chcieť urobiť, uložiť svoju prácu. Túto možnosť nájdete v spodnej časti sekcie zobrazujúcej rôzne sekcie Elementor.
Môžete zvoliť priame uloženie (Zverejniť) a uložiť ako koncept alebo ako šablónu. Tieto rôzne body preskúmame neskôr.
Počas návrhu môžete tiež chcieť zobraziť ukážku zmien bez ďalšieho rozhrania Elementoru. Všetko, čo musíte urobiť, je kliknúť na ikonu oka.
Stáva sa, že počas návrhu dôjde k chybe (nedobrovoľná akcia). V tomto prípade ponúka spoločnosť Elementor históriu, ktorá vám umožní prechádzať všetkými vašimi činnosťami.
To vám umožní ľahko sa vrátiť späť.
Možnosť „Prehliadač“, ktorá sa nachádza tesne pred tlačidlom histórie, vám umožňuje ďalej upravovať rôzne sekcie vo vzťahu k prehliadaču používanému návštevníkmi. Táto voľba vám umožní prístup k rozšírenej úprave štruktúr rezov (šírka stĺpca). Tu musíte robiť zmeny veľmi opatrne.
Tlačidlo „Nastavenia“ vám umožňuje upravovať určité možnosti špecifické pre stránku, ako je napríklad nadpis, odporúčaný obrázok alebo stav.
To je pre tento tutoriál všetko, Elementor budeme ďalej skúmať v našom ďalšom tutoriále. Neváhajte a nahliadnite do Oficiálne internetové stránky ktorý ponúka oveľa úspešnejšie príklady.
