fbpx
Blog

Webflow vs Elementor: A Hands-On Comparison (2021)

Webflow vs Elementor, featured image

Modern website building solutions have simplified the process of creating websites. With a user-friendly drag and drop page builder, you can build a professional website in minutes with no prior knowledge of coding or designing.

One online website building service that is making a lot of noise lately is Webflow. The service boasts an easy-to-use website builder, eCommerce support, and a generous collection of pre-made website designs.

However, the most popular website building solution online is still WordPress. It’s a flexible content management system that can be greatly expanded through themes and plugins such as Elementor.

Elementor is an advanced WordPress page builder plugin that has a loyal following in the WordPress community. It’s a powerful tool that gives you everything you need to build a website.

I recently published a detailed comparison of Webflow and the core version of WordPress that examined the pros and cons of each solution. Webflow’s page builder is more advanced than the default WordPress block editor, but how does Webflow stand up against a modern WordPress page builder such as Elementor?

In this article, I will compare Webflow with Elementor and show you what each offers.

What Is Webflow

Webflow is an online website building service that launched in San Francisco in 2013. To compete against established online building services such as Squarespace, Webflow developed their unique visual designer. It’s a modern solution that has many styling options and you can start your own website design from a large collection of pre-made website designs.

The attraction of Webflow is that it is an all-in-one website solution. It can save you time because it handles most website administration tasks for you, such as web hosting and website updates.

For a monthly fee, you can use Webflow to build blogs, business websites, portfolios, online shops, and more. It’s free to sign up to Webflow, and you will only be charged if you decide to publish your website online.

Webflow homepage

What Is Elementor (and WordPress)

WordPress is an open-source content management system that was released in 2003. It grew in popularity as a blogging solution, but its plugin system quickly allowed developers to expand functionality and establish WordPress as the most popular website building solution online.

The WordPress plugin Elementor was launched in 2016 and is now active on over five million websites. It’s a comprehensive design solution that transforms WordPress.

Elementor Home Page

With Elementor, you gain access to a modern frontend drag and drop page builder, an advanced templating system, and builders for popups, themes, and the eCommerce plugin WooCommerce. Over 300 official website templates are available for Elementor and there’s an active community that gives you access to more Elementor designs and functionality.

Ease of Use

The user experience of building a website with Webflow and Elementor is similar in many ways, but there is no denying that if you want to build a website using WordPress and Elementor, you need to be prepared to adopt a more hands-on approach.

First, let’s take a closer look at how easy it is to build a website with Webflow and Elementor.

Webflow

Webflow has greatly simplified the process of launching a website.

You can sign up to Webflow in seconds using your Google account or, if you prefer, enter your email, password, and name. Webflow will then cater the service to you by asking about your technical experience and the type of website you want to build.

Once signed up, simply select to create a new project.

Creating a New Project in Web Flow

Using HTML5, CSS3, and JavaScript, the Webflow Designer gives you all the tools to create a professional website. You can start with a blank canvas if you wish, but in most situations, it is better to select a pre-made website template and customize it the way you want.

This gives you a starting point for your design and it will help familiarize yourself with how the Webflow Designer works.

Select a Free Template

I’ve found the Webflow Designer to be a joy to use. If you have used page builders before, you will feel right at home. Beginners should be able to familiarize themselves with all options by simply spending time modifying a pre-made template.

Unfortunately, Webflow isn’t great for writing long articles, but I will expand upon this later.

Webflow Designer User Interface

All design and content is handled by the designer.

Everything else in Webflow takes place in the project settings area. You can manage general settings, hosting, billing, website backups, and more from here.

Webflow Project Settings

Elementor

Whilst a hosted version of WordPress is available online, to build an Elementor-powered website, you will need to do three things:

  1. Purchase a website hosting plan
  2. Install the self-hosted version of WordPress
  3. Install the Elementor WordPress plugin

To install WordPress manually, you need to download WordPress, create a database through your hosting account, and then run the famous 5-minute WordPress install. Thankfully, you do not have to install WordPress manually anymore as website hosting companies allow you to install WordPress at the click of a button.

Although you do need to spend a little time configuring a WordPress website, website maintenance has been significantly reduced over the years. Today, WordPress can automatically update your website themes and plugins, and managed WordPress hosting companies provide security and backups for you.

