Webflow To WordPress: How To Migrate Your Website

Moving from Webflow to WordPress is a great decision if you built your website on Webflow but now want more flexibility. While Webflow is a powerful design tool, it has limitations, such as fewer plugins, higher costs, and limited control over hosting. WordPress, on the other hand, is an open-source platform that powers over 43% of websites worldwide. It gives you full control, better scalability, and access to thousands of plugins to customize your site as you wish. 

Although moving your website from Webflow to WordPress may seem complex, it’s a simple and manageable process when done step by step. This guide explains how to export your Webflow content, set up WordPress, and recreate your site’s design. After you learn how, you will have a fully functional WordPress website that offers more power, flexibility, and control.

KEY TAKEAWAYS

• Choose a good WordPress hosting provider before starting the migration.
• Install WordPress and configure its essential settings, including permalink structure.
• Choose a WordPress theme that matches your Webflow site’s design for a smoother transition.
• Export your Webflow site’s HTML, CSS, and images, but remember that CMS content like blog posts needs to be exported separately.
• Use a CSV export to move your Webflow blog posts and import them into WordPress using a plugin.
• Rebuild Webflow pages using a WordPress page builder like SeedProd.
• Upload images manually to the WordPress media library and update broken links in posts and pages.
• Optimize images for SEO by adding alt text and compressing them to improve page speed.
• Check for design consistency, ensuring fonts, colors, and layouts match your original site.
• Update the domain’s DNS settings to direct your audience to your new hosting provider.
• Test your new WordPress site on desktop and mobile before making it live.
• When you have exported Webflow to WordPress and everything looks good, launch your WordPress website and monitor its performance.

Why Export Webflow to WordPress?

If you’re using Webflow, you may have noticed some limitations that make it harder to scale your website. While Webflow is a great design tool, it may not be the best choice for long-term growth. WordPress, on the other hand, offers more flexibility, lower costs, and full control over your site. Let’s take a closer look at why moving to WordPress can be a smart decision. 

Webflow Limitations

Webflow is known for its drag-and-drop design features, but it has some drawbacks that can limit your website’s potential. One major issue is limited customization. Webflow provides design freedom but doesn’t offer the same level of control as WordPress. Webflow’s built-in features may be restrictive if you want to add complex functionality.

Another concern is higher costs. Webflow’s pricing structure is more expensive than WordPress. You pay for hosting, additional CMS features, and e-commerce tools separately. As your website grows, these costs can add up quickly. Webflow also has fewer integrations and plugins, so you may have to rely on custom code or third-party tools to expand your site’s features. 

Additionally, Webflow has limited hosting options. It primarily uses its own hosting, which means you have no control over server settings, performance optimization, or pricing. Webflow’s content management system (CMS) is quite basic for bloggers. It lacks features like advanced SEO settings, which can make it harder to optimize content efficiently. Because of these limitations, many users eventually outgrow Webflow and look for a platform that offers more freedom, better performance, and lower costs.

Advantages of WordPress 

WordPress is an open-source platform, meaning you have full control over your website’s design, functionality, and hosting. Unlike Webflow, WordPress allows you to modify the core code, giving you unlimited customization options. Whether you want to create a blog, an online store, or a business site, you can adjust everything to match your needs.

One of WordPress’s biggest strengths is its extensive range of plugins and themes. With over 70,000 free plugins and 30,000+ themes, you can easily add features like SEO tools, contact forms, membership areas, and more without writing any code. This makes WordPress a more scalable solution for any website. 

Cost is another important factor. Unlike Webflow’s monthly fees, WordPress itself is completely free. You only need to pay for hosting and a domain name, which can be found at affordable prices. Plus, many WordPress plugins and themes have free versions, allowing you to build a professional website without spending too much money. 

WordPress also has a huge global community, meaning you’ll always find tutorials, forums, and developers who can help you resolve issues and improve your website. The next section will guide you through the step-by-step Webflow to WordPress migration process –without losing any content. However, before you do that, ensure you create a backup of your Webflow site.

Step 1: Sign up for WordPress Hosting 

Before you move your website from Webflow to WordPress, you need a reliable hosting provider. Webflow includes hosting by default, but WordPress lets you choose your hosting. This gives you more control over performance, security, and pricing. Choosing the right hosting is important because it affects how fast your website loads, how secure it is, and how well it handles traffic.

There are many WordPress hosting providers, so you can choose the best affordable WordPress hosting for your website. Here’s what to look for in a good WordPress host:

• Fast & Reliable Servers: A good host should offer fast loading speeds and at least 99.9% uptime.
• One-Click WordPress Installation: Many hosting providers offer a quick WordPress setup to make the process easier.
• Strong Security Features: Look for hosts providing SSL certificates, daily backups, and malware protection.
• Scalability: If your site grows, you should be able to upgrade your hosting plan for better speed and storage.

IMPORTANT:

You’ll get all these and more features at Hosted.com.

Once you pick a hosting provider, you’ll need to choose a hosting plan. If you’re starting small, a shared hosting plan is a good option because it’s affordable. If you expect a lot of visitors, consider managed WordPress hosting for better website speed and security.

At Hosted.com, we provide multiple hosting plans that fit various website requirements. Here’s how you can sign up with us:

Go to the WordPress Hosting page. Click Buy Now on your required hosting plan.

Next, Hosted.com will ask for a domain name. Here, you have 3 options:

• Register a new domain: Use this to purchase a new domain with us.
• Transfer your domain: Choose this if you’ve already purchased a domain from a different domain registrar.
• Use your existing domain & update your nameservers: Select this if you have a custom domain linked to your Webflow site. For this tutorial example, we use this option.

After that, click Proceed to Cart.

Review your cart (and update your plan if needed). Then, click Checkout.

If you haven’t signed in, you’ll be prompted to log in to your Hosted.com account. However, if you’re new to our platform, click Create New Account, provide the required details, and complete the purchase.

Step 2: Install WordPress CMS

After signing up for a WordPress hosting account, follow these steps to set up your WordPress site: 

Navigate to Hosted Dashboard → Manage Services. From the drop-down menu, choose WordPress Hosting. Locate the domain where you want to install WordPress and click Manage next to it. This will open the domain’s dashboard. 

Under Quick Manage, click Install WordPress.

Once the installation is done, log in to WordPress by going to yourwebsite.com/wp-admin and configuring WordPress settings, including permalinks. We’ve already covered this in the following tutorial:

– How To Configure WordPress Settings After Installation

Step 3: Choose a WordPress Theme

Now that you’ve set up WordPress, the next step is to choose a theme. A WordPress theme controls how your website looks and feels. It determines the layout, colors, fonts, and overall design. Unlike Webflow, where you design everything visually, WordPress themes give you a ready-made structure to customize without coding. 

If you’re wondering how to choose the right theme, refer to the following tutorial:

– How to Choose a WordPress Theme: A Beginner’s Guide

Once you’ve chosen a theme, follow these steps to install it: 

Login to your WordPress admin dashboard. Go to Appearance → Themes in the left menu. Click Add New Theme.

Now, search for the theme name. Click Install, then Activate to apply the theme to your website. 

With your theme set up, your website is now taking shape. The next step is to import your Webflow content into WordPress to transfer your pages, posts, and images. To do that, you first need to export Webflow content.

Step 4: Export Your Webflow Website

Before moving Webflow to WordPress, you must export your content from Webflow. It lets you download your site’s code, including HTML, CSS, JavaScript, and media files. However, it does not provide a direct way to transfer your site to another platform, so you must export your website manually and import it into WordPress.

Here’s how to export your Webflow website’s code: 

Go to the Webflow dashboard and click Open site to open your website.

Then, navigate to Main Menu → Export code, or use the shortcut Shift + E. Click Prepare ZIP to generate the export file. Download the ZIP file to your computer. This ZIP file includes HTML, CSS, JavaScript, and images.

While Webflow allows you to export your website’s code, there are some restrictions: 

• Webflow’s animations and interactions may not work in WordPress and can require re-implementation. 
• Webflow does not include dynamic CMS content (like blog posts) in the exported files. These have to be exported separately via CSV.
• You cannot directly import Webflow pages into WordPress, so you must rebuild them using a WordPress theme or page builder. 

IMPORTANT:

If you are not subscribed to the Workspace plan, manually save each page. Alternatively, use the HTTrack website copier to scan your site and download all its pages.

Once your static content is exported, the next step is to transfer your blog posts from Webflow to WordPress. Webflow’s CMS manages blog posts, but unlike WordPress, it does not offer an easy way to migrate content. However, you can export your blog posts in CSV format and prepare them for import into WordPress. To do this:

Go to Webflow’s CMS panel (this section displays all the files and data stored on your Webflow server) and open your blog collection. Click Export to download your blog posts as a CSV file. Save the CSV file to your computer for the next step. 

Step 5: Recreate Webflow Pages in WordPress

Now that you’ve downloaded your Webflow content, it’s time to recreate your pages on WordPress. Since WordPress does not support the direct import of individual Webflow pages, you will need to rebuild them manually using a page builder. 

To simplify this process, consider using a drag-and-drop page builder like SeedProd. This tool allows you to design professional-looking web pages without coding. Here’s how to use it to re-build pages in WordPress:

Go to WordPress Dashboard → Plugins → Add New Plugin. Search for SeedProd. Then, click Install Now. Once the installation is finished, click Activate. 

Once activated, go to SeedProd → Landing Pages and click Add New Landing Page to get started.

After that, choose a pre-designed template from the SeedProd library. Choose a template that closely matches the design of your Webflow pages. You can customize the template later to match your brand’s look and feel. 

Enter a Page Name that reflects its purpose. Set a Page URL (also known as a slug) that matches the Webflow page’s original URL. Keeping the same URL structure helps maintain SEO rankings and avoids traffic loss.  Once done, click Save and Start Editing the Page to proceed. 

Now, you can click on any element to edit it directly. Drag and drop new elements from the left panel. Adjust the font, layouts, colors, and more. You may also upload your logo, images, and branding assets.

