By Vlad Levun, co-founder of Waves Creative · Updated October 26, 2026
In this article
You move an HTML site to Webflow by rebuilding it. Webflow has no one-click import that keeps a clean build, so you recreate the HTML structure as native Webflow elements, classes and CMS collections.
Converters and copy-paste tools exist and can speed up a first pass. Their output usually needs cleanup before a team can maintain it. Embed blocks suit small snippets, not whole pages.
This guide is for founders and marketing leads moving a static HTML and CSS site. It does not cover React or other single-page apps, WordPress migrations or online stores. Webflow renames menus and settings from time to time, so the paths below are described in general terms.
Key takeaways
Get these in place before you open the Designer:
Follow these steps in order.
Start with an inventory, not the Designer. List every page, every page template and every shared section, such as the navigation, footer and recurring CTA blocks. Note each form, each script and each third-party tool: chat widgets, booking tools, analytics, cookie banners.
Next, sort the content. Anything that repeats with the same structure, like blog posts, case studies or team profiles, becomes a CMS collection: a set of items that share the same fields and one template page. One-off pages, such as the homepage or a pricing page, stay static.
Finally, export every existing URL into a spreadsheet, with columns for the new URL and its status (kept, redirected, removed). This list becomes your redirect map in Step 6. If you skip it, your analytics will show you the missing pages after launch.
Create the project, then decide on a class naming convention before you build anything. Keep it simple and write it down: what a class is called, when to create a new one, and when to add a combo class (a second class stacked on a base class to make a variant, such as button plus is-secondary).
Next, set global typography, colors and spacing as reusable styles or variables. This works better than pasting the old CSS or inline styles. With a shared system, one change updates the whole site, and your team can edit pages later without breaking the layout. Webflow retired its legacy Editor (unavailable from August 4, 2026, fully deprecated on October 5, 2026), so client editing now runs through the Content editor role on limited or client seats (Webflow's deprecation FAQ). A clean class system keeps those edits safe.
Map the old markup to Webflow's layout elements. Wrapper divs become sections and containers. Column layouts become grid or flex layouts. Generic divs become div blocks with clear class names.
Rebuild one page completely first, usually the homepage or the most complex template. Get it right on desktop, tablet and mobile. Then reuse its patterns, such as heroes, card grids and CTA bands, on the remaining pages instead of building each page from scratch.
Use semantic structure as you go. Set the right tags on layout blocks (header, nav, main, section, footer, article) and keep one H1 per page with H2s and H3s in order. Nested, unnamed divs make a page hard to edit and style, and harder for search engines and screen readers to read.
Create one collection per content type from your audit. Add fields that match the real content: title, slug, summary, main image, rich text body, author, category and any reference fields that link items together.
Where you have a lot of content, export it to CSV and import it into the collection, then check a sample of items by hand. Map one column to one field: title to Name, URL path to Slug, date to a date field, body HTML to Rich text. Images and rich text formatting often need a second pass.
Next, build each collection template page once, bound to the CMS fields. Every item then uses the same layout.
Keep slugs identical to the old URLs where you can. Matching slugs reduce the number of redirects you need and protect existing links.
Use embed blocks and custom code settings only for what native features cannot do. Booking widgets, specific third-party forms and small scripts are reasonable candidates. Whole sections of pasted HTML are not, because your team cannot edit them visually.
Replace JS-driven animation with Webflow's native interactions where possible. You can adjust and remove native interactions more easily than a custom script nobody remembers writing.
Load third-party scripts deliberately. Add each one once, in the place it is needed (site-wide or on a single page), and remove anything the old site carried but no longer uses. Every extra script adds weight to the page (web.dev on third-party JavaScript).
Set the title tag and meta description for every static page, and bind them to CMS fields on collection templates. Add alt text to meaningful images. Enable the sitemap (Google on sitemaps) and set your canonical URL in the site's SEO settings.
Use the URL list from Step 1 to create 301 redirects from every old URL that changed to its new equivalent. A 301 redirect tells browsers and search engines a page has moved permanently (Google's redirect guide).
Then re-add analytics and your tag manager, and set up conversion events for forms and key CTA clicks. Measure from day one. Matching slugs keep the number of redirects low, and conversion events show which templates to improve first. If your forms feed HubSpot, Webflow's HubSpot app maps native form submissions without custom code.
Test on the staging domain first. Check every breakpoint, submit every form, click every link and test a sample of redirects. Run a page speed check on the heaviest templates.
When staging is clean, note your current DNS records so you can switch back, then connect your domain, update DNS and publish. Then check again on the live site: forms, tracking events, the sitemap and every redirect on your list (each old URL should return a 301 and reach the right page in one step, with no chain or 404). Submit the sitemap in Google Search Console and watch indexing over the following weeks, as Google's guide to site moves describes.
Many HTML-to-Webflow problems come from the old site's structure, not from Webflow itself.
Want a team to do this for you? Waves Creative handles brand, website and marketing for growing B2B and SaaS companies. Book a 30-min call.
No, not as a clean, editable build. Converter tools can give you a starting point, but the result usually needs cleanup of classes, layout and structure before your team can maintain it.
Yes, through embed elements and custom code settings, which work well for snippets. If you paste whole pages this way, your team loses visual editing control over that content.
You can avoid it by carrying over URLs, titles, meta descriptions and 301 redirects. No migration guarantees rankings, but a careful one protects the signals your site already has.
Rebuild when a team will edit the site after launch. Convert only for simple, short-lived pages where long-term maintenance does not matter.
Bring in a team when the move carries real risk. Typical signs: many page templates, multilingual content, a tight launch date, organic traffic you cannot afford to lose, or a design that must be matched exactly. In those cases, a missed redirect or a messy class system costs you leads and your developer's time.
We built Simca's Webflow site from a finished design. The job was to turn that design into a fast, maintainable Webflow site that the client team updates themselves.
For a broader rebuild, we built FBA's multilingual Webflow site: new positioning and copy, a redesigned site architecture and navigation, and SEO setup and conversion tracking. You can see more in our work. Our hands-on experience covers Webflow builds, from finished designs (Simca) to multilingual rebuilds (FBA); the JavaScript app note above is general advice.
Waves Creative is one option if your HTML to Webflow move needs the structure described above. We are a senior studio in Warsaw. We join your team and handle brand, website and marketing end to end, so you work with one senior team instead of separate agencies, and directly with the founders.
For a website, our work covers design, Webflow development, CMS set-up and QA, so your team can edit the result. After launch we stay on for SEO, campaigns and site improvements.
We don't guarantee rankings or specific revenue or conversion numbers. We commit to clear positioning, a deliberate CTA hierarchy and tracking, so you can measure and improve results.
How we checked this. Plans, prices and limits come from the vendors' official pages, checked on October 26, 2026: Webflow pricing, Webflow hosting, Webflow: legacy Editor FAQ, Webflow: legacy Editor deprecation, Webflow: HubSpot app, Webflow: Salesforce integration. Feature descriptions come from each vendor's documentation and our own Webflow work; features change often, so check the vendor's site before you buy. Spotted an error or an outdated price? Email hello@wavescreative.co and we will correct it.
About the author. Vlad Levun is co-founder of Waves Creative, a senior studio in Warsaw that joins growing companies' teams and handles brand, website and marketing end to end. Waves designs and builds client websites on Webflow, from design and development to CMS set-up and QA.
We review your homepage and key pages and send back a prioritised list of fixes.