The Post Loop Builder is a powerful element that allows you to display lists, or “loops”, of WordPress posts in your designs. These items are displayed via a Global Block, designed with Breakdance’s dynamic data features to display the appropriate information for each post.
Below is an overview of the controls available for the Post Loop Builder element.
Content Controls
Repeated Block
The ‘Repeated Block’ section allows you to choose a global block, define the HTML tag for the block, and access advanced settings like alternate block settings, static items, and their respective configurations.
- Global Block – Select a pre-defined global block to be repeated in this section.
- Tag – Choose the HTML tag that best represents your block (e.g., div, section).
- Advanced – Access advanced settings for further customization.
- Alternates – Define alternate blocks to be used under specific conditions.
- Global Block – Select a global block to be used as an alternate.
- Position – Specify the position of the alternate block in the sequence.
- Repeat – Toggle the repetition of the alternate block.
- Frequency – Define how frequently the alternate block should repeat. (Available only when ‘Repeat’ is enabled)
- Static Items – Set up static items that can be interspersed in the loop.
- Global Block – Choose a global block for static items.
- Position – Determine the position of static items in the layout.
- Repeat – Decide if static items should repeat.
- Frequency – Set the frequency of repetition for static items. (Available only when ‘Repeat’ is enabled)
Query
In the ‘Query’ section, you can define the criteria for selecting the content that will be displayed in your block, such as post type, categories, or custom queries.
Pagination
The ‘Pagination’ section allows you to add and customize pagination for your content, including style, text for previous/next buttons, and options for ‘Load More’ functionality.
- Pagination – Choose the type of pagination for your content (e.g., numbers, arrows).
- Previous Text – Customize the text for the ‘Previous’ button in pagination. (Available with certain pagination types)
- Next Text – Customize the text for the ‘Next’ button in pagination. (Available with certain pagination types)
- Show All Page Numbers – Toggle to show all page numbers in pagination. (Available with certain pagination types)
- Load More Text – Set the text for the ‘Load More’ button. (Available with ‘Load More’ pagination type)
Filter Bar
The ‘Filter Bar’ section allows you to add a dynamic filter to your content, enabling users to sort or filter the displayed items based on categories, tags, or custom criteria.
- Enable – Toggle to enable or disable the filter bar.
- Type – Select the type of filter bar. (Available when the filter bar is enabled)
- All Filter – Toggle to include an ‘All’ filter option. (Available when the filter bar is enabled)
- All Label – Customize the label for the ‘All’ filter option. (Available when both ‘All Filter’ and filter bar are enabled)
Design Controls
List
The ‘List’ section focuses on customizing the appearance of lists in your layout. Adjust the width, layout type, and delve into specific settings for sliders, including effects, autoplay, and navigation options.
- Width – Set the width of your list, allowing for flexible design options.
- Layout – Choose your preferred layout style, such as grid, slider, or list.
- Slider – Access specific settings for slider layouts. (Available when ‘Layout’ is set to ‘slider’)
- Settings – Customize the functionality and appearance of your slider.
- Effect – Select the visual effect for transitioning between slides (e.g., fade, slide).
- Coverflow – Fine-tune the coverflow effect, if chosen. (Available when ‘Effect’ is set to ‘coverflow’)
- Shadow – Toggle the shadow effect for a sense of depth.
- Depth – Adjust the depth perception of coverflow.
- Rotate – Set the rotation angle for coverflow slides.
- Stretch – Control the stretch effect of coverflow.
- Speed – Define the speed of slide transitions.
- Infinite – Choose whether slides loop infinitely.
- Center Slides – Center slides within the slider view. (Available when ‘Infinite’ is enabled)
- Autoplay – Enable slides to transition automatically.
- Autoplay Settings – Adjust settings for autoplay functionality. (Available when ‘Autoplay’ is enabled)
- Speed – Set the speed for autoplay transitions.
- Stop On Interaction – Halt autoplay when user interacts with the slider.
- Pause On Hover – Pause autoplay when the cursor hovers over the slider.
- Advanced – Access advanced slider settings.
- Swipe On Scroll – Allow users to scroll slides with a swipe gesture.
- Auto Height – Automatically adjust the slider’s height based on the content.
- Between Slides – Set the spacing between individual slides.
- Slides Per View – Determine how many slides are visible at one time. (Available when ‘Effect’ is not set to ‘flip’ or ‘fade’)
- One Per View At – Specify breakpoints for showing only one slide per view.
- Arrows – Customize the navigation arrows for the slider.
- Disable – Option to disable navigation arrows.
- Color – Change the color of the arrows. (Available unless ‘Disable’ is activated)
- Size – Adjust the size of the arrows. (Available unless ‘Disable’ is activated)
- Overlay – Choose to overlay arrows on the slides. (Available unless ‘Disable’ is activated)
- Space To Slides – Set the space between arrows and slides. (Available unless ‘Disable’ is activated)
- Space To Edge – Define the space between arrows and the edge of the slider. (Available unless ‘Disable’ is activated)
- Custom Icons – Use custom icons for navigation arrows. (Available unless ‘Disable’ is activated)
- Next – Choose an icon for the ‘Next’ arrow.
- Previous – Choose an icon for the ‘Previous’ arrow.
- Pagination – Set up pagination for your slider.
- Type – Select the type of pagination (e.g., bullets, progress bar).
- Bullets – Customize bullet pagination. (Available when ‘Type’ is not set to ‘progressbar’ or ‘fraction’)
- Color – Choose the color for bullet points.
- Size – Adjust the size of bullet points.
- Space Between – Set the space between individual bullets.
- Radius – Define the radius of bullet points for rounded corners.
- Fraction – Settings for fraction-based pagination.
- Progress Bar – Customize the progress bar pagination. (Available when ‘Type’ is set to ‘progressbar’)
- Background – Choose a background color for the progress bar.
- Progress – Select a color to indicate progress.
- Height – Adjust the height of the progress bar.
- Position – Set the position of the progress bar.
- Overlay – Option to overlay the pagination on the slides. (Available when ‘Type’ is not set to ‘none’)
- Margin – Set the margin around the pagination. (Available when ‘Type’ is not set to ‘none’)
- Items Per Row – Define the number of items per row in the list. (Available when ‘Layout’ is set to ‘grid’)
- One Item At – Set breakpoints for displaying only one item per row. (Available when ‘Layout’ is set to ‘grid’)
- Space Between Items – Adjust the space between items in the list. (Available when ‘Layout’ is not set to ‘slider’)
Post
The ‘Post’ section is dedicated to styling individual posts. Customize their background, borders, and padding to match your site’s design aesthetic.
- Background – Choose a background color for your posts.
- Borders – Tailor the borders of your posts with options for radius, style, and shadow.
- Radius – Adjust the border radius for rounded corners.
- Styling – Customize the border style, width, and color.
- Shadow – Add a shadow effect to your posts.
- Padding – Define the padding inside your posts for better content spacing.
- Padding – Set specific padding values for top, bottom, left, and right sides.
Container
In the ‘Container’ section, you can customize the overall container of your element, including its background, borders, and padding, to create a distinct look and feel.
- Background – Select a background color for the container.
- Borders – Adjust the border settings of the container, including radius, style, and shadow.
- Radius – Modify the border radius for rounded corners.
- Styling – Customize the border style, width, and color.
- Shadow – Apply a shadow effect to the container.
- Padding – Set the padding within the container for better layout and spacing.
- Padding – Define specific padding values for all sides of the container.
Pagination
The ‘Pagination’ section in ‘Design Controls’ allows you to customize the appearance and layout of your pagination, including alignment, spacing, typography, and button styling for a cohesive and user-friendly navigation experience.
- Alignment – Adjust the alignment of the pagination elements (left, center, right).
- Space Above – Set the amount of space above the pagination to create visual separation.
- Space Between – Control the spacing between pagination items for better readability. (Available for certain pagination types)
- Typography – Customize the font, size, and style of your pagination text. (Available for certain pagination types)
- Active Color – Choose a color for the active pagination item for visual emphasis. (Available for numeric pagination types)
- Display As Buttons – Toggle to display pagination items as buttons for a more interactive look. (Available for numeric pagination types)
- Buttons – Dive into detailed button customization, including size, border, background, and more. (Available when ‘Display As Buttons’ is enabled)
- Size – Set the size of the pagination buttons.
- Border – Define the color of the button borders.
- Background – Choose a background color for the buttons.
- Radius – Adjust the border-radius to make buttons rounded or squared.
- Active – Customize the appearance of the active button.
- Border – Set the border color for the active button.
- Background – Choose a distinct background color for the active button.
- Text – Select a color for the text in the active button.
- Load More Button – Customize the ‘Load More’ button, including style, text, and advanced options. (Available for ‘Load More’ pagination type)
- Show Loading Icon In Builder – Toggle to display a loading icon in the builder interface for infinite scroll pagination. (Available for ‘Infinite’ pagination type)
- Loading Icon – Customize the loading icon for infinite scroll pagination.
- Size – Adjust the size of the loading icon.
- Color – Choose a color for the loading icon.
- Dots – Customize the appearance of dots in the pagination. (Available for numeric pagination types)
- Color – Select a color for the pagination dots.
- Nudge Y – Adjust the vertical positioning of the dots. (Available when dots are displayed as buttons)
- Stack Horizontally – Toggle to arrange pagination items horizontally.
- Vertical At – Define the screen size at which pagination items should stack vertically. (Available when horizontal stacking is enabled)
Spacing
The ‘Spacing’ section provides controls to adjust the margin at the top and bottom of the element, allowing for precise spacing and alignment within your page layout.
- Margin Top – Set the top margin to create space above the element.
- Margin Bottom – Adjust the bottom margin to control spacing below the element.
