A Simple Page Layout with the WordPress Block Editor

Around 18 months ago, I wrote a blog post, Alternatives to WordPress Page Builders, to see how easy it was to build a page with a specific layout.

At the start of that post I said:

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.

I found that it was possible, but quite tricky, to get the exact page layout that I was aiming for. I followed this with another post, A Look at WordPress Page Builders, at the end of which I concluded:

If you are new to WordPress, don’t think that you have to use a page builder. Learn what can be done just using the WordPress editor first, and add a page builder plugin only if you have a need for one. Don’t use it on every page and post just for the sake of it… Having said all that, during my research for this post, I began to see the value of page builders, both for speeding up development and for making a site look more polished.

Now that the new WordPress block editor (a.k.a. Gutenberg) has been released, I want to repeat this exercise to see whether it’s now easier to set out a page, using just the block editor without a separate page builder plugin.

I’m going to try to build exactly the same layout as in my previous blog posts, i.e.

• A full width image at the top of the page, with a heading 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.

I’m going to look at how easily this can be accomplished using just the block editor, but also with a couple of the third party block plugins that I mentioned in my recent blog post Adding a Row of Image Links with the WordPress Block Editor. That post included a very brief look at seven block plugins and I’d recommend that you consider them all. But I’m going to just use the Stackable and Kadence Blocks plugins for this exercise.

UPDATE: Also see my follow-up post: “A Simple Page Layout With GenerateBlocks” which describes how I used another new plugin to carry out the same exercise.

Method One: Using Standard WordPress Blocks

As I’m a big fan of the GeneratePress theme, my immediate reaction would be to use a GeneratePress Header Element for the full width image at the top of the page. However, I want this exercise to be applicable to other themes, so I’m going to discount that option.

Hero Image – Using the WordPress Cover Block

One of the standard blocks provided by the block editor is a Cover block. Some themes allow you to specify that certain blocks, including this Cover block, should be displayed at full width.

When I’d added the Cover block, it had included an empty Paragraph block which I transformed into a Heading block.

It’s possible to put additional Paragraph, Heading and Button blocks within Cover blocks, so I was able to add a button and change its style.

Then I put the code below into the Additional CSS area of the Customiser:

