Paradox vizuálneho editora
Elementor sprístupnil WordPress širšiemu publiku. Marketing dokáže tvoriť landing pages a majitelia firiem upravovať obsah. Učenie je jednoduché a presne to bol cieľ. Pri väčšom rozsahu sa však tá istá jednoduchosť stáva prekážkou.
Pre klientov sme v Elementore vytvorili stovky komplexných stránok. V editore pracujeme denne: skladáme rozloženia, udržiavame dizajn systémy a vylepšujeme komponenty. Po rokoch dobre poznáme drobnosti, ktoré prácu spomaľujú.
Samy osebe nie sú zásadným problémom, no rýchlo sa sčítavajú. Preto sme si položili otázku: čo keby sme si každodennú prácu trochu zjednodušili?
Predstavujeme ElementorGate: nástroje pre vývojárov vo vývoji
Inšpirovali sme sa Figmou a modernými editormi kódu. Vytvorili sme súbor funkcií, vďaka ktorým práca v Elementore pripomína plnohodnotnejšie vývojové prostredie.
Nástroje sme rozdelili do troch kategórií.
1. Náhľady šablón: najprv vidieť, potom kliknúť
Knižnica šablón Elementoru ukazuje názvy, nie vizuály. Keď máte viac než 50 uložených šablón, správnu hľadáte otváraním každej zvlášť. Pridali sme preto miniatúry vykreslené priamo v editore. Šablóny prechádzate ako dizajnovú knižnicu: skutočne ich vidíte.
Pomáha to tímom s viacerými rozloženiami stránok, dizajn systémami a opakovane použiteľnými sekciami aj každému, koho nebaví hádať, či potrebuje Header-v2 alebo Header-v3. Zjednodušuje to aj odovzdanie webu. Klienti skladajú nové stránky z pripravených šablón bez hádania, ktorá sekcia je ktorá.
2. Zobrazenie globálnych štýlov: vedieť, s čím pracujete
Výber vhodnej globálnej typografie v Elementore znamená otvoriť nastavenia webu, prejsť možnosti a pamätať si správnu veľkosť či hrúbku písma. Pridali sme náhľady globálnej typografie. Stačí prejsť kurzorom nad výber veľkosti písma a okamžite vidíte všetky globálne štýly s hodnotami vrátane responzívnych veľkostí pre jednotlivé breakpointy.
Rieši to bežný problém: ak dizajn nie je dokonale previazaný s globálnymi premennými, rýchlo zistíte, ktorý štýl sa hodí najviac, a použijete ho. Získate konzistentnú responzívnu typografiu bez ručného odhadovania.
Vytvorili sme aj prepínateľnú vrstvu, ktorá zvýrazní všetky prvky používajúce konkrétne globálne farby alebo fonty. Kliknete na štýl a vidíte každý jeho výskyt na stránke. Hodí sa to pri kontrole konzistentnosti aj pri bezpečnej úprave globálnych štýlov bez narušenia rozloženia.
3. Drobné nástroje a rýchle akcie
Pripravili sme malé pomôcky, ktoré urýchľujú tvorbu nových rozložení aj kontrolu existujúcich.
Kopírovanie kontextu prvku pre AI. Pri úpravách vlastného CSS alebo riešení problémov s rozložením samotné HTML nestačí. AI nevie, ktoré triedy ste priradili, čo pochádza z globálnej typografie a aké vlastné CSS už prvok obsahuje. Funkcia exportuje celý kontext: hierarchiu prvkov, vlastné CSS triedy a ID, odkazy na globálne farby a fonty aj s výslednými hodnotami, responzívne nastavenia a aktuálny režim editora.
Výhodu oceníte napríklad pri prvku s triedou .card-hover a vlastným CSS, ktoré chcete upraviť pomocou AI. Namiesto vysvetľovania, aký kontajner máte a ktoré štýly používa, skopírujete kontext. AI hneď vidí štruktúru widgetov, ich typy, triedy a existujúce štýly a môže presne zacieliť na vytvorený prvok. Odpadá zdĺhavé vysvetľovanie.
Vizualizácia nadpisov zapína vrstvu zobrazujúcu hierarchiu H1, H2, H3 a ďalších nadpisov. Pomáha pri SEO auditoch a kontrole prístupnosti. Označuje aj časté chyby, napríklad duplicitné H1 alebo preskočené úrovne, aby ste ich zachytili pred publikovaním.
Zobrazenie CSS tried a ID ukazuje vlastné triedy a identifikátory priamo na prvkoch bez otvárania panelov nastavení. Hodí sa pri prvkoch so štýlmi tretích strán aj na rýchle pochopenie zložitého rozloženia.
Inšpektor vlastného CSS odhalí prvky s pripojeným CSS kódom. Inak je táto informácia skrytá, kým neotvoríte kartu Advanced pri každom prvku. Panel ukazuje hierarchický prehľad vrátane počtu riadkov a náhľadu kódu. Kliknutím prejdete na prvok alebo otvoríte celý kód v náhľade. Jediným kliknutím sa dostanete aj priamo do jeho CSS editora.
Je to užitočné pri preberaní projektov po iných vývojároch aj pri hľadaní zbytočných lokálnych štýlov, ktoré by mali patriť do globálneho CSS.
Kontrola odkazov prejde všetky odkazy na stránke a rozdelí ich na interné, externé, kotvy do sekcií a nefunkčné odkazy s prázdnym href či zástupným #. Nefunkčné odkazy zvýrazní červenou, aby ste ich našli skôr než klient.
Panel ich zoskupí podľa typu, zobrazí cieľovú URL a umožní otvoriť externé odkazy v novej karte. Je to pomôcka pri QA pred spustením aj pri upratovaní stránok migrovaných z iných platforiem.
Skratky na zoskupovanie fungujú podobne ako vo Figme. Vyberiete viacero prvkov a pomocou Cmd+G ich vložíte do kontajnera. Cmd+Shift+G ich z kontajnera vyberie.
Všetko na jednom mieste: paleta príkazov
Pre tieto nástroje aj ďalšie bežné akcie sme vytvorili paletu príkazov inšpirovanú Raycastom.
Raycast je populárna macOS aplikácia, ktorá nahrádza Spotlight. Umožňuje rýchlo vytvárať pripomienky, spúšťať aplikácie a otvárať projekty bez myši. Napíšete, čo chcete, stlačíte Enter a hotovo.
Rovnaký prístup sme preniesli do Elementoru. Cmd+K alebo Ctrl+K otvorí paletu príkazov ako spoločný vstup do akcií editora. Nemusíte si pamätať, kde sa čo nachádza v menu. Jednoducho napíšete, čo chcete urobiť.
Okrem našich pomôcok paleta sprístupňuje duplikovanie, mazanie, kopírovanie a vkladanie, nastavenia stránky či webu aj prepínanie desktopového, tabletového a mobilného zobrazenia.
Širší pohľad
Tieto nástroje nemajú nahradiť Elementor. Reagujú na rozdielne potreby jeho používateľov.
Marketingovému tímu, ktorý upravuje landing page, súčasné rozhranie postačuje. Pri vývoji a údržbe komplexných webov však vidíme priestor na zlepšenie.
Čo sme sa pri tvorbe prototypov naučili:
- Interné API Elementoru sú prekvapivo schopné. Väčšina funkcií využíva možnosti, ktoré už existujú, len nie sú dostupné v rozhraní.
- Drobné interakcie sa sčítavajú. Tri sekundy pri zoskupení, päť pri hľadaní šablóny a desať pri kontrole globálneho štýlu znamenajú pri stovkách úprav citeľnú úsporu.
- Editor môže byť inteligentnejší. Kontextové informácie, napríklad detaily typografie, názvy tried či štruktúra nadpisov, by nemali vyžadovať otváranie panelov.
Čo bude nasledovať?
ElementorGate stále vyvíjame. Nástroje testujeme na reálnych klientskych projektoch, dolaďujeme ovládanie a skúmame ďalšie možnosti.
Ak aj vás pri rozsiahlejšej práci s Elementorom brzdia podobné drobnosti, nie ste sami. Vizuálne editory fungujú, ale stále majú priestor na doplnky pre vývojárov, ktoré rešpektujú platformu a urýchľujú prácu.
Veríme, že editovanie môže byť lepšie. Týmto sa to snažíme ukázať.
Vyskúšajte si to
Všetko sme zabalili do WordPress pluginu pripraveného na testovanie. Ak vás zaujíma, ako nástroje fungujú v praxi, ozvite sa nám a sprístupníme vám demo.
Zaujímajú nás aj vaše problémy s Elementorom. Čo vás spomaľuje? Ktorá drobnosť vám každý deň prekáža? Akú funkciu vám editor stále nedáva?
Pomôžte nám pochopiť, čo vás pri práci trápi najviac. Vaša spätná väzba ovplyvní ďalší vývoj.
