Work Services Journal About Contact
Warsaw contact@lverbeeck.com

Where Elementor Still Fits in an AI Workflow

Every few months someone declares Elementor dead, usually the week after they discovered AI can write HTML. I have shipped a large share of my client work in Elementor over the years, and I still reach for it on the right project. What changed is not whether I use it, but how. AI did not kill the page builder. It changed which parts of it I touch by hand. Here is where Elementor still earns its place in an AI-assisted workflow, with the actual techniques I use.

Why Elementor still fits

Elementor's value was never that it is the fastest way for a developer to build a page. Hand-coded HTML is faster for me. Its value is that it hands a non-technical client a visual editor inside an ecosystem they already trust, sitting on top of WordPress with its plugins, WooCommerce, and every integration a small business already pays for. When a client is committed to WordPress, has a team in the admin, or needs WooCommerce, that is where I build, and AI makes that build faster without me abandoning the platform.

The trick is to stop treating Elementor as the place where you invent design, and start treating it as the place where you assemble and hand off design that was decided elsewhere, often with AI's help.

Four techniques that earn their keep

One: build custom sections in code, drop them into an HTML widget

Elementor's built-in widgets are fine for standard layouts and awkward for anything genuinely custom. Rather than fight the widget settings to approximate an effect, I build the section as clean, self-contained HTML, CSS and JavaScript, and drop it into an Elementor HTML widget. In my "atomic elementor" experiments I built animated hero backgrounds this way, including a Three.js mesh canvas that renders a moving surface behind the headline. The markup is a single canvas element pasted into the HTML widget; the script goes into a Code Snippets entry that loads on that page. AI is excellent at generating and iterating this kind of self-contained visual code. I describe the effect, it drafts the canvas and animation logic, I refine it, and Elementor never has to understand what it is hosting.

This gives you the best of both: a custom, code-quality hero the client could never have built, living inside a page they can still edit around.

Two: convert AI-generated HTML into native Elementor widgets

Sometimes an HTML widget is not enough, because the client needs to edit the section itself, not just the copy around it. For that I use an HTML-to-Elementor conversion step. I keep a browser extension in my toolkit that takes a block of HTML and rebuilds it as native Elementor widgets and containers, so what started as AI-generated or hand-coded markup becomes real, editable Elementor structure. The pipeline is: AI or I write the section as HTML against the design, convert it to native widgets, then the client edits it like any other Elementor section. You get the speed of writing markup with the editability of the page builder.

Three: never touch functions.php, use Code Snippets

Any time a build needs custom PHP, and most real builds do, it goes into the Code Snippets plugin, never functions.php. This is a rule I follow without exception, and AI makes it more important, not less. AI will happily hand you a working PHP snippet, and the safe place to put that snippet is a scoped, toggleable Code Snippets entry you can disable in one click if it misbehaves, not buried in a theme file that breaks the whole site when it errors and vanishes on the next theme update. Every AI-generated snippet gets its own entry with a comment explaining what it does and where it runs. When something breaks, I flip one switch instead of editing a file over FTP while the client watches their site throw a 500.

Elementor is not where you invent design any more. It is where you assemble design AI helped you build, and hand it to a client who can maintain it.

Four: lock the design system in the Elementor kit

Before any page gets built, I set global fonts, colours and typography in the Elementor site kit. This is the equivalent of design tokens. When AI generates a section, or I convert HTML in, everything inherits from one source of truth, so the site stays consistent and a later rebrand is a handful of global changes instead of a page-by-page hunt. AI helps here too: I have it translate a design system spec into the exact global values to enter, so the kit matches the intended design on the first pass. The kit also keeps AI-generated sections honest. If a converted block arrives with hardcoded colours or one-off font sizes, that is the signal to fix it before it multiplies across forty pages and turns the next rebrand into an archaeology project.

The honest limit

For a lot of my newer work I skip Elementor entirely, because a static site on my own CMS is faster and safer, which I have written about separately. But when the client belongs on WordPress, Elementor plus AI plus Code Snippets is a genuinely strong workflow, and dismissing the page builder because you can now generate HTML misses the point. The client still has to run the site after I leave. Elementor is how they do that, and AI just made getting there quicker.

Have a WordPress or Elementor project that needs to move faster? Get in touch, or see the range of work.

Let’s build

Have a project in mind?

Get in touch