Step 6: Import Blog Posts into WordPress

The next step in the Webflow to WordPress migration process is to import your Webflow content. WordPress has a built-in import tool, but it only supports XML files. Since Webflow exports content as a CSV file, you’ll need a migration plugin to upload the data. 

WP All Import is one of the best migration plugins for this task, which allows you to import CSV files easily. Install and activate the WP All Import plugin to start the import process. Follow these steps:

Go to WordPress Dashboard → Plugins → Add New Plugin. Type WP All Import in the search bar. Hit Install Now, then Activate. Once activated, the plugin will be available in your WordPress dashboard.

After activating WP All Import, navigate to All Import → New Import in WordPress. Click Upload a file and choose the CSV file you exported from Webflow.

Once the upload is complete, choose the type of content to import. For this tutorial example, we import Posts. Then, click Continue to Step 2 to proceed. 

Review your import file and click on Continue to Step 3.

Next, you need to map CSV data to WordPress fields. To do that, WP All Import provides a drag-and-drop interface to map your CSV columns to WordPress post fields. For example, drag the name field from the right panel and drop it into the Post Title field. Also, drag the postbody field into the Post Content section.

If your CSV includes categories or tags, map them under Taxonomies, Categories, Tags. 

After that, expand Other Post Options to configure the Post Status (Published, Draft, or Set with XPath). Here, you can enable or disable comments and specify the post slug, post format, and post template based on your requirements.

When all fields are mapped, click Continue to Step 4.

Next, you need to define a unique identifier. Remember, WP All Import requires a unique identifier to avoid duplicates. To ensure this, click Auto-detect to generate a unique ID for each post. Later, click Continue.

Review all the settings to ensure accuracy, then click Confirm & Run Import. Wait for the process to complete. WP All Import will display a confirmation message when the import is completed.

Now, go to Posts → All Posts in your WordPress dashboard. Check if all blog posts were imported correctly. Open individual posts to confirm that the titles, content, categories, and other details are correct. 

IMPORTANT:

If your CSV file contains image URLs, WordPress does not automatically download those images. You can manually upload images to the WordPress Media Library or use a plugin to fetch and upload images automatically. We explain importing images in the next section.

Step 7: Import Images 

Once your content is transferred from Webflow to WordPress, the next step is to upload and organize your images. Webflow stores images separately, so they don’t automatically move with your blog posts or pages. You’ll need to manually import them into the WordPress Media Library and ensure they are correctly linked to your content. 

To add your Webflow images to WordPress, follow these steps: 

First, collect your images. If you exported your Webflow website, you’ll find your images in the ZIP file under Images or Assets. Then, navigate to Media → Library in the left menu.  Click Add New Media File.

Next, drag and drop all your images or click Select Files to select them from your computer.

WordPress automatically sorts images by upload date. You can also use plugins like Media Library Folders to create folders and keep your images structured. 

Since Webflow doesn’t include images in its blog post export, your imported posts may have broken image links. To fix this, do the following:

• Manually Edit Posts: Go to WordPress Dashboard → Posts → All Posts. Click Edit on your desired post and replace broken image links with the correct files from your media library. 
• Use a Plugin: Use Auto Upload Images to scan your posts and automatically fetch missing images. 
• Check Internal Links: If your images were linked to Webflow URLs, update them to your new WordPress site URL. 

Once you’ve successfully uploaded the images to WordPress, ensure you properly optimize images to improve site speed and SEO rankings. You will find some key tips below: 

– WordPress Image Optimization Techniques For Faster Loading

Now that your content and images are in place, the next step is to finalize your WordPress domain settings and launch your website.

Step 8: Update Domain Settings

Although you have successfully migrated from Webflow to WordPress, your domain may still be linked to Webflow’s nameservers. To use the same domain with your new WordPress site, you need to update the DNS settings so that it directs visitors to your new hosting provider. To do that:

Find your hosting provider’s nameservers, which typically look as follows:

ns1.yourhostingprovider.com
ns2.yourhostingprovider.com
ns3.yourhostingprovider.com 

You can find these details in your hosting account dashboard. If you’re hosting your website with Hosted.com, you will find nameservers by navigating to Manage Services → Domains and clicking Manage.

However, if your domain was registered separately from Webflow, for example with Hosted.com, follow these steps: 

1. Log in to your domain registrar’s account.
2. Locate DNS settings or Nameserver management.
3. Replace the existing Webflow nameservers with the ones from your new host.
4. Then, save the changes.

Once you update your nameservers, it may take some time (usually a few hours to 48 hours) for the changes to fully propagate worldwide.  After the process is complete, users who type your domain into their browser will be directed to your new WordPress website.

Ensure you complete this step only when your WordPress site is ready to go live.

FAQs

Other Tutorials of Interest

– How to Update WordPress: 5 Easy Ways

– How To Submit A Website To Search Engines

– How To Setup & Configure WordPress RSS Feeds

– WordPress Featured Image Size: How to Change it & Best Practices

– WordPress Permalinks Not Working: 3 Easy Ways to Fix Them