Post Loop Builder

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 – Modify the settings for the Slider layout. More information may be found via the Slider Controls documentation (Available when ‘Layout’ is set to ‘slider’)
• 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.