REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

18 Jul 2018

Divi vs Gutenberg: What's the best WordPress page builder?

WordPress is a great framework, a superb foundation for you to build your b2b website on, but it is still just that, a framework.

By default you get one 'page' to edit for each URL in WordPress. You can setup lots of meta data within the functions, but in the modern world of responsive websites, it's a bit shorthanded to try and add everything through the standard editor to put the content onto your pages. So what are the options?

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="Divi vs Gutenberg: What's the best WordPress page builder? - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Answer One</a></li>
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Answer Two</a></li>
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Answer Three</a></li>
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Answer Four</a></li>
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Answer Five</a></li>
<li><a href="#" id="Divi vs Gutenberg: What's the best WordPress page builder?">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('Divi vs Gutenberg: What's the best WordPress page builder?');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - Divi vs Gutenberg: What's the best WordPress page builder?"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('Divi vs Gutenberg: What's the best WordPress page builder?');
}
});
</script>
</div>

There are quite a few options, ranging from the more basic Page Builder which isn't all bells and whistles but does give every exact control when it comes to design and development, to Visual Composer which gets bundled into a lot of themes and is very good, so long as you have good design skills and can tick all the right settings, of which, there are many...

If you've shown any interest in editors in relation to WordPress at any point in time, you'll have been followed around by adverts for Divi which is a complete theme for WordPress and includes the option to drag and drop elements, resize in an inline editor and start with one of their 20+ pre-made templates rather than from scratch. There's over 20 individual modules as part of the default setup and because of the themes popularity there is a selection of 3rd party plugins built specifically to extend the functionality. Of course you may need something even more customised, so will you hit a dead end at that point?

No, and yes... Divi is built in the spirit of WordPress, so like the other big player plugin/theme developers like WooCommerce there are 'hooks' in the system that allow you to extend the functionality of the modules and extend the number of modules themselves so you have a greater amount of control over what goes onto the pages of the site. You will need an experienced developer who has worked with Divi to do this though, as it's unlikely it's something you could achieve in house without some PHP experience, there's certainly no front end editor for extending the module functionality it'll all be back-end code work.

There's plenty of positive social proof on the Divi website, as well as lots of examples of how people have used the editor to customise their own site and there's even a nod to the split testing and analytics functionality built in, but it is just a nod. You'll need to look elsewhere for more detailed analytics of how users are interacting with your site. You also need to look elsewhere to find the negatives of using Divi.

Divi doesn't create additional pots for storing the design and content data for the page, what it does instead is wrap all of your content in what are called shortcodes. The shortcodes are wrapped in square brackets and they supply additional information to the editor and the front end template on how to display the content. What it means is whilst it appears your content in the editor is all neat and tidy, from a back-end point of view, what you have is a mix of content and presentation being stored together in the database record. This is fine whilst you're using Divi, but you'll need an awful lot of clearing up of the data should you move to a different theme or platform going forward.

This is by no means unique to Divi, it's a failing of most page builder plugins/themes, it's just Divi has so many settings it makes the "meta" data associated to the presentation even heftier than its counterparts. Once you're in, you'll struggle to get back out again.

Gathering momentum before its inclusion in one of the next major releases of WordPress is Gutenberg, which currently is a plugin for WordPress but will be part of the core and available to use right out of the standard editor. It's designed to work in the same way as Divi, but has nowhere near the functionality that Divi offers, though it does have cleaner code as a result which will make transitioning between themes infinitely more viable.

(Gutenberg is reported to be going live in the next major release of WordPress. If you're not a fan, there's a great article on how to keep the classic editor)

If you're not planning that far ahead then you might find Gutenberg underwhelming when compared to Divi. Its handling of media leaves of a lot to be desired so dropping in images and video into the content isn't as straightforward as it should be, which sort of defeats the point. Bear in mind however it is in its infancy, and the rather heavy panning it has had since its release in a beta format should hopefully help shape it into something a lot more viable when it comes as part of the standard WordPress setup. That's one of the main points of minimum viable programming, you release a working version then let your users feedback to shape where you take the software.

They'll need to improve the quality of the plugin, as it lacks a lot of some basic functionality, such as retaining formatting on copied and pasted in text which has been a big bug bear for a lot of users. Either way it looks like Gutenberg will press ahead at full steam. Further concerns have been raised about the compatibility of some major plugins with Gutenberg, Divi being one of them, which could mean you end up having to work with the Gutenberg editor regardless, unless of course you go with a different CMS.

HubSpot COS

The main problem with all these page builders is their inherent complexity. They're either super simple in terms of the formatting but you have a load of form fields to fill in to style everything correctly, or they've got loads of options for the modules you're going to use and you have to remember which ones to set to ensure you get the end result you're after. Either way they're incredibly reliant on the end user being very technically proficient when it comes to building the pages.

We've a relatively young and tech savvy team here at Axon Garside, but even we run into issues when it comes to administering sites we've built in the WordPress with a page builder. It's quite difficult to document the process there on screen, and whilst we produce guides on editing the pages, it's often not intuitive and a pain to have to refer back to the documentation to achieve what you want to achieve.

On top of all this is retaining design consistency. We've found whilst the flexibility of a page builder systems like a great idea, the ability to build pages which have a consistent flow and feel about them in line with the original designs is nigh on impossible for your average end user. It's a case of just because you can do something, doesn't necessarily mean that you should!

Some of the more, shall we say 'experienced' members of the team prefer old school CMSs such a Kentico, where all inputs were rigorously locked down. You get form fields, drop-down image pickers and that's it, no more flexibility which makes it infinitely less likely you're going to mess the pages up, but can result in a lack of freedom when it comes to creating a template to suit the content. It seems silly to restrict the content of every page on the basis of a template layout, but carte blanche is a step too far for most users to work with effectively. So what's the answer?

The HubSpot COS system works in a very different way compared to WordPress, regardless of whether you're working Divi or Gutenberg. The COS system exposes the modular setup of its templates within the design section only, so you can leave that to your designers and developers without having to worry about it at all. However its drag and drop interface means you can clone and extend templates with additional modules to suit your needs if you wish when you feel more confident with the system. The end result and actual editor takes the templating system and presents you with a 'live' version and a straightforward list of options to work through to edit the page. This separation, whilst incredibly intuitive, is really unique to the HubSpot COS system and in all honesty has led to a massive decline in the amount of time we've had to spend training clients to use the system as it's so easy to pick up.

Beyond the basic setup of the standard modules and templates, you can develop custom modules, which follow the same format of the standard modules so they're really easy to administer, and they also allow inline guidance on how to use them, which results in zero additional paperwork to explain how to add content to the site. Think of them as building blocks for sections of the site, but rather than them being blank bricks, they contain sample content so you're given a clear guide on what you should be including in them to keep everything looking 'joined up' rather than collections of disconnected boxes.

In addition to this, the rapid deployment of custom modules within a template that the HubSpot drag and drop interface allows means you have a library of ready to go templates to use as a jump off point each time you create a new page, which you can remove elements from and add elements to using the flexible column system, again with a really easy to use drag and drop system.

Conclusion

In regards to the Divi vs Gutenberg debate, I can't hand on heart give you a definitive winner as they've both got their positives and negatives. All I know is there's compromise where there shouldn't be when using either of these options, which will interrupt your workflow and ultimately cost you time and money when it comes to making your site into a lead generation creating machine.

Download the B2B Website Lead Generation Checklist

Topics: Website Design

Blog Comments