Guides / Copy a website section

Copy a section from any website into Webflow

Live Capture helps you move an old site, use a section from your own WordPress or Framer page again, or study a layout. Live Capture collects the HTML of the section and the CSS rules that style the section. These rules include rules for parent elements. Then FlowPaste converts the section to Webflow.

Add to Chrome, free →See the demo

[IN]What Live Capture collects

• The element you click and everything inside it
• Every CSS rule that matches it (incl. media queries,
  :hover, and rules like .page .card h2)
• Inherited text styles from the page
• Images as absolute URLs

[OUT]What you get in Webflow

Native Webflow elements with the class names of the page
Tablet and mobile breakpoints from the media queries of the page
Hover states
Pseudo-elements in an Embed

Steps

On the website, click the FlowPaste icon → Capture an element. To receive all of the styles, allow site access.
Move the pointer over the section. Use ↑ / ↓ to select the parent or the child. Click the section.
In the Webflow Designer, paste the section from FlowPaste → History.

Limits

Capture only sites that you own, that you have permission to use, or that you use lawfully. You are responsible for the content that you capture.
FlowPaste does not move canvas elements, video players or JavaScript widgets.
If the page uses web fonts, add the fonts to your Webflow site.

Questions

Can I migrate a WordPress site to Webflow this way?

Yes, for the design. Move the design 1 section at a time. Move the content, such as blog posts, with the Webflow CMS CSV import.

Does Live Capture copy JavaScript?

No. Live Capture copies the structure and the styles. Live Capture does not copy scripts from the source page.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →