This is likely the most impactful part of the comparison between Webflow and Elementor. What can you or your designer build? Are there limitations? What happens with your website once it's done?

In this comparison, I will share what I have learned over the past 15 years of designing websites so you, the website owner, can move past the marketing noise and compare the two on the key areas that matter to you.

We're also focusing on clients that need custom websites that fit their brand.

Building the Website

Building in Webflow

Webflow is meant for professional and experienced designers, which raises the entry barrier for designers. This means that the resulting website will usually be better, not necessarily because of the tool but because of the users (designers) it managed to attract.

Webflow also works closer to the metal (which in Apple speak means that it has fewer complexities), so it outputs clean code, and provides the developer a visual editor, allowing them to execute faster.

The first thing I noticed when picking up Webflow after 10 years of experience with Wordpress and various Wordpress page builders is that designing is completely different and humbling. The stuff I used to pull off in Elementor no longer worked here.

When working in Webflow, the designer must be more purposeful about their design, why, and how. This forced me to completely and fundamentally reevaluate my workflow to design proper business websites. You can't just jump into Webflow and wing it without properly planning what you want to build.  

After a while, I also noticed that in Webflow, I spend a lot less time troubleshooting and more time building websites. There were no plugin conflicts or errors to mitigate; I only needed to focus on the website, structure, and design. This frees up a lot of time, which means that I can build more complex layouts and focus more on the details in the same amount of time.  

Webflow websites are more expensive to design because you will work with more experienced designers. However, the results you can accomplish can also be superior.

Some of the nerdy things I like about Webflow

• Container-Based System: Webflow organizes content using a container-based system. Think of containers as boxes that hold different parts of your website. This method keeps everything neat and helps manage the layout more efficiently.
• Class-Based Design: Styles in Webflow are applied through classes, which means you can create a style once and use it across multiple elements. It's like having a master template for your designs, making updates and consistency a breeze.
• Closer to Metal: Webflow generates very little extra code, which means your website will be fast and clean. This "closer to metal" approach gives you more control over your site's performance and appearance.
• Performance: Websites built with Webflow are typically very performant due to efficient code and built-in optimization tools. Faster sites mean happier visitors and better SEO rankings.
• Static vs. Dynamic Content: Webflow supports static and dynamic pages, giving you flexibility in how you display information. Static pages are great for content that doesn’t change often, while dynamic content is perfect for blogs or product listings.
• Variables: You can define variables for colours, units, and fonts, which helps maintain consistency throughout your site. You set your brand colours or font styles once and use them everywhere without manually updating each element.

Building in Elementor

I can confidently say that 9 out of 10 websites that I encounter or am asked to work on are built using Wordpress and Elementor. It's one of the most popular page builders running on the most popular CMS on Earth.

I started and grew my career using Elementor. While it may seem that I hate Elementor, I can assure you that's not the case. Elementor has one thing going for it, and that is speed. If you need a website built fast, Elementor is the way to do it.

Simple example: We were running a huge campaign for a client, and I noticed their website wasn't properly optimized or conveying the message clearly. So they asked me to show them a mockup of what I proposed. I felt more comfortable building it over one weekend and just showing it to them. I could do that, and the client immediately adopted it, which was a huge contribution to their campaign's success.

However, one major downside to Elementor is that it runs on Wordpress, is considered third-party, and often has issues. My favourite one is when I try to set up a simple animation only to find out that it's broken in Elementor and to see that it is actually an Elementor bug that has been open for over 10 months. To be fair, Webflow has its fair share of bugs, too, but over time, Elementor has been way more disruptive with its bugs than Webflow.

That being said, Elementor is much more accessible to beginners, so the market for Elementor Designers is far larger. So, if cost is a concern, you can easily find an Elementor-based designer to help you. However, the quality of your website may be lower.

Some of the nerdy things I like about Elementor

• Container-Based System: Elementor uses flexbox and grid systems for layout control, making it flexible and user-friendly.
• Flexible Element Styling: Each section and element can be styled individually without a class-based system. This is great for making unique sections but can lead to inconsistent designs if not carefully managed.
• Variables: Supports variables for colours and fonts, helping you maintain a consistent design. This feature simplifies your workflow by allowing you to set global styles that apply site-wide.

Both platforms will allow you to build responsive websites and a strong online presence. Depending on the requirements and what you want to achieve, both platforms will allow you to have stunning websites.

Changing Content on your website

One of the number one requests I always got from clients in the past was to make minor adjustments to their website. And I would get these calls even though they had full admin access. The problem is that everyone is overwhelmed with what it takes to just get to the editing interface and then all the options. It can be a bit of a mess. Let's compare the two platforms:

Changing Content on Webflow

