Using GeneratePress and Elementor

I thought I’d briefly interrupt the stream of posts about content writing to comment on the combination of WordPress theme and plugins I’ve used to develop this site.

Because I’m impressed. The site’s principal building blocks are the GeneratePress theme and the Elementor page builder plugin, a pairing about which I’ve read good things, but which I hadn’t yet had the opportunity to try for myself.

I was already familiar with GeneratePress, the theme I chose for my feature writing site because it performs the essential functions of a WordPress theme very well. It comes with a clean default layout that can be embellished through an elegant set of customisation options. It is maintained by Tom Usborne, a respected WordPress developer whose team offer excellent technical support. And, crucially, it is well coded and very fast.

Basic website performance becomes ever more important to me the longer I work with WordPress. Many themes are now effectively platforms, offering a huge range of design and development options that can be used to create more or less any small to medium sized website. I’ve used several of them, most notably Avada, Divi and Uncode, all of them impressive examples of software engineering that make it possible to snap together a sophisticated design in just a couple of days or so.

Speed and simplicity

A theme that presents itself as an all-in-one solution, and that goes some way to succeeding, as all these themes do, is a compelling proposition. But their common aspiration to offer a one-stop design package weighs them down. I’ve been impressed by their user interfaces and have used them to create good looking sites. But I’ve often been frustrated by the slow page loads, both when using the site building options and browsing the live site.

GeneratePress is designed for speed, and deliberately limits the design options it offers. Those it does provide are perfectly adequate for a blog or a simple business site: certainly, I found everything I needed for my writing site.

But those options are rather limited as regards the sophisticated page elements that clients expect of modern sites intended to showcase a brand: sections, highlight boxes, tabs, galleries, sliders, icons, price comparison tables – the list continues to expand. I needed a few more design options for this site (though not too many more) than GeneratePress itself offers, so I looked at a few page builders: plugins that offer a range of design components that can be added through a drop-and-drag interface.

There are quite a few on the market now. But for me the two leading contenders for my site were Beaver Builder and Elementor. Both offer an exhaustive range of design options, have been coded with care to avoid bloat, and offer powerful free versions that can be extended with inexpensive ‘pro’ versions (no more than $50). And both come with glowing recommendations.

After looking closely at both I went with Elementor, swayed by effusive commentary about how well it works with GeneratePress, and in particular this comprehensive post by Dave Foy at Design Build Web.

As Dave notes GeneratePress offers a frame into which Elementor fits neatly. GeneratePress can be used to design page headers and footer regions, with Elementor providing layout options for the page body. Indeed GeneratePress can withdraw quietly into the background, offering a blank template that Elementor can fill with its own header and footer design options.

I went for the former option, as I rather like the options GeneratePress offers for page headers and footers. So this site’s home, writing and WordPress pages mix GeneratePress and Elementor page elements. The journal just uses GeneratePress’s default blog style, which I think works perfectly well. Elementor offers so many design elements it is tempting to indulge, but in the end I confined myself to the accordion, gallery and contact form elements, and a couple of simple highlight boxes.

A little discretion and CSS

In the course of the fortnight or so it took me to put the site together I had the comforting sense that pretty much and design I wanted was possible. The real challenge was to have the discretion to use only what’s necessary, which of course is a judgement that changes over time. I should also say that some custom CSS was necessary to get the design to display exactly as I intended on mobile and tablets. It is still difficult for even the best page builders to deal with all of the challenges responsive design presents: it’s often necessary to adjust font sizes and margins through custom coding to make them usable on smaller screens.

GeneratePress and Elementor is a combination that works well for me, right now. If future projects allow I’d be keen to see how the Beaver Builder theme works with their plugin, which seems to offer a similarly powerful framework.

The theme and page builder formula won’t be right for every project. Some sites just need a simple theme with few plugins (more I think than is commonly supposed). And others require bespoke development. But GeneratePress and Elementor offers a powerful combination for the kinds of small to medium sized websites I develop. I’ll take a look at other aspects of the WordPress setup I prefer in future posts.