UPDATE: This article was written before the release of the WordPress block editor (a.k.a. Gutenberg). I have written a new blog post using the block editor.
Page Builders have become so popular that sometimes new WordPress users get the impression that they are expected to use one. My own view is that it’s best to keep things simple and use a page builder only if you have a need for it.
However, there’s no doubt that, compared to “drag and drop” website builders, WordPress can be frustrating when it comes to laying out a page. If you’d like to read a thorough review of many of the available page builder plugins by a respected WordPress expert, then I recommend WordPress Page builder plugins: a critical review by Pippin Williamson. My own posts aren’t as comprehensive as Pippin’s article, but I wanted to experiment with some of the options myself.
This first post looks at how you might avoid using a page builder to lay out a website page. I’ll be following this up with a second post looking at how page builders can make this process easier, and comparing some of the options.
The Test
For the sake of this experiment, I wanted to set up a test website with a home page laid out as follows:
- A full width image at the top of the page, with some writing and a button on top of the image.
- Two rows of 3 images each linking to a different page
- A section of text with an image as its background.
Without a Page Builder or Shortcodes
My first attempt consisted of just adding the various elements of the design into the WordPress editor. I gave the images captions, linked them to the various pages and made them left aligned.
Here’s the result – as you can see, it needs some work.
The photograph at the top is not full width and there isn’t an easy way to put the text and link on top of it and turn the link into a button.
At first glance, it appears that the grid of two rows of three photos has worked well. But that’s only because I have made the width of each photo just the right size to fit three of them across my screen. On a smaller screen, I get only two columns, with the text squashed in at the right hand side.
If you are comfortable with writing computer code, then it should be possible to sort out all these issues. But it could be daunting and quite time consuming even if you are confident that you know how to achieve it.
Here are some things I tried to get at least some way towards my required layout…
Firstly, I removed the large image from the editor and switched to the text editor.
I put the text and link within a div with a class of jb-homepage-banner, gave the link a class of button, and made two more divs around other areas of the page, which I gave classes of jb-3-columns and jb-homepage-background-2. I also added a line of code to clear the left float so that the text didn’t float up next to the photos.
Next, I added some code to the custom CSS area to put the background images behind the divs I’d created, and make the photos fit 3 to a row.
Here’s the result – this isn’t a complete solution but should give you an idea of what’s involved in trying to design a layout without the use of plugins.
Given what a palavar this was, it’s easy to see why people look for an easier solution.
Using a Shortcodes Plugin
Shortcodes are commands, enclosed in square brackets, that run pieces of computer code. They can look confusing but usually they are automatically generated for you, so you don’t need to remember how to write them.
If I was merely trying to put content into columns, I’d probably use the Lightweight Grid Columns plugin by Tom Usborne, but to add some extra functions, I’m going to go with Shortcodes by Angie Makes. Installing this plugin adds an extra icon to the WordPress editor, as shown below.
Once I’ve added all the shortcodes and inserted some text, the editor looks like this:
I had to give up on making the bottom section full width as it didn’t seem to be working properly.
I still need to add some CSS to add the background images.
The result wasn’t bad, although on smaller screens the image links were cropped. On a full sized screen, the output is pretty close to what I was aiming for.
I’ve used this shortcodes plugin before, but not these particular shortcodes. It turned out to be a bit more of a struggle than I was expecting so I’m not sure that building a whole page in this way is a great idea. The first full width section worked well, but I just couldn’t seem to make the background of the final section appear as full width and had to give up on it. Similarly, adding the first row of image links (that I was using to display services) went smoothly, but when I added the second row it didn’t show up on the page. Eventually, I realised that I needed to put a blank line between the two shortcodes, and then it worked.
The whole process was a little frustrating, rather than a quick and easy way to build a page. However, if you just wanted to use a shortcode in one area, then I think this plugin could be a good choice.
Using a Theme with Built in Features
My personal preference is to start with a fairly plain, but flexible, theme as a solid basis for building my site and then customise it to look just as I want it to. My favourite theme is GeneratePress together with its premium add-ons plugin. Unless otherwise stated, that’s the theme I’ve used for this exercise.
But if you are a newcomer to WordPress and you don’t really have a strong idea about how your site should look then you might feel that you’d rather start with something a bit more “ready made”.
This can work fine, although there are a few things to consider before going down this route:
- The WordPress.org theme directory currently has over 5,000 free themes in it so trying to find the perfect one is totally overwhelming.
- If you change your mind and want to add something new to your homepage, but have chosen a theme with a rigid homepage template then you could be frustrated.
- If you decide to swap to a different theme, you could lose your content, if it relies heavily on features specific to your original theme.
- Because different themes handle their features in different ways it might take some time to understand how the particular theme you’ve chosen works.
That’s not to say that you can’t get a perfectly acceptable, basic website up and running quickly and easily using one of the free themes from the directory.
Here’s attempt at my test layout using the free Accelerate theme from ThemeGrill.
This theme has an interesting Business template which turns a page into a large widget area.
Themegrill have also included a few special widgets of their own, including the TG Call To Action widget (which includes a title and built in button) and the TG Image Services widget. But you can also use standard WordPress widgets such as the one for adding custom HTML.
In order to display background images behind the call to action and the “more information” area, I’ve still had to add some custom CSS code, but not as much as before.
Here’s the result.
My main problem when building this version of the site, was choosing the theme in the first place. I wasted a lot of time looking through the directory for the perfect theme. Eventually, I settled for one which did not allow me to make my top image full width. However, once I understood how the Business template worked, it was easy to add the widgets to it and the Image Services widget worked well.
GeneratePress Sections
The premium add-ons plugin for GeneratePress includes a feature which makes it easy to add rows to a page or post. Sections are almost a simplified version of a page builder.
If I click on the pencil icon, I can edit the contents of a section using the familiar WordPress editor.
As usual, I can switch from the visual editor (shown above) to the text editor, to use the method I described previously to give my link a class of button.
The settings of each section control its appearance, including the background image (which could even have a parallax effect), padding and text colour. There’s also a box for a Custom ID, which is handy if you are trying to make a one page site.
To add each row of three photos for the services section, I used the Lightweight Grid Columns plugin, then added the images in between the start and end brackets of each shortcode that the plugin generated.
The final result looks like this:
An alternative to the Lightweight Grid Columns plugin would be the Gridable plugin.
Conclusion
Of the various solutions discussed in this post, my personal favourite is the last one – sections within the GeneratePress theme. This does depend on you having purchased the premium add-ons plugin though, and cannot be used with other themes.
The Lightweight Grid Columns plugin can be used with any theme.
I’m planning to write a follow up post looking at how page builder plugins could be used instead. [Update: I’ve now published my follow up post: “A Look at WordPress Page Builders“.]
Excellent summary.