Change the Appearance of the Query Loop Block

The Query Loop block is used to display blog posts (or other content types such as pages, testimonials, or projects) on your website in different visual layouts. This guide will help you to adjust how your content is presented in the Query Loop block.

You can choose from many different designs to present your posts (or other types of content) within the Query Loop block using the following steps:

1. In your site’s dashboard, navigate to Appearance → Editor.
2. Select the template you want to edit, or click on the site preview to edit the homepage.
3. Select the Query Loop block using List View.
4. In the toolbar that appears above or below the block, click the “Change design” button.
5. Browse from the collection of predesigned layouts and click the one you like the most to apply it.
6. You can then further customize the layout using the steps in the next sections of this guide.

Within the Query Loop block is the Post Template, which contains the individual elements of each post, like the title, date, featured image, content or excerpt, and more.

Within the Post Template, you can display the following elements with your posts:

• Title: display the title of each piece of content you’ve published.
• Date: display the published date of each piece of content.
• Modified Date: display the date when a post was last edited. 
• Content: display the entire content of each published post.
• Excerpt: display a short excerpt for each published piece of content and customize the “read more” link text.
• Featured Image: display the featured image you’ve set for your content.
• Categories: display the categories you’ve assigned to your published content.
• Tags: display the tags you added to your content.
• Pagination: display links to the previous and next posts.
• Author: display post author details such as name, avatar, and bio.
• Query Total: display the total number of results in a query.
• No Results: add text or blocks that will display when the query returns no results.

Your theme’s templates may include some or all of these blocks. Using the List View, you can view the current structure of the blocks and add, move, and delete the individual elements as needed:

Many of the above elements contain unique settings in the block settings sidebar. For example, you can select the Date block to access settings that control the format the date is displayed in and to add a link on the date back to the post. The blocks also include standard block settings for Color, Typography, Dimensions, and Advanced in many cases.

In the post template, you can adjust your content to display in a list format or a grid format:

1. Select the Post Template in the List View, which is nested within the Query Loop block.
2. In the toolbar that appears above or below the block, choose between the list and grid icons.
   • If grid is selected, you can adjust the number of columns in the grid in the block settings sidebar.
3. Click the “Save” button.

To add pagination to your posts displayed with a Query Loop block, take the following steps:

1. From the List View, expand the Query Loop block and select Post Template:

2. Click the ellipses (three dots) next to Post Template and select “Add after“.
3. Click the + block inserter and search for “Pagination“. Click it to add it to the post template so that the Pagination block appears after the Post Template:

4. Adjust the settings in the sidebar as desired. These include the orientation, color, and whether to display an arrow or chevron symbol with the pagination link.
5. Click the “Save” button to apply your changes.

You can customize the width of elements within the Query Loop block: