Elementor predstavuje novinku, ktorá môže výrazne zmeniť spôsob, akým agentúry vytvárajú WordPress weby: oficiálne MCP prepojenie pre nástroje ako Codex, Claude Code a Cursor.
AI agent na vývoj už nemusí vytvárať HTML mimo WordPressu, ktoré potom ručne prerobíte. Dokáže pracovať priamo s webom v Elementore a vytvárať skutočné, upraviteľné Elementor štruktúry.
Nové Elementor MCP testujeme na niečom zaujímavejšom než demo prostredie: na našom existujúcom produkčnom agentúrnom webe. Ukážkou je landing page vytvorená cez Elementor MCP a rozšírenie prehliadača.
Web už obsahuje roky existujúcich komponentov Elementor V3, globálnych štýlov a produkčného obsahu. Naša otázka bola jednoduchá: dokážeme zaviesť vývoj s AI bez prestavby webu a narušenia existujúceho V3 nastavenia?
Zatiaľ to vyzerá veľmi sľubne.
Naše nástroje a nastavenie
Naše aktuálne workflow kombinuje:
- WordPress
- Elementor Pro
- existujúce stránky a komponenty Elementor V3
- Elementor V4 / Atomic Elements
- Elementor MCP
- Codex
- Claude Code
- Figmu
- screenshoty a vizuálne referencie
- vizuálnu kontrolu v prehliadači
- vizuálny editor Elementor na finálne doladenie
Dôležité je, že nejde o kompletnú výmenu. Webgate.digital neprestavujeme v Elementor V4. Atomic Elements a vývoj cez MCP postupne zavádzame do existujúceho webu v Elementor V3.
Test sa tak oveľa viac podobá situácii, ktorú agentúra rieši na skutočnom klientskom webe.
Prvý prípad použitia v produkcii
Naším prvým väčším testom bola nová landing page.
Stránka je príznačne venovaná nášmu AI-native prístupu k vývoju webov. Chceli sme ju zostaviť kombináciou existujúcich dizajnových vzorov Webgate a úplne nových sekcií. Namiesto prázdneho plátna a ručného skladania každého kontajnera sme pracovali prevažne cez Codex a Claude Code.
Postup vyzeral približne takto: zadanie → kontext existujúceho webu → screenshoty / Figma → prompty → Elementor MCP → vizuálna kontrola → doladenie.
Niektoré časti opätovne využívajú existujúce štruktúry Elementor V3. Iné sekcie vznikli cez MCP ako nové V4 Atomic štruktúry. Oba prístupy fungujú na jednom produkčnom webe. Práve to sme chceli otestovať.
V3 a V4 môžu fungovať spolu
Pred testovaním MCP sme sa pýtali, či zavedenie Atomic Elements bude vyžadovať migráciu všetkého naraz.
Zatiaľ to nebolo potrebné. Existujúce V3 sekcie a widgety môžeme ponechať a nové sekcie vytvárať pomocou V4 Atomic Elements.
Pre agentúry a zložité produkčné weby je to dôležité. Bežný Elementor web môže obsahovať stovky stránok vytváraných niekoľko rokov. Prestavovať všetko iba pre nový spôsob vývoja by ekonomicky málokedy dávalo zmysel.
Realistickejšia cesta migrácie je:
- ponechať stabilné V3 štruktúry tam, kde nie je dôvod ich meniť,
- nové sekcie a landing pages vytvárať s Atomic Elements,
- staršie štruktúry nahrádzať postupne pri redizajne,
- postupne zvyšovať podiel webu postavený na novom systéme.
Takto k tomu pristupujeme aj vo Webgate.
Elementor aktuálne označuje V4 ako Atomic Editor a súbežne zachováva funkcie V3. Beta Elementor 4.3 rozširuje MCP a Atomic možnosti bez povinnej okamžitej migrácie existujúcich stránok. Podrobnosti sú v oznámení Elementoru.
Čo Elementor MCP reálne robí
MCP znamená Model Context Protocol. Podstatná však nie je skratka.
Nástroje ako Codex alebo Claude Code môžu komunikovať priamo s Elementorom. Nemusia vám iba dávať pokyny alebo generovať kód, ktorý ručne kopírujete inde.
Elementor MCP sprístupňuje schopnosti Elementoru cez systém WordPress AI Abilities.
Pripojený agent dnes dokáže pracovať napríklad s:
- vytváraním stránok a rozložení,
- úpravami existujúcich rozložení,
- tvorbou a použitím tried a premenných,
- responzívnymi nastaveniami,
- komponentmi,
- prepájaním dynamických dát,
- šablónami Theme Buildera,
- vytváraním popupov,
- priamou úpravou Elementor štruktúr.
Výsledkom je stále Elementor. Vygenerovanú stránku otvoríte v editore a ďalej ju bežne upravujete.
Elementor navyše prácu vytvorenú cez MCP ukladá ako koncept a okamžite ju nepublikuje. Aj to uvádza jeho oznámenie.
Tento posledný bod je dôležitý.
Hodnotu pre nás nepredstavuje autonómne generovanie webu pomocou AI. Spočíva vo výraznom obmedzení mechanickej práce potrebnej na premenu dizajnového rozhodnutia na Elementor štruktúru.
Jednoduché nastavenie Elementor MCP
V čase písania článku je Elementor MCP súčasťou bety Elementor 4.3.
Elementor na testovanie odporúča:
- Otvoriť Elementor → Editor → Tools → Version Control.
- Zapnúť beta testovanie.
- Aktualizovať Elementor na najnovšiu betu 4.3.
- Otvoriť Elementor → Editor → Settings → Atomic Editor.
- Aktivovať Atomic Editor.
- Prejsť do Elementor → Elementor MCP.
Na obrazovke MCP si vyberiete klienta, ktorého chcete pripojiť.
Elementor aktuálne podporuje nastavenie pre:
- Claude Code,
- Claude Desktop,
- Codex,
- Cursor,
- ďalšie klienty kompatibilné s MCP.
Vygeneruje nastavovací prompt s údajmi, ktoré AI nástroj potrebuje na pripojenie.
Pripojenie využíva WordPress Application Password. Elementor ho počas nastavenia dokáže vytvoriť automaticky.
Po pripojení môžete začať jednoduchým testom:
Vytvor novú stránku ako koncept a pridaj Atomic hero sekciu s nadpisom, odsekom a dvoma CTA tlačidlami. Použi existujúci dizajnový systém webu.
Potom stránku otvorte v Elementore a skontrolujte výsledok.
Cloudflare môže blokovať pripojenie
Na webgate.digital Cloudflare spočiatku zasahoval do autentifikovaných požiadaviek na WordPress REST API, ktoré používa Elementor MCP.
Vyriešili sme to vlastným WAF pravidlom pre požiadavky na webgate.digital začínajúce na /wp-json/. Preskočilo konkrétnu bezpečnostnú kontrolu Cloudflare, ktorá ich blokovala, pričom zvyšná ochrana webu zostala aktívna.
Cieľ je jednoduchý: povoliť autentifikovanú MCP komunikáciu bez oslabenia ochrany zvyšku webu.
Wordfence môže blokovať pripojenie
Pri pripájaní MCP k existujúcemu produkčnému webu treba rátať s praktickou prekážkou. Bezpečnostné pluginy a serverové firewally môžu blokovať vzdialené overovanie alebo REST požiadavky. V našom prípade treba túto možnosť preveriť pri nainštalovanom Wordfence.
Elementor MCP sa overuje cez WordPress Application Passwords. Ak sa klient nevie autentifikovať napriek správnym údajom, skontrolujte Wordfence, ďalšie bezpečnostné pluginy, Cloudflare aj firewall hostingu.
Praktické poradie diagnostiky:
- Overte dostupnosť WordPress Application Passwords pre používateľa.
- Skontrolujte potrebné oprávnenia MCP používateľa.
- Overte, či nie sú blokované požiadavky WordPress REST API.
- Pozrite logy firewallu Wordfence.
- Ak Wordfence požiadavky blokuje, povoľte potrebný prístup aplikácie/API.
- Ak overenie stále zlyháva, skontrolujte pravidlá hostingu alebo reverzného proxy.
Nevypínajte celý firewall natrvalo len preto, aby MCP fungovalo.
AI pripojenie spravujte ako každú inú autentifikovanú integráciu a povoľte iba prístup, ktorý skutočne potrebuje.
Naše doteraz najužitočnejšie použitia MCP
Zaujímavé nie je požiadať AI, aby „vytvorila web“. Veľký rozdiel prináša zadávanie presných vývojových úloh.
Tu sú príklady promptov, ktoré sme použili pri tvorbe landing page.
1. Nová sekcia zo zadania
Napríklad:
Vytvor sekciu služieb so šiestimi kartami. Dodrž vizuálny štýl existujúceho webu, použi Atomic Elements a naše existujúce premenné.
Odpadá veľa opakovaného skladania rozloženia. Vývojár sa viac sústredí na štruktúru a dizajnové rozhodnutia než na preklikávanie desiatok nastavení.
2. Tvorba podľa screenshotov
Screenshoty sú prekvapivo užitočné.
Agentovi ukážeme existujúcu sekciu Webgate alebo inú referenciu a požiadame ho o podobnú štruktúru z natívnych Elementor prvkov.
Screenshot vysvetľuje vizuálny zámer. MCP zabezpečuje samotnú implementáciu v Elementore.
3. Implementácia z Figmy do Elementoru
Z dlhodobého hľadiska ide o jeden z najzaujímavejších postupov. AI nástroj môže mať súčasne prístup ku kontextu Figmy aj k Elementoru.
Postup sa približuje schéme: Figma frame → interpretácia agentom → natívna Elementor štruktúra.
Namiesto schémy: Figma → vývojár ručne nastavuje každú hodnotu v Elementore.
Elementor tento postup výslovne vyzdvihuje: AI klient môže načítať kontext zo systémov ako Figma, Drive či Notion a použiť ho pri tvorbe v Elementore.
Ľudská kontrola zostáva dôležitá najmä pri responzivite, rozostupoch, typografii a konzistentnosti dizajnového systému. Množstvo mechanickej implementačnej práce sa však môže výrazne znížiť.
4. Opätovné použitie V3 štruktúr
Nie každú sekciu treba prerobiť pomocou Atomic Elements. Niekedy je najrýchlejšie použiť to, čo už funguje. Na landing page sme skombinovali existujúce V3 moduly s novými Atomic sekciami. Je to jedna z našich obľúbených vlastností tohto workflow.
AI nás nenúti všade zaviesť novú architektúru. Pre každú časť stránky môžeme vybrať vhodnú implementáciu.
5. Úpravy štruktúry
MCP je ešte užitočnejšie, keď už prvá verzia existuje. Namiesto ručnej prestavby kontajnerov môžeme zadať:
Zmeň túto sekciu z troch rovnakých stĺpcov na asymetrické rozloženie 40/60.
Alebo:
Na mobile presuň vizuál nad obsah a desktopové rozloženie ponechaj.
Alebo:
Nahraď týchto šesť samostatných blokov jedným opakovane použiteľným komponentom.
Práca sa tým približuje práci s kódom viac než tradičnému page builderu.
6. Úpravy obsahu a textov
Claude alebo Codex už pozná kontext stránky, preto sa obsah môže meniť spolu so štruktúrou.
Napríklad:
Skráť všetkých šesť popisov služieb najviac na dve vety a uprav sekciu tak, aby sa dala ľahšie rýchlo prečítať.
Agent dokáže v jednom postupe aktualizovať obsah aj podkladovú Elementor štruktúru.
7. Opakovaná tvorba landing pages
Pre marketingové tímy môže byť toto najhodnotnejšie využitie.
Keď už existuje dizajnový systém a vzory stránok, ďalšia kampaňová stránka by mala vyžadovať menej ručného skladania.
Proces sa približuje zadaniu špecifikácie agentovi:
- použi tento hero vzor,
- použi túto sekciu log,
- pridaj týchto šesť benefitov,
- použi tento CTA komponent,
- uplatni premenné webu,
- zapracuj dodané texty,
- vytvor tabletovú a mobilnú verziu.
Vývojár výsledok stále kontroluje. Východisková verzia však môže byť výrazne ďalej.
Elementor MCP verzus prístup cez prehliadač
Toto rozlíšenie je dôležité. Každý nástroj používame na inú prácu.
Elementor MCP sú ruky
MCP používame, keď má AI reálne pracovať s Elementorom:
- preskúmať štruktúru,
- vytvoriť stránku,
- pridať prvky,
- zmeniť kontajnery,
- upraviť obsah,
- aplikovať triedy,
- používať dizajnové premenné,
- vytvoriť alebo zmeniť komponenty.
MCP dáva agentovi štruktúrovaný prístup k systému.
Prehliadač sú oči
Prehliadač je vhodnejší na pochopenie vykresleného výsledku.
Používame ho na:
- otvorenie živej stránky,
- kontrolu reálneho vzhľadu,
- porovnanie so screenshotom alebo Figmou,
- odhalenie problémov s rozostupmi a zarovnaním,
- kontrolu desktopového aj mobilného správania,
- overenie interakcií,
- vizuálnu kontrolu kvality.
Vzniká užitočný cyklus: MCP → vykreslenie → kontrola v prehliadači → nové pokyny → MCP.
Napríklad:
Otvor stránku a porovnaj hero s touto referenciou. Nadpis je príliš úzky, nad CTA je veľa prázdneho miesta a obrázok by mal začínať približne o 80 px vyššie. Uprav Elementor sekciu.
Prehliadač pomáha agentovi pochopiť problém. MCP mu umožňuje vykonať zmenu.
Rozšírenie prehliadača nepovažujeme za náhradu Elementor MCP. Riešia odlišné časti workflow.
Prečo stále používame vizuálny editor Elementor
Zaujímavým výsledkom experimentu je, že AI neznížila užitočnosť vizuálneho editora. Možno ju dokonca zvýšila.
AI je veľmi dobrá v:
- príprave prvej implementácie,
- tvorbe štruktúry,
- opakovanom nastavovaní,
- prestavbe sekcií,
- systematických zmenách,
- premene jasných pokynov na implementáciu.
Pri mnohých drobných rozhodnutiach sú však ľudia stále rýchlejší.
Posunutie prvku o niekoľko pixelov, otestovanie vizuálnej rovnováhy alebo rýchla zmena breakpointu môže byť jednoduchšia priamo v Elementore než napísanie ďalšieho promptu.
Najzaujímavejšie workflow preto dnes vidíme v kombinácii vývoja s AI a vizuálnych úprav.
Codex alebo Claude zabezpečí náročnú implementačnú prácu. Elementor poslúži na finálne vizuálne doladenie. Pri ďalšej štrukturálnej zmene sa vrátime k agentovi.
AI a vizuálny builder nemusia stáť proti sebe. Ich kombinácia môže fungovať výrazne lepšie než ktorýkoľvek z týchto postupov samostatne.
Čo nás prekvapilo
Pred testovaním MCP sme čakali, že vývoj Elementoru s AI bude zaujímavý najmä pri úplne nových weboch.
Po použití na produkčnom webe vidíme väčšiu príležitosť v existujúcich stránkach.
Agentúra môže vziať web, ktorý funguje päť rokov, a začať používať AI agentov na ďalšiu landing page bez prestavby predchádzajúcich 200 stránok.
Kde je stále potrebný ľudský dohľad
Dnes by sme agentovi nedali neobmedzený prístup k produkčnému webu s pokynom prerobiť všetko. Ľudská kontrola zostáva súčasťou workflow.
Najmä pri:
- informačnej architektúre,
- UX rozhodnutiach,
- vizuálnej hierarchii,
- prístupnosti,
- responzivite,
- konzistentnosti dizajnového systému,
- testovaní v prehliadači,
- výkone,
- finálnom publikovaní.
Mení sa to, čomu vývojár venuje čas. Menej skladá kontajnery a viac kontroluje a zlepšuje výsledok. Pre seniorného vývojára je to oveľa zaujímavejšie využitie času.
Kam podľa nás tento prístup smeruje
Náš plán vo Webgate je priamočiary. Elementor MCP chceme postupne používať na:
- nové landing pages,
- kampaňové stránky,
- redizajny stránok,
- štrukturálne zlepšenia webov,
- vývoj Atomic komponentov,
- opakované zmeny naprieč webom,
- časom aj zložitejšie WordPress vývojové postupy.
Elementor zároveň predstavuje MCP ako širší vstup do ekosystému WordPress cez WordPress AI Abilities. S ďalšími nástrojmi, napríklad Angie, sa rovnaké agentové workflow môže rozšíriť od rozložení stránok k vlastným widgetom, administrácii WordPressu a správe obsahu.
Pre agentúry to môže byť dôležitejšie než samotné generovanie stránok pomocou AI.
Smerujeme k postupu, v ktorom vývojár opíše požadovaný výsledok, agent vykoná veľkú časť implementácie a vývojár ju skontroluje, otestuje a zlepší.
Vizuálny editor zostáva k dispozícii všade, kde je priama manipulácia rýchlejšia.
Táto kombinácia skôr dáva Elementor vývojárom omnoho rýchlejšie rozhranie platformy, než by ich spôsob práce nahrádzala.
Po prvých produkčných testoch vážne zvažujeme, že z nej urobíme naše predvolené workflow vývoja v Elementore.
To je pravdepodobne najsilnejšie odporúčanie, aké mu môžeme dať.
