Welcome to WordPress. This is your first post. Edit or...
Read More
To CSS or to HTML? Not sure where to drag your text or your gallery blocks? And, should you build your WordPress site in Elementor, Site Origin or WPBakery?! When it comes to building a WordPress website with an easy to use page builder – we can show the way. In this article, we guide through various page builders, their different functionalities, and their strengths.
Even a simple WordPress page builder plugin, like those we’ll be talking about in this post, gives you the tools you need to create beautiful landing pages for your site.
A page builder is a plugin that can be added to a WordPress website to increase its functionality, page building, and designing capabilities. With most page builders you can easily use pre-build “content blocks” such as text blocks, image blocks, heading blocks, gallery blocks, and much more to customise a page or post on your website. You can also style these much easier by selecting colours, fonts, sizes, and more.
A lot has changed for page builders since the early days of GeoCities. There are now WordPress themes everywhere, for starters. You just install them, customize them, and you’re good to go.
Not!
We’ve found that those pre-built themes can only get you so far before you need to know how to code at least a little and you can end up fuming with frustration when they can’t do what you want them to do.
You don’t have time to wander around on w3schools.com, trying to figure out how to plug in (or even find) the HTML or CSS you need to get your website to look or perform the way it needs to. You’re trying to run a business here!
WordPress drag and drop page builders allow you to create custom layouts for your site using ready-made content blocks, modules, and widgets (little bits of functional code allowing galleries, testimonial carousels, double column text layouts, buttons, maps, forms and lots more inserted into the page.) By using them, you eliminate the need for most technical and coding.
However, this doesn’t mean that page builders are only for beginners. Page builders can also help WordPress developers get more work done faster by speeding up the process when creating custom page designs.
If you’re editing an existing WordPress theme that you don’t want to change, you’ll want to make sure that the page builder you choose is compatible with that theme.
Most builders in this article are compatible with all themes, but if you do find compatibility issues, you’ll want to use a theme that’s compatible with the builder you choose or vice versa.
A responsive website is one that has been designed to change layout to different screen widths on the menagerie of devices across the world. When devices got smart and people were looking at websites on screen, developers had to create a second complimentary website that would be smaller in kilobyte size for quicker data-based loading and match the screen width of small mobile phones. Happily, these days we only have to develop a single website that will look good at any size – from large computer screens to the smaller screens we use on smartphones and tablets. Responsive design ensures visitors to the site have a similar experience that is independent of the size of the device used to view the site.
Responsiveness is so important that every page builder we’ve included in this article lets you create responsive, mobile-friendly pages right out of the box. If you’re looking at a builder that isn’t on this list, make sure it’s responsive.
All of the drag and drop page builders in this article are 100% SEO-friendly when paired with the Yoast SEO plugin.
Here, you can find out more about The Importance of SEO and UX for Every Business.
We placed features last because it’s important to not get caught up in the glitz and glam of features before you’re certain of the functionality a page builder offers.
The best drag and drop page builders for WordPress will have both the functionality you require and the features you want, and we’ve got a superb list of page builders that hit the mark.
Originally launched in 2016, Elementor is one of the younger page builders on this list. But even though it got a late start, Elementor has quickly racked up over 4,000,000 active installs at WordPress.org, which makes it the most popular page builder out there, at least by WordPress.org numbers.
Elementor’s claim-to-fame is its quick, glitch-free visual interface, flexible styling options, and other powerful features such as full theme building.
Though it started as just a page editor, the premium version, Elementor Pro, now lets you do a lot more than just page building.
The two most notable features are:
These two additions help Elementor stand out from the competition. Although theme building is becoming a popular feature, the popup builder is still very unique.
Price: Free core version. Elementor Pro starts at $49 for use on a single site.
The Elementor interface is divided into two core parts, with a third area for some smaller settings:
For example, here’s a look at how you can drag over a text widget and then simply type on the page (inline editing) to change the text:
With Elementor Pro, you get to use this same interface to design your theme and popups. You also get dedicated widgets/features to help you do that.
In the free version, Elementor includes 30+ basic free widgets. And you can also use all of the core WordPress widgets. The Pro version adds another 50+ pro widgets, giving you a total of more than 80 widgets in the Pro version:
The free version also comes with 40+ free templates. And the Pro version adds hundreds of additional templates.
Templates come in two formats:
You can also save your own designs as templates to reuse later.
When you click on any section, column, or widget, Elementor offers three styling tabs in the left-hand sidebar.
The exact options depend on which element you’re editing, but generally, Elementor offers one of the deepest sets of styling options of any page builder.
Beyond basic things like colours, backgrounds, and typography, you can also control more advanced settings like:
Elementor also recently added custom positioning, which makes it a lot easier to place widgets at specific spots on the page.
These features are available in Elementor Pro:
If you ever deactivate Elementor, it leaves behind clean code. For example, if you had an <h3> header with Elementor, you’ll still have an <h3> header after deactivating Elementor – it will just use your theme’s styling.
WPBakery Page Builder (formerly Visual Composer) is another massively popular premium page builder. A big part of this popularity comes from the fact that WPBakery Page Builder is bundled with what feels like 99% of the themes at ThemeForest.
Price: $64
WPBakery Page Builder gives you both visual front-end editing, as well as back-end editing much like another page builder called Divi Builder which we will talk about later.
You can use the back-end interface if you want:
But I think most people will be happier on the front-end, which looks like this:
You insert new elements and style them using popups – there’s no sidebar area, nor is there inline editing.
Personally, I prefer the sidebar/inline editor with editing options, however, some people prefer it because there’s nothing to get in the way of the live preview when you don’t have a popup open.
WPBakery Page Builder offers 39 elements, plus all the normal WordPress widgets. Some of these elements would be combined in another page builder, though, so the actual number is more like 33:
You also get 86 templates. Some templates are full pages, whilst others are just sections.
Compared to something like Elementor or Divi Builder, WPBakery Page Builder’s style options are a bit limited.
You do have a good amount of control over rows:
But the styling options for individual elements are a bit more limited.
If you want to use your own CSS, you can add a custom CSS class or ID to individual elements, or you can add actual styles at a page-level:
WPBakery Page Builder doesn’t have many especially notable unique features itself if at all. But what it does have is a massive third-party add-on community. While many other page builders have third-party add-ons, WPBakery Page Builder is unique in the number, which is well over 250+ add-ons.
WPBakery Page Builder leaves behind a bunch of shortcodes in your content if you ever deactivate it, again, much like Divi Builder.
SiteOrigin Page Builder has been around for what seems like forever. And in that “forever”, it’s managed to collect over 1 million active installs at WordPress.org, which makes it one of the most popular page builder plugins in the market.
While SiteOrigin Page Builder is a little more lightweight than most of the other options on this list, it offers great performance and tons of helpful CSS controls.
Price: Free. SiteOrigin Premium bundle starts at $29
SiteOrigin has two interfaces that you can use to build your design.
You have the original backend editor:
You can drag and drop blocks around or click on a specific block to edit it.
This editor gives you the most space to work, but it lacks any type of live preview.
If you do want that live preview, SiteOrigin Page Builder added a live editor mode:
This isn’t the same as the other page builders on this list because you can’t actually drag and drop the elements on the live preview. But it’s also more than just a preview of your design because there is some interactivity between the abstract boxes on the left and the live preview.
For example, you can hover over a box on the live preview and the relevant box in the sidebar will also show the highlighting. You can also click on an element in the live preview to open its settings:
Beyond the core WordPress widgets, SiteOrigin Page Builder also offers a free Widgets Bundle plugin that adds a modular set of 20+ widgets that you can use. It also includes 20+ pre-built templates that you can use, though these are pretty barebones in comparison to other page builders.
You can’t save your designs as templates, but you can easily clone existing pages which gets you similar functionality.
SiteOrigin Page Builder’s styling options are going to be disappointing in comparison to the other page builders if you don’t know CSS. But if you are comfortable using your own CSS, they’re actually pretty helpful.
Beyond adding CSS classes and IDs, you can also directly add CSS to individual elements, including a section for mobile-only CSS:
You also do get plenty of non-CSS styling options – just not as many as the other plugins. If you’re a developer planning to use your own CSS, you could probably give the plugin a 5 for this category. But I’m knocking it down to a 3 because I think that’s where it fits for regular users.
You also do get plenty of non-CSS styling options – just not as many as the other plugins. If you’re a developer planning to use your own CSS, you could probably give the plugin a 5 for this category. But I’m knocking it down to a 3 because I think that’s where it fits for regular users.
SiteOrigin Page Builder leaves behind a mix of clean HTML and shortcodes. That is, some of the widgets – like the text editor – leave behind clean HTML, while others – like the button widget – leave behind shortcodes.
Beaver Builder has been a stalwart in the page builder market for quite some time now. It outputs clean code (for a page builder), is popular with end-users and implementers alike, and receives regular attention in the form of new features and updates.
There are also some official add-ons that you can pair with it for more flexibility – notably an optional Beaver Builder theme and the Beaver Themer extension.
Price: Limited free version. Starts at $99 for use on limited sites.
Beaver Builder’s front-end visual builder offers a unique interface. You do most of your work from a sidebar on the right. But these sidebar options only appear when you click on a button in the top bar, so it’s possible to view a fullscreen preview at any time:
Beaver Builder has recently added inline text editing, which means you can either type directly on the page to edit your text or use the popup that appears:
Using inline editing with the popup is a little awkward, to be honest. But you can easily pin the editor to the sidebar to fix that.
Beaver Builder only includes access to 6 modules within their free version, though you can also use standard WordPress widgets.
The premium version, on the other hand, gives you access to 30 modules. These modules are also all modular, so you can enable or disable them as needed.
In the premium version, you also get access to 56-page templates, as well as the ability to save your own designs as templates.
To style your modules and sections, you can either:
The exact options depend on the module, but generally, Beaver Builder gives you pretty good control over your elements, including custom spacing and responsive controls.
And Beaver Builder also offers a very unique toggle that lets you show or hide individual modules based on whether or not a user is logged in:
While the unique features are good, I’m dinging a point because you have to pay more to get them.
Like Elementor, Beaver Builder leaves behind 100% clean code with the proper HTML formatting.
Divi Builder is a popular premium page builder from Elegant Themes. While it’s most commonly used as part of the Divi theme, Divi Builder is also a standalone plugin that you can use with other themes, as well.
Unlike the previous two page builders, Divi Builder lets you edit your content using both a visual front-end interface as well as a back-end interface, though most users will probably prefer the front-end interface.
With the most recent version, Divi 4.0, Divi also added full theme building support, which puts it on par with Elementor and Beaver Builder in that respect. That is, you can now use Divi to design your header, footer, templates, etc.
Price: Available as part of the $89 Elegant Themes membership
Divi Builder’s backend interface looks like this:
But most of the time, you’ll use the frontend visual interface. The Divi Builder is definitely unique.
Basically, instead of any type of sidebar, everything is popups and floating buttons. You can see an example of adding a module below:
Like the previous two page builders, you can also use inline editing to edit your text directly on the page:
It’s up to you whether you prefer this approach to the sidebar used by some other page builder plugins.
Divi Builder includes 46 modules that you can use to build your designs:
You also get access to a massive 316 pre-built templates spread across 40 different layout packs, as well as the ability to save your own designs as templates:
Divi Builder lets you style elements from a popup that you can if desired, pin to the side.
One of the hallmarks of Divi has always been how much styling control it gives you. You can configure a variety of settings across three different tabs, including responsive controls, custom spacing, and lots more.
You can even add custom CSS to the main element or before/after the main element. The CSS editors even include basic validation and autocomplete! And you can also open a colour picker right from the editor:
All in all, Divi Builder is really pushing the boundaries with its styling options – it’s good stuff.
One of the criticisms of Divi Builder has always been that it’s shortcode based. That means if you ever deactivate it, it’s going to leave behind a bunch of shortcodes in your content.
While that is a bit of a downer, this is less of an issue now that plugins like Shortcode Cleaner exist. You will lose the formatting – like an <h3> tag – but you won’t lose the content itself.
Thrive Architect is the revamped version of what was once Thrive Content Builder. The new interface features a lot of similarities with
Elementor’s interface, which you’ll see in a second.
Though anyone can use it, it’s especially popular with bloggers and affiliate marketers because of its focus on conversion rates.
Price: Starts at $67
As I said, you’ll see some similarities between Thrive Architect’s interface and the Elementor interface (Elementor came first, in case you’re wondering):
It’s the same idea, you have:
One unique thing is the breadcrumb selector when you click on a nested element. This feature actually comes in pretty handy when you want to quickly jump between an element and a section:
And Thrive Architect also offers true inline text editing.
Thrive Architect offers 40 different widgets, including some neat ones like an evergreen countdown timer.
Thrive Architect also includes hundreds of templates divided into 36 “sets”. And you can also save your own designs as a template.
Thrive Architect breaks from Elementor in how it handles styling. Rather than giving you tabs, Thrive Architect includes everything in a single column.
The styling options are fairly detailed, and include responsive controls and custom spacing:
You can also add your own custom CSS at a page level. For individual elements, you can only assign CSS classes or IDs.
One cool feature is the option to set up Page Events. These let you display a lightbox popup based on certain triggers:
And another cool thing is how well it integrates with other Thrive Themes products. For example:
Thrive Architect leaves behind 100% clean code like Elementor and Beaver Builder.
Themify Builder is, unsurprisingly, Themify’s page builder offering. Themify bundles it with many of their themes to give customers easy customization options. But you can also purchase it as a standalone plugin and use it with any theme.
Price: Lightweight free version. Pro starts at $39 or $59 (depending on add-ons).
Like Divi Builder and WPBakery Page Builder, Themify Builder lets you build your designs using both back-end and front-end interfaces. With version 4.0, Themify Builder made some updates to the interface, which caused me to bump the score up a notch.
The backend interface looks like this:
But again, most people will probably want to use the front-end interface, which works like so:
There is no inline editing – you’ll need to edit your text in a popup:
Still, the new interface feels much “snappier” than the old one, which creates a much faster editing experience.
It also adds a breadcrumbs-style selector above the settings popup, which lets you quickly switch between a module itself and the rows and columns in which it’s located.
Finally, one of their best new additions is the ability to add margins and padding by simply clicking and dragging on the page. This is a huge upgrade and makes it much easier to adjust positioning on your page. You can see how I’m able to adjust the margin (pink) by just dragging it:
Really, the only major criticism is still the lack of line editing.
Themify Builder offers 32 modules (depending on your add-ons), as well as all the normal WordPress widgets.
You also get 143+ full-page templates, as well as a smaller number of Rows, which are basically pre-built sections.
If you click on any element, you’ll get four different tabs to help style it:
One other nice thing is that Themify Builder lets you customize your responsive breakpoints (though only at a sitewide level). In version 4.0, Themify Builder also added custom shape dividers, which let you choose from 25 preset shapes.
One cool thing about Themify Builder is that it still lets you use the regular WordPress Editor, whereas other page builders force you to use the page builder interface for everything. The Themify Builder content is marked in the WordPress Editor so that you can place content around it:
This feature also works in the new WordPress block editor.
Another nice new feature is the ability to use different resolutions for responsive design. A lot of page builders just give you generic “Mobile” and “Tablet” previews, but Themify Builder actually lets you test different devices.
Themify Builder has massively improved with respect to lock-in. Now, if you deactivate it, it leaves your content behind with clean HTML.
Launched in April 2018, Brizy is one of the “youngest” page builders on this list. But it comes from a well-known developer – ThemeFuse – and has quickly racked up 60,000 active installs. Additionally, it offers a unique approach to some parts of page building, which makes it an interesting offering.
The developers are also quickly releasing new features, and Brizy already has support for theme and popup building.
Price: Basic free version. Pro version starts at $49.
Brizy is exclusively a frontend visual page builder.
To build your page, you first have to add a block. You can use a blank block, or you can choose from the pre-built section blocks:
The “unique interface” part is what happens once you start adding elements. Rather than having a sidebar or popup where you customize/style the element, almost everything happens inline (including typing).
See what I mean:
The result is a really speedy way of building pages.
Brizy currently offers 26 basic elements. This number is small, but Brizy is still new so hopefully, it increases over time.
You also get additional elements for certain features, like a menu element when you’re building a header.
It also includes over 150 blocks (template sections) that you can use.
Because of how Brizy’s interface works, there’s no set formula for styling options like the other page builders.
You can expand a sidebar for advanced settings like spacing and responsive controls:
You can also add basic styling at a page level so that you don’t have to manually edit every single element:
But most of the time, you’ll use the inline controls to style your elements, which give you a good amount of control.
Brizy’s interface is pretty unique already, but it also has quickly put together a pretty stellar feature list since its release:
Brizy leaves behind mostly clean HTML code if you ever deactivate it. But it still leaves a bunch of divs with Brizy CSS classes in the code, which messes up the spacing a bit and would require cleaning.
By submitting your enquiry via the ‘Contact Us’ form, you consent to Brainstorm Integrated Marketing contacting you. Your information will be stored in a secure database and not shared with any third parties outside of Brainstorm Integrated Marketing. For further information please review our updated Privacy Policy online.
Welcome to WordPress. This is your first post. Edit or...
Read MoreCopyright © 2023 Brainstorm Strategic Marketing