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.

For a brief introduction to building with GenerateBlocks, I recommend the video “GeneratePress – How to Replicate #1: GP Premium Modules Section” on the GP YouTube channel.

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

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 holds another Container block that I’ve given 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.

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 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: #D42254;	
	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.

Testimonials

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

Featured Posts

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 the free WP Show Posts plugin to create a list of just these posts.

This produced a shortcode that I could include on my page with a Shortcode block.

The pro version of the plugin has extra options for customising the appearance of the list of posts, but I wanted to use the free version here, so I’ve added some CSS code instead.

/** WP Show Posts styling **/

.wp-show-posts-inner {background-color: #FAE1E8; text-align: center;   padding: 24px;}

More Tutorials

Leave a comment