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.

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

Row of Boxes

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

As with the hero image, it would have been possible to copy, paste and adapt one of the GenerateBlocks Info Box Patterns.

However, I wanted to build the layout myself, so I added a GenerateBlocks Grid block within the Container block.

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

But for this exercise, I wanted the boxes to contain both icons and text.

GenerateBlocks enables you to use your own svg icons, in both Headline and Button blocks, as well as using the ones provided by the plugin. The GB YouTube channel has a useful video called “GenerateBlocks – Using Custom SVG Icons“.

I used GenerateBlocks Button blocks and obtained some icons from Iconify. Other sources of icons include Phospor Icons and Atlas Icons.

In the Layout panel for each Button block, I set the display to “Flex” with a direction of “Column” which put the icon above the text.

If I had needed png or jpg images in my boxes, rather than icons, I could have used the free Kadence Info blocks.

Or, if I wanted to stick with GenerateBlocks and make the whole of the Container blocks clickable, this could be done with GenerateBlocks Pro.

Quote

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

My original attempt at this used a Quote block with some CSS code to change the appearance of quote blocks throughout the website.

But I felt this was overcomplicated, so I switched to using a GenerateBlocks Headline block, with another icon from Iconify.

Full Width Section with Images and Text

The challenge here was that I wanted the images to extend as far as the edge of the website, but the edge of the text to line up with other sections with inner containers that are 1200px wide.

There may well be a better method using flex containers, but I decided to use GenerateBlocks Grid blocks for this layout. In each of the two sections I added a background image to either the right or left hand Container within the Grid block.

I created a couple of CSS classes to control the amount of padding applied to the other Container blocks.

/** This padding will make the contents of a full width section line up with inner containers that are 1200px wide **/
/** Note that 36px is the content padding set by the Customiser **/
/** these classes should be applied to a grid container that is half width, within the full width section, with a horizontal grid gap of 0 **/

.jb-padding-half-left {
	padding-left :36px;
}
.jb-padding-half-right {
	padding-right :36px;
}
@media (min-width: 1272px) {
	.jb-padding-half-left {
		padding-left: calc(36px + 100%  - 600px);
	}
	.jb-padding-half-right {
		padding-right: calc(36px + 100%  - 600px);
	}
}

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

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

---