Building a Homepage with GenerateBlocks

This article sits alongside another one, “Building My “Standard” Demo Site“, as I thought it was worth going into more detail about the homepage of my Standard demo website.

The Standard website uses the GeneratePress theme and the GeneratePress Premium plugin, but I’ve built the homepage using just core WordPress blocks and the free versions of the GenerateBlocks and Kadence Blocks plugins.

I wanted to use GenerateBlocks because of the amount of control it gives. With GB I can specify exact values for the padding and margins of each block, and can vary these amounts for desktop, tablet and mobile devices. I also really like the way that the GenerateBlocks Grid Block works.

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 to lay out the structure of pages where I want more fine control of spacing, colour, etc. or where I want to add SVG icons or shaped dividers.
  • I’ll use Kadence Blocks (which has both free and paid plugins) if I want a block with extra features, such as tabs, accordions or info boxes. 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 but will check its reviews and consider the reputation of the developer.

A Note About The Block Settings I Have Used

I’m including a few screen prints in this article to give you an idea of how I have built the Standard website. However, because I am constantly revising the site and tweaking values, the exact settings (pixel values, hex colour codes etc.) may not be the ones in use when you view it. WordPress itself is also frequently updated, so your screen may look a little different from the examples shown here.

The Style Guide page of Standard will, at least, show you the colours and fonts I have settled on.

Rather than going into minute detail about every individual setting, I’ve included links to the offical documentation within my description of each area of the homepage. I do suggest that you click on these links as they will give you a good grounding in how each block works.

Hero Image / Banner

Most pages of the Standard website use GeneratePress Elements, a feature of GP Premium, to show a header image. However, on the homepage I have used blocks to create an area with a background image, heading and button.

I could have used a core WordPress Cover block here, but I decided to go with a GenerateBlocks Container block so that I could specify its height and padding on different screen sizes. I’ve given this block a minimum height, some padding and a background image.

This Container block has another Container block inside it, and I’ve given this inner Container a white background with slightly less than full opacity, so that the background image of the outer Container shows through.

I’ve put a GenerateBlocks Headline block within the smaller, white Container. A WordPress core Heading block would have been adequate really, but the GenerateBlocks version gave me a bit more control over spacing etc.

Below this I’ve used a core Buttons block.

It’s important to consider how the design looks on different sized screens. Ideally, you’d check on actual mobile phones etc. but this isn’t always possible and there are plenty of tools you can use instead.

Here, Firefox’s Responsive Design Mode (which can be found under “More Tools”) showed me that I needed to adjust the font size and/or spacing for mobile devices, so as to fit the whole of the name “GeneratePress” on one line.

Row of Boxes

I added another full width GB Container block and gave this a repeating background pattern. Within this Container I added a GenerateBlocks Grid block.

There are various ways that I could have put links into the cells of the Grid block.

I could have inserted an image block into each of the Container blocks inside the Grid and then linked the images to the relevant pages.

I could have used a free Kadence Info block or a GenerateBlocks Pro Hover Box template.

I could have used GenerateBlocks Button blocks to show either just an icon, or an icon side by side with text.

But I decided to use GenerateBlocks Headline blocks so that I could have an icon above some text.

GenerateBlocks enables you to use your own svg icons as well as using the ones provided by the plugin, so I obtained some icons from Iconify. The GB YouTube channel has a useful video called “GenerateBlocks – Using Custom SVG Icons“.

I made the headline text into links, but I wanted the whole of each coloured box link to a page. This can be done with GenerateBlocks Pro, but as I was using the free plugin, I had to give the containers a class of clickable-container and use some CSS code that I found in the GP support forurm.

I added a bit of extra CSS to make the boxes appear brighter when hovered over.

/** make GenerateBlocks Container Blocks clickable if they contain a link and have this class  - first two lines of code taken from  **/

.gb-container.clickable-container .gb-inside-container {
    position: relative;

.gb-container.clickable-container a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;

.gb-container.clickable-container a {text-decoration: none;}

.gb-container.clickable-container:hover {filter: saturate(1.3);}


I added yet another Container block, this time with a coloured background.

I could have used a Headline block, but decided to go with a Quote block. I have added some CSS to change the appearance of quote blocks throughout the website – removing the border that GeneratePress usually adds, and inserting a large quotation mark.

/** block quotes **/

blockquote {border:none; font-family: Georgia, serif;}

blockquote::before {
content: "\201C";
display: block;
font-size: 100px;
color: var(--main);	
	top: -60px;
	left: -48px;
position: relative;
height: 0;

Full Width Section with Images and Text

This area of the homepage uses a method I have already described in a blog post on the Standard website titled “GenerateBlocks Split Content Demo“. The two large photos are background images and I’ve used a GenerateBlocks Buttons block so that I can control the margins around it.


I added another container with a coloured background to hold some testimonials.

If I’d been using GenerateBlocks Pro then I could have taken advantage of their professionally designed testimonal templates. Alternatively, since I have a GeneratePress Premium license, I could have turned to the GeneratePress Site Library for inspiration and copied a layout from there.

It wouldn’t have been difficult to create something along those lines myself, but I decided to use a free Kadence Testimonial block instead. I added some CSS to improve the appearance on small screens.

/** kadence testimonial **/

h4.kt-testimonial-title {word-wrap: normal;}

These are displayed within a Container with the same seamless background image I’d used further up the page.

I’ve given some of my blog posts a tag of “featured” and used a Query Loop block to display three of these posts with a grid view. See my article “The Latest Posts Block, Query Loop Block & Alternatives” for more details on how to do this, and some other methods I could have used. (Note that the screen prints below show 4 columns and 4 items per page, but I found this looked too squashed, and changed the values from 4 to 3.)

NOTE: In December 2021 it was announced that WP Show Posts will be merging with GenerateBlocks within a few months – see the blog post “We’ve made the decision to merge WP Show Posts with GenerateBlocks!” It’s likely that I will switch to using GenerateBlocks instead of a Query Loop block when this happens.

I’d inserted a GenerateBlocks Container block into the Post Template block merely to add a background colour and some padding.

I added some CSS code to the customiser to remove the margin at the side of the Query Loop.

/** query loop styling **/

.wp-block-post-template {margin-left: 0px;}

More Tutorials

3 thoughts on “Building a Homepage with GenerateBlocks”

  1. Hi Jane,
    I must remember to visit your website more regularly :)
    Some great resources…

    After having a brief look at this walk through, I wondered if there is a demo of this page ?
    Best regards, Dave


Leave a comment