Chceli by ste objaviť a pochopiť, ako vyzerá rozhranie Elementor? Tento návod je pre vás.

Navrhnúť web s profesionálnym vzhľadom nebolo pre každého, najmä sme všetci mali dojem, že musíme byť absolútne profesionáli v kódovaní a webdizajne.

V súčasnosti sme svedkami toho, ako sa pre ekosystém WordPress objavujú nové nástroje s cieľom poskytnúť stále jednoduchšie riešenie na navrhovanie webovej stránky, ktoré je dostupné aj pre tých najzačiatočnejších.

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 nevyhovuje každému. To je dôvod, prečo vám v tomto návode predstavíme doplnok Elementor WordPress, čo je freemium doplnok WordPress (bezplatný, ale rozšíriteľný v rámci predplatného).

Prezentácia rozhrania Elementor

Obsah


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. Keďže ide o doplnok WordPress, inštaluje sa 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

Elementor je jedným z najpopulárnejších tvorcov stránok pre WordPress, a to z dobrého dôvodu. Vďaka svojim robustným funkciám a intuitívnemu rozhraniu ponúka výkonné riešenie na vytváranie profesionálnych webových stránok bez potreby kódovacích zručností. Tu je prehľad hlavných funkcií Elementoru, vďaka ktorým je nepostrádateľný pre každého používateľa WordPress:

Drag and Drop Visual Editor : Elementor ponúka intuitívny vizuálny editor, ktorý vám umožňuje navrhovať stránky presúvaním prvkov. Zmeny môžete vidieť v reálnom čase, vďaka čomu je prispôsobenie vášho webu oveľa jednoduchšie.

Bohaté widgety : Vďaka širokej škále dostupných miniaplikácií vám Elementor umožňuje pridávať rôzne prvky na vaše stránky, ako sú tlačidlá, galérie, kolotoče, formuláre a ďalšie. Verzia Pro rozširuje túto funkčnosť o pokročilé widgety, ako sú kontaktné formuláre, posúvače a portfóliá.

Preddefinované šablóny : Elementor ponúka knižnicu vopred pripravených šablón, ktoré možno použiť ako východiskový bod pre vaše stránky. Tieto šablóny pokrývajú rôzne štýly a potreby, vďaka čomu je jednoduché vytvárať esteticky príjemné a funkčné stránky.

Editor motívov : S Elementor Pro si môžete prispôsobiť nielen obsah svojich stránok, ale aj hlavičky, päty a ďalšie celkové časti vašej stránky vďaka vstavanému editoru tém. To vám umožní vytvoriť vizuálnu konzistenciu na celej vašej lokalite.

Vytváranie šablón príspevkov : Funkcia na tvorbu šablón príspevkov vám umožňuje navrhnúť rozloženia pre konkrétne typy príspevkov, ako sú blogové príspevky alebo produkty WooCommerce. Táto možnosť je užitočná najmä pri vytváraní konzistentných návrhov pre rôzne typy obsahu.

Tvorca vyskakovacích okien : Elementor Pro obsahuje nástroj na tvorbu kontextových okien, ktorý vám umožňuje vytvárať vlastné kontextové okná pre reklamy, registračné formuláre alebo iné interakcie návštevníkov. Môžete definovať podmienky zobrazenia, aby ste presne zacielili na svoje publikum.

Pokročilé ovládacie prvky rozloženia : Elementor ponúka pokročilé ovládacie prvky pre typografiu, okraje, medzery a responzívne rozloženie. Rozloženie svojich stránok môžete upraviť pre rôzne typy zariadení, čím zaistíte optimálnu používateľskú skúsenosť na mobile, tablete a počítači.

Podpora a dokumentácia : Elementor poskytuje komplexnú podporu s podrobnou dokumentáciou, online návodmi a aktívnou komunitou. Používatelia Pro profitujú z priamej prémiovej podpory, ktorá zaisťuje rýchlu a efektívnu pomoc pri riešení akýchkoľvek problémov.

