WordPress and page builders.
In this post I’ll be talking about WordPress and page builders.
There are different options available to you with regard to which page builder you decide to use.
Different page builders work in different ways, and whilst some are easier to use than others, there an be some implications with some of the easier to use page builders.
Which page builder to use?
WordPress does come with it’s own page builder, which is called the block editor. Although the block editor is an improvement on it’s predecessor, and can be used to generate some lovely looking content, it can take some getting used to and working out if you’re new to WordPress.
There are some page builders that you can install such as Spectra or Gutenverse that enhance the built in WordPress blocks editor.
WordPress blocks also doesn’t work in a drag and drop manner. If you want something that does provide drag and drop functionality you’re going to have to install a plugin, which is what I’ll be covering in this post.
The thing to bear in mind is that this ease of use that comes with a drag and drop editor has an overhead associated with it, that you can find yourself sorting out later when optimising your WordPress. What I’m talking about here is code that’s added to your sites pages to make these drag and drop editors work. This added code can bloat your site’s pages and have a higher performance overhead.
You might consider having a play around with the WordPress block editor, because if you can get used to using this and are happy to use it to make your page content, you’ll have less of a job on your hands further down the line. You can see more about this in this post about saving yourself the hassle of a lot of optimisation work.
This guide covers installing Elementor as a lot of the articles that cover creating page content are all specific to this page builder. Installing Elementor is covered below. Whilst Elementor is very fully featured (even the free version) and very easy to use, do bear in mind that this isn’t mandatory to use, and Elementor can add a lot of code to your site’s pages, which may mean more work later on.
There are quite a few page builders available for wordpress. To mention a few:
There’s a really good article by WP Beginner (which is a good resource for people new to WordPress) comparing the default WordPress editor to some of the above here.
Very generally speaking, these page builders will provide a default set of features for free, and paid upgrade options to obtain more features. I’ve found that Elementor’s base features in the free version cover almost everything that I want to do but I do have to install the occasional plugin to be able to do something that the free version doesn’t cover.
The other thing that I like about Elementor is that there are 3rd parties who make plugins to add extra features, Plugins for plugins? Yes, you read that right.
The only downsides about Elementor are:
- it’s had a few vulnerabilities, but they’ve been patched quickly, so as long as you’ve installed an updates manager and configured it to update everything as much as possible (this is covered in my How to Secure your WordPress article) then you should be OK.
- Aspects of it can trigger some mod security rules. You’ll see 404 errors when clicking the update button as a symptom of this. In cPanel hosting there’s usually a “mod security” facility that you can used to turn mod security off and on for your site or entire hosting account. Turn mod security off, make the changes to your site, then turn it back on again to work around this.
- It can be quite Javascript heavy (which has implications when it comes to optimising WordPress making it harder to get decent page speed audits, you might check out the reduce unused javascript post to see what you’re in for).
When it comes down to it, you have to chose something that’s good for you. You might have to play around with a few to find one that you like, but as I’ve mentioned all the articles you’ll find on my blog are all based around using Elementor. So let’s go ahead and install Elementor (unless you’re feeling adventurous!).
How to Install Elementor.
Once logged in to your WordPress, hover your mouse over “Plugins” in the menu on the left hand sides, then click “Add New”. Like this:
Then type:
elementor
In the “search plugins” box toward the top right, then press enter/return:
Then click on the “Install Now” button in the Elementor section, and wait a few moments:
Then click on the “Activate” button in the Elementor section:
And you’re done!
If you’ve been following these guides as a step by step, you’ll have probably got the picture that installing plugins is quite straight forward.
The process is always the same, unless you’re installing plugins manually at file level, but I’ll cover this in a later article.
A word about page builders.
Drag and drop page builders use what’s called Javascript to interact with your web browser.
This is what the ‘drag and drop’ aspect uses, for example.
Javascript allows you to do “things” in the web browser that then get processed by your WordPress, and when you click “update” in a page builder all the content you’ve created is pushed in to your site’s database (which is where page content is held).
Whilst this does sound like a nerdy footnote or explanation, this does mean that you have something to take in to account:
Your browser.
Browser’s aren’t enormously powerful things, and some browsers are better than others, some do weird things by default (Safari) and some even display pages a bit differently (Microsoft Edge).
If you’re currently using a browser that’s a bit odd or a bit iffy, or has any default Javascript restrictions, then you might consider downloading and installing a different browser. I do most of my work in Google Chrome or Firefox. They’re both free, and I’ve never had any problems with either. Respective downloads are here:
I wouldn’t advise using tablets to make sites when using drag and drop page builders. They tend to be even less powerful, and the dynamic aspect of WordPress (auto screen resizing and adjusting layouts and menus) can be a bit tricky to work with.
It’s totally up to you how you do things and what you work with, but I mention the above so you don’t find yourself faced with “Why’s this thing do this weird thing”, and eventually working out that it only happens in one specific browser.
Another word about page builders.
As I mentioned at the beginning of this article, some page builders can add a lot of code (some of which may well not be needed) to your site’s pages.
If you use a site builder that does this, then you’re going to have to undertake work further down the line to optimise your site. You might have to do things like reducing unused Javascript that isn’t used or remove render blocking resources.
One main problem really is, that you’re not going to know if you’ll need to do a lot of optimisation work until you’ve made a proportion of your site. The other problem is that it’s not always that easy to switch between page builders if you decide you do want to use a different one.
As I write this, I’m in the process of switching this site over from Elementor to the WordPress blocks editor with Spectra.
Whilst there’s likely to be a forthcoming post that describes how to make this type of transition, it’s not something that I’d really class as “enjoyable” or “a peice of cake”.
If you’re concerned about site performance, and don’t want to have to make such a change yourself, you might consider a “test as you go” type approach. You could do something like trying out page builders, deploying a dummy page, then seeing how it fares in https://pagespeed.web.dev/ you coudl try out a few pages made with different page builders in this manner to see how pages perform when made with different page builders.
While this does sound a little laborious, it would at least put you in the position of knowing that you’re using something that will suit you later on, or reduce the amount of work you have to do later on.
In conclusion.
- WordPress has it’s own built in page builder, but this can be a little tricky to use, takes a bit of getting used to, and doesn’t support drag and drop.
- There are some types of page builders that enhance WordPress own built in page editor.
- There are other page builders that completely replace WordPress’ built in editor, but some of these can add a lot of code that isn’t needed to your site’s pages and make them perform poorly.
- If you use a page builder that has performance implications, you’ll need to do more work when optimising your site.
- You can test out site builders and use them to make pages and see how well they perform in analysis tools such as https://pagespeed.web.dev/ to test drive these types of page builder plugins.
- If you decide to change web builders after making a lot of site content, this can involve quite a lot of work.