WordPress Discussion Settings

WordPress is perfect for publishing long-form blog posts and articles. The default editor is called the block editor. Writing in the editor is a rewarding experience as you can go full-screen and remove the options panel at the right-hand side of the page.

Writing a Blog Post in WordPress

WordPress allows you to style content in the backend via the block editor using blocks. There’s a great variety of blocks available in the editor and you can also customize your website using the WordPress theme customizer. From a design point of view, however, these features are functional but limited.

Step forward Elementor.

Elementor completely transforms WordPress. It gives you a full suite of design elements to customize your website design and content. You will appreciate how powerful the Elementor user interface is once you are familiar with it.

In contrast to the WordPress block editor, all changes take place in the frontend of your website. This allows you to see changes in real-time.

Like Webflow, many pre-made blocks and templates are available to help you get started. However, Elementor’s templating system gives you greater control over layouts.

Elementor User Interface

Ease of Use – Winner: Webflow

Once everything is set up, you’ll find Elementor is just as easy to use as Webflow, but Webflow’s hosted service is undoubtedly easier to configure and maintain than a self-hosted WordPress website.

Design Experience

Now, let’s have a look at the website templates that are provided and the design tools that are available to you.

Webflow

When you create a new project in Webflow, you can start with a blank canvas, a free website design, or a premium website design. Webflow also has a showcase section where you can clone designs from others and further designs can be found on the third-party website Flowbase.

At the time of writing, Webflow offers over 500 pre-made website templates across categories such as design, blog, eCommerce, photography, and more. The majority of designs are not included in your Webflow plan and retail at around $49 or $79 each. However, 100 or so designs are free to download and they’ve been created to the same high standard as their premium counterparts.

Unfortunately, Webflow does not allow you to switch designs as there is no theme system in place. This means that if you want to change to another website design, you need to create another website.

This means that if you have a blog with 1,000 articles, you cannot simply change your blog design. You need to create a new project and then transfer all content over. It’s completely impractical.

Restaurant Templates

Webflow’s designer wraps around your website so that you can see proposed changes in real-time. When you click on an element on the page, the right-hand panel will load additional styling options such as the layout, border, CSS, and more.

At the top of the user interface, you can preview your design with different devices, define the canvas area, undo and redo changes, export code, share your project, and publish your page. The left-hand side is where you add content to pages. You can add design elements, pages, and collections as well as access an existing library of media for symbols, images, and fonts.

Elements are available for adding sections, forms, buttons, sliders, and complete layouts — however, there’s only a limited number of elements.

Elements in WebFlow

Elementor

When Elementor is activated for a blog post or page, you will see a folder icon at the bottom of the canvas area. Clicking on that icon will load the Elementor library.

The library has a large collection of pre-made blocks and pages. Any design you save can be accessed from the My Templates page. The free version of Elementor gives you access to a variety of blocks and over 30 page templates, but if you upgrade to Elementor Pro, you unlock over 300 pre-made blocks and templates.

Unlike Webflow, you can switch between designs at any time and you can use third-party WordPress plugins such as Starter Templates to add hundreds of additional free templates.

Elementor Library Pages

Elementor places all controls at one side of the page (left by default). At the bottom of this panel, you will see icons for settings, viewing the structure and history of the page, previewing the design in different devices, and saving the design.

When you click on an element on your page, the main panel will show options to modify content, adjust colors, effects, advanced settings, and more.

With no elements selected on your page, the main panel shows all content elements. There are over 40 elements available and 50 more are added if you upgrade to Elementor Pro. Even though there is nothing you can’t create with the elements on offer, thousands of extra elements can be added to Elementor by installing one of the many Elementor add-on plugins.

Editing a Background in Elementor

Design Experience – Winner: Elementor

Beginners will appreciate the simplicity of choosing a template in Webflow and then modifying it using its powerful Designer, but you can’t switch templates later on. You’ll have to keep editing the one you started with, which is a restriction of Webflow’s templating system.

Elementor’s user interface takes a little longer to learn, but it has many more content elements and can be expanded further using WordPress plugins. Unlike Webflow, you can change your template at any time.


Content Management System (CMS)

