In the blogging world, standing out from the crowd can be challenging. Luckily, WordPress and the Gutenberg editor provide many options for customizing your blog’s layout. And if you want even more versatility, the GenerateBlocks plugin is a good option.
What is GenerateBlocks?
GenerateBlocks is a powerful plugin developed by Tom Usborne, the author of GeneratePress, a popular WordPress theme. GenerateBlocks is designed to work seamlessly with the GeneratePress theme, but it is also built to work with any other WordPress theme. It offers a range of customization options for each element, allowing you to adjust colors, typography, and other design aspects to fit your brand.
GenerateBlocks also offers a Query block that allows you to pull posts and pages from your site and display them in various ways. This feature is especially useful for creating custom blog layouts.
In this tutorial, we will use GenerateBlocks to create different blog layouts inspired by the Adventure.com website.
Note: This tutorial focuses on replicating the blog layouts inspired by www.adventure.com and does not cover creating header, footer, or call-to-action sections. The focus of this guide is to provide a comprehensive guide on creating different types of blog layouts using GenerateBlocks and the Gutenberg editor.
Before we dive into the different blog layout designs, you’ll need to install and activate the GenerateBlocks plugin. Once you’ve done that, you’ll see the GenerateBlocks option in the WordPress dashboard.
There are currently six blocks available with this plugin. If you are unsure about how to use any of them, you can click the documentation button for more information or simply follow along with this guide.
Now that we have our plugin installed and ready to go, let’s start by creating the first section of our blog.
In this section, we’ll be creating a post slider, but since we don’t have a slider block available, we’ll be making it a single blog grid with a background image and text overlay instead. Here’s how you can create it.
Add the GenerateBlocks Query block in the Gutenberg editor. When you add the block, you have the option to choose a pre-made layout or start with a blank. For this section, we’ll start with a blank layout.
The Query block comes with a Grid and Post Template block, and inside the Post Template, you can create the layout you want to display.
First, we will set the number of posts to display in this section. To do this, select the Query block, and in the settings, set the Posts Per Page to 1. This will display only one post in the grid format, which will serve as our post slider.
Then we’ll add a featured image as the background and a text overlay for this section. To do this, go to the Settings of the Post Template block and scroll down to the Dynamic Data section. Here, we’ll enable Dynamic Data and select the Featured Image as the source for the background image.
Next, add a Headline block from GenerateBlocks inside the Post Template. Once you’ve added the block, go to the block setting and set the content source for the Headline to the post title.
Then, add a Container block to hold the other elements in place.
Inside the Container block, add a Row block from the core Gutenberg editor to align the items. Inside the Row block, Add an Image block and set its dynamic data to the author image. Also, add a headline block and set its content source to the author’s name. Finally, add another Headline block for the post date and set its content source to the post date.
Next, Set the typography and colors for the text using the typography and color options available in the GenerateBlocks. The typography options allow you to set the font family, size, weight, and style for the text.
while the color options allow you to set the color for the text and background, with these options, you can easily customize the look and feel of your blog layout.
Additionally, you can make further adjustments to the layout using the spacing and alignment options.
And with that, we’ve completed our first layout design.
For this layout, we’ll create a section that features four news articles in a grid format. To get started, we’ll add a Container block from GenerateBlocks. In the block settings, we’ll set the container width to 1000px to give us plenty of space to work with.
Next, we’ll add a Headline block from GenerateBlocks inside the container. This block will be used to display the news title for this section. We can customize the typography and colors of the headline to fit our design.
To display our news articles, we’ll add a “GenerateBlocks Query” block. In the block settings, we’ll set the number of posts per page to 4.
Then navigate to the Post Template settings and set the container width to 25% to display each post in its column.
We’ll then add three Headline blocks to the Post Template.
For each block, we’ll set the content source to post terms, post title, and post date, respectively. This will allow us to display the article’s category, title, and publish date in each column. We can adjust the typography and colors of each Headline block to match our desired aesthetic.
And there you have it, our final creation.
For this layout, we’ll be creating a section that displays recent blog posts. To get started, we’ll begin by duplicating the news section we previously created.
Next, we’ll navigate the Post Template settings and set the container width to 50% to display each post in two columns.
We’ll then add a GenerateBlocks Image block to the Post Template. In the block settings, we’ll set the image source to “Featured Image” to display the image associated with each post.
To display author information and post date, we’ll add a Container block inside the Post Template. In this container, we’ll add an Image block and set its image source to “Author Image”. We’ll then add two Headline blocks to the container, one for the author name and one for the post date.
We’ll set the content source for each Headline block accordingly.
And that’s what our finished layout looks like.
For the fourth layout, we’ll be creating a unique grid-based layout that displays posts in a creative way. To get started, we’ll add a Grid block from GenerateBlocks to the page. In the Grid options, we’ll insert a one-third structure.
Next, we’ll copy the layout we created in the layout one example and paste it into the left side of the Grid. In the Post Template settings, we’ll add a Headline block and set its content source to “List of Terms”.
For the right side of the Grid, we’ll simply duplicate the query block. In the Query settings, we’ll set the post per page to 2 to display two posts in this grid and the offset set to 1.
After that, In the Post Template settings, we’ll set the container’s width to 100% to fill the entire column.
That’s a wrap! Here’s our final design.
For creating the fifth layout, we will again use the Grid block from GenerateBlocks. In this case, we will select the one-third column just like in the above section.
Next, we will use the Recent Post design we created earlier in the layout 3 example. We will copy and paste the Query block in the left container and set the post per page to 2.
Then in the Post Template, we will change the title position to the bottom-middle.
After that, we will add another Query block into the right container and set the post per page to 3. In the Post Template, we will add a one-third column, and in the left column, we will add an Image block and set its content source to Featured Image. In the right column, we will add two Headline blocks from GenerateBlocks and set their content source to List of Terms and Post Title.
We will then customize the style of each block to make it visually appealing.
And with that, we’ve completed our fifth layout design.
Layout Six is another great design to consider. It’s similar to Layout Five but with a few key differences.
To get started, duplicate the Layout Five Query block. Then, edit the GenerateBlocks Query block to set the “Posts Per Page” to 3. Next, go to the “Post Template” settings and set the container width to 33%.
Now, it’s time to customize the post template. Delete everything except for the Post Title and Post Date.
And that’s all there is to it, our final layout design.
Note: in this post, we use the ‘offset’ feature in the GenerateBlocks Query block to skip over a certain number of posts in the loop. This can be useful for creating more unique and dynamic layouts, as well as avoiding duplicate content.
Congratulations! We have completed all the layouts, it’s time to see how they all come together to create a complete look for your website.
All the different layouts complement each other to create a unified and visually appealing magazine-style blog design.
You can download these layouts and use them for your blog. Or, you can play around and learn from them to create your unique layouts. It’s all up to you and your creativity.
In conclusion, GenerateBlocks is a good plugin to help create stunning layouts for your WordPress blog. By following this tutorial, you have learned how to use GenerateBlocks to create six different types of blog layouts inspired by the Adventure.com website. From a simple list-style layout to a more complex grid-style layout, you can create a magazine-style blog using GenerateBlocks.
2 responses to “Create Beautiful and Unique Blog Layouts with GenerateBlocks in WordPress”
I don’t understand the point of Layout 1. It’s ultimately not a slider, right? Why introduce it like that?
Maybe showing 5 posts at a time and adding some CSS to allow an overflow and some scrolling could work?
You have a great point and a nice idea for a scrolling layout. However, that layout 1 would still be useful in a few use cases as it is in a magazine-style blog. Even with this layout, one can take it and make it a scrolling layout like you suggest.