WebsitesMadeRight

How to Migrate From Webflow to WordPress (Step by Step)

How to Migrate From Webflow to WordPress (Step by Step)


Many users now want to move away from Webflow because of its high costs and limited flexibility for website owners.

Migrating from Webflow to WordPress can seem complicated, but it’s worth it. WordPress is flexible, more affordable, and offers many customization options through plugins and themes (no coding required). WordPress also gives you complete control over your site.

Since the switch from Webflow to WordPress isn’t super straightforward, we went through the entire process to help you out. In this guide, we will help you move your site, step by step.

You’ll learn how to set up WordPress and transfer your content from Webflow. Our goal is to make the switch as easy and smooth as possible.

Here is a quick overview of the steps you’ll be following to move your site from Webflow to WordPress:

Why Migrate From Webflow to WordPress?

Many users choose Webflow for its easy-to-use design tools and simple website creation.

However, they quickly realize Webflow’s limitations. It is a closed platform with fewer customizations, limited integrations, and predatory pricing.

That’s why we recommend that users avoid Webflow and use WordPress instead.

We have used and tested all top website builders, and none comes close to WordPress. It powers more than 43% of all websites, including many big-name brands.

Here are just a few things that make WordPress a much better choice than Webflow:

Cost-Effective: Many affordable hosting options are available for WordPress. It is a free and open-source platform that allows you to control your costs.
Customization: It has excellent no-code page builders, thousands of themes (design templates), and many plugins (59,000+). Together, these tools give you unlimited customization options.
Integrations: As the most popular website builder, WordPress has integrations for most third-party tools. You’ll be able to use any marketing, eCommerce, or growth tool on your site.
Scalability: Upgrade hosting plans as your site grows and only pay for the resources you need.

Switching to WordPress gives you more control and better options. You’ll find managing your site easier and save money in the long run.

Let’s dive into the steps to make this transition smooth and successful.

Step 1: Sign Up for WordPress Hosting

To start the migration, you’ll need a WordPress hosting provider. A good hosting provider ensures your website runs smoothly and can handle traffic.

We recommend using Bluehost, an official WordPress-recommended hosting provider. Bluehost is currently offering our users a free domain name and a huge discount on web hosting.

You can start at $1.99/month, which makes it an affordable and reliable choice.

Alternatives: If you want other options, consider Hostinger or SiteGround. Both are well-regarded and offer excellent performance.

For the sake of this tutorial, we will show you screenshots of Bluehost. However, the basic process is similar for all top WordPress hosting providers.

Go to the Bluehost website and click the ‘Get Started Now’ button.

Bluehost website

You will then see the pricing page, asking you to choose a plan.

The Basic plan is suitable for most websites.

Choose a hosting plan

Click ‘Select’ to choose a plan and continue.

In the next step, Bluehost will ask you to choose your domain.

If you already have a custom domain you used for your Webflow website, you can enter it into the ‘Use a domain you own’ box.

Choose domain name

Alternatively, you can choose your free domain name here or click ‘I’ll create my domain later’ to skip this step.

Next, provide your personal information and payment details to complete the purchase.

Bluehost will now send you an email with your login details. You can use those to log in to your hosting account dashboard.

Upon first login, Bluehost will automatically install WordPress for you. Click the ‘Edit Site’ button to launch the WordPress dashboard.

Login to WordPress by click on the Edit Site button in Bluehost

Need help installing WordPress? See our complete WordPress installation tutorial for detailed step-by-step instructions.

Now that you have installed WordPress, the next step is to choose a theme (design templates) for your website.

Step 2: Choose a WordPress Theme

After installing WordPress, the next step is to choose a theme for your website. It will control the look and feel of your site.

There are thousands of paid and free WordPress themes available.

Search new WordPress themes

However, new users may feel overwhelmed by the many choices. To help you select the perfect theme, our team has compiled a list of the most popular WordPress themes.

We recommend choosing a simple layout with plenty of white space. Based on our experience building websites for our businesses, we’ve found that clean, minimal layouts look more professional and user-friendly.

Don’t overthink your choice. You can always change your WordPress theme if you find a better one.

Later in this article, we will discuss designing pages in WordPress using no-code page builders. It will give you even more control over your site’s design.

For now, let’s start exporting data from Webflow so that you can import it into your new WordPress site.

Step 3: Export Your Webflow Website

While Webflow allows you to export some of your content, you cannot export all of it.