In this section, we’ll look into how well Webflow and Elementor (WordPress) operate as a CMS.

Webflow

If you have read my Webflow vs WordPress comparison article, you will know that Webflow is not the best content management system. There are, however, some positives.

In Webflow, all content is managed through the Webflow Designer. All you have to do is click on any part of the page, be it a paragraph or a header, and start editing. When you do so, basic formatting options will appear to make the text bold or italic or convert it into a link.

In the page settings area, you can quickly jump between settings and add password protection, adjust SEO settings, and add custom code. It’s much quicker to make changes like this than in WordPress.

As discussed in my comparison of Webflow and WordPress, Webflow can be used to create online shops if you upgrade to one of the Webflow eCommerce plans. Be sure to check out that article to see how their eCommerce features compare 🙂

Home Page Settings

There are many areas where Webflow just fails miserably as a CMS.

Being able to edit pages directly works great for headlines and short captions, but not for long pieces of text. What’s more puzzling is that there is a restriction of 100 pages. Even if you purchase the most expensive plan Webflow offers, you are still limited to 100 pages.

Other content is classified by Webflow as Collections. This includes blog posts, categories, authors, and more. All of these collection items are added through a not-so-user-friendly settings area. With blog posts, for example, you cannot even format the text or easily insert links or images into your article. This is definitely a major black mark against Webflow.

Like pages, some restrictions are in place with collection items too. If you opt for the basic monthly plan, the functionality is not available at all, and if you choose the CMS plan, you are still restricted to only 2,000 items.

Adding a Blog Post in Webflow

Elementor

The Elementor WordPress plugin does not have its own content management system. Therefore, you need to create content in WordPress and then style the posts and pages using Elementor.

WordPress is a fantastic platform to publish content on. Unlike Webflow, there are no restrictions on how many posts and pages you add to your website, and with custom post types, you can expand WordPress in many weird and wonderful ways (e.g. integrate Webflow into WordPress!). This is how WordPress can power online shops, membership websites, directories, and more.

By using the main WordPress menu, you can manage your posts, pages, and custom post types, and make any changes you need.

WordPress Post List

Like Webflow, Elementor allows you to modify text directly in the canvas area. When text is selected, a formatting bar will appear with options to make text bold, underlined, and italic. This bar also lets you add a link, headers, and lists.

There is much more control here than Webflow. When text is selected, you can jump over to the main panel and insert media, drop caps, and columns and change styling settings such as colors and borders.

For long-form content, such as blog posts and in-depth articles, I recommend switching from Elementor’s text editor back to the WordPress block editor so that you can enjoy distraction-free writing in a minimalistic user interface.

Elementor Text Editor

Content Management System – Winner: Elementor (WordPress)

When it comes to adding content, the difference between Webflow and Elementor (WordPress) is night and day. Elementor is by far the better solution.

Quality of Support

Good support is something that you should always factor into your decision.

Webflow

I believe most people will be able to create a website in Webflow and have it published online within a few hours. However, if there is any particular feature you are unsure of, I recommend visiting Webflow University. Webflow has done a fantastic job building up an extensive knowledge base there that features hundreds of courses, lessons, and video tutorials. Tips are regularly shared on the Webflow Blog too.

If your website goes offline, you should check the Webflow Status Tool to see which services are operational. Should you have a specific problem, you can ask for help from fellow Webflow users through the Webflow Discussion Forum, however if the issue is important, you should open a support ticket.

Webflow advises that they do their best to respond to each request with a personalized reply within 24-48 business hours, but they also note that Webflow support is only available Monday through Friday from 6:00 am to 6:00 pm Pacific Time. This is disappointing as it means that any support tickets raised on a Friday may not be addressed until the following Tuesday.

Webflow Support Page

Elementor

One major benefit of building a website with WordPress is the community. The popularity of WordPress allows you to get help from many discussion forums and groups on social media platforms such as Facebook.

Premium WordPress support services are common too. However, for important issues, most WordPress users rely on their hosting company for help. The standard of support varies, but most hosting companies offer 24/7 ticket support and some provide telephone support as well.

If you’re looking to learn more about how the Elementor WordPress plugin works, you should visit the Elementor support area. Like Webflow, Elementor offers an extensive amount of written and video tutorials to help you understand how it works. There is also an active Elementor Facebook group with around 100,000 members.

