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 WordPress.org) 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 WordPress.org 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 chose to build this from scratch, although I could have given myself a head start by copying and pasting one of the hero patterns from the GenerateBlocks Pattern Library. Some of these are free and therefore available to use without buying GenerateBlocks Pro.

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

Note: I think what I describe below may be overcomplicated so I’m probably going to re-write this section. It’s frustrating because I can achieve exactly what I want by using GenerateBlocks Pro (i.e. clickable coloured boxes containing icons and text) – but I’m aiming to show what can be done with free plugins here. I may describe a few different compromise options. I can get a clickable box by incorporating a free Kadence Section block, but it feels a bit messy. It’s likely that I’m going to go with GenerateBlocks Button blocks, with a line of CSS to put the icon above the text.

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 but I chose to stick with GenerateBlocks in this instance. As with the hero image, it would have been possible to copy, paste and adapt one of the GenerateBlocks Info Box Patterns.

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 https://generatepress.com/forums/topic/entire-block-clickable/  **/

.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);}

Quote

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;
}

Note: I think this may be overcomplicated, so I might change it.

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.

Testimonials

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

Yet again, there are GenerateBlocks Patterns that I could have copied and pasted.

It wouldn’t have been difficult to create something with GenerateBlocks 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 GenerateBlocks Query Loop block to display the three most recent of them. 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.

I added some CSS code to prevent the post titles from being underlined.

h3 a {text-decoration:none;}

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

    Reply

Leave a comment