How I Migrate My Clients From WordPress to Webflow

This is Part 2 of our WordPress to Webflow series. Part 1 explains why businesses are switching to Webflow. This post shows exactly how I move a client's site, step by step.

To migrate a WordPress site to Webflow, map every current URL first, rebuild the structure and design system in Webflow, export WordPress content to CSV, import it into matching CMS Collections, rebuild plugin features natively, add 301 redirects for any URL that changes, and test accessibility before launch. Here is the order I follow on every client migration:

1. Run discovery: brand, design, and color contrast audits, plus a client interview.
2. Build a sitemap spreadsheet with every current URL, page component, and CMS need.
3. Wireframe the new structure in Relume.
4. Import the wireframes into Webflow with the Relume Site Builder Import app, then organize classes with Client-First.
5. Set up color and font variables before styling anything.
6. Export WordPress content to CSV with WP All Export.
7. Build matching Webflow CMS Collections and import the CSV files.
8. Clean up the wireframes, add content, and check semantics.
9. Rebuild plugin features natively, and plan 301 redirects for any URL that changes.
10. Test accessibility, connect the domain, publish, and monitor the launch.

The rest of this post walks through each step, including the parts that usually trip people up.

What I ask before a migration starts

Moving from WordPress to Webflow is a chance to rethink the whole site, not just copy it. Before I export a single line of content, I start every migration with discovery and planning. We are not just porting data. We are rebuilding on purpose.

I start by learning the client's vision, goals, and audience. Then I run a brand audit to review their visual identity, a color contrast audit to prepare for WCAG 2.2 AA, and a design audit to find layout and usability problems on the current site. I also ask:

• What do you love about your current website?
• What frustrates you the most?
• What functionality is missing?
• Which integrations have never quite worked?

These answers uncover the real reasons for the move. They tell me what the new site actually needs to solve.

Pro tip: Don't migrate for the sake of migrating. Rebuild with intention. Discovery saves hours later.

Before the build begins, I make sure we have:

• Brand, design, and color audits done
• Notes from the client interview on pain points and feature goals
• A list of desired changes for each page
• A list of outdated integrations and plugin dependencies
• Confirmed audiences and accessibility requirements

With that in hand, we can build a roadmap with confidence and avoid surprises later.

Why I start with a sitemap, not an export

Pro tip: A solid sitemap is your best defense against scope creep and missed expectations. The time you spend here pays off many times over.

I don't jump straight into exporting WordPress content. First I map out a detailed sitemap, usually while I'm writing the proposal or estimate. This sitemap becomes the foundation of the entire migration. It lists every page name and current URL, the complex components on each page, and flags for CMS collections that need to be rebuilt in Webflow. It also has a column for anything the client wants to change or add, so the new site solves the problems the old one didn't. Later we add page titles, meta descriptions, and 301 redirect details to the same spreadsheet, so everything lives in one place.

Once the sitemap is final, I move to wireframes, not content export. I use Relume's AI sitemap and wireframe builder to turn our plan into a visual layout. Then I hand-pick components from Relume's library to build the bones of the site. Relume is a paid tool, and this workflow depends on it. If you want to try it, here is our Relume referral link. Disclosure: Graceful Web Studio may receive a referral reward if you subscribe through it.

How I import Relume wireframes into Webflow

Pro tip: Start from a clean Webflow project when you import from Relume. It helps you avoid class conflicts and layout issues that creep in later.

I use the Relume Site Builder Import app inside Webflow to bring the project over. It creates the pages, sections, and copy from the sitemap, and it turns global sections like the navbar and footer into Webflow components. It can also import a Relume style guide, but only once per Webflow project, which is one more reason to start clean.

Next I tidy up the Client-First framework. I install the Finsweet Extension, which started as a Chrome extension and is now a native Webflow App, and use its class folder tools to keep Client-First naming organized. Naming matters in any Webflow project that needs to grow, and Client-First conventions keep every class clear and easy to maintain.

If you are new to Client-First, work through Finsweet's Client-First learning path. You'll thank me later.

How I set up color and font variables first

Pro tip: Build your variables before you apply any styles. It keeps the site easy to scale and keeps inclusive design in front of you from day one.

Before adding content, I set up all my global variables, starting with colors. I use the EightShapes Contrast Grid to check that every color pairing meets WCAG 2.2 AA contrast. For palette ideas, my go-to is UI Colors, a Tailwind color palette generator.

