Export to Webflow

Pick a section on any website and paste it onto the Webflow Designer canvas as native elements with their own classes, and tablet and phone styles already set.

Where to click ToolbarExportWebflowCopy for Webflow
Pick the section, wait for the elements, Copy for Webflow.

Steps

  1. 1

    Click Export in the toolbar, then Webflow.

  2. 2

    Hover the section you want and click it.

  3. 3

    Wait a moment: the file row reads Building elements…, then how many elements and classes it made.

  4. 4

    Click Copy for Webflow.

  5. 5

    Open your page in the Webflow Designer.

  6. 6

    Select where it should go (the Body, or a section) in the Navigator or on the canvas, and press Ctrl+V (⌘V on a Mac).

What you get

  • Native Webflow elements: Div Block, Heading, Paragraph, Link, Button, Image and List.
  • One class per look, shared by elements that look the same, editable in the Style panel.
  • Styles for the Tablet, Mobile landscape and Mobile portrait breakpoints where the original changes, and Hover states.

Good to know

  • Variables: Webflow does not accept variables in a paste, so colours and sizes arrive as plain values. Link them to your variables in the Style panel afterwards.
  • Fonts: if the original uses a font your project does not have, add it in Site settings → Fonts, or Webflow shows a fallback.
  • Images still load from the original site. Replace them from the Assets panel to host them in Webflow.
  • Icons, forms, tables, video: kept as Code Embed elements so they still look right. Their styles show on the published site and in Preview.

Tips

  • Class names start with the section name and a short code (like hero-1a2b-heading), so they never merge into, or get renamed against, your own classes.
  • Export to the same place every day? Right-click its petal in the Export fan and choose Pin to front. It then sits in the toolbar row, one click away.