How to switch from WordPress to Webflow?

How to switch from WordPress to Webflow?

April 19, 2022
by:
Szymon Zurek

INCREASE 
CONVERSIONS
& GET MORE 
CUSTOMERS!

Free website auditDon't have a website yet?
Other Articles:

You might be wondering why you would want to switch from WordPress to Webflow. There are a few reasons why you might want to make the switch:


  1. You don't like the website design on WordPress.
  2. You need too many plugins for basic functionality.
  3. Your website loads too slowly.
  4. You want more control over the design and development of your website.
  5. You want more reliable security and hosting.
  6. You want a modern and unique design.


If any of these reasons resonate with you, then switching from WordPress to Webflow might be the right decision for you.

One of the most common challenges people have when making the switch from WordPress to Webflow is that they don’t know what the entire process will look like. There are many technical bumps you might run into if this is your first time using Webflow. Some things we will cover are; converting files to supported formats, uploading the blog's correctly, copying your SEO settings, structuring your URLs properly and more.

It can seem like a daunting task, but with this guide, we will make it easy for you.


What is Webflow


Webflow is a platform that allows you to create beautiful and responsive websites without having to know how to code. It’s perfect for people who want more control over the design and development of their website, without having to learn how to code. Plus, with Webflow, you get access to reliable security and hosting.


How does Webflow work?

Webflow works by giving you a visual way to design and develop your website. You can drag and drop elements onto your page, and then adjust their styling, without having to write any code. Plus, Webflow takes care of all the behind-the-scenes code for you. So, you don’t have to worry!


What are the benefits of using Webflow

You end up with a website written with clean code. You make it faster and more searchable, without coding a single line.


Webflow's templates

Which are called "Starter sites," give you a great head start on your design. And, if you need more help, our team of designers and developers are always happy to lend a hand.


Webflow tutorials

Webflow also offers a wide range of tutorials, from beginner to advanced, so you can learn at your own pace. And, if you ever get stuck, our agency staff is happy to take you on :)


How do you switch your website from WordPress to Webflow

The web is a constantly changing place, and sometimes the most you can do to stay afloat is to keep up.

That's not always easy, though, especially if you have no technical background. Webflow offers an alternative that makes it easier for people who are looking for more customization than WordPress provides but don't want to learn to code.

Webflow also has some other advantages:

  • You can see what your changes will look like before you publish them, making it easier to experiment with design.
  • Webflow generates clean, standards-compliant code that is easy for search engines to read.
  • You can host your site on Webflow, or export the code to host elsewhere.

If you're interested in making the switch from WordPress to Webflow, here's a step-by-step guide:


Creating a Webflow Account

First, you need to create a Webflow account. This is where your website will be built. If you're building your website with an agency, they will be able to do this step for you.


Exporting content from WordPress

Then, you need to export your content from WordPress. You can do this by going to Tools > Export in your WordPress Dashboard. You can also download all images separately in the Media if needed.


Import your content to Webflow

Next, you need to import your content into Webflow. You can upload all assets (Images and graphics) into the "Assets" panel.

screenshot of webflow assets


File formats in Webflow

An important thing to note, is that Webflow does not support the WEBP format. If WordPress converted your images into WEBP, you will need to convert them into JPG as that is the best format for Webflow, besides the vector SVG format. There are many ways to do this, but we like using the EzGif converter.


Optimising your images

On WordPress you might have had optimisation of images automatically through a paid plugin. While Webflow offers this to a certain extent, we recommend you optimise your images by hand. No Webflow or WordPress tool will do it as well as the manual process can.

Using Adobe Photoshop: You can export images for "Web Legacy". This gets rid of most of the image's weight. You can choose to convert into "JPG High" to ensure you don't lose quality. If you have hundreds of images, you can record this action, and replay it on every image, making the job 20 times faster.

Using TinyPNG: Once you go through Photoshop, we recommend taking it further through Tiny PNG. It compresses both PNG and JPG images. You can compress 20 images at once, so when you're done with a set, refresh the page or go into incognito and do the next batch.

screenshot of image optimisation

How much weight reduction can you see using this process?

Depends on where you've started. Typically, we see an 80% decrease in weight/size, without the quality loss. If you have 10 images on a page, that are 1mb each, your page will be VERY HEAVY to load. After this reduction, your website should weigh about 2mb, which is a major improvement.

Importing your blogs

Once you have imported your imges,  you will need to set up your blog. In Webflow, this is done by creating a "Collection" which is essentially a database of all your blog posts and other dynamic systems. You can then create a "Dynamic Page" which will be used to display your blog posts.  

screenshot of the webflow CMS


Creating your pages

You can now start creating the pages for your website. In Webflow, you will create a "Page" for each page on your website. You can then add content to these pages, and style them. However, we won't go into this process, because learning the building platform is a whole topic on its own. And if you're not familiar with general web building practice, this is a whole field that should be left to someone with website building experience.


Copying over SEO settings

You might have spent a lot of time setting up your SEO on WordPress. Good news is, you can transfer those settings over to Webflow without a problem. WordPress doesn't really work without plugins, so we bet you're running Yoast SEO for your SEO, or something similar.

You will need to go to each page, and copy the Title and Meta Description into each Webflow Page settings.


Getting Schema on Webflow

