Query Loop-a-Palooza! Part 1: Building out a Blog Post Query Loop with GenerateBlocks

One of my favorite things to do as both a designer and developer is to build out query loops. There’s just something so satisfying about designing the layout and watching the dynamic content populate.

To kick off this enthusiasm, I’m starting a new miniseries called Query Loopa Palooza. In this series, I’ll walk through different query loop builds for different use cases. Today, we’re starting with a blog post grid layout, inspired by Kinsta’s blog design.

Analyzing Kinsta’s Blog Design

Kinsta’s blog layout is a simple grid of blog posts with a clean hover effect: the card lifts with a subtle shadow. I’ve already created six blog posts on my test site to recreate a two-row layout.

Setting Up the Query Loop Page

I created a new page called News, where we’ll showcase this blog post layout. First, I added a container with some padding using a global style, and inside that, added another container.

On the outer container, I set the background color to #f1f1f1. This mirrors the soft tone of Kinsta’s background.

Inserting the Query Loop

I inserted a blank query loop (since the default templates didn’t fit my design). Then I:

• Set the number of posts to 6
• Chose a three-column layout in the Looper Block
• Started designing one loop item (card)

The power of query loops is that you only design one card, and it dynamically populates the rest.

Building the Card Layout

Adding the Featured Image

The card starts with a full-width featured image with rounded top corners. I inserted the image block and used dynamic data to populate the featured image. Since the image wasn’t inheriting the rounded corners, I set the loop item to overflow: clip on both X and Y axes (you can find this setting in the Position panel).

Creating the Content Section

Below the image, I added a new container for content with padding (1.5rem all around). Then I added:

• An H3 for the post title (linked dynamically)
• A Text block for the excerpt (linked dynamically, set to 55 words, font size around 14–15px, line height 1.4–1.5)

Displaying the Post Meta: Date and Category

For the post meta:

• I inserted a text block with dynamic tags for the post date
• Added the post category inline by copying a second dynamic tag and pasting it after the date, separated by a bullet

To ensure the date/category sticks to the bottom, I wrapped the title and excerpt in one container, and wrapped that plus the meta in another container with flex-grow: 1 on the content area and flex-direction: column.

Then I added a row gap of 1.5rem to create consistent spacing regardless of content height.

Styling the Image and Card

I standardized the image height to 195px and set object-fit: cover to ensure uniformity across cards.

To match Kinsta’s styling:

• Added a 1px border around each card
• On hover, applied a transform to move the card up 8px and added a box shadow with a blur of 12px and opacity of 0.15
• Applied a transition of 0.3s ease-in-out for a smooth hover animation

Making the Card Clickable

To ensure the entire card is clickable:

• I added a link to the post title using dynamic tags
• Styled the link color and removed text underline
• Applied a stretch-link class to the loop item (entire card), which uses a global class technique I’ve covered in a previous tutorial

Responsive Layout Adjustments

For responsiveness, I adjusted the grid layout using GenerateBlocks’ responsive settings:

• Tablet: Set the looper to a 2-column grid
• Mobile: Switched to a 1-column layout

Wrapping Up

That’s part one of Query Loop-a-Palooza! Today we recreated a blog post grid layout using GenerateBlocks and dynamic query loops, inspired by Kinsta’s blog.

Next time in part two, I’ll be building a portfolio query using custom post types and custom fields for a different design approach.