Elementor Pro customers can get direct help through a support ticket system that is operating 24/7.

Elementor Support Options

Quality of Support – Winner: Elementor

Both Webflow and Elementor provide customers with a large number of tutorials to explain how their products work. You can expect good support from both companies. However, I think Webflow’s limited support hours is simply not good enough, especially when other hosted website building services offer 24/7 support.

Cost of Building a Website

The cost of Webflow vs Elementor will depend on many factors — let’s see them in detail.

Webflow

Whilst Webflow is transparent about how much their service costs, their pricing policy is unnecessarily complicated.

To publish a website with Webflow, you need to select an account plan and a site plan. The Starter account plan is free and allows you to have two website projects in your account. This is the plan you will be assigned when creating a free account with Webflow.

The Lite plan costs $16 per month if paid annually. This plan increases the total number of projects to 10 and lets you export code and transfer projects to others.

The Pro plan costs $35 per month if paid annually. This plan allows an unlimited number of projects and features white labeling and website password protection. Team plans are also available from $35 per team member.

Webflow Account Plans

So the cost of Webflow’s account plan will mostly depend on how many website projects you intend to create, however site plans will depend on what traffic you receive and what features you need.

If paid annually, the cost of a Webflow retails at $12 per month for the Basic plan, $16 per month for the CMS plan, and $36 per month for the Business plan. These plans allow 25,000, 100,000, and 1,000,000 monthly visits, respectively.

Be sure to note the many restrictions that these plans have. For example, the Basic plan does not feature collections, which means that you cannot publish blog posts. You will also need to upgrade to their higher-tiered Business plan to allow users to upload files in forms. As noted earlier in this article, all plans are restricted to 100 pages too.

Webflow Site Plans

If you want to add eCommerce functionality to your website, you need to select an eCommerce site plan. If you pay annually, these retail at $29 per month for the Standard plan, $74 per month for the Plus plan, and $212 for the Advanced plan.

The more expensive plans allow you to add more products to your store, remove the transaction fee of 2%, and increase the yearly sales volume limit.

Webflow eCommerce Plans

As you can see, the cost of Webflow depends on the number of projects you want to create, the traffic you expect, the features you need, whether you pay monthly or annually, and whether you want to sell on your website. For a simple website, however, it may only cost you $12 per month to use Webflow.

Elementor

If you want to use Elementor to design websites, you will need to factor in the cost of hosting a WordPress website and whether you want to upgrade to Elementor Pro.

The self-hosted version of WordPress is free to download. However, it is prudent to factor in any expected additional costs such as hosting and premium WordPress plugins you want to use on your website.

In our article on cheap WordPress hosting, we showed that hosting companies such as Hostinger are offering WordPress hosting for as little as $0.80 per month. It’s pretty amazing that you can host a WordPress website for such little money, however I would generally recommend paying a little more to go with a company that provides better reliability and support.

SiteGround’s entry-level plan only costs $6.99 per month, whilst WP Engine’s plans start from $22.50 per month, and Kinsta starts from $30 per month. Shop around to see which company suits your budget and requirements.

Kinsta Pricing

Elementor grew in popularity because the free version of their WordPress plugin had few restrictions. This core version is more than capable of building beautiful websites and you can add additional elements and functionality free of charge using third-party WordPress plugins.

The pro version of Elementor retails at $49 per year for a one-website license, $99 per year for a three-website license, and $199 per year for a 1,000-website license. Apart from the number of websites that are supported, all plans offer the same features.

Elementor Pricing Table

For around $4 per month, Elementor Pro adds 50 more elements, 300 more templates, and around a dozen full website templates. It also adds builders for your theme, forms, WooCommerce, and popups.

I believe Elementor Pro is a great value, but I would always recommend using the free version of the plugin first and then upgrading once you are sure it’s the solution for you.

Cost of Building a Website – Winner: Elementor

If we are talking about cost alone, Elementor is the better option as you can host WordPress with a reliable company such as SiteGround for only $6.99 per month. Even if you factor in the cost of buying Elementor Pro, the total yearly cost is still less than Webflow’s starter plan and it has far fewer restrictions.

Future Predictions

I have spoken about the upsides and downsides to using Webflow vs Elementor, but it is important to remember that this article is a reflection of how both solutions are at the time of writing.

The developers of Webflow and Elementor regularly fix bugs, add new features, and refine their product.

Let’s review how these products could evolve in the future.

Webflow

In 2017, Webflow announced a new community-based roadmap for future development. Rather than curating ideas from social media, support tickets, and their community forum, Webflow created a dedicated suggestion website called Webflow Wishlist.

Everyone is allowed to submit their ideas for new features and changes to this Wishlist. Each idea can be voted up or down and is discussed at length with developers and fellow Webflow users. The best ideas are then added to Webflow’s development roadmap.

At the time of writing, three new features are in beta development and close to being released and four ideas are scheduled for future development.

Notable upcoming features are the ability to sell digital items through Webflow and a desktop application to allow you to work on your Webflow site offline.

Webflow Wishlist

Elementor

The developers of Elementor take feedback on board from their large community. You can track new features that have been added to Elementor via the Elementor blog. If you wish, you can also test new features and give feedback to the Elementor team by installing the Developer Edition of Elementor.

In the near future, Elementor will be adopting a new pricing structure for Elementor Pro and introducing two higher-tiered plans for larger companies. These will retail at $499 and $999 per year, respectively.

Additionally, the Personal and Plus plans will be renamed Essential and Advanced and anyone who purchases the Expert plan will get support and updates for 25 websites instead of 1,000.

The WordPress page builder market is as competitive as ever and with Elementor increasing the cost of their higher-tiered plans, the company will have to make sure they continue to refine their plugin (especially as many Elementor Pro customers are unhappy about these price changes).

Perhaps the biggest threat to Elementor is not from other page building plugins, but from WordPress itself. Full site editing is a feature that is planned for the core version of WordPress in the near future and it may discourage many WordPress users from using third-party page builders to design their website.

Elementor New Pricing Structure

Final Thoughts

I hope you have enjoyed this comparison between Webflow and Elementor. As you have seen, both products can be used to design beautiful websites and there are pros and cons to using each solution.

If you’re looking to publish a small website or a simple online shop, Webflow is a great solution. All you have to do is select a pre-made website template, add some content using their user-friendly Designer, and then customize the design. Webflow handles the rest.

For larger websites, Webflow is too restrictive to recommend at this time. Once you have selected a website template, you can only change to another design by creating a new project. Publishing long-form content is impractical too. I hope these are issues that the company addresses over the next year.

Webflow Pros:

  • Very easy to use
  • Webflow Designer can be used to build beautiful websites in minutes
  • eCommerce functionality can also be added

Webflow Cons:

  • Websites cannot easily change the template they’re using
  • Limitation of 100 pages
  • Hard to add content such as blog posts and articles

Building a website with WordPress does require you to be more hands-on with website maintenance, but there are fewer restrictions on what you can do, more ways to add functionality, and better choices with who hosts your website and who provides support.

Elementor enhances WordPress significantly and allows you to customize every part of your website design with ease. The WordPress block editor is still advised for blog posts and long articles, but you can easily switch between both editors.

I will say, however, that in comparison to Webflow and other WordPress page builders, Elementor’s user interface takes a little longer to learn and master. It’s a powerful solution that doesn’t restrict you in any way. It just isn’t as beginner-friendly as Webflow Designer.

Elementor Pros:

  • Large collection of pre-made blocks and layouts
  • Powerful user interface with a great selection of blocks
  • Amazing third-party support

Elementor Cons:

  • Takes time to learn the user interface
  • Free version only offers a limited number of pre-made designs

As always, I encourage you all to do your own research and test Webflow and Elementor thoroughly before using them on a live website. This will allow you to make an informed decision as to which solution is best for you.

Good luck.

Kevin

Share This Article:
Facebook Twitter
Disclosure: Some of the links in this post are affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission. All opinions however are our own and we do not accept payments for positive reviews.

Leave a Reply

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

Searching for a free, professional and lightweight WordPress theme? Meet Sydney!
View Theme
NEW FREE WOOCOMMERCE THEME! INTRODUCING BOTIGA
Win a Free 1TB CDN Account from KeyCDN Free Entry