Bricks Query Loop Builder is one of the most powerful elements of Bricks. which allows you to customize your post-type data according to your own design. It allows you to retrieve data from your database, using parameters to determine what content you want to show in your loop.(dynamic data)
The Query Loop builder was introduced in version 1.3.7. It can also be enabled for these elements with subsequent updates: Div (Nestable), Tabs (Nestable), Slider (Nestable).
Let’s create a post-archive page using a query loop.
Step -1 Making a Custom Loop:
Enable the query loop button from the left sidebar. You will see an option for query and an infinity icon will appear below it.
Step -2 The Query Control allows you to control how your query is executed:
The query control now shows posts, terms and users. I’ve selected these parameters for the post archive. For example (type=post), (post-type=post), (order by=ascending), and (post per page=6) will be enough to show the post for now; the rest will be shown in the next step.
Step -3 Add some elements:
Now I have taken the Image, Meta Data, Heading, Basic Text, and Button elements under the loop-enabled container. You can see in the screenshot that some static data is being displayed in a loop.
Step -4 Connect dynamic data to all elements:
Now I will add dynamic data to each element. I have used {feature_image} for the image element to show the feature image. For meta data I used Dhruba, October 6, 2022 to see post publisher name and post publish date. How to use Bricks query loop? used to see the title of the post. Used The query loop block is a new Wordpress feature... to show post short description. I have renamed the button (read more) and used https://expressosoft.com/how-to-use-query-loop/ in the link of the button so that clicking on it will take you to your post details.
Step -5 Posts main section settings:
Now we’re seeing six posts on the page, as I set earlier to display six posts per page. I’ve always loved the grid style, so I’ll show you how to make a post-grid view. In order to do this, we need to set some settings in the main section.
Step -6 Posts styling:
Now the post is ready for grid view. I have given a standard width to the query loop container that will make the layout look grid.
I have shared the styles of the elements inside the query loop container in the screenshots below
For Meta data:
For Title:
For excerpt:
For button:
When everything is set properly, our archive page will look like this.
