A Simple Page Layout With GenerateBlocks

About 10 months ago I wrote a blog post, “A Simple Page Layout with the WordPress Block Editor”, as an exercise to compare using just the block editor versus using the block editor plus one of a couple of plugins; Stackable and Kadence Blocks. I concluded that:

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.

Since then, the blocks plugins I have used most often have been Kadence Blocks and Ultimate Addons for Gutenberg.

Now that GenerateBlocks has been released by Tom Usborne, the developer of my favourite theme, GeneratePress, I wanted to have another go at building the same layout with this new plugin for the WordPress block editor. Note that GenerateBlocks can be used with any theme, not just with GeneratePress, although there are some features that are designed to work hand in hand with the GeneratePress theme.

GenerateBlocks is described as “A small collection of lightweight WordPress blocks that can accomplish nearly anything.” It is not supposed to include a block for every possible purpose, but can be combined with core WordPress blocks and ones from other plugins.

The plugin has just four basic blocks: Container, Grid, Headline and Buttons (although strictly speaking, there is a Buttons container block surrounding one or more Button blocks). These blocks have more or less the same controls for Typography, Spacing, Colors, Gradients, Backgrounds and SVG Icons.

Although I’ve been impressed by Kadence Blocks and I’m not actively looking for something to replace it, I’ve seen from posts in the GeneratePress Facebook group how much time and care Tom has put into developing and thoroughly testing GenerateBlocks. I know that he has a reputation for lightweight, dependable, well-built products so I would expect GenerateBlocks to be a good, solid choice for building pages with the WordPress block editor.

GenerateBlocks is available at https://wordpress.org/plugins/generateblocks/ and the plugin’s documentation is here: https://docs.generateblocks.com/

The screen print below shows GenerateBlocks inside the WordPress block editor. Visit https://standard.janeb.co.uk/generateblocks-demo/ to see the results. Note that I gave the various Container blocks, and Paragraph blocks, background colours to make them easier to see.


Page Layout Exercise

As before, for this exercise, I built a layout composed of:

  • 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.

This article is not specifically aimed at users of the GeneratePress theme, but that is what I chose to use, along with the GeneratePress Premium plugin.

Page Attributes

I added a new page but before starting to build the layout, I decided to disable the content title, which is a feature available in GeneratePress Premium.

For this exercise, I want some of the blocks to stretch across the entire width of the page. Tom Usborne recommends setting the entire page to full width and then setting the width of individual container blocks within that page.

For the GeneratePress theme, it’s possible to set the entire page to full width by selecting the Full Width option under “Layout” and “Page Builder Container”.

However, GenerateBlocks provides a shortcut that does the same thing.

If “Make page full-width” is switched on for any block on the page, then this setting is applied to the page as a whole.

The width of individual Container blocks can be set to either Full Width or Contained within this full width page content container.

The switch will not be displayed if you are not using the GeneratePress theme.

If you really don’t want to set the entire page to full width, but just want one Container block to be full width, then it is possible to leave “Make page full-width” switched off and use the full-width icon on the Container block’s toolbar.

For this exercise, it seemed best to use the blocks as their developer intended and go with a full width page, so I did not make use of the width icons on the blocks’ toolbars.

Hero Image

I installed and activated the GenerateBlocks plugin and added a Container block to my new page.

I’d already made the page full-width, as described above. I made my new Container block full-width too, but chose “Contained Width” for its Inner Container.

The Container block has a lot of different settings, which can be set independently for desktop, tablet and mobile. I gave the block some top and bottom padding and added a background image.

Comparing this block to the Kadence Row Layout block, I saw that most options are similar for both plugins.

Kadence offers a few extra features that are not currently available for GenerateBlocks i.e. video and slider backgrounds, shaped dividers, and toggle switches for hiding or showing the block on desktop / tablet / mobile screens and for logged in / logged out users.

However, GenerateBlocks containers have a couple of options not offered by Kadence Row Layouts i.e. borders, google fonts and background repeat (which you could use to add a seamless background).

It was a similar story when I moved on to the Headline and Buttons blocks (see below). GenerateBlocks and Kadence Blocks provide a similar level of control with minor differences here and there.

For example, GenerateBlocks has an SVG icon component for both headlines and buttons, whereas Kadence has icons for its Advanced Button block but not for the Advanced Heading block. In several areas, one or other of the plugins has a few extra options, but there isn’t a lot to choose between them.

The next step was to add a GenerateBlocks Headline block. The standard core WordPress Heading block would have been sufficient really, but I wanted to investigate the GenerateBlocks version. This gave me a great deal of control over the font, size, colour etc. and I could even include an icon.

I used the GenerateBlocks Buttons block to add a button under my headline. The Buttons block is a container for one, or more, Button blocks. As with the Headline block, the Button block has Typography, Spacing, Colors, Background Gradient and Icon components.

