My previous post, Alternatives to WordPress Page Builders, describes an exercise I carried out to build a simple web page without the use of a page builder plugin.
In this follow-up post, I attempt to build the same page with a few different page builders to see how much easier this makes the process. [UPDATE: These two blog posts were written before the introduction of the new WordPress block editor (a.k.a. Gutenberg). It’s now easier to layout a page without using a page builder – see my blog post “A Simple Page Layout with the WordPress Block Editor” for details.]
Here’s the layout of the page I used for the test.
Site Origin’s Page Builder Plugin
This popular, free plugin has been around for a few years and I’ve used it myself several times in the past.
The page is built up with widgets, which means that you can put all kinds of content anywhere on the page. Site Origin supply a free Widgets Bundle plugin but you can also add standard WordPress widget or ones added by any other plugin.
It’s worth mentioning that the widgets in the SiteOrigin Widgets Bundle plugin could also be used in pages built with Elementor or Beaver Builder, if you decide you prefer one of these alternatives.
The page builder plugin adds a new tab to the WordPress editor.
Switching to the Page Builder gives you buttons for adding new rows and widgets.
Rows can be divided into columns and their attributes, layout and design can be changed.
The contents of each row are widgets whose settings can be edited once they’ve been added. For the first part of my page, I’ve made a row with one column, given it a row layout of “Full Width Stretched” and added a hero widget.
I added two rows of three columns, each containing an image widget, and a final row with a text widget and a full width background image. I couldn’t see an option for centering the image widgets, but it’s possible to add a CSS class to the rows and do it that way. There are various options for background images, including parallax.
Here’s the final layout.
And here’s the result.
The Pootle Pagebuilder Plugin
For a straightforward, easy to use page builder, Pootle Pagebuilder by Pootlepress is worth a look. There’s a pro version, but the free one coped easily with my simple test layout.
As usual, the idea is to add rows, each of which can have a number of columns. There is a live edit mode…
…but my personal preference was to edit within the dashboard, as I’m used to editing pages there.
Hovering over each cell enabled me to edit its contents using the familiar WordPress editor, with the addition of an icon for adding buttons. I could also choose to edit the style of the individual cell.
Each row also has display settings, including some animation effects.
The resulting page looks just as I’d intended.
The Pootle Pagebuilder plugin can be used with any theme, but I noticed that Pootlepress also have their own theme, 18tags, which they describe as being “flexible | beautiful | fast | mobile | powerful” – all things that I like to see in a theme :) There’s a pro version, but I thought I’d give the free one a try. I didn’t spend a lot of time playing with it, but I was quite impressed.
The Make Theme
Unlike the other solutions I’m considering, Make by The Theme Foundry, is a theme with a built in page builder, rather than a plugin that you can use on your own choice of theme.
You can choose to purchase Make Plus, but I’m hoping that the free version of the theme will be sufficient for my basic test website. The theme itself seems to have a reasonable number of options in the customiser (colours, fonts etc) but it seems that I’d have to pay if I wanted to remove the link to thethemefoundry.com from the footer. As I carried on customising the site and building my page, I was continually reminded that I could get more options by upgrading to Make Plus. I suppose that’s fair enough.
Once I installed the Make theme, I found that if I added a new page then the Builder Template was selected automatically.
I added a banner, clicked on the cog icon to configure the banner section and was able to set the banner to full width and give it a background image and height.
I edited the content of the banner slide to add a headline. By searching the documentation on the Theme Foundry’s website, I discovered that highlighting my “Find Out More” text and clicking the Format Builder icon allowed me to turn the text into a button.
I was able to add content sections, with the number of columns I required, then edit the content of the columns to add images and text. I could make the final section full width and give it a background image, but couldn’t easily see how to stop the text being full width too.
I didn’t find Make as pleasant to use as some of the other page builders I tried, but that could just be because I’m not very familiar with it. There’s no doubt that Make Plus, the paid version of the theme, gives more options and control, but I was able to create my page reasonably well with the free theme.
Divi
Divi, by Elegant Themes is both a stand alone page builder plugin and a popular and powerful theme with the page builder built into it. There’s no free version of Divi; paying to join Elegant Themes gives you access to all their plugins and themes.
Divi is loved by its fans because it allows them to create attractive web pages relatively easily, but others claim it’s “bloated” and inefficient. I don’t have enough experience with the theme and plugin to comment.
For this exercise, I decided to use the Divi plugin with the GeneratePress theme. Divi has so many options that using it for such a simple layout feels like using a sledge hammer to crack a nut.
Divi has both a front end editor and a visual editor within the WordPress dashboard. Enabling the editor brings up a welcome message with a brief explanation of how to add sections, rows and modules and a link to Elegant Theme’s comprehensive documentation.
If I hadn’t been attempting to build my test layout, I could have chosen from a library of predefined layouts to make designing my page easier.
Inserting sections and modules is straightforward and there are a large number of modules to choose from.
Sections and modules have an almost overwhelming number of options to control their appearance and behaviour.
Here’s my visual builder layout and the results.
It seems typical of the Divi approach that the default behaviour of the blurb modules is to have a lazy loading animation, where the modules appear on the page as the visitor scrolls down. Similarly, the button is not just a plain button, which changes colour when the mouse hovers over it. Instead, when hovered over the button becomes larger and an arrow appears.
Elementor
I was keen to try the Elementor page builder plugin, because it’s often recommended in Facebook groups that I belong to. There are both free and pro versions of the plugin, but the free one proved to be sufficient for my test.
Activiting the Elementor plugin added a section to the WordPress dashboard where I could change some basic settings.
When I added a new page, I had the option of editing it with Elementor. Unlike some of the other plugins, I’ve been trying, Elementor allows front end editing only. Clicking this button switched me to a live view of my page.
Building my page proved to be quite straight forward and reminiscent of page builders such as Weebly.
Elementor seems to have a similar approach to the SiteOrigin page builder, in that pages are built up of sections, rows and columns to which widgets can be added. Elementor supplies its own special widgets but you can also add standard WordPress widgets or ones added by other plugins.
As I added each new section, I could choose its structure, drag elements into the columns and change the settings of each element to control its appearance and behaviour.
Here’s what the resulting page looked like.
The free version of the plugin was more than powerful enough to build my simple test site – in fact, I barely scratched the surface of what’s possible with Elementor.
For example, I noticed several options for adding interest to the look of a site, including shape dividers and drop caps.
There is also a useful feature allowing you to display sections and elements only on desktop or mobile devices, so you could tailor the content of your site to suit the device it’s being viewed on.
Beaver Builder
The Beaver Builder page builder plugin is another one that I often see recommended in Facebook groups. As is the case with Elementor, there’s a free “lite” version and a pro version. Both free and paid third party add-on plugins are also available.
Version 2.0 of Beaver Builder has just been released but is not yet available for the lite plugin, so I’ve used an older version here. It’s encouraging to see that this plugin is still being developed and supported.
As with Elementor, all the editing is done on the front end with a WYSIWYG, drag and drop builder. I found it a little quicker to use than Elementor because the page builder seemed to open more quickly, and rows of columns could be dragged directly onto the page.
Modules are also dragged into place.
The lite version of Builder Beaver comes with very basic few modules and the Advanced modules sections contains only a module for displaying a sidebar (any one of your exisiting widget areas) on the page. As with Elementor, you can include widgets as well as Beaver Builder modules.
Although the free modules are quite limited, a couple of third party plugins have free versions which increases the number of modules available.
I was able to use the free, lite version of Ultimate Addons for Beaver Builder to obtain a button module for my test site.
Powerpack by Beaver Addons also has a free, lite version to give you even more choice.
Clicking on a row or module enabled me to edit its settings.
The advanced settings of a row or module allow you to specify that it should be displayed only to logged in or logged out users, and to decide whether to display it on screens of all sizes or only selected sizes.
Here’s my final page created with Beaver Builder.
Tentative Conclusions
I haven’t delved into the subject deeply enough to consider myself an expert on page builders, but here are my impressions:
- If you are new to WordPress, don’t think that you have to use a page builder. Learn what can be done just using the WordPress editor first, and add a page builder plugin only if you have a need for one. Don’t use it on every page and post just for the sake of it.
- If the only problem you are trying to solve is how to display text or images in columns and you aren’t fazed by shortcodes then you could just use the Lightweight Grid Columns plugin (see my previous blog post).
- If you happen to be using GeneratePress premium, and you don’t need to add widgets or special modules to your page, then you could use GeneratePress sections (also mentioned in my other blog post) instead of a full-blown page builder.
- If you dislike shortcodes and just want a simple way to display your content in rows and columns, without many bells and whistles, it’s worth having a look at the PootlePress page builder.
- Having said all that, during my research for this post, I began to see the value of page builders, both for speeding up development and for making a site look more polished. I found myself being drawn towards Beaver Builder. It’s a powerful, established, drag and drop, WYSIWYG builder with a good, solid reputation. Most users would probably want to either buy the pro version, or add some third party plugins (even just the free ones) to increase the range of available modules.
- If you want a drag and drop builder with more elements included in the free version and with lots of detailed settings to control the way each element is displayed, then you may prefer Elementor.