If you're using Schema on WordPress, you will need to recreate Schema in Webflow. Chances are, that you're using another heavy plugin for WordPress to use Schema. Good news is, Webflow is clean without the junk, so you need to use code here. We use the Schema Markup Generator to get our Schema code easily. You can paste this code into the Head of each page and customize your site.

If you are using Schema for your blog pages, you can use the same generator, however, replace all information with dynamic fields from the blog CMS.

Screenshot of schema code on Webflow

This applies for all collections, whether its products or team members, you can plug in your schema with dynamic fields alike.


Using same URL structure

This might be the most important thing when migrating to Webflow. If you have any ranking on Google with your WordPress site, if you change page URLs, you will lose 80% or more of your organic visitors, even with proper redirects.

Make sure that all pages have the exact same URLs. You can configure this in each page setting in the slug:

screenshot of CMS URL structure in Webflow

The same goes for all blogs. You will need to go to the collection you created, and edit the slug there to make sure all "blogs" are under the same parent URL as you had on WordPress. If you had your blog on /blog/example-post, then you need to make sure the CMS collection slug is set to /blog.

screenshot of webflow needing redirects

You might get a yellow message like this above. If you set up your collection already without changing the slug prior, this will pop up. If you haven't published your website yet, you don't have to worry about this.

Then, for each blog that you copied, make sure you have the same URL there too.


Setting up analytics

You will need to plug in analytics manually in the website settings. You can do this by pasting the code Google Analytics gives you into the head. This goes for any other analytics, like GTAG or Facebook Pixel. Paste it all into the header in website settings.


Checking for 301 pages

You need to be 100% certain that all URLs were set up correctly or you will lose your ranking. When you publish your website and re-index it in the Google Search Console, you need to check for any errors ASAP.

If there are any 301 errors, or mobile usability issues, you need to fix them imedietly before this is crawled and put down in rankings on Google.


Publishing your website

Once you're happy with your website and all is in place, you can go ahead and publish it. Webflow offers different hosting plans, with the most popular being the "CMS" plan, which costs $16/month and gives you access to a content management system, where you can easily add and edit blogs and other collections. This is perfect for most small businesses that just need a simple website.


Pros and Cons of switching from WordPress to Webflow


Pros:

  • Cleaner and faster. Webflow pages load up much quicker than WordPress.
  • No need to install plugins. You can plug in features from the settings panel, such as custom analytics and other functions through code.
  • Webflow is a whole lot cleaner with no clutter
  • Sky is the limit with design. If you want a website at an "Apple" level, you can build that in Webflow.
  • Advanced interactions. You can create amazing scroll and other interaction animations with Lottie and 3D integration.
  • Quick and easy for A/B split testing for landing pages.

Cons:

  • The hosting is more expensive.
  • The ecommerce hosting is MUCH more expensive.
  • Your organic reach might get hit in the first 1-2 months (about 10% less visitors). However, within 3 months this usually increases 20% over what WordPress had.
  • Logins for users aren't a built in feature. They need to be developed with a 3rd party tool called Memberstack.io for any user and membership features.


Conclusion - is it worth switching to Webflow?

Making the change can be a big undertaking, but it can also be very rewarding with its long term benefits to organic reach, possibility of A/B testing, increased speeds, better conversion rates, and a unique brand experience.

If you're considering making the switch from WordPress to Webflow, we hope this article has helped you understand the process and what to expect.

We've migrated tens if not hundereds of websites to Webflow, so if you need assistance, or a 'done for you' service, reach out!


FAQs

How much does it cost to switch from WordPress to Webflow?

The cost of switching from WordPress to Webflow will depend on the hosting plan you choose. The most popular plan, the CMS plan, costs $16/month.

If you get a proffesional agency to create the website for you, with a new design and strategy, it can cost from $2000 to $5000. If you are just looking to 'copy paste' the design and structure to WordPress, this can cost about $500 - $2000.


How long does it take to switch from WordPress to Webflow?

The amount of time it will take to switch from WordPress to Webflow will depend on the size and complexity of your website. A simple website can usually be migrated in a few days, while a more complex website could take a few weeks.

If you are re-designing and creating a new strategy, this can take up to 2 months.


What are the benefits of switching from WordPress to Webflow?

Some of the benefits of switching from WordPress to Webflow include a cleaner and faster website, with no need to install plugins. Webflow also gives you extra customisability with the design, so you can really have a unique website.

This also means A/B testing is much easier, as you can tweak small details to see how it impacts conversion rates.


How long does it take for my website to show up in Google?

This will depend on how well you have set everything up. If you have followed all the steps correctly, your website should show up in Google in the same positions straight away.

New Website ranking:

However, if you are making the website from scratch with new URL structures, or a new domain, it can take from a few weeks to 3 months for you to show up.

Showing on the top of the first page can take from 3 months to a few years depending on your ongoing SEO efforts, backlinks you get, content you produce, and niche/competition.

Company name ranking:

If you have a unique name, and someone searches for your company, you will be at the top relatively quickly. However, if you have something a bit more generic, like "Johnny's Plumbing", you will be competing for that position with 1000s of other Johnnys and might not ever be at the top.

Location ranking:

If you are a "Johnny's Plumbing" company in Brisbane, and someone searches for "Johnny's Plumbing Brisbane" you have higher chances of being in the first position, provided there's no other Johnny doing what you're doing in your city.


Does Webflow support ecommerce?

Yes, Webflow does support ecommerce. However, the ecommerce hosting plans are much more expensive than the regular CMS plans.