Blog Post Query Loop Design with GenerateBlocks

Creating a custom Query Loop design in GenerateBlocks can really elevate your blog page by displaying your latest articles in a clean, consistent layout. In this tutorial, I’ll guide you through the process of creating a blog post grid with featured images, categories, titles, excerpts, and publish dates, ensuring all elements are aligned and responsive. Here’s how to do it:

Step 1: Set Up the Query Loop

1. Create a New Page: Start by creating a new page and give it a name, like “New Blog Query Loop.”
2. Add a Container: Insert a container block. In the container settings, add padding (e.g., 80px top, 20px right, 80px bottom, 20px left) to give it some space.
3. Insert a Query Loop: Inside the container, add a Query Loop block. Make sure to select the blue GenerateBlocks Query Loop option.
4. Choose a Layout: Pick a starting layout. For this design, select the “Two Columns with Featured Image” option.

Step 2: Customize the Query Loop

1. Adjust the Number of Posts: Click on the Query Loop block, and set the number of posts per page to match the number of posts you have (e.g., 6).
2. Set Flex Display: In the Post Template settings, change the display to Flex and set the direction to Column. Align items to Flex Start to ensure everything lines up on the left.
3. Remove Padding: Remove all padding from the Post Template container to ensure the text and images are flush with the edges.

Step 3: Design the Post Template

1. Add a Border: In the Post Template settings, add a 2px border with a dark gray color around each post.
2. Style the Title: Select the headline block (which is your post title) and:
   • Change the heading level to H3.
   • Set the font weight to bold and reduce the font size to around 24px.
   • Add 30px padding on the left and right.
3. Adjust the Excerpt: Select the excerpt block and:
   • Set the font size to 15px.
   • Add 30px padding on the left and right, and 20px on the bottom.
   • Disable the “Read More” link by unchecking the “Use Default More Link” option.
4. Set the Date: Move the date below the excerpt and add 30px padding on the left, right, and bottom. Increase the font size slightly and set the font weight to semi-bold.

Step 4: Add the Category Block

1. Insert a Category: Add a new headline block above the title for the category. Set this to a paragraph block.
2. Enable Dynamic Data: Turn on Dynamic Data and set it to display the post category. Style it with:
   • A blue background and light gray text.
   • 3px border radius and uppercase text.
   • Font size around 12px.

Step 5: Adjust the Featured Image

1. Set Image Size: Click on the featured image block and set the height to 250px. Ensure the object fit is set to “Cover” to maintain image proportions.

Step 6: Make It Responsive

1. Tablet View: Change the grid layout to 50% width for each column. Adjust the image height to around 225px.
2. Mobile View: Set the grid layout to 100% width and adjust the image height to 200px. Ensure the text is readable and everything aligns well on mobile.

Step 7: Test and Finalize

1. Preview the Design: Save your draft and preview the page to ensure everything looks correct.
2. Use the Customizer: Jump into the WordPress Customizer to check the layout on different devices, ensuring your design is responsive across desktop, tablet, and mobile.

By following these steps, you can create a clean and consistent Query Loop design for your blog posts using GenerateBlocks. The key is to adjust padding, align items using Flex, and ensure the content looks good on all devices.