Then I move on to fonts. I usually license fonts through Adobe Fonts. To connect them, you create an Adobe Fonts API token, paste it into Webflow under Site settings, then Fonts, then Adobe fonts, and save it. Your Adobe web project then appears in that section, and you select it for the site. A site can use one Adobe Fonts kit at a time. Your client can create the token with their own Adobe account. Webflow's help center covers the site-level Adobe Fonts setup.

Getting these design tokens right early means the styles I apply later are consistent, accessible, and easy to update across the whole site.

How I export WordPress content to CSV

Once the Webflow project is structured, I turn to the WordPress content. This step needs precision.

I use the WordPress plugin WP All Export (there is also a free version on WordPress.org) to pull content out as clean CSV files. It handles blog posts, custom post types like case studies, team members, and testimonials, plus categories, tags, images, and custom fields.

Pro tip: Back up your WordPress site before you export anything. Plugin conflicts or version mismatches can introduce errors into your export files.

After the export, I open and inspect every CSV to:

• Clean up formatting
• Find missing or inconsistent fields
• Flag accessibility problems, like missing alt text or skipped heading levels

How I set up Webflow CMS Collections for the import

Pro tip: Structure your CMS for future flexibility. Build for what the site needs now, but leave room for growth, especially for categories, tags, and relationships between content.

Before importing, I build a matching Collection in Webflow for each content type. That means:

• Creating fields that map to the CSV columns (Name, Body, Image, Alt Text, Summary, and so on)
• Setting character limits, like 60 characters for SEO titles and 150 for meta descriptions
• Creating reference or multi-reference fields for tags, categories, and relationships (these get more complex and sometimes need a manual pass)

When this is done well, the CSV and the Collection match one to one, and the import goes smoothly.

How I import CSV data into the Webflow CMS

Webflow's native CSV import lets me bring content straight into the right Collection. In the CMS panel, I open the Collection, choose Import, upload the CSV, and map each column to a field. Depending on the Collection, this can take a few rounds to get exactly right.

A few things I keep in mind:

• Each CSV file can be up to 4 MB.
• Matching column names and field names map automatically, which saves time.
• Reference fields match by slug, so custom slugs need to be in the CSV.
• Image fields need a direct image URL, and imported images don't get responsive variants, so optimize them first.
• Rich text can lose unsupported elements and classes, so check formatting after import.
• Slugs and dates need to be valid Webflow formats.

After the import, I spot-check entries for formatting, missing content, and layout breakage. Once everything transferred cleanly, I move on to styling and layout testing.

The CMS import is often the most time-intensive step, and it is also where most of the SEO value is kept. Done right, your content doesn't just live in Webflow. It is structured, searchable, and accessible there. I've done this enough times to know where the friction points are, and I smooth them out in advance.

How I clean the wireframes, add content, and check semantics

Pro tip: Don't rush into styling. Structure first. Semantics always.

I treat the imported Relume wireframes as a rough canvas that needs refinement. I go through each page, delete what doesn't belong, add anything missing, and make sure the content matches the plan for the new site.

Then I lock in the semantics. I check every heading for a logical hierarchy, convert text blocks that should be paragraphs, and fix any lists that aren't real ordered or unordered lists. I also flag components that will need extra accessibility work later, like sliders, modals, and tabs.

Only after all that do I start applying styles.

Why I rebuild functionality, not just layouts

Pro tip: Don't try to copy every WordPress plugin. Use the move to simplify. Reach for native Webflow features first, then custom JavaScript or a well-supported integration where it makes sense.

WordPress plugins often add layers of functionality: forms, filters, search, dynamic widgets, you name it. I document every feature on the old site that needs to come over, then map each one to a native Webflow feature or a custom solution.

This is where Webflow shines. Instead of depending on fragile plugins, I can use semantic HTML, Client-First structure, and custom JavaScript to build accessible, maintainable features right into the site. For example, here is how we built accessible CMS filters and pagination without a plugin. These features never need a plugin subscription or an update that might break accessibility. Hallelujah!

How to keep your SEO with 301 redirects

Pro tip: Keep as many slugs the same as you can. If a URL is identical on WordPress and Webflow, it doesn't need a redirect at all.

Protecting search rankings is critical during a migration, and smart planning removes a lot of the heavy lifting. During planning, I decide which URLs can stay the same in Webflow. Keeping those slugs avoids unnecessary redirects and keeps their search value without extra work.

