Select it on the page
Open PocketUI on any website and drag over the section you want.
Elementor export · coming soon
Website to Elementor convert any HTML section into editable Elementor widgets
Select any section on any website. Paste it into Elementor, or download it as a template: editable widgets, or a pixel-exact copy.
Early supporters get 30% off their first year. No spam, ever.
Elementor demo video · coming soon
How it works
Three steps from a website to Elementor
Captured1 / 5
HTML structure
PocketUI captures the real thing
Not a screenshot: its structure, authored CSS, states and breakpoints, saved to your library.
CtrlV
Paste it into Elementor
Copy for Elementor and paste it in the editor, or download it as an Elementor template to import on any site. Editable widgets, or an exact copy in one block.
Steps 1 and 2 work today. The Elementor paste is coming soon.
Elementor
What lands in Elementor
Capture
From any live website
No Figma file in between. Select the section on the page and it heads straight for Elementor.
Section captured
What lands
Editable: real widgets, not an HTML block
Heading, Text Editor, Button, Image. Each one lands in the Structure panel: click to retype, restyle in the panels, like something you built.
Structure1 / 6
Container· Pricing
Responsive
Responsive, already set
Desktop, tablet and mobile values are filled in from the site's own CSS. Prefer it untouched? Exact copy keeps the section pixel-perfect in one block.
Library
Every capture, kept
It is also saved to your library, in a folder you name by idea, so you can find it again.
Image
Tailwind
Figma
Palette
Screenshot
Image
Tailwind
Figma
Palette
Screenshot
React
Image
Font
Aa
HTML
Image
React
Image
Font
Aa
HTML
Image
SVG
Vue
Palette
Page
Image
SVG
Vue
Palette
Page
Image
Every export
One capture, every platform
Capture a section once and send it wherever the project lives. Each export has its own page.
Convert a website to Elementor, in short
Web to Elementor means taking a section that already exists on a live website and turning it into Elementor's own widgets, without redrawing it in Figma first. PocketUI is a design inspiration tool and Chrome extension that saves any section of a live website as real code. Its Elementor export, coming soon, has two modes: Editable turns the section into native Elementor widgets inside flexbox containers, with desktop, tablet and mobile values already set; Exact copy pastes it as one pixel-exact block you edit as code. Either way you paste it into the editor instead of rebuilding it by hand.
Elementor export questions
No, a Chrome extension. You select the section on the live website and paste the result into the Elementor editor.
Yes. The export uses core widgets and flexbox containers, so Elementor Pro is never required.
Editable gives you separate Elementor widgets inside containers: click a heading and type, change colours and spacing in the panels, adjust tablet and mobile. Exact copy gives you the section as one HTML widget, pixel-perfect and edited as code. Pick Editable to keep working on it, Exact copy when it must look exactly like the original.
Only if you choose Exact copy. In Editable mode you get real widgets; the rare piece Elementor has no widget for, like a complex SVG illustration or a form, stays as a small HTML widget in its place so it still looks right.
Yes, in Editable mode. Elementor downloads each image into your Media Library when you paste, so the page no longer depends on the site you captured it from.
Copy it in PocketUI, then right-click in the Elementor editor and choose Paste. On another computer, use Elementor's Paste from other site, or import the downloaded template file.
Yes. Click Download and you get an Elementor template file (.json). In WordPress, go to Templates → Saved Templates → Import Templates, then insert it on any page. Handy for building on another site, handing a section to a client, or keeping it to reuse later. It works in both Editable and Exact copy mode.
Open PocketUI on the page, select the section you want, choose Elementor as the export, and paste it into the Elementor editor. In Editable mode it arrives as containers and widgets you can edit, not as a single HTML block.
That is what the export is for. PocketUI reads the section's real HTML and CSS and maps them to Elementor's own widgets and style controls, including the responsive values.
Yes, when the design already exists as a live website. There is no Figma file in between: the section goes from the website to Elementor. PocketUI also exports to Figma if you want a design file too.
Use it to learn from layouts and to move your own or your clients' designs between tools. Text, images, logos and brand assets on other people's sites stay their property, so replace them with your own.
Elementor export is coming soon, on the Studio plan or the WordPress pack. Figma and code export already work on every plan.
Stop recreating designs you've already seen
Join now and get 30% off your first year as an early supporter.
One email on launch day. That's it.