How to convert any website into an editable WordPress page
Turn a captured page into Gutenberg section blocks with its real CSS, fonts and images — editable in the block editor instead of pasted into a Custom HTML block.
The usual advice — "paste the HTML into a Custom HTML block" — produces a page that renders and cannot be edited. The client asks to change a headline, and you are editing raw markup in a textarea while the theme's stylesheet fights the pasted CSS. This is how to get an actual WordPress page instead.
What "editable" has to mean
A converted page is only useful if all four of these are true:
- Sections are blocks. The hero, the feature row and the footer are separate things you can move, duplicate and delete in the editor.
- Text is text. Headings and paragraphs are editable in place, not inside a code blob.
- CSS is enqueued, not inlined a thousand times. One stylesheet, loaded like a theme asset, so it can be overridden and cached.
- Media is in the media library. Images and video are uploaded and referenced by attachment, not hotlinked from the site you copied.
Miss (1) and you have a screenshot with extra steps. Miss (4) and your page breaks the first time the original applies hotlink protection — which is exactly the failure mode we found and fixed in our own WordPress export: an early version left 192 images pointing at the source site.
The route we recommend
1. Capture the page from the browser, not the server.
Modern themes assemble a lot of the page after load — sliders, reveal animations, lazy sections. If you export the server's HTML you get the pre-JavaScript shell. Open the page, let it settle, then capture the rendered DOM with computed styles. (CopyAnySite does this from the side panel; whole-site crawls capture every page the same way.)
2. Export as section blocks.
The extension writes Gutenberg sitegrab/section blocks — one per top-level section of the page — plus a single extracted stylesheet, and uploads every image, poster and video into the media library. In the block editor each section shows up as a block you can reorder, and the text inside stays editable.
3. Install the companion plugin on the target site.
The plugin registers the block, enqueues the extracted CSS only on pages that use it, and exposes a REST endpoint the extension posts to (wp-json/sitegrab/v1/...). With an application password you can push a page straight from the browser to the site.
4. Fix the four things that always need fixing.
- Fonts. Licensed webfonts do not travel with a licence. Identify them, then keep, license or replace them (font finder does the identifying).
- Menus. The copied navigation is markup; wire it to a WordPress menu so it stays maintainable.
- Forms. A copied form posts nowhere. Replace it with your form plugin's block.
- Anything server-rendered. Prices, listings, product grids, "recently viewed" — these were rendered from data you do not have. Replace with your own dynamic blocks.
5. Check it offline before you launch.
Open the imported page with the original domain blocked. If images or fonts vanish, something is still hotlinked.
Doing it by hand (when you have no choice)
If you cannot install a plugin on the target — a managed host, a locked-down client environment — the least-bad manual route is:
- Export the capture as a standalone HTML file.
- Move the CSS into a child theme's stylesheet (
style.cssor an enqueued file), not into the post content. - Split the body into sections and paste each into its own Group block, using Custom HTML blocks only for genuinely unusual markup.
- Upload the images through the media library and repoint the
srcattributes. - Register a page template in the child theme if the layout needs full width.
It works. It takes an afternoon per page rather than a minute, and the text is only half-editable.
Page builders: Elementor, Divi, Bricks
There is no honest, lossless converter from arbitrary HTML into another builder's proprietary format — those formats describe their widgets, and a copied page is not made of them. What works in practice:
- Import the page as blocks (or as a full-width template) and treat it as the reference.
- Rebuild only the sections that need builder-native behaviour (sliders, tabs, forms) with builder widgets.
- Keep the copied CSS scoped to a wrapper class so it cannot leak into the rest of the site.
What will never convert
- The original CMS's admin, plugins, users and settings.
- Anything behind an API — search results, carts, logged-in content, personalisation.
- Server-side redirects,
.htaccessrules, cron jobs, webhooks. - Analytics and tag-manager configuration.
A converted page is the front end. The back end you still build.
FAQ
Can I convert a website to WordPress automatically?
You can automate the front end: capture the rendered page and import it as Gutenberg blocks with its CSS and media. You cannot automate the backend — forms, carts, listings and logins have to be rebuilt with WordPress plugins or custom code.
Will the converted page look identical?
Layout, spacing, colours and images can come across pixel-faithfully, because they are captured from the rendered page. Two things routinely differ: licensed fonts you have to replace, and anything that was rendered from server-side data.
Does this work with Elementor or Divi?
The import lands as Gutenberg blocks, which those builders can host inside a template, but nothing converts arbitrary HTML into native Elementor or Divi widgets. Use the import as the layout and rebuild interactive widgets natively.
How do I keep the copied CSS from breaking my theme?
Enqueue it as a separate stylesheet loaded only on the imported pages, and scope it under a wrapper class. The companion plugin does both; if you paste CSS by hand, do the same.
Is it legal to copy a design into WordPress?
If it is your site, a client's site, or a licensed template, yes. If it is someone else's design, keep the structure but replace their text, images, logos and fonts — see is it legal to copy a website.
Try it on the page you are looking at
CopyAnySite is a Chrome extension: open any page you can reach, press capture, and take away a standalone HTML file, an editable WordPress page, or a kit a coding agent can build from. The free key needs no card.
Download CopyAnySite