Here is what you can export:

Site Export includes HTML, CSS, JS, and images/media (only with Workspace plans).
Export CMS components, such as blog posts.

Exporting Webflow Website

You cannot import Webflow pages directly into your WordPress website. However, you may want to save your website before moving your content to WordPress.

If you are on a Webflow Workspace plan, you can use the Code Export feature to export your website and save it to your computer.

Log in to your Webflow account and launch the Designer tool.

Launch Webflow designer

You will now enter the Webflow Designer UI.

Take your mouse to the top-right corner of the screen and click the ‘Export code’ button.

Export website code

This will open the Export Code popup.

At the bottom of the popup, you need to click on the ‘Prepare ZIP’ button to continue.

Prepare zip for download

Webflow will then prepare your files, which you can download to your computer.

Note: If you are not using the Workspace plan, you will have to manually save your pages to your computer. Alternatively, you can use the HTTrack website copier to crawl your website and download all your pages to your computer.

Step 4: Export Your Blog Posts

Webflow allows you to export CMS components like blog posts, which can be imported into WordPress.

Inside the Webflow designer, switch to the ‘CMS’ tab (located in the left toolbar) and click on ‘Blog Posts’.

Webflow export blog posts

Next, you have to click the ‘Export’ button at the top to download your blog posts in CSV format.

Step 5: Recreating Webflow Pages in WordPress

Now that you have your Webflow content stored on your computer, you can start bringing it to your new WordPress website.

While you cannot import individual pages from Webflow directly into your WordPress website, you can easily recreate them.

To do that, you will need a no-code page builder like SeedProd. It is a drag-and-drop design tool that allows you to create stunning web pages without writing any code.

First, you need to install and activate the SeedProd plugin. For details, see our tutorial on how to install a WordPress plugin.

Once you have activated the plugin, go to the SeedProd » Landing Pages in the WordPress admin area and click the ‘Add New Landing Page’ button.

Add new landing page button

Next, you’ll be asked to choose a template.

SeedProd comes with several beautiful templates. You should pick one that resembles the pages you want to recreate.

SeedProd choose template

Next, provide a name for your page and choose a URL slug.

We recommend using the same URL slug as the page you had on Webflow. This will allow you to maintain your search traffic and SEO rankings.

Page name and slug

Click ‘Save and Start Editing the Page’ to continue.

This will bring you to the SeedProd page builder interface. You can use your mouse to move anywhere on the screen, click on an item, and start editing it.

You can also add new elements from the left column by dragging and dropping them where you want to display them.

SeedProd page builder UI

SeedProd makes it very easy to design any page. You can change layouts, use custom colors, add your logo, and more.

For more details, see our tutorial on how to create a landing page in WordPress.

Want to try a different page builder? Try Thrive Architect, another excellent no-code page builder for WordPress.

Editing a page in Thrive Architect

Step 6: Import Blog Posts into WordPress

Luckily, importing blog posts from Webflow to WordPress is a little simpler.

You will need to install and activate the WP All Import plugin. After activation, go to the All Import » New Import page in the WordPress admin area.

Upload CSV file to import

Click the “Upload a file” option and select the CSV file you downloaded earlier.

The plugin will automatically detect the content type (posts) and select it for you.

Imported file

Click the ‘Continue to Step 2’ button for the next step.

The plugin will then show you a preview of the data in the file. Click ‘Continue’ to proceed to the next step.

Now, you will be asked to map fields to the WordPress post fields. For instance, you can drag the name field to the WordPress post title area.

Map fields

After matching fields to corresponding areas in WordPress, just click on the ‘Continue to Step 4’ button.

Next, you need to define a unique identifier for your posts. Use the ‘Auto-detect’ button to generate an ID. It is used internally by WordPress and will not be displayed on your website.

Auto-detect unique identifier

Finally, click “Confirm & Run Import” to complete the process.

The plugin will notify you once the import is complete.

Import complete

Step 7: Import Images

WP All Import will not automatically upload your images from Webflow to WordPress.

Your website will still display images hosted on your Webflow site, which will become an issue when your Webflow website is deleted.

Fortunately, there’s an easy way to import external images into the WordPress media library using a plugin.

First, you need to install and activate the Auto Upload Images plugin.

After activation, go to the Posts » All Posts page. Select all your blog posts and select ‘Edit’ under the ‘Bulk Actions’ dropdown menu.

Bulk update posts

Click the ‘Apply’ button to continue.

