Aktuálne vychádza Elementor 4.0, rozhodol som sa pripraviť svoj pohľad na túto novú verziu. Keďže V4 editor sledujem už od prvých testovacích vydaní, chcel som zhrnúť, ako na mňa pôsobí dnes, čo podľa mňa prináša a v čom vidím jeho najväčší prínos aj slabšie miesta – aj keď tých je, za mňa, len veľmi málo.
Na čo slúži Elementor
Elementor je vizuálny page builder pre WordPress. Vznikol v roku 2016 a rýchlo si získal obľubu, pretože patril medzi prvé nástroje, ktoré priniesli kvalitný live drag-and-drop frontend editor. Výrazne zjednodušil UX, bol dostupný zadarmo (s možnosťou Pro verzie) a aj vďaka tomu sa veľmi rýchlo rozšíril. Dlhé roky bol postavený najmä na widgetovom prístupe.
S príchodom V4 však nejde iba o nové widgety, ale o úplne novú architektúru editora. Väčší dôraz sa kladie na CSS-first prístup, oddelenie štruktúry, štýlov a obsahu, a systematickejší spôsob tvorby cez classes, variables a components.
Kým starší Elementor bol silný najmä v rýchlom skladaní stránok cez widgety, V4 posúva editor bližšie k modernému front-end prístupu: menej jednorazových nastavení, viac systémovosti, znovupoužiteľnosti a poriadku.
Môj názor a moja skúsenosť
už od prvej alfa verzie sú v zásade pozitívne. Do finálnej verzie prešiel Elementor veľkým vývojom a množstvom zmien, aj keď mu stále ešte veľa vecí chýba. Na druhej strane je vidieť, že vývojári počúvajú komunitu a reagujú na spätnú väzbu.
Veľká zmena aj v spôsobe myslenia
Pre ľudí, ktorí ovládajú HTML a CSS, je to krok vpred. Pôvodná myšlienka Elementoru bola zjednodušiť tvorbu webu bežnému používateľovi pomocou jednoduchších mechaník. Teraz však prichádza prístup, ktorý je bližší klasickému HTML a CSS workflowu, len vo vizuálnej podobe. Pre mňa osobne je to ideálne, ale pre ľudí, ktorí hľadajú jednoduchosť a rýchlu krivku učenia, to môže byť náročnejšie, najmä kvôli širším a komplexnejším možnostiam.
Menej widgetov, viac priestoru pre kreativitu
V4 editor zatiaľ neponúka veľa hotových widgetov okrem úplného základu. Veľa vecí si preto musíme vyskladať sami – napríklad button s obrázkom, CTA sekciu, testimonial, image box a ďalšie prvky. Samozrejme, stále je možné používať aj staré widgety, no treba sa pripraviť na úplne odlišné rozhranie. Pri práci potom človek často preskakuje z nového prostredia do starého, čo môže pôsobiť chaoticky, keďže atomic widgety fungujú a vyzerajú inak.
Tým, že pribudlo veľa nových možností, rozšírilo sa aj celé menu. Preklikávanie je preto miestami menej intuitívne, aj keď je všetko rozdelené do kategórií. Na druhej strane je väčšina nastavení konečne zjednotená, najmä v sekcii Style, a vďaka tomu majú widgety konzistentnejšie ovládanie.
V sekcii Size konečne pribudli okrem width a height aj min a max hodnoty či aspect ratio, čo je veľmi praktické pri responzívnej práci.
Máte radi gradientový text v headingoch? Konečne ho máme natívne priamo v Elementore. Ak chcete mať obrázok priamo v texte, nie je to problém, a dokonca sa s tým dá ďalej vizuálne pracovať aj vrstvením.
Triedy
Triedy sú základným princípom práce so štýlmi a teraz prichádzajú aj do Elementoru. Prinášajú veľkú slobodu a zároveň otvárajú možnosti, ako si web lepšie optimalizovať a udržiavať konzistentný dizajn. Na druhej strane je to ďalšia vec, ktorú sa treba naučiť a pochopiť, takže pre úplného začiatočníka to nemusí byť najjednoduchšie. Napriek tomu si myslím, že sa to určite oplatí.
Celé je to spracované pomerne prehľadne. Jednotlivé vrstvy majú svoje farebné odlíšenie a v Class Manageri si vieme triedy pohodlne spravovať. V praxi to znamená, že si stačí vytvoriť napríklad štýl pre heading, priradiť mu triedu a potom túto triedu aplikovať na ďalšie nadpisy. Keď následne zmeníme danú triedu, zmeny sa prejavia všade, kde je použitá. To isté platí nielen pre texty, ale aj pre obrázky, sekcie a ďalšie prvky.
Rovnako sa cez triedy nastavujú aj hover stavy. Je to síce o niečo zložitejšie, než ako to fungovalo predtým, ale zároveň to prináša väčšiu kontrolu a slobodu.
Komponenty
Komponenty sú podľa mňa ďalšia veľká vec. Stačí si vytvoriť jeden komponent a potom ho používať na celom webe. Zároveň si vieme sami definovať, ktoré jeho časti sa budú meniť, takže získavame veľmi dobrú kombináciu konzistencie a flexibility.
V praxi to znamená, že si môžem vytvoriť napríklad vlastné tlačidlo alebo celú sekciu, ktorá sa má na webe opakovať viackrát. Namiesto toho, aby som ju skladal stále znova, vytvorím ju raz a pri ďalších použitých verziách už len zmením text, obrázok alebo iný obsah, ktorý chcem mať odlišný. Ak sa nemýlim, táto funkcia bude dostupná iba v Pro verzii.
Interactions (animácie)
Tieto animácie síce ešte nedosahujú možnosti Webflowu, ale aj tak sme získali veľkú slobodu v nastaveniach. Konečne sa dá vytvoriť animácia viac podľa seba a nespoliehať sa len na preddefinované efekty, ktoré často neboli ideálne. Pribudli aj rôzne triggery na spúšťanie animácií, ako napríklad page load, scroll into view, while scrolling (pro), on hover (pro), alebo on click (pro).
Atomic Form
Atomic Form je úplne nový spôsob vytvárania formulárov. Už nejde o jeden hotový formulárový widget, ale o jednotlivé časti, z ktorých si vieme poskladať formulár podľa seba. Tento prístup dáva omnoho väčšiu slobodu pri návrhu aj pri prispôsobovaní.
Custom CSS
Aj Custom CSS prešlo veľkou zmenou. Už nie je potrebné definovať selector pre konkrétny objekt tak, ako to bolo predtým. Stačí doplniť samotný CSS kód a veľkým plusom je aj lepšia práca s responzivitou. Vďaka tomu vieme mať samostatné CSS nastavenia pre jednotlivé breakpointy.
Celá myšlienka nového Elementoru v4 je postavená na koncepte Atomic Design, čo je metodológia pre tvorbu dizajnových systémov, ktorá pomáha zabezpečiť konzistenciu, flexibilitu a lepšiu škálovateľnosť webových stránok.
Záver
Je to krok správnym smerom? Za mňa áno. Elementor V4 prináša viac slobody, lepšiu systematickosť a modernejší spôsob práce. Stále mu síce niečo chýba a nie všetky zmeny sadnú každému, ale je jasné, že práve týmto smerom sa bude Elementor uberať ďalej. Zároveň je však dôležité vnímať, že ide len o začiatok. Veľa vecí majú ešte pred sebou, ďalšie funkcie sú naplánované a celý V4 editor sa bude ešte postupne dopĺňať a zlepšovať. Preto sa podľa mňa oplatí začať si na tento nový prístup zvykať už teraz. Nakoniec pridám Roadmapu.
Oficiálne video od elementoru o predstavení V4
Prečítajte si tiež o novinke, ktorú priniesla Figma.
