How to copy a website section into Elementor

Elementor can import a template file, which turns a copied section into a two-minute job instead of an afternoon of rebuilding. Here is how to take a section of any live page into Elementor, and what to expect when it lands.

Updated October 2026 · by the Design Toolkit team

Why pasting HTML into Elementor is not enough

Elementor has an HTML widget, so the obvious move is to copy a section's HTML from DevTools and paste it in. It gets the structure across and very little else:

• The styles stay behind. The classes point at the original site's stylesheets, and those do not come with the markup.
• Fonts and images keep their old paths. They are relative to the original site, so they break the moment the HTML moves.
• Inherited values vanish. The font, the color and the line height often come from a parent you did not copy.

What you need is the markup together with the CSS that makes it look right, packed in a form Elementor can import.

1. Pick a section, not the page

Choose a bounded piece: a hero, a feature grid, a pricing block, a footer. One section is easy to check against the original and easy to fix. A whole page in a single template is hard to do either with, so copy a long page in parts.

2. Copy it as an Elementor template

By hand this means copying the outer HTML, hunting down every CSS rule that applies to it, and rewriting the lot into one HTML widget. That is workable for a button and slow for anything built on a grid. With Design Toolkit it is one pass:

1. Select the section on the page.
2. Press O to open the side panel and find the Export card.
3. Choose the Elementor tile.
4. Check the preview at phone, tablet and desktop widths.
5. Press Download.

You get one .elementor.json file, named after the section.

3. Import it into WordPress

In the WordPress dashboard open Templates → Saved Templates, press Import Templates, choose the file and press Import Now. The template appears in the list named after the section, with “(Design Toolkit)” after it.

4. Insert it and check each width

Open a page with Elementor, click the folder icon to add a template, open the My Templates tab and press Insert on the one you imported. Then switch Elementor's responsive mode between desktop, tablet and mobile and compare each with the original, the same way you checked the preview.

What you get, and what you do not

The template holds the section's HTML and CSS inside a single HTML widget, in one section and one column. That is why it looks like the original and why it works with free Elementor. It also means it is not rebuilt out of Elementor's own widgets:

• You edit text, links and images in the widget's code, not with Elementor's controls.
• Elementor's global colors and fonts do not apply to it.
• The section's own CSS decides how it looks at each width.

That is the right trade when the copy has to look the same. If you want native widgets, use the template as a reference and rebuild it with Elementor's own elements, or hand the code to an AI and ask it to map the layout onto them.

Limits worth knowing

• Pages that rebuild themselves with JavaScript. If a script, not CSS, builds a different layout at each width, the section can come out a little different. The preview shows you.
• State at the moment you copy. An open accordion, a sticky bar mid-scroll or a popup inserted later is copied as it is when you press the button.
• Fonts. Fonts a site hosts itself are written into the file. Fonts served from a CDN stay linked, so they load from there.
• Images. Replace the original's pictures with your own before you publish.

Use what you copy well

A site's design and code belong to the people who made them. Use a copy as a reference, to learn how something was built, to rebuild your own page, or with permission. Do not put someone else's work out as yours. That holds for a screenshot as much as for code.

Common questions

Read next