Webflow to WordPress: 6 Steps to Migrate Your Site Fully

Want to migrate from Webflow to WordPress?

While Webflow has its merits, many users prefer WordPress for its versatility and cost-effectiveness. WordPress offers a wide range of customizable options through its extensive library of plugins and themes, making it suitable for everything from blogs to ecommerce sites.

Despite the stark differences in their web-building methodologies, transitioning from Webflow to WordPress is less daunting than it appears. The migration involves exporting content from Webflow, setting up a WordPress site, and importing the content, along with a few additional setup steps.

This tutorial will walk you through the migration process step by step, ensuring a smooth transition from Webflow to a fully functional WordPress website.

📚 Table of contents:

Webflow to WordPress pre-migration steps

Before you start migrating your website, there are two things you need to do:

Purchase a hosting plan for your WordPress website
Take a backup of your Webflow website

Here’s how to complete these two important steps… 💡

Purchase a hosting plan for your WordPress website 💰

You will need to select a hosting provider and purchase a hosting plan.

When choosing a hosting provider, it’s important to have clarity on one’s own needs and then look for hosting companies that can fulfill those needs. Case in point, a small portfolio website can choose shared hosting because it’s cheap, but a site drawing thousands of users needs more resources and would require dedicated, managed, or VPS hosting.

To discover some great options, check out our full roundup of the best WordPress hosting companies.

We generally recommend SiteGround or Bluehost if you’re on a tight budget or Rocket if you’re willing to spend $25+ per month.

Your web host should automatically install a free SSL certificate for you. If it doesn’t, you can purchase a certificate from them and install it on your website.

Back up your Webflow website 💾

Before you start migrating Webflow to WordPress, you’ll also want to take a backup of your site to ensure that you have a clean copy of your data.

While you’re unlikely to experience issues if you follow these steps, it’s always better to be careful. Having a backup and not needing it is a lot better than needing a backup and not having it!

Webflow automatically creates backups, but it’s best to initiate a manual backup by following these steps:

Open your Designer.
Press Command + Shift + S on Mac or Control + Shift + S on Windows.
Hit the Save button to save your backup.

After you have the backup in place, it’s time to start the process of migrating your website from Webflow to WordPress.

How to migrate from Webflow to WordPress

Step 1: Install WordPress on your hosting 🧑‍💻

In the previous section, we spoke of purchasing a hosting plan. During the purchase, you must have had to create an account with your hosting provider. Now, you need to access your hosting account to be able to install WordPress.

👉 Different hosting providers offer different methods for installing WordPress:

One-click installers: Users can easily install WordPress with a single click with the help of tools like Softaculous, Fantastico, QuickInstall, etc.
Manual installation: Users can download WordPress from its official site and manually upload it to the hosting server via FTP
Command line: Advanced users can install WordPress using command-line tools like WP-CLI
Managed WordPress hosting: Specialized hosting plans where installation of WordPress is done for you

If you’re not sure how to install WordPress on your host, you can always reach out to their support for help or read their documentation.

Usually, it’s as simple as clicking a few buttons, so don’t stress.

After you’ve installed the WordPress software, visit the login page (i.e., your-temp-domain.com/wp-login.php*) and use the username and password from the install process to log in to your site’s dashboard.

⚠️ *Note – most WordPress hosts will give your WordPress site a temporary staging URL to start, which you can use to log in and perform the migration. This is important because your actual domain name will still point to your Webflow site until you change it to point to WordPress later in this guide.

Step 2: Export content from Webflow 📤

To export content from your Webflow website, open your Webflow Designer and go to CMS Collections. It contains all your site files stored on the Webflow server.

Select the collection you want to export and then click on the Export button located at the top of the page to export that specific collection.

The collection will be downloaded to your local computer in a CSV file.

In this way, you can download most components of your Webflow website except for a few components like custom CSS, images, etc. that cannot be automatically exported.

You will need to add or upload these components manually or by using a plugin to your WordPress website.

Step 3: Import content from Webflow to WordPress 📥

To import Webflow content into WordPress, log into your WordPress dashboard using the login URL and the username and password you saved in step 1.

Next, you will need to install a migration plugin called WP All Import to import Webflow .csv files into your WordPress website.

Install the plugin into your site and an option called WP All Import will appear on your WordPress menu.

Select that and you will be taken to the plugin’s page where you need to upload the Webflow file using the Upload a file button.

Next, select the type of data you are importing from the dropdown menu under New Items.

Hit the Continue button to proceed with the upload process.

Next, use the drag-and-drop tool to match the Webflow file data with the appropriate fields of the website.

👉 Let’s say you are importing blog posts from Webflow to WordPress. You will need to map your Webflow content with the following data fields:

Title & body
Images
Custom fields
Taxonomies, categories, tags
Other post options (post status, date, comments)
Function editor

Title & body

You need to drag the title and body of the post (from the right) to the appropriate fields (on the left).

👉 There are two things worth noting here:

