Picking a WordPress page builder will probably be one of the major decisions you’ll have to make early on in the WordPress development project. The market offers numerous options — each with its functional differences, advantages, and downsides. Meanwhile, the choice of a WordPress builder impacts the project in several aspects, including development time, design complexity, on-page speed, and costs.
In this article, we’ll compare three WordPress page builders that our clients request most often: Elementor vs. WPBakery vs. ACF (Advanced Custom Fields). To give you practical know-how instead of bare theory, we built the same landing page using these three builders. We’ll look at how effective each of them is at achieving programming tasks, how user-friendly they are for non-programmers, and, ultimately, which one helped us create the page faster.
What is a WordPress page builder, and why do you need it?
WordPress page builders are plugins that complement the WordPress editor interface with new modules. They make it easier to customize layouts, add page elements, and create custom templates. The main goal of all WordPress builders is to speed up the WordPress website design process while minimizing or eliminating the need for hand-coding.
Most WordPress page builders enhance a standard editor by providing libraries of pre-designed elements, templates, and layouts. Also, many of them offer powerful drag-and-drop capabilities for designing different areas of a website (text, imagery, animations, interactive buttons, and others).
That said, not all WordPress page builders are the same: they can be split into block-based builders and custom field creators.
Block-based builder
Block-based builders provide many pre-built layouts and elements to create pages easily. Users can add, arrange, and modify these modules using a visual drag-and-drop interface. Block-based builders are popular mainly because they allow users to design a website without hand-coding. Elementor, WPBakery, and Divi Page Builder are probably the best-known examples.
Custom field creators
A custom field is metadata that stores information describing the page's content. As an example, a standard blog post usually includes metadata about its title, author, and publication time.
Custom field creators let you introduce new metadata to your web pages and posts. For instance, a movie review website owner can add fields for the genre, score, age rating, and synopsis for its posts. They can also add filtering features to let users sort movies based on different parameters.
After you create fields for specific types of posts and pages, the builder will automatically apply the given metadata. You won’t have to do it manually for every page.
Unlike block-based builders that are mostly no-code, custom field creators require programming skills and expertise in editing WordPress theme files. ACF, Meta Box, and Custom Field Suite are the most common custom field creators.
How to decide what kind of builder plugin you need? In short, it comes down to the project’s requirements. But let’s dive a little deeper.
How we determined the best page builder for a WordPress project
As practice shows, clients often choose builders based on personal preferences (e.g., experience with a certain builder in the past) or the developer’s expertise. However, it isn’t the best approach, as you don’t consider how a particular builder will help you solve specific tasks within a project.
Ideally, WordPress page builders should be picked based on the project’s specifics: the website's goal, technical specifications, budget, and time requirements. The reason is simple: the choice of a builder can significantly impact the design process and results.
To prove it, our developers recreated one of the pages on an existing site for Lumega Group using three different WordPress builders: Elementor, WPBakery, and ACF. Lumega Group is one of Scandinavia’s biggest lighting manufacturers. The company offers a wide range of indoor and outdoor LED products for the residential sector, construction industry, and government facilities.
Lumega Group’s website contains many product types with unique characteristics. As the site has various sections, interactive elements, and quite a few data fields, it seemed like a perfect option for our experiment. Here’s what came out of it:
Let’s look at the pros and cons we identified when using each page builder for WordPress to build this page.
Elementor
Elementor is a versatile block-based website builder with a drag-and-drop visual editor. According to W3Techs research, it’s the second most popular plugin used in 18.1% of WordPress websites in 2022.
With Elementor, users can create designs using a vast library of customizable elements and modify on-page content without hand-coding. Its interface has three core parts: a section with building blocks you can apply to the page, a preview part to observe how changes impact the design, and a quick editing panel.
Elementor advantages:
- Intuitive editor. Users can adjust an element's position, spacing, padding, and margins. Elementor also allows you to customize your design with typography settings, animations, gradient background images, shape dividers, and other visual elements. With this builder, it’s even possible to customize the admin panel interface and the preview design.
- Mobile device optimization. Switching between desktop, tablet, and mobile editing modes is done in a few clicks without interrupting editing. The builder allows you to adjust or hide different elements for specific device types.
- An extensive library of plugins and widgets. Elementor offers over 400 plugins, widgets, and templates to enhance your WordPress functionality. It also comes with ready-made themes for e-commerce, blogs, and other website types.
- Custom theme builder. Elementor lets you create custom theme layouts for page types and single post pages. Agencies and brands can reuse templates to maintain the same style across websites.
- Advanced integrations. The developer API lets users extend the Elementor’s capabilities and integrate a website into other marketing platforms or content management systems.
- Improved role-based management. With Elementor, you can create custom user roles and capabilities. It improves standard role-based access and enhances the platform’s safety.
- Excellent support. This page builder has an actively growing community and responsive customer support. You can find answers on the official website’s FAQ, forum, or social network, or use a live chat to troubleshoot your issues quickly.
Elementor disadvantages:
- Page building limitations. Elementor’s drag-and-drop functionality restricts your stylization opportunities and makes it harder to create pixel-perfect websites.
- Requires manual coding for complex functionality. You have to add shortcodes to WordPress for pages with complex functionality. Some features are impossible to integrate without some degree of CSS, HTML, and PHP coding.
- Technical problems. Elementor contains some bugs and performance issues. Users encountered several difficulties with motion effects, spacing, and third-party plugins.
- Low page speed. External scripts, third-party integrations, and too many elements may affect a website’s performance. That’s why WordPress websites built with Elementor often require additional PageSpeed optimization efforts to accelerate loading speed and improve search engine positioning.
- Advanced features behind a paywall. The free version offers limited design settings and possibilities. You need to upgrade to a paid version to access some plugins and widgets.
Elementor pricing
Elementor’s basic plan is available as a free plugin with limited functionality. You can get an Essential Plan at $49 per year to access premium widgets, templates, and website kits for a single website. It also offers premium versions for owners of multiple sites, professional agencies, and larger enterprises.
WPBakery
WPBakery (formerly Visual Composer) is a user-friendly block-based page builder for WordPress. It’s the third most popular plugin (right after Elementor), with a 13.9% share of WordPress-powered websites.
This builder allows users to design a website using over 50 content elements, dozens of templates, and hundreds of third-party integrations. The interface is divided into frontend and backend editors. You can modify the pages visually in the frontend builder, while the backend panel lets you adjust page settings, edit metadata, and build custom blocks.
WPBakery advantages:
- Beginner-friendly builder. The builder has a straightforward interface and numerous ready-made templates. Like Elementor, you can design your websites by dragging and dropping elements on the page in the frontend editor.
- Variety of pre-designed blocks. WPBakery supports many plugins and modules with ready-made content elements and templates to simplify the website design process.
- Block creation. It’s possible to create custom elements for your website. You just have to extend the WPBakery shortcode class or create new shortcodes.
- Adjustable user interface. With WPBakery, users can manually tweak elements, width, and offset for specific device types. Plus, it's possible to preview how web pages will look on different devices without leaving the editor.
- Bootstrap CSS-based. WPBakery is based on Bootstrap CSS, which allows users to add and edit CSS rules to blocks. This lets you set values and mass edit specific content elements, page types, and posts.
- Custom styles. The admin dashboard in WPBakery helps you create styles, grid item templates, blocks, row parameters, and column settings. Users can adjust the width and gaps for better control over the final look.
WPBakery disadvantages:
- Limited functionality. WPBakery isn't as advanced in terms of functionality as Elementor. There is also less automation, and users need to save the page changes and enter image size manually.
- Paid only. This builder doesn't have a free version or risk-free trial, and the basic version is more expensive than Elementor's alternative.
- Design constraints. Designing your website down to the tiniest pixel is nearly impossible because the pages are divided into columns. You can work around this issue by creating a single wide column in the middle with two smaller ones on the sides. However, this may cause optimization problems for smaller devices.
- Low PageSpeed. WPBakery adds a lot of scripts, styles, and shortcodes as you design the website. The code can get too large, slowing down your page load and search engine optimization.
- Hard to customize elements. Although WPBakery lets you build your own custom elements, the process is still more complicated than in custom-field creators like ACF.
WPBakery pricing
The most affordable WPBakery package starts at a one-time payment of $56 for one website. You can also opt for a $299 version that works for a single SaaS platform and offers advanced theme integrations.
Advanced Custom Fields
ACF is an advanced WordPress builder that allows users to create custom fields. We mainly use ACF with the Gutenberg block editor and Flexible Content.
Gutenberg is WordPress's standard modular block editor. It lets you create each element (from inline text editing to animation crafting) and then add and arrange them to the page. You can also enhance your website with customizable widgets. The ACF and Gutenberg bundle works like other WordPress page builders. However, you have to hand-code each block separately, which is both the biggest advantage and disadvantage of this approach.
Meanwhile, Flexible Content is a simplistic plugin for ACF page builder that lets you design and structure blocks using layouts and subfields. Each layout contains a programmable label, name, display, limit, and field settings. You can also map custom fields to specific comments, forms, and widgets.
The Gutenberg and Flexible Content modules for ACF follow the same approach. You must create website elements first and then apply them to your website. Though there are visual differences in the admin panel, it all comes down to the developer's or client's personal preference. So, for the purpose of our experiment, we decided to combine both approaches.
Example with Gutenberg:
ACF advantages:
- Convenient admin interface. Users have numerous tools, PHP and JavaScript actions, and filters to create bespoke solutions in line with any chosen WordPress theme.
- Advanced custom field types. With ACF, you get more custom fields to create complex functionality (like adding a post expiration date or a content filtering feature). Users can add custom fields for specific tasks and page functions.
- Layout customization. It gives you total control over your website. You can define layouts and sub-fields to design page elements. The admin page blocks can be fully customized, either isolated or across the website.
- Full control over code. With ACF, you can tailor content elements to deliver pixel-perfect page design for any device.
- Support of popular plugins. ACF integrates with most third-party plugins that can enhance your website’s functionality. On top of that, the intuitive API at its core lets you connect your website with other content layout management systems.
- Rich knowledge base. There are hundreds of step-by-step guides and troubleshooting tutorials on the official website.
- Great page load speed. Auto-export to JSON, AJAX fields, PageSpeed optimization modules, and metadata cleanup tools let you create websites that are fast and more attractive to search engines.
ACF disadvantages
- Requires programming skills. You need technical knowledge of CSS, JavaScript, and PHP to design websites with ACF. Modifying the metadata in the theme files can be risky if done by non-tech people — a single line of code can bring the whole website down.
- Fixed block positioning. The page elements remain locked into certain positions. To change the presentation of some blocks, you often have to adjust the theme file.
- Inability to copy custom fields with content. You can’t duplicate custom fields with content for other pages or blog posts (which usually takes a few clicks in block-based builders).
- Free version limitations. The free version of the ACF plugin offers limited custom field types.
ACF pricing
An ACF builder for WordPress with basic functionality and module support is free. In addition, you can choose one of the three ACF Pro plans, with the most budget-friendly one starting at $49 per year for one website.
WordPress page builders: comparison
Our table ranks how different WordPress page builders accomplish specific tasks. We ranked each capability from zero to ten, with ten being the most effective and zero — lacking functionality.
| Elementor | WPBakery | ACF | |
| Pixel-perfect design | 4 | 4 | 10 |
| Frontend editor | 9 | 10 | 0 |
| Complex animations creation | 5 | 5 | 10 |
| Simple (slide) animations creation | 9 | 4 | 4 |
| Content management simplicity | 5 | 6 | 10 |
| Website editing simplicity (for designers and content managers) | 7 | 8 | 0 |
| Website editing simplicity (for developers) | 4 | 6 | 10 |
| Development time | 5 | 5 | 10 |
| Page speed optimization | 6 | 6 | 10 |
Key takeaways
Building the same website with different plugins helped us uncover some insights. We divided our findings into categories to show which WordPress page builder was the best for this project.
Design process
ACF is most beneficial when you have a complex design. Elementor and WPBakery page builders are better suited for projects without strict design specifications or with only a general block structure. They also work perfectly for minimalist websites and blogs.
Technical specifications dependency
ACF is excellent for projects with detailed project requirements. However, you need a professional developer to create every page and content element.
WPBakery and Elementor are better choices for experimentation. They offer simple drag-and-drop functionality, a visual editing approach, and pre-made templates that allow users without a tech background to create mockups easily.
Frontend editor
ACF doesn’t allow you to modify on-page content in real-time. Meanwhile, Elementor and WPBakery were designed for seamless content editing right on the frontend.
Elementor has by far the most convenient and high-performance visual builder that lets you rearrange elements, change fonts, and embed media without reloading the page. WPBakery’s user-friendly interface is nearly as good, even if not as functional. But this isn’t the case with ACF, as you have to code each content block, add it to the website, and connect the fields in the admin panel to apply changes.
Admin panel
All WordPress page builders have a convenient admin dashboard. Still, WPBakery and Elementor work slower if the page is “heavy.” In contrast, ACF remains equally fast in all cases.
Animations
Elementor page builder lets you enhance your design with pre-designed fade-ins, slides, rotations, and other effects. At the same time, we find ACF much easier for complex animations that require additional JavaScrip coding. Sadly, WPBakery was the most troublesome builder to work with for both types of animations.
PageSpeed optimization
ACF lets us create cleaner code to speed up the website. Block-based WordPress page builders like Elementor and WPBakery rely on different scripts and shortcodes, resulting in code nesting, slow loading time, and bad user experience. Of course, page speed won’t be a problem with smaller websites that you can optimize with standard plugins like W3 Total Cache and WP Meteor.
Development time
We got vastly different results with each builder. Here’s how long the same developer spent on Lumega’s website:
- Elementor builder helped create the website in roughly 21 hours
- Creating the site on WPBakery took 23 hours
- ACF with Gutenberg and Flexible Content modules allowed the developer to build the website in under 18 hours
In general, Elementor and WPBakery can significantly shorten the development time for minimalist sites with basic functionality. However, complex websites with original designs are easier to build with custom-field creators like ACF, especially with technical requirements at hand.
Summary
ACF is hands down the best WordPress page builder for developers. It offers a wider selection of advanced tools for complex pixel-perfect websites and projects with detailed technical specifications. At the same time, if you have a limited budget or a minimalist website, it might be best to turn to block-based builders like Elementor and WPBakery.
With the right WordPress builder, you can create specific websites with fewer resources. Creating a complex website on Elementor and WPBakery might be longer and more expensive than on ACF, but it’s a more cost-efficient solution for blogs.
As an experienced web development company, Flexi IT chooses the best WordPress page builder for every project. We always consider our client’s specifications, budget, and deadlines.
Although our experts are equally proficient with popular tools like Elementor and WPBakery, Advanced Custom Fields remains our favorite builder for pixel-perfect designs. Make sure to reach us to learn more about our services.