I used the Spacing and Colors components to change the appearance of the Button block.

Then I went up one level to the Buttons block that contained it to move the button to the centre.

I increased the padding of the Container block slightly, to show more of the background image, and then my hero section was complete.


Rows of Images and Buttons

I used GenerateBlocks’ Grid block for this section of the page. I’d recommend taking a look at the documentation for this block, https://docs.generateblocks.com/article/grid-overview/ , as it’s a powerful and useful block that works a bit differently from the columns that you might have used before. The documentation says:

The Grid Block allows you to build advanced columns in your content. It uses flexbox, and even allows you to wrap the columns on multiple lines, meaning you can keep adding columns forever to build multi-line grids. When you add a Grid Block, the Container Block is automatically inserted as your grid column. This gives you all of the power behind our Container Block directly inside your Grid.

I started by adding a Container block and setting it to “Contained” rather than “Full Width”, then I added a Grid block with a single grid item within that. This was because I knew that I wanted to end up with six boxes with a similar layout. If I started with a single box then I could get that looking just right before duplicating it five times so that all my boxes matched.

I added an Image block within the grid item and linked the image to one of the other pages of the website.

I put a GenerateBlocks Headline block below that, set to H3 and another one after that set to paragraph. I could have used core WordPress Heading and Paragraph blocks, but the GenerateBlocks versions allowed me to play around with the padding and margins until I was happy with them. I added a GenerateBlocks Button block and gave the grid item a border.

I set the Horizontal Alignment for the grid item to “Center” and input values of 24px and 36px for the Horizontal and Vertical Gaps respectively.

I duplicated the Container within my Grid, set the width of it, and its clone, to 33.33% and duplicated again until I had six boxes. Then it was just a case of editing the images and text in each box.

I was able to specify that the grid items should each take up 33.33% of the width on a Desktop, but should be 50% on a tablet and 100% on a phone.

Note that it is possible to mix and match blocks plugins. Having created my layout with GenerateBlocks Container and Grid blocks, as an alternative to adding Image, Headline and Button blocks within the grid items, I could have used, for example, Kadence Info Box Blocks.


Full Width Photo and Text

I added a Container Block set to Full Width, but with the Inner Container set to Contained, and gave it a Background image, with a Size setting of “cover” and an Attachment setting of “Fixed”.

I gave the Container block a background colour, and chose an Image Opacity setting of 0.4. In order to use Image Opacity, I had to set the Selector to “Pseudo Element” (If I set it to “Element” instead, then a warning message was displayed).

Within the Container block, I used a GenerateBlocks Headline block and a standard WordPress Paragraph block, then adjusted the padding of the Container block once I could see how it looked.


The Final Result

After seeing the discussions in the Facebook group, I was expecting to be impressed by GenerateBlocks and I wasn’t disappointed. I felt that it was beautifully designed, simple and well organised. The Grid block is particuarly interesting as it is not just an improved version of the standard columns block.

I’d be happy to build the main pages of a website with GenerateBlocks but would think twice about using it for all my blog posts, just in case I ever decided to disable it. That might never happen, but it wouldn’t be much fun to have to fix dozens of posts if it did.

I can see myself using GenerateBlocks in future, alongside other blocks plugins.

My Approach to Using Block Plugins

  • Because I believe in keeping things simple, I’ll use WordPress core blocks where they are sufficient for my needs, or to layout the structure of blog posts.
  • I’ll use GenerateBlocks (available as a free plugin from WordPress.org) to layout the structure of pages where I want more fine control of spacing, colour, etc. or where I want to add SVG icons.
  • I’ll use Kadence Blocks (which has both free and paid plugins) if I want a block with extra features, such as shaped dividers (although these are coming to GenerateBlocks 1.2.0), tabs or accordions. Personally, I’m happy to mix Kadence, or other, blocks with GenerateBlocks.
  • If I need a specific block, then I’ll happily install a plugin from WordPress.org but will check its reviews and consider the reputation of the developer.

More Tutorials

3 thoughts on “A Simple Page Layout With GenerateBlocks”

  1. Dear Jane, How very sensible and direct your tutorials are. I have been struggling for weeks trying to build a website that is Shaker simple. I have very clear ideas about what I want not helped by the high speed, out of focus, Utubes of out of date WordPress.
    I can work through your tutorials at my own pace. No one seems to cater for old photographers of 75 with slightly poor eyesight.
    I’m having a lot of trouble with galleries. The Kadence ones don’t seem to work very well. I need three different, but simple, galleries to go on my website.
    Thanks for your help and the trouble you have taken with your blog.
    David.

    Reply
  2. Beautiful page you made and thanks for providing such a helpful instruction for using GeneratePress. I have printed out your article because I really need to do this step by step and make my own comments on the different sections. If you do not hear more from me, all went well:). Thanks for sharing!

    Reply

Leave a Reply to Yvette Cancel reply