For every URL that must change, I build a 301 redirect plan in the sitemap spreadsheet. I compare the old WordPress paths with the new Webflow structure, then add each redirect in Webflow under Site settings, then Publishing, then 301 redirects. That way every old link and bookmark lands on the right page.

Alongside URL planning, I set up SEO for every CMS item. I either import titles and meta descriptions from the CSV or refine them by hand in Webflow. Each page gets Open Graph settings, accessible alt text, and a clean heading structure. After launch, I watch Google Search Console for crawl errors and broken links.

Proactive planning plus manual fine-tuning keeps your SEO intact through the move, and often improves it.

How we build in accessibility

Many components that come over from Relume aren't accessible out of the box. That's okay, because we have our own tested patterns for the components that need the most work:

• Dialogs
• Lightboxes
• Carousels
• Forms
• Tabs
• Accordions

We also keep ready-to-go scripts for form validation, accessible Finsweet filtering, and other complex components, and we build new ones from scratch when a project needs them. Every component is built for keyboard access, proper focus management, semantic structure, and WCAG 2.2 AA. Our Relume accessibility checklist shows what we check on every component.

Every project also gets our accessibility style baseline:

• A custom skip link
• A global focus indicator
• Reduced motion support using prefers-reduced-motion
• Consistent heading levels, with ARIA only where it's needed

To validate accessibility, we use:

• ARC Toolkit
• The WAVE browser extension
• axe DevTools
• Manual code inspection for structure and interaction

Accessibility isn't an afterthought for us. It is part of every stage of the migration. If you want to see what accessibility could mean for your revenue, try our accessibility ROI calculator.

Final testing, accessibility checks, and launch

Pro tip: Accessibility testing isn't one and done. Test at every stage, especially after you add motion, interactive elements, or third-party embeds.

Before publishing, I run a complete QA pass:

• Check layout consistency across breakpoints
• Run Lighthouse and axe DevTools checks
• Test every interactive element for accessibility
• Confirm link purpose, heading structure, and keyboard navigation

Once everything is polished, I publish the accessibility statement, connect the domain, publish the site, and monitor the launch for stability and uptime.

Migrations that make your site better

Pro tip: Every migration is a chance to improve your content, structure, and accessibility. Don't just port. Polish.

This process doesn't just move websites. It improves them. Each step is there to make the site more accessible, more consistent, and easier to use, while clearing out the technical debt that builds up in older WordPress sites.

I help businesses move their own WordPress sites, and I help other teams move their clients' sites, through consulting, hands-on implementation, or a full-service migration. If you are ready for a platform that is stable, easier to manage, and built to meet WCAG 2.2 AA, the switch is worth it.

Frequently asked questions

How long does a WordPress to Webflow migration take?

It depends on how many pages you have, how much CMS content needs to move, and how many plugin features need to be rebuilt. A small service business site with a handful of pages moves much faster than a site with hundreds of posts, custom post types, and complex integrations. The discovery and sitemap steps give us a clear scope, and your quote includes a timeline. For a starting estimate, try our Webflow project cost calculator.

Will I lose my SEO rankings when I move to Webflow?

Not if the move is planned well. The two biggest protections are URL mapping and 301 redirects. We keep every URL we can exactly the same, and we redirect every URL that changes to its closest new page, so search engines and visitors land in the right place. We also carry over titles, meta descriptions, and alt text, and we watch Google Search Console after launch to catch problems early.

Can my team edit the site after the migration?

Yes. Webflow lets your team update text, images, and CMS content like blog posts without touching the design or the code. That is one of the main reasons clients move. We hand off admin access and train your team at launch, so you know how to add posts and make updates on your own.

Do I need to rebuild every WordPress plugin in Webflow?

No. Many plugins exist to patch gaps in WordPress, like security, caching, and SEO tools, and Webflow handles those natively. For the features you do need, like forms, filters, or booking, we use native Webflow features, custom code, or a trusted integration. Moving is a good time to drop features nobody uses.

Ready to move your WordPress site to Webflow?

You don't have to figure out redirects, CSV imports, and accessibility testing on your own. Our website rebuilds and platform takeovers service handles the whole move, from the sitemap to the final keyboard test. Get a free project quote and we'll map out your migration together.

Written by Crystal Scott, founder of Graceful Web Studio. Crystal is a Certified Professional in Web Accessibility (CPWA), a Section 508 Trusted Tester, and a Certified Webflow Expert with over a decade of front-end experience.