It is tempting to drop an entire landing page in and press convert. For a long page, working section by section is faster overall and far easier to verify.
Why slices win
- A smaller unit is easy to eyeball. You can tell at a glance whether a hero converted correctly; you cannot tell that about forty sections at once.
- You avoid importing the site header, footer and cookie banner by accident.
- If one section converts badly, you fix that source and re-run it alone instead of redoing everything.
- Nesting stays shallower, because you are not carrying the page’s outer wrappers.
Two ways to slice
The visual picker
Load the page, then use the visual picker to hover the rendered preview and click the block you want. It grabs that element’s markup — and, importantly, brings the page’s stylesheet along with it, so a block whose styling lives in a class-based CSS file still converts with its styles intact.
The copy root
Convert the whole page once, open the Structure map, and click the target icon on the row you want. That row becomes the copy root and only its subtree is exported — the outer wrappers are dropped. You can also exclude individual rows with the cross icon.
A workflow that scales
- Convert and paste the hero first. Get it right — spacing, fonts, button hover states.
- Move down the page one section at a time, pasting each below the last.
- After every two or three sections, step through the three device views. Catching a responsive problem early is much cheaper than at the end.
- Save anything you will reuse — a feature row, a testimonial block — to the Elementor template library as you go.
Keep the sections separate
Resist merging everything into one giant container. Keeping one top-level Container per section matches how Elementor pages are normally built, makes reordering trivial, and lets you set section-level backgrounds and padding without fighting the tree.
Why the picker carries the stylesheet with it
There is a subtlety here that decides whether slicing works at all. On a page whose styling lives in class-based CSS in the document head, an element’s own markup contains almost no styling information — <section class="hero"> tells you nothing about what .hero looks like.
So when you confirm a selection, the picker does not hand back the element alone. It prepends the page’s own style blocks to the extracted markup, so the slice arrives self-contained and converts with its appearance intact. Its own highlight styles are tagged and excluded, so none of the picker’s UI leaks into your output.
This is why picking a section from a Tailwind or Bootstrap page works, when copying that section’s outerHTML out of devtools and pasting it in would give you unstyled markup. If you are extracting by hand rather than with the picker, copy the style blocks too — otherwise you are converting a skeleton.
Which slicing method for which situation
The two routes are not interchangeable, and picking the wrong one costs time:
- Use the picker when you have the whole page and want one part of it. It is visual, it handles the stylesheet problem for you, and you never load the rest of the page into the converter. Best for pulling a hero out of a competitor-style reference or a large template.
- Use the copy root when you want several parts of one page. Convert once, then re-export different subtrees without re-running the analysis each time. Best for systematically working down a page you intend to rebuild completely.
Watch the nesting as you go
Slicing has a side effect people notice late: each slice arrives carrying however many wrapper levels sat above it in the source. Paste four slices and you can end up with four sections at four different depths, which makes the finished page inconsistent to edit even though it looks fine.
The Structure map shows Max nesting depth for each conversion. Glance at it per slice and aim for the same shallow depth each time — usually by setting the copy root one or two levels lower rather than accepting the outermost wrapper. Consistency across sections matters more here than the absolute number.
A note on headers, footers and cookie banners
Whole-page conversion picks up everything in the body, which on a real page means the site header, the footer, a cookie bar and possibly a chat widget. None of that belongs in your section, and deleting it afterwards in Elementor is slower than never importing it.
This is the single strongest practical argument for slicing. It also avoids a specific unpleasant surprise: an imported fixed-position header is downgraded to absolute during conversion — deliberately, so it cannot cover your whole site — which leaves a header-shaped block floating over your section until you find and remove it.
When converting the whole page is fine
Short pages — a hero, two or three sections and a footer CTA — convert cleanly in one pass. The section-by-section approach earns its keep on long marketing pages, and on any page where the markup was not written with conversion in mind.
A reasonable rule: if you can see the whole page in three scroll-heights and it has no site chrome, convert it whole. Anything longer, or anything captured from a live site rather than authored as a standalone block, is faster in slices.