WordPress will show a Quick Update option for all posts. Just click the ‘Update’ button, and WordPress will update all your blog posts without making any changes to them.

Bulk update all posts

This will trigger the upload function, and the plugin will import any external images found in your blog posts to the media library.

For more details, see our tutorial on how to easily import external images in WordPress.

Step 8: Change Domain Name Settings

If you were using a custom domain name on your old Webflow website, then you can now point it to your new WordPress site.

To do that, you need to change your domain’s nameserver settings. DNS or domain nameserver settings point your domain name to your hosting provider.

Your WordPress hosting provider will provide you with the nameservers information you need to use. It typically looks like this:

ns1.bluehost.com
ns2. bluehost.com
ns3. bluehost.com

For more details, see our tutorial on how to change domain nameservers.

WordPress allows you to choose an SEO-friendly URL structure for your website by changing permalinks.

You need to match your WordPress permalinks to the same URL structure you had on your old Webflow website.

To do that, go to the Settings » Permalinks page in the WordPress admin area.

Choose permalinks

You will need to choose the Post name option to match your URLs with your Webflow URL structure.

Don’t forget to click the ‘Save Changes’ button to update your permalink settings.

Step 10: Install Essential WordPress Plugins

Now that you have imported your content to your website, the next step is to install some essential WordPress plugins.

Plugins are like apps for your WordPress website. Like apps on your phone, plugins add new features and functionality to your WordPress website.

The following are some of the most popular WordPress plugins that add essential features to a new WordPress website:

WPForms – Allows you to add contact forms to your WordPress website.
All in One SEO for WordPress: The most comprehensive SEO tool kit for WordPress. It will help you get more free traffic from search engines.
Duplicator: It allows you to set up automated backups for WordPress. You can also automatically upload those backups to the cloud and restore them with 1-click if needed.
MonsterInsights: It helps you easily install Google Analytics in WordPress and shows you easy-to-understand website traffic reports right inside your dashboard.
PushEngage: Want to send instant notifications to users on mobile and desktop devices? PushEngage is the best push notification service on the market and helps you bring back website visitors, increase pageviews, and boost conversions.

Need more tools and tips to grow your new WordPress website? See our full list of must-have WordPress plugins for all types of websites.

Learn WordPress (Free Resources)

WordPress is quite easy to use, but sometimes, you may need a little help navigating it.

Here are some learning resources that will help you quickly get familiar with WordPress:

WordPress Training Courses: Free WordPress video training courses designed for beginners. We recommend starting with WordPress 101, which has 33 lessons covering WordPress basics for new users.
WPBeginner on YouTube: Our YouTube channel has over 931 videos and 972,000 subscribers. It offers detailed video tutorials, tips and tricks, and practical advice on growing your business with WordPress.
WPBeginner Solution Center: Are you wondering which plugin or tool to use? Our Solution Center is a curated collection of the best WordPress tools and plugins, thoroughly tested and reviewed by our team.
WordPress Glossary: A dictionary of common WordPress terms explained for beginners. It is an ideal place for WordPress beginners to start and familiarize themselves with the WordPress lingo.

Need help with a specific WordPress topic? Simply type your question in Google and add “WPBeginner” at the end.

We have been publishing WordPress resources, tutorials, and how-to guides for the past 15+ years. There is a good chance we already have a step-by-step tutorial on that topic.

Alternative: Get Professional Help With Webflow Migration

Webflow is a closed proprietary platform, and it doesn’t make migrating your website to WordPress easy at all.

Following the steps in our tutorial above can be time-consuming and stressful for beginners. Even after following the steps, you may still not be able to get all your data transferred to WordPress.

A more straightforward solution would be to get professional WordPress help with the migration.

You can hire professional WordPress developers and discuss your requirements. Then, you can pay them by the hour to troubleshoot your migration issues.

For example, you could choose our Premium WordPress Support Services and contact our developers for on-demand migration assistance.

WPBeginner Pro Services

We also offer a quick site launch service where we design a completely custom and attractive WordPress website that fits your needs. You can then purchase a dev hours add-on, and our team can handle your Webflow migration as well.

If you have any questions about these services, then you can just chat with our support agent on our Website Design Services page.

We hope this article helped you migrate from Webflow to WordPress. You may also want to see our tutorial on how to get more traffic to your WordPress site or check out all the different ways to make money online with WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

Leave a Comment

Your email address will not be published. Required fields are marked *