Rozšírenia a integrácie : Elementor je kompatibilný s rôznymi zásuvnými modulmi a integráciami, čo umožňuje pridať ďalšie funkcie na vašu stránku. Či už chcete integrovať marketingové nástroje, SEO pluginy alebo riešenia elektronického obchodu, Elementor uľahčuje rozšírenie možností vášho webu.

Tu je tabuľka, ktorá sumarizuje vlastnosti Elementoru.

rysyElementor zadarmoElementor Pro
Drag and drop editor stránkyÁnoÁno
Preddefinované šablónyÁnoÁno
Základné widgetyÁnoÁno
Widgety ProNieÁno
Editor hlavičky a pätyNieÁno
Vytváranie šablón príspevkovNieÁno
Vytváranie šablón WooCommerceNieÁno
Tvorca vyskakovacích okienNieÁno
Podpora miniaplikácií tretích stránNieÁno
Technická podporaNieÁno
Marketingové funkcie (formuláreNieÁno
Prístup ku knižnici prémiových šablónNieÁno
Pokročilé efekty a animácieNieÁno
Nástroje na kontrolu a zálohovanieNieÁno
Vytváranie formulárovNieÁno
Pokročilé ovládanie typografieNieÁno
Responzívne ovládanie rozloženiaNieÁno
Prístup k pravidelným aktualizáciámÁnoÁno
Vlastnosti Elementor.

 

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

Začať s Elementorom je rýchle a jednoduché, aj keď ste v vytváraní stránok WordPress nováčik. Podľa týchto krokov nastavte Elementor a začnite navrhovať svoje stránky ako profesionál.

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.

Inštalácia Elementoru

  1. Prístup k vášmu informačnému panelu WordPress: Prihláste sa do svojho administračného panela WordPress.
  2. Prejsť na Rozšírenia: Prejdite na „Rozšírenia“ a potom kliknite na „Pridať“.
  3. Vyhľadajte Elementor: Do vyhľadávacieho panela zadajte „Elementor“. Nájdete Elementor (bezplatná verzia). Ak chcete začať, nainštalujte a aktivujte si bezplatnú verziu.
  4. Nainštalujte Elementor: Kliknite na „Inštalovať teraz“ a po dokončení inštalácie na „Aktivovať“.

Po inštalácii sa však dostanete na domovskú stránku pluginu.

delementor.png prezentačná stránka

Ak máte túto stránku na obrazovke, úspešne ste nainštalovali doplnok Elementor. V súčasnosti používame plnú verziu tohto tutoriálu, ale rozhranie by sa nemalo príliš líšiť od bezplatnej verzie.

Pred prechodom do rozhrania úprav vás vyzvem na registráciu licencie. Platí to len pre tých, ktorí sa rozhodli pre verziu Pro.

Ak máte bezplatnú verziu, máte prístup k ďalšej časti. Ak chcete zaregistrovať svoju licenciu, všimnete si na WordPress upozornenie, ktoré vás vyzve na registráciu licencie.

upozornenie plugin elementor.png

Stačí teda kliknúť Vylepšiť teraz pre vstup na registračnú stránku a kliknite na Aktivovať.

registrácia licencie elementor.png

Ak máte licenciu, normálne uvidíte stránku s potvrdením aktívny.

aktívna licencia elementor.png

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.

Rozhranie Elementor

Rozhranie Elementoru je navrhnuté tak, aby poskytovalo plynulú a intuitívnu používateľskú skúsenosť, čo uľahčuje vytváranie a prispôsobovanie vašich stránok WordPress. Tu je podrobný prehľad hlavných častí rozhrania Elementor spolu s vizuálnymi príkladmi, ktoré vám pomôžu lepšie pochopiť každý prvok.

Pracovná oblasť (Oblasť obsahu)

La Pracovná zónaAlebo oblasť obsahu, je centrálnym priestorom, kde vytvárate a zobrazujete svoju stránku. Tu pridávate a upravujete miniaplikácie a sekcie. Rozloženie sa zobrazuje v reálnom čase, čo vám umožňuje vidieť zmeny, keď k nim dôjde.

Pracovná zóna

Panel Widgety

Le panel widgetov sa nachádza naľavo od rozhrania. Obsahuje rôzne prvky, ktoré môžete presúvať myšou na pracovnú plochu. Widgety sú usporiadané do kategórií, ako napríklad „Všeobecné“, „Základné“, „Rozloženie“ atď., aby sa uľahčilo vyhľadávanie a pridávanie prvkov na vašu stránku.

Skupiny miniaplikácií Elementor

Elementor Widget Groups sú skupiny funkčných blokov, 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 povoleným doplnkom WooCommerce, naše rozhranie vyzerá takto.

Skupiny widgetov Elementor

Horný panel s nástrojmi

La horný panel nástrojov obsahuje základné možnosti, ako napríklad:

  • Logo: Zobrazuje v ponuke funkcie, ako napríklad: tvorca tém, história, predvoľby účtu, klávesové skratky atď.
  • Tlačidlo na pridávanie prvkov: Umožňuje zobraziť panel miniaplikácií, ktoré sa majú vložiť do stránok
  • Tlačidlo nastavení lokality: Zobrazuje mnoho globálnych nastavení možností lokality
nastavenia lokality
  • Tlačidlo štruktúry: Umožňuje vám vidieť celkovú štruktúru vašej stránky a bez obáv sa ňou pohybovať. Ak má vaša stránka niekoľko vnorených sekcií, táto funkcia vám veľmi pomôže.
  • Názov stránky/článok: Zobrazuje názov stránky alebo článku, ako aj jeho stav (koncept, zverejnený atď.)
  • Menu mobilnej navigácie : Umožňuje prepínať medzi zobrazením na pracovnej ploche, tablete a mobilnom zariadení. Je to nevyhnutné, aby ste sa uistili, že váš dizajn reaguje a je dobre prispôsobený pre všetky typy zariadení.
  • Nastavenia stránky : Prístup k nastaveniam stránky vrátane možností rozloženia a nastavení štýlu.
  • Publikovať/Aktualizovať : Uloží a zverejní zmeny vykonané na stránke.
  • Náhľad : Symbolizované okom a umožňuje vám vidieť, ako sa vaša stránka správa v reálnej situácii.

Takže vľavo máte rôzne widgety, ktoré plugin ponúka, a vpravo máte náhľad vašich úprav v reálnom čase. V tomto návode používame bezplatnú tému Hello od Elementor.


Ako používať Elementor

Vytvorenie prvej stránky

Elementor funguje na stránkach a príspevkoch WordPress. Či už používate klasické rozhranie alebo nové rozhranie Gutenberg, uvidíte tlačidlo, ktoré vás vyzve na použitie nástroja Elementor builder.

  • Vytvorte novú stránku: Prejdite na „Stránky“ a kliknite na „Pridať“.
  • Pomenujte svoju stránku: Dajte svojej stránke názov a zverejnite ju.
  • Upraviť pomocou Elementor: Kliknutím na tlačidlo „Upraviť pomocou programu Elementor“ spustíte vizuálny editor Elementor.
upraviť stránku pomocou konštruktora elementor.png

V praxi nebudete musieť vždy upravovať svoje príspevky pomocou Elementor. Preto vás pozývam, aby ste doplnok používali iba na stránkach.

Kliknutím na tlačidlo sa dostanete do dizajnového rozhrania Elementor, ktoré dáva atmosféru déjà vu (pre tých, ktorí používajú WordPress Customizer).

Ako pridať widgety do editora Elementor

Potiahnite miniaplikácie, ako sú názvy, obrázky, tlačidlá a ďalšie, z ľavého panela do oblasti obsahu. Nastavenia každého widgetu môžete upraviť kliknutím naň.

Pridať miniaplikácie

Prispôsobiť widgety: Kliknutím na miniaplikáciu otvoríte možnosti prispôsobenia. Môžete upraviť text, obrázky, farby, veľkosti a ďalšie.

Prispôsobte si widgety

Použiť šablóny: Na urýchlenie procesu použite preddefinované šablóny. Kliknutím na ikonu priečinka získate prístup do knižnice šablón, kde si môžete vybrať šablónu a importovať ju jedným kliknutím.


Praktické prípady

Ako umiestniť blok Elementor

Po rozbalení sekcie nájdete widgety Elementor. Rôzne miniaplikácie Elementor sú umiestnené pomocou funkcie „Drag & Drop“ vo zvýraznenej oblasti s prerušovanými čiarami.

Ako umiestniť blok Elementor

Ako zvoliť rozloženie sekcie v Elementore

Pred pridaním miniaplikácií Elementor by ste sa mali zamyslieť nad výberom rozloženia kliknutím na tlačidlo „+“ vo zvýraznenej časti.

vyberte rozloženie sekcie v Elementore

V závislosti od vašich potrieb si vyberiete rozloženie, ktoré je najvhodnejšie.

Po výbere rozloženia budete mať znázornenie tejto sekcie na rovnakej zvýraznenej oblasti. V tejto časti sa zobrazí rovnaký počet stĺpcov, ktorý zodpovedá vášmu výberu. V mojom prípade som si vybral stĺpec s 2 stĺpcami.

číslo stĺpca elementor

Rôzne stĺpce so znakom „+“ vo vnútri sú oblasti, ktoré môžu prijímať widgety Elementor.

Ak pridáte blok Elementor bez toho, aby ste najprv vybrali rozloženie, predvolene sa vyberie rozloženie s jedným stĺpcom.

Sekcie prvkov Elementor je možné medzi sebou preusporiadať podľa rovnakého princípu „ Chyť pusti„.

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.

elementor sekcia s 2 blokmi.png

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.

elementor.png zálohovanie

Môžete zvoliť priame uloženie (Zverejniť) a uložiť ako koncept alebo ako šablónu. Tieto rôzne body preskúmame neskôr.

Pri navrhovaní môžete tiež chcieť zobraziť ukážku zmien bez dodatočného rozhrania Elementor. Stačí kliknúť na ikonu oka v hornej lište editora Elementor.

náhľad zmien elementor.png

Stáva sa, že počas návrhu dôjde k chybe (mimovoľná akcia).

V tomto prípade vám Elementor ponúka históriu, ktorá vám umožňuje prechádzať všetkými vašimi akciami.

Odstráňte zo zoznamu akcie, ktoré chcete vrátiť späť

akcie elementor.png

To vám umožní ľahko sa vrátiť späť.

nastavenie » vám umožňuje upraviť určité možnosti špecifické pre stránku, ako napríklad názov, odporúčaný obrázok alebo stav.

elementor.png nastavenia

FAQ

Čo je Elementor?

Elementor je nástroj na tvorbu stránok pre WordPress, ktorý umožňuje používateľom vytvárať webové stránky vizuálne bez kódovania. Ponúka intuitívne rozhranie s nástrojmi drag-and-drop na pridávanie a prispôsobovanie prvkov na vašich stránkach.

Je Elementor zadarmo?

Elementor ponúka bezplatnú verziu s dostatočnou základnou funkcionalitou na vytváranie jednoduchých webových stránok. Verzia Pro, dostupná prostredníctvom predplatného, ​​ponúka pokročilé funkcie, ako sú ďalšie miniaplikácie, prémiové šablóny a rozsiahle možnosti prispôsobenia.

Aké sú výhody Pro verzie Elementor?

Pro verzia Elementor ponúka pokročilé widgety, profesionálne šablóny, hlbšie možnosti dizajnu a možnosť vytvárať vlastné hlavičky, päty a archívy. Umožňuje tiež rozšírenú integráciu s nástrojmi a marketingovými funkciami tretích strán.

Ako nainštalujem Elementor na svoju stránku WordPress?

Ak chcete nainštalovať Elementor, prejdite na hlavný panel WordPress, kliknite na „Pluginy“ a potom na „Pridať“. Vo vyhľadávacom poli vyhľadajte „Elementor“, potom kliknite na „Inštalovať teraz“ a nakoniec na „Aktivovať“. Elementor Pro môžete nainštalovať aj stiahnutím súboru ZIP z webovej stránky Elementor a jeho importovaním cez „Rozšírenia“ > „Pridať“ > „Nahrať rozšírenie“.

Ako použiť Elementor na vytvorenie stránky?

Po inštalácii Elementor prejdite na stránku alebo príspevok na hlavnom paneli WordPress a kliknite na „Upraviť pomocou Elementor“. Dostanete sa do editora Elementor, kde môžete presúvať miniaplikácie a sekcie a navrhovať tak svoju stránku. Pomocou ľavých panelov pridajte a prispôsobte prvky svojej stránky.

Je Elementor kompatibilný so všetkými témami WordPress?

Áno, Elementor je navrhnutý tak, aby bol kompatibilný s väčšinou Témy WordPress. Pre optimálnu integráciu sa však odporúča použiť témy navrhnuté špeciálne pre Elementor, ktoré ponúkajú zvýšenú kompatibilitu a flexibilitu.

Môžem použiť Elementor na vytvorenie stránky elektronického obchodu?

Áno, Elementor je kompatibilný s WooCommerce, čo vám umožňuje vytvárať a prispôsobovať stránky produktov, stránky obchodu a šablóny stránok pokladne. Verzia Pro ponúka špecifické widgety WooCommerce na zlepšenie vzhľadu vášho online obchodu.

Ako môžem zobraziť ukážku zmien vykonaných pomocou Elementor?

Svoje zmeny si môžete prezrieť kliknutím na tlačidlo „Ukážka“ v editore Elementor. To vám umožní vidieť, ako bude vaša stránka vyzerať pred zverejnením zmien naživo.

Ponúka Elementor technickú podporu?

Áno, Elementor ponúka technickú podporu prostredníctvom fór, vedomostnej základne a systému lístkov pre používateľov Pro. Môžete tiež získať prístup k podrobným návodom a sprievodcom na oficiálnej webovej stránke Elementor.

Môžem s Elementorom používať rozšírenia tretích strán?

Áno, Elementor je kompatibilný s mnohými rozšíreniami tretích strán, ktoré pridávajú ďalšie funkcie a widgety. Môžete ich nainštalovať ako WordPress pluginy normálnych na rozšírenie možností Elementoru.


Zdroje podobné tomuto článku

záver

Elementor je výkonné a všestranné riešenie na vytváranie výnimočných stránok WordPress bez potreby kódovania. Vďaka intuitívnemu rozhraniu a robustným funkciám umožňuje začiatočníkom aj profesionálom rýchlo navrhovať atraktívne a funkčné webové stránky.

Keď pochopíte hlavné časti rozhrania Elementor, budete sa môcť efektívne pohybovať v editore, optimálne používať miniaplikácie a prispôsobiť každý aspekt svojich stránok tak, aby vyhovovali vašim špecifickým potrebám.

Les pracovné oblasti, panely widgetova ďalšie nástroje sú navrhnuté tak, aby poskytovali maximálnu flexibilitu pri zachovaní jednoduchosti používania. Bezproblémovou integráciou sekcií a stĺpcov a využitím možností štýlu a rozloženia môžete premeniť svoju víziu na realitu.

Nezabudnite využiť funkcie náhľadu v reálnom čase, aby ste sa uistili, že vaše návrhy budú vyzerať skvele na všetkých zariadeniach. S Elementorom sa každý projekt stáva príležitosťou vytvoriť webovú stránku pôsobivé, ktoré naozaj vyniká.

Ak chcete získať ďalšie tipy a návody na používanie Elementor, prihláste sa na odber nášho blogu a zostaňte naladení na najnovšie aktualizácie a tipy. Zdieľajte tento článok s ostatnými nadšencami WordPressu a webdizajnu, aby ste im pomohli naplno využiť potenciál Elementoru.

Začnite skúmať nekonečné možnosti, ktoré vám Elementor ponúka, a premeňte svoje nápady na podmanivý webový dizajn!

Pin It na Pinterest