Whatever data you map using the drag-and-drop tool will be added to all the imported posts, and
To use the function field or to import images and custom fields from the Webflow file, you need the premium version of the WP All Import plugin. That said, the migration plugin does offer you options to add images, custom fields, and code snippets manually. But know that the same images, custom fields, or code snippets will be added to all the posts.

So when mapping data or adding data manually, we recommend that you add only the data that you want to include in all the imported posts.

Before moving on to the next step, let’s take a quick look at each data field.

Images

In this section, you can add images by inserting the URL and uploading it to your Media Library. You can choose to set the first images as Featured and add metadata like titles, captions, alt text, and description.

However, we recommend that you avoid adding images manually because there’s a plugin that’ll help you directly import images from your Webflow site to WordPress. More on this in step 4.

Custom fields

Custom fields allow you to add extra information to your posts.

Let’s say you write about an upcoming event on your WordPress website. The custom fields can be used to store event-specific information such as date, time, location, ticket price, or a link to purchase tickets.

Categories & tags

Categories are broad, hierarchical classifications used to structure content, and tags are specific, non-hierarchical classifications used to connect related content.

For instance, an article can be categorized as “news” and tagged as “football.” Or it can be categorized as “technology” and tagged as “artificial intelligence.”

Other post options

These options allow you to set post status, dates, comments, trackbacks and pingbacks, post author, slug, and choose display post templates, among other things.

After mapping and adding Webflow data in the plugin fields, it’s time to hit the Continue button located at the end of the page.

Next, you will be asked to define unique identifiers for your posts, for which you will select the Auto-Detect button and then hit the Confirm & Run Import button to finish off the import process.

After the import is complete, check whether the import was done properly.

Go to Posts → All Posts and then to Pages → All Pages to examine the blog posts and pages we just imported on our website.

Notice something off? URLs of images are showing instead of the images?

WordPress does not import images automatically, but don’t worry, you don’t need to manually upload all your images. There is a plugin for that. More on this in the next section.

Step 4: Import images into WordPress 📷

To import images into your WordPress website, you need to install and activate a plugin called Auto Upload Images.

Immediately after activation, the plugin will automatically search for image URLs on your posts and pages, download the images, and then replace the image URL with the actual images.

Step 5: Configure WordPress permalinks 🔗

Setting up permalinks is an important step to ensure proper URL structure and maintain SEO rankings.

If you decide to change the structure later, it will mess up your website and negatively affect your search engine rankings.

To set your URL structure, go to Settings → Permalinks and select the URL structure that best suits your website.

For most sites, the Post name is the ideal and recommended URL structure.

Besides setting up your permalinks, you also need to set up URL redirects.

Let’s say you had a page on your Webflow site with the URL: https://www.example.com/post/best-dog-food/
After migrating to WordPress, the equivalent page URL is: https://www.example.com/best-dog-food/

You need to redirect the Webflow page to the new WordPress URL.

Redirection can be implemented using dedicated redirection plugins (like Redirection and 301 Redirects) or SEO plugins (Yoast and RankMath).

Powerful SEO plugins like RankMath often auto-redirect pages (e.g., “post/best-dog-food/” to “best-dog-food/”) so you might not have to manually implement redirection. We recommend checking your posts and pages before installing a redirection plugin.

While you are implementing redirection, consider redirecting “404 not found” pages to your home page, blog, or custom landing page. It will ensure that visitors who encounter broken links or unavailable content are seamlessly guided to a page and encouraged to explore the website.

Step 6: Update the DNS settings ⚙️

After the migration, you need to ensure that your domain name or URL is pointing to the new hosting server and not the old Webflow server.

To point your domain name to the correct server, you need to update your DNS settings.

👉 Changing the DNS setting involves:

Finding the nameservers of your current hosting server
Modifying the nameservers on your domain registrar account
And waiting for up to 24 hours for the modification to be properly implemented

We recommend reaching out to the support team of your hosting provider and domain registrar to help update your DNS settings.

Step 7: Install WordPress themes & plugins 🖱️

In this final step, you will be installing a theme and plugins on your WordPress website.

Themes help shape the design or look of the website. So if you want to replicate the look of your previous Webflow website then search for a visually similar theme in the WordPress repository. Alternatively, you can install one of the popular WordPress themes.

Plugins help add new functionalities to your website. So for instance, if you want visitors to subscribe to your newsletter, you can install a newsletter subscription plugin.

👨‍🎓 Use the following guides to install plugins and themes:

👉 How to install WordPress themes
👉 How to install WordPress plugins

That’s it, folks! 😎 You have migrated your website from Webflow to WordPress.

Conclusion 🧐

🍎 Once you’ve purchased web hosting, the migration process involves these seven steps:

We have covered how to implement all these steps in the article and we hope that the migration went smoothly.

If you have any questions about how to migrate your website from Webflow to WordPress, leave us a comment below.

Free guide

Follow the simple steps in our 4-part mini seriesand reduce your loading times by 50-80%. 🚀

Free Access