h2.jb-cover-heading {color: #f1e7d7; margin: 0 auto;}

UPDATE: The Heading Block now has built in colour options.

Linked Images – Using WordPress Columns and Image Blocks

I covered this pretty thoroughly in my blog post Adding a Row of Image Links with the WordPress Block Editor, so I won’t go into details here. I simply added two Column blocks, each containing three columns, and put an Image block in each column.

UPDATE: Links are now added to images more directly, by clicking on the image and choosing the chain link icon that is displayed alongside the three vertical dots (see below).

Full Width Photo and Text – Using WordPress Cover Block

This was almost the same as the hero image, except that this time I wanted a heading and a paragraph of text, but no button. Paragraph blocks do have a few more built-in style options than Heading blocks.

Result – Using Standard WordPress Blocks

I managed to produce a page with the layout that I wanted, but I had to use CSS code to style the heading on the hero image. Some blocks (such as the Button block) do have a few styling options, but I would have needed to use CSS if I wanted to change the default appearance of the Cover blocks (e.g. changing the height or padding).

I did feel it was easier than using the old classic WordPress editor.

---

Method Two: Using the Stackable Plugin

Stackable is a free plugin (although there is also a premium version) that, as I write this in July 2019, adds an additional 23 blocks to the editor. The Stackable website includes some useful documentation.

Hero Image – Using the Stackable Header Block

It appears that either the Stackable Header Block or Call to Action Block could be used for this.

I added a Header Block and made it full width. It was quite similar to the standard Cover block I’d used before – except that this time a centred heading, a description and a button were already included and there were more options to change the appearance without adding my own CSS code. For example, I could choose the colour of the heading text, I could have made the header full height, and I could have automatically given the area a colour gradient as its background.

Images and Buttons – Using the Stackable Feature Grid Block

I used two Feature Grid blocks, each containing 3 columns. Spaces for the images, titles, descriptions and links were already included and there were options for styling the various items, so the blocks were quick and easy to add. (Note: I would have liked the whole of each box to have linked to the relevant page, rather than just having a button, but I couldn’t immediately see a way to do this).

Full Width Photo and Text – Using the Stackable Container Block

For this particular exercise, the only real advantage of using the Stackable Container block, rather than the standard Cover block, was that I was able to restrict the width of the text inside the container. But since the Cover block can hold only Headings, Paragraphs and Buttons, the Container block could turn out to be useful. (Note that a Group block was added to WordPress in version 5.3, and this is able to hold other blocks so may be similar to Stackable’s Container block.)

Decorative Effect – Using the Stackable Separator Block

I decided to have a play with the Separator block to see if I could recreate the effect on Stackable’s demo page. This involved quite a bit of experimentation and I’m not sure my method was the best one but, for what it’s worth, here’s what I did.

• I increased the height of the Container block to “Tall”.
• I added a Stackable Separator Block before the Container block.
• I gave this a Layout of “Wave 1” and a height of 158
• I flipped it vertically
• I gave it a negative margin of 135
• I made the Separator colour white and gave it a clear background colour.

UPDATE: It seems that Stackable version 2 will introduce some new features, including top and bottom separators for blocks.

Result – Using the Stackable Plugin

I didn’t feel that it was necessary to use a plugin to achieve the layout I wanted – my first attempt had been acceptable, but Stackable did speed up the process. The plugin makes it easy to add decorative elements such as shadows, borders, bespoke colours and separators, without having to add your own CSS code .

---

Method Three: Using the Kadence Blocks Plugin

Kadence Blocks is another free plugin, with a Pro version that adds some extra blocks. I’ve used the free version of the plugin for this exercise. As with Stackable, the Kadence Blocks website has a documentation section.

Hero Image – Using a Kadence Blocks Prebuilt Layout

While it’s perfectly possible to use the blocks to build your own layout, to give you a head start, Kadence includes some free prebuilt layouts.

I chose one of the Kadence Blocks prebuilt Header Layouts to speed up the process of building my page.

I was able to replace the image with my own photo, and there were various options to control the appearance of the background.

The prebuilt layout came ready loaded with a paragraph block preceded by a Kadence Blocks Advanced Heading block and followed by a Kadence Advanced Buttons block. Unsurprisingly, the two “advanced” blocks came with options for changing their appearance.

There were also controls that could be applied to the whole Kadence Layout block, so I was able to use a negative margin to move it up the page.

Images and Buttons – Using a Kadence Blocks Prebuilt Layout

Another of the Prebuilt layouts seemed to be a good shortcut for adding a row of 3 images with buttons linking to other pages.

I changed the default images, text and button links, duplicated the layout block, and repeated the process to get my two rows of 3 images.

Full Width Photo and Text – Using a Kadence Row Block

For the final section of my page, I used a simple Kadence Row block rather than going with a prebuilt layout.

Compared with the core WordPress cover block, this gave me more options for styling the section – including the ability to set the maximum width of the content. I could also have included any other block types within the row.

Decorative Row Divider

When I’d tried out the Stackable plugin, I’d managed to get a wavy separator above the final section of my page, but it was quite tricky to achieve this effect. It turned out to be much more straightforward with Kadence, as the row itself had bottom and top divider settings. ( UPDATE: Stackable version 2 will have top and bottom separators for blocks.)

Result – Using the Kadence Blocks Plugin

The plugin gave me lots of control over the appearance of the blocks, and the prebuilt layouts were a time saver.

Conclusion

The Stackable and Kadence Blocks plugins both made building my page a bit quicker and allowed me to make the site look more interesting without using code, but it was pretty straightforward to build the page using just standard WordPress blocks.

However, I had chosen a very simple layout for this exercise. Some of the plugins’ other other blocks such as the Accordion, Pricing Box, Testimonial and Expand blocks, would perhaps have given a better idea of the power of these plugins.

I originally wrote this article before WordPress version 5.3 which added some extra features that make it even easier to build pages without a plugin e.g. Group blocks and Column blocks with adjustable widths. It’s likely that it’s still going to be easier to fine tune the appearance of the site with the aid of a plugin though – especially if you are not too confident with adding CSS code.

Other blocks plugins that are worth a look include, among many others, Ultimate Addons for Gutenberg and Atomic Blocks. I’d suggest giving several a try to see for yourself which suits you best.

UPDATE: Also see my follow-up post: “A Simple Page Layout With GenerateBlocks” which describes how I used yet another plugin to carry out the same exercise.

Something to Consider

I may be being overcautious, but I would be inclined not to use a blocks plugin to construct blog posts. Pages are a different matter, but I’d stick to using the default column and group blocks when writing posts. If you use a plugin such as Kadence or Stackable, but then in the future decide you want to disable it, then I feel it would not be too onerous to fix any issues this caused on the main pages of your website (e.g. Home, About etc.) However, having to rebuild dozens of blog posts would be a pain.

---

More Tutorials

Building a Version of My Standard Site Using the Ollie Block Theme

Local Fonts with GeneratePress

The GeneratePress Loop Template Element

The Latest Posts Block, Query Loop Block & Alternatives

Building a Homepage with GenerateBlocks

Building My “Standard” Demo Site

Experimenting with WordPress Image Sizes

A Simple Page Layout With GenerateBlocks

Adding and Moving WordPress Blocks