Webflow really does things right when it comes to editing. They have a site editor that is easy to access and offers inline editing. When I design the website, I can restrict the client from editing certain areas to prevent them from accidentally messing things up. But I can easily allow them to replace images or change text on their own without them having to jump through hoops.
Here's what you need to do to edit your Webflow website:

1. Log into webflow.com (one account will have all your sites)

2. Select the site you want to edit and click on the three dots, then click on editor.
   

2. From here, you can easily hover over any element to change text or images, then hit publish.
   

2. To top things off, Webflow offers a full suite of entertaining tutorials, which you don't need to check out. They will teach anybody how to edit their site. The 17-minute course is called Client's Guide to the Editor and I send this to all my clients when I hand off the website.

Changing Content in Elementor

With Elementor, you actually get two page builders, the default Wordpress builder and Elementor which sits parallel to it. A page can be designed either in the default Wordpress page builder or in Elementor. Sounds confusing? Hang on, it gets better:

1. Log in to your website by visiting yourdomain.com/wp-login
2. You will be taken to the Admin dashboard. On the top right click on your Website Name to view it on the front end. You should now see the admin bar.

1. You will notice two buttons: Edit page and Edit with Elementor.
2. Click on edit with elementor, otherwise you will end up reverting the page to the Wordpress default editor and you will end up having to wake up your developer to help you fix it.
3. From there you will see this drag-and-drop interface:
   

1. 
   You need to select each component and edit the text in the text field that shows up on the left. Otherwise when you paste in new content you will end up pasting in unwanted markup which may have unintended results.

Adding content to your website

So, what if you need to add another sales page or another team member to your website? How easy is it for you to accomplish this while remaining on brand?

Adding Pages on Webflow

Webflow recently released components, component slots and templates, which means that you essentially have several building blocks, such as a hero section, content sections, FAQ sections, etc., which you can drag and drop onto a new page, which comes standard with your header and footer already applied. From there you can just drag and drop those building blocks in whatever order you want.

Those blocks are custom-built for you, and you only have the option to change the elements that need changing, keeping everything else on brand and on point.

Adding Pages on Elementor

You can easily step into Wordpress to add a new page and then edit that page with elementor to get started. From there, you have access to many components. But, they will not have your website's styling applied.

Elementor has a neat AI feature that will help you generate new sections, such as new hero sections, content sections, pricing sections, etc., but more often than not, the designs it comes up with won't be on brand or follow the website's style.

Elementor also gives you access to a modest gallery of pre-designed templates to help you get started, or you can tap into a marketplace such as Envato Elements. But, again those templates will not be on brand and will require further customization to get them to fit your look and feel.

What usually happens is that the website will end up looking disjointed and ultimately unprofessional.

Initially, setting things up properly in Webflow takes a little longer. However, for an owner or someone who doesn't want to learn Elementor or Webflow design to create a new page, Webflow offers an easier and more guarded way of adding new pages without breaking the flow of your website.

Integration & Customization

Webflow Designer

• Built-in CMS: Webflow Designer comes with a built-in content management system (CMS). This allows you to create dynamic and interactive websites without the need for external plugins or additional coding.
• Custom Code: Webflow Designer gives you the ability to add custom code to your website, making it flexible for developers who want to create more advanced functionalities.
• Webflow Hosting: With Webflow, you have the option to host your website on their platform. This saves you the hassle of finding a separate hosting provider and ensures a seamless experience.

Elementor on WordPress

• WordPress Ecosystem: Elementor is built for WordPress, which means it leverages the vast ecosystem of plugins and themes available for the platform. This gives you access to endless customization options and the freedom to choose from a wide range of design templates.
• Third-Party Integrations: Elementor integrates with popular third-party tools and services, allowing you to add functionalities like e-commerce, email marketing, and analytics to your website.

Pricing

Webflow Pricing

Webflow offers various pricing plans, including a free plan for beginners or those who want to test the platform's capabilities. The paid plans start at $16 per month for basic features and go up to $212 monthly for very advanced features and customizations. Most startups will begin on the $16/mo plan.

Elementor Pricing

Realistically, if you need your website to have a header, a footer, and some dynamic content, you will need Elementor Pro. Pricing for that starts at $99/y for a 3-site license. If you want a single-site license, you're out of luck since the single-site license is crippled, inconveniently leaving out some of the most useful components.

Conclusion

Both Webflow and Elementor on WordPress are powerful page builders with their own unique features and benefits. It ultimately comes down to your specific needs and preferences.

Webflow provides a comprehensive and flexible platform for web design, with built-in CMS and advanced customization options. It's a great choice for designers and developers who prefer a self-contained solution.

On the other hand, Elementor on WordPress offers a user-friendly interface, a vast community, and seamless integration with the WordPress ecosystem. It's an excellent option for beginners and those who want access to a wide range of themes and plugins.

‍