Advanced Loop Builder

We’re excited to introduce Advanced Loop Builder, a powerful tool in Spectra Pro that makes creating post grids easier and more flexible.

This update adds advanced filters, smooth Ajax-based pagination, and simple customization options to fit any design need.

Whether you’re an expert or just starting out, Advanced Loop Builder makes it easy to create stunning and interactive content layouts.

What is Spectra Pro’s Advanced Loop Builder?

Loop Builder is Spectra Pro’s revolutionary block designed to simplify the process of creating content loops. A content loop is a dynamic slideshow or grid that displays posts or custom content based on specific rules.

In the past, crafting such loops required extensive coding knowledge. Now, with Loop Builder, you can effortlessly design these loops using an intuitive interface, removing the complexity and empowering creativity.

Key Features of Advanced Loop Builder

New Variations with Filters:

• Search
• Sort
• Category Filters
  • Various layouts: Buttons, Select, Checkboxes
• Reset Button
• Ajax-Based Pagination

Enhanced Features for Usability and Design:

• Multiple options for customization to suit individual needs.
• Advanced settings to ensure seamless integration with your design.

How to Insert Loop Builder Block

Loop builder blocks can be used to create custom post loops using existing Spectra blocks like Advanced Heading, Image, Container, Ion etc. Under Loop Builder, you can see five types of layouts you can choose from.

Once you select the variation of your choice, you can see the search box, sorting and category filters at the top.

1. Search

You can make your search field just the way you want it! Here’s how you can adjust the settings:

General Tab:

• Alignment: Decide where you’d like the search field to appear—Left, Center, or Right. Just pick the option that works best for your layout.
• Placeholder Text: You can add custom text inside the search box to guide your users. For example, “Search here…” or anything you prefer.
• Responsive Width Option: Want your search box to look great on all devices? Use this option to tweak its width based on the screen size.

Style Tab:

• Colors:
  • Set a color for the placeholder text to make it more visible or match your site’s theme.
  • Choose a color for the text users type into the search field.
  • Customize the input field’s background color to make it pop!
• Typography: You can fully control the font settings—select the font style, size, weight, and more to make it align with your site’s design.
• Border: Style the search box border just the way you like it. Adjust the border color, width, and type for that perfect look.
• Spacing:
  • Use the padding option to adjust the space inside the search box.
  • Tweak the margins to control how much space surrounds the search field.

2. Sort

Let’s dive into how you can customize the sorting functionality to perfectly match your site’s needs. Here’s a breakdown of the settings:

General Tab:

• Sort By: Choose the criteria you want your posts or products to be sorted by, such as date, title, or any custom option. This helps your users quickly find what they’re looking for.
  
• Alignment: Decide where the sort dropdown should be positioned—Left, Center, or Right. This ensures it fits seamlessly into your design.
• Width: Adjust the width of the dropdown to make it responsive and look great on all devices.

Style Tab:

• Colors:
  • Customize the color of the sort text to align with your theme.
  • Set the background color for the input field to make it stand out or blend in.
• Typography: Take full control over the text styles. You can adjust the font size, weight, style, and more to keep it consistent with your site’s overall design.
• Border: Style the dropdown’s border by choosing the color, width, and type that best suits your layout.
• Spacing:
  • Adjust the padding to create more space within the dropdown for a cleaner look.
  • Modify the margins to control how much space surrounds the dropdown.

3. Category Filters

Here’s how you can set up and customize your category filters to make navigation effortless for your users:

General Tab:

• Type: Choose the type of filter you want—Select dropdown, Checkbox, or Buttons. This lets you decide how users interact with the filters.
• Show Post Count: Display the number of posts available in each category, giving users an idea of the content they can explore.
• Show Empty Taxonomy: Optionally display categories even if they don’t have any posts. This can be helpful if you’re planning to add content to those categories later.
• Show Children: Include subcategories within the filters to provide more detailed options for users.
• Taxonomy Dropdown: Select the taxonomy you want to filter by, such as categories, tags, or custom taxonomies.
• Include/Exclude: Decide which categories to include or exclude in the filter to keep the focus on relevant content.
• Alignment: Align the filters to the Left, Center, or Right to match your design.
• Width: Adjust the width of the filter to ensure it looks great on all devices.

Style Tab:

• Colors:
  • Customize the text color to align with your theme.
  • Set the background color of the input fields or buttons to make them visually appealing.
• Typography: Adjust the font settings, including size, weight, and style, to ensure the filters match your site’s design language.
• Border: Style the filter borders by choosing a specific color, width, and type for a polished look.
• Spacing:
  • Gap Between Filters: For Checkbox layouts, control the spacing between each checkbox to avoid clutter.
  • Row Gap: Also applicable for Checkbox layouts, this adjusts the vertical spacing between rows of filters.
  • Padding/Margin: Fine-tune the inner and outer spacing of the filters to achieve a balanced design.

4. Reset Button

The Reset button inherits styles from the Spectra Buttons block. All style options, including typography, colors, border, and spacing, can be managed through the Buttons block settings.

5. Pagination

Similar to the Reset button, Ajax-based pagination inherits styles from the Spectra Buttons block. All customizations, including typography, colors, border, and spacing, can be applied using the Buttons block settings.

Additional Features and Tips for Using Advanced Loop Builder

For existing users looking to upgrade to Advanced Loop Builder, here are a few steps to get started:

• Accessing the New Features: If you already use the Loop Builder and want to take advantage of the new version, you can easily access it by clicking on the reset icon at the top of your Loop Builder interface. This will bring you to the latest version with enhanced features.

• Adding New Blocks: You can also add a brand new Loop Builder block by clicking the + icon within the editor. Once added, you’ll have access to all the advanced filters, Ajax pagination, and customization options available in Advanced Loop Builder.

With its user-friendly features and advanced capabilities, Advanced Loop Builder is here to enhance your design experience.

If you have any questions or need help getting started, feel free to leave a comment below or reach out to our support team.