Design to working WordPress
A finished design, rebuilt as a site your client can actually edit.
You bring a finished design, drawn by a designer or generated with AI, as HTML and CSS or as React components. We rebuild it as a real Elementor site: native widgets, global colours and typography, custom fonts, uploaded media, real menus and reusable templates. It goes through the pipeline we built at Pigment Dev to make this step faster, and it is checked against the design before you see it.
The pipeline is Pigment Dev's in-house tooling, and I lead engineering at the studio that builds it. It is how the work gets delivered, not a product you buy or install.
Seven stages, in order
One run, start to finish. The skeleton gate is never skipped: nothing is built until you have approved what it will be built from.
containerP-C1
heading H1 · tokenP-C1-W1
text-editor · bodyP-C1-W2
button · fittedP-C1-W3
container · flex, thirdsP-C2
icon-boxW1
icon-boxW2
icon-boxW3
Interview
A fixed set of questions, including whether to keep or strip the design's animations.
Refinement
A free-text brief: house rules, exceptions, and what matters most on this site.
Skeleton gate
You approve a labelled skeleton of a sample first: home, about, contact and one list page.
Convert
Each element mapped to a native Elementor widget, and every colour and text style turned into a global token.
Deploy
Fonts, the global kit, media, post types, pages, menus, header and footer, pushed to the live site in that order.
Verify
The design and the live page photographed at the site's breakpoints and compared, then patched until they agree.
Report
Every media file, every token, every page and every deviation from the design, with where and why.
Native widgets. Never the design in an HTML widget.
The quick way to get a design into Elementor is to paste it into an HTML widget. It looks finished on the day, and nobody but a developer can edit it afterwards. I do not deliver that.
What a quick conversion produces
- The design pasted into raw HTML widgets where a native one would have done
- Fixed pixel widths on containers
- An icon, a heading and a paragraph rebuilt as two containers and three widgets
- Custom CSS carrying the layout that flex controls should carry
- Fonts that are almost right, which nobody notices until the client does
What we deliver
- Every element a native Elementor widget, free or Pro, and every form the Form widget
- Containers that inherit the kit's global width
- One icon box with a position setting
- Widths, gaps and order set in Elementor's own controls
- Every colour and text style a global token: change the kit, change the site
- Headers and footers built on real WordPress menus
If one small element genuinely has no native widget, the report names it, with the page, the widget and the reason, and you decide. It is never the design itself.
Six parts, one pipeline
Built at Pigment Dev to make our own delivery faster, and now the thing the studio is asked about most. Each part has one job.
| Part | What it does | Its job |
|---|---|---|
| Elementor Bridge | REST endpoints and an admin helper that turn a design project into a live Elementor site: applies a global kit, installs custom fonts, uploads media, creates pages. | The engine |
| html2elementor | Converts HTML, CSS, JavaScript or React components into Elementor-importable JSON with correct widget mapping. | The translator |
| PigFig Components | A component library, with copy-prompt and copy or download of Elementor widgets. | The parts bin |
| Elementor AI Prompt Master | Prompt tooling built against Elementor's widget and hook surface. | The instruction layer |
| Elementor Compressor | Compresses and optimises Elementor kits and templates. | The optimiser |
| Pigment React Widget | Paste React or JSX into an in-page editor and embed the compiled component through a shortcode or an Elementor widget. | The escape hatch |
Checked against the render, not the CSS
A stylesheet says what the rules declare. It cannot say what the page actually rendered.
Photographed at each breakpoint
The design and the live page, side by side in a headless browser, at the site's own breakpoints.
Every text element measured
Family, size, weight, line height and letter spacing, on both sides. Spacing and icons are measured the same way.
Patched where it lives
Each mismatch fixed at the widget and control that own it, then photographed again until the two agree.
No empty widgets
An audit after each round flags any widget that rendered as blank space, so a matching height is never mistaken for a correct page.
A right-to-left medical site of nearly thirty pages looked finished. Measured, more than three thousand of its text elements were rendering in the wrong family, size, weight or line height, and dozens of its icons had been replaced by lookalikes.
A good fit when
You have a finished design and need a site that you, or your client, can keep editing in Elementor.
Not a fit when
You still need the design itself, or you want it pasted into an HTML widget to save a day.
I am not a designer. For the design, Pigment Agency is where I would send you, and I would probably end up doing the development anyway.
// services/
If this is close to what you need
Tell me what you are trying to build or fix, what already exists, and what a good outcome looks like. I reply within two business days, and I will tell you honestly whether I am the right person.
- Technical consultingA second pair of eyes, and a written answer
- WordPress and WooCommercePlugins that survive updates and get extended
- Performance and infrastructureSlow, expensive or unstable, traced to the cause
- Integrations and automationSystems that were never meant to talk
- ApplicationsWeb apps, macOS utilities and browser extensions
- Design to working WordPressA finished design, rebuilt natively in Elementor