Post Loop Builder

Overview of the Post Loop Builder element

This tutorial explains how to use the Post Loop Builder element in Breakdance to create custom designs and layouts to display a list of posts on your website.

Creating a Global Block

Before you add the Post Loop Builder element to Breakdance, you should first create a Global Block. The Global Block will contain the layout for each individual post that is used within the Post Loop Builder.

Setting Up the Global Block

1. Navigate to Breakdance > Global Blocks in the WordPress admin panel.
2. Create a new Global Block.
3. Select a post from the intended post type in the preview window.
4. Edit the Global Block in Breakdance to design the template that will be used for all the posts within the Post Loop Builder.

Implementing the Post Loop Builder

Adding the Post Loop Builder Element

1. Open the page where you want to display the Post Loop Builder in Breakdance.
2. Add the Post Loop Builder element to the page.
3. Select the Global Block you created in the step above as the template for each post in the loop.

Configuring the Post Loop Query

You can adjust the query used by the Post Loop Builder to control what posts are displayed through the Query section. The Query section accepts WP_Query arguments to determine the posts shown on the front end. There are three different query types available:

• Custom: Use the Breakdance Query Builder dialogue to modify the query.
• Text: Use text-based parameters to change the query.
• Array: Use an Array-return option to modify the query. This is useful for more advanced queries.

When the Custom Query option is used, there will be two different sources available:

• Post Type: Select the Post Type(s) you want to use for the query
• Related: Select similar posts based on a taxonomy.

You may also further customize the query by setting the number of posts to show per page, the total number of posts loaded by the query, and offsetting (skipping) a certain number of posts.

It is possible to filter out any unwanted posts from displaying on the front end using the Conditions and Meta Query options.

You can use the Order section to specify how posts are ordered within the Post Loop Builder.

Customizing the Display Layout

After you’ve set the Global Block and defined the query, you can customize the layout for how the posts will display on the page.

Choosing the Layout

In the List section of the Design Tab, you can change the Layout of the Post Loop Builder with three different settings:

• List: Display the posts in a one-column list
• Grid: Display the posts in a grid with 1 or more posts per row
• Slider: Use a slider to display the posts.

Each layout has additional settings you can use to fine-tune the layout.

Styling the Post Loop Builder

The Post Section will allow you choose a background color and set the borders and paddings for the posts. Please note that to modify the layout of each post, you will need to edit the Global Block you selected.

The Container Section is where you can choose the overall styles for the parent container of all the posts.

Using Pagination

The Post Loop Builder element provides several different pagination options. You may learn more about pagination here.

Using the Filter Bar

The Filter Bar allows you to utilize Isotope filtering to filter the posts on the front end. More information about using Isotope filtering may be found here.

Please note that the Filter Bar and Pagination options cannot be activated at the same time.