KEVIN PARTNER
Kevin examines the options for building custom websites in WordPress using the latest generation of page builders – including one free option.
In the meantime, Kevin examines the options for building custom websites in WordPress using the latest generation of page builders
WordPress is the king of website frameworks, powering up to around a third of all sites, but it isn’t the most intuitive of platforms. It’s brilliant for bashing out a few hundred words to pour into a template on publication, but a beast when it comes to creating fully featured custom websites.
Wix, SquareSpace and other site builders seek to exploit its weakness with their drag-and-drop interfaces and slick advertising. However, Wix is to web development what AOL was to the internet: an easy-to-use walled garden that’s fine until you want to see what’s beyond the fence. I’ve been building WordPress sites for over a decade now and have yet to come across a problem that couldn’t be solved with a plugin, theme or, if all else fails, some hand-crafted code. Good luck persuading Wix to let you hack into its codebase.
Things are changing for WordPress with the forthcoming introduction of the Gutenberg visual builder. Initially intended as a replacement for the basic text editor, the plan is for Gutenberg to transform the entire site-building process, making WordPress 5 almost unrecognisable. For those of us who don’t wish to wait for WordPress to reach this nirvana, there’s a range of third-party plugins and themes with which we can achieve the same effects today, combining the ease of use of Wix with the power of WordPress.
Elementor
The newest of the big page builders, the Elementor plugin can be used with any WordPress theme. Most themes feature a particular design, but this largely defeats the object of a page builder, so it makes sense to pick a plain theme. OceanWP is an ideal partner and is also available in a free version. Beware, though: both Elementor and OceanWP offer premium versions to which you’ll be sorely tempted to upgrade!
Begin by installing OceanWP via the WordPress dashboard. Go to Appearance | Themes and search for it in the repository. Then, once this is done, go to Plugins | Add New, search for and install Elementor. When you next go to add a new page, you’ll see the “Edit with Elementor” button – use it to switch from the classic editor to the page builder. Before you do that, however, go to Page Attributes and select Elementor Full Width from the Template dropdown. This gives you a blank canvas to work on.
Click the blue button to launch Elementor and, on the left-hand side of the page, you’ll find the list of content blocks. You can simply drag them from the tool panel onto the page, but it’s more efficient to click the Add New Section button so you can pick a column layout first. The Add Template button pops up a list of complete and partial page layouts that you can add with a single click – only around a quarter are available in the free version. All page builders offer such templates, and they can be an excellent way to practice. I don’t find them terribly useful in real life, however; it’s generally better to construct pages from scratch.
For this example, I’m creating a website for a new YouTube channel. It’s intended to be the focal point for all our social media efforts, as well as a place for our blog posts. Elementor is ideally suited for this, and it’s even possible to sidestep some of the limitations of the free version by using plugins and shortcodes. For instance, the social media feeds are provided by third-party plugins (Custom Facebook Feed, Custom Twitter Feeds and Instagram Feed, all by Smash Balloon) and the shortcodes they generate added to Elementor Text modules.
Having said that, the free version of Elementor comes with a generous selection of modules, including text and image blocks, carousels and galleries through to progress bars, social media icons and tabs.
Divi
I confess that I’m a Divi fanboy, and my WordPress development business is built upon it. When I set up the business in early 2017, I evaluated all the page builders – Divi was the clear winner for me. It can be used either as a complete theme or as the Divi Builder plugin, the latter working like Elementor by adding page-building to any theme. For this comparison to be fair, I’m going to use the plugin with OceanWP.
There’s no free version of Divi. It comes with a membership to Elegant Themes that costs $89 per year. Once you’ve signed up, you can download the Divi Builder plugin, upload it to your site, and then use your username and API code to unlock updates.
Building a page in Divi is as straightforward as it is with Elementor, albeit handled differently. Divi supplies full-page templates but, again, I prefer to build from scratch.
“These thirdparty plugins combine the ease of use of Wix with the power of WordPress”
Once you open a page using Divi’s Visual Builder, you’ll see a green box representing a row of content and, if you move your mouse around it, a bigger blue box that represents a section (a group of rows). Add a row by clicking the big plus icon and selecting a column layout. You’re now prompted to pick from one of Divi’s 40 or so content modules – in this case, I’m choosing a video box and entering the URL of our YouTube trailer. Hover your mouse over the edges to visually adjust padding, then save by clicking the purple circle at the bottom.
It’s easy to make your site stand out with Divi. For example, parallax scrolling is a staple feature of many sites: adding that to a Divi section is as simple as ticking a box and choosing the type of parallax you prefer. Divi also includes graphical section dividers, including the cloud effect shown in the screenshot opposite, and a host of other flourishes including box shadows, animations and border controls. Elementor lacks many of these graphical niceties.
To pay or not to pay?
If you’re determined to build a website for free, then Elementor and OceanWP are a decent combination. However, although Elementor’s free version includes plenty of features, you’ll find yourself frustrated if building anything other than a basic site. For example, the free version doesn’t allow you to edit the CSS of a module directly (you could use a global CSS file and work out the class or ID of each element, but that would quickly become annoying). While I’m all for doing things on the cheap, I think I’d inevitably feel compelled to upgrade to the Pro subscription sooner rather than later.
While Divi and Elementor are neck-and-neck when it comes to features and ease of use, Divi wins hands-down on pricing. Elementor offers three pricing levels starting at $49, but this is for a single site. An Elegant Themes membership, although pricier at $89, covers unlimited websites, including those you build for clients. Elementor’s equivalent plan is $199.
It’s a pity that Elegant Themes doesn’t offer a trial of its plugin and theme. Elementor deserves credit for doing so – and for the fact that its free version is usable for basic sites. I found it easy to get to grips with and it’s under very active development – something also true of Divi.
Accepting that I’m going to pay for a premium page builder, then, Divi is the winner, simply because it’s more affordable. Look out for promotions, too: I upgraded to a lifetime Elegant Themes membership during the Black Friday event in 2017 for only a little over half the cost of a year’s unlimited membership to Elementor.
Divi has some weaknesses, though, including the fact that you can’t edit the header and footer directly, nor can you use it to create child themes without coding – but these things are being worked on.
I’ve excluded Beaver Builder from this comparison because the fully featured version aimed at agencies costs a hefty $399 per year. Now, I’m certain that this is entirely justifiable if seen in isolation, but Divi costs a fifth of that and offers much the same.
“While Divi and Elementor are equal for features and ease of use, Divi wins hands-down on pricing”
What about Gutenberg?
It might be that this discussion will become moot when WordPress 5 arrives with its built-in visual editor. Frankly, I’m not holding my breath. Currently, you can test it by installing the Gutenberg plugin; you’ll see from the low star rating what the community thinks of it. Having said that, its block-based approach works well to produce a similar layout to that achieved by Elementor.
However, there’s no prospect of it being as sophisticated as either Elementor Pro or Divi in the short to medium term. In fact, I doubt it’ll ever match them feature for feature.
The developers of Gutenberg point out that it should currently only be used on a test server, which suggests it isn’t ready for the spotlight. I wonder whether, in fact, it will ever achieve its potential of being a visual editor to replace the existing backend. WordPress has grown incrementally over the years, but the changes proposed for the next big iteration dwarf anything that’s come before. This is risky, since whatever it does must be backwards compatible with the millions of existing sites. I hope I’m wrong, but I fear the makers of WordPress might have bitten off more than they can chew; while Gutenberg might replace the ancient text editor, its greater ambitions may go unfulfilled.
For now, if you’re looking for a free way to drag-and-drop your way to an attractive, custom WordPress website, the Elementor/Ocean WP combination is the best I’ve come across. For anything other than a basic site, Divi’s combination of sophistication and value for money put it at the top of the list.