EB Loop Builder allows you to design and display dynamic post lists right inside the Gutenberg editor. Instead of writing custom queries or making templates, you can visually style how posts, products, or any custom content should appear and the layout will automatically repeat for every item. This makes it easy to create blog grids, product catalogs, team member sections, and more, all without coding.

Follow this guide to learn how to design a dynamic content layout for your website using the Loop Builder in Essential Blocks in Gutenberg.

How to Activate the EB Loop Builder Block? #

To activate the Loop Builder, navigate to Essential Blocks → Blocks. Then, from the Dynamic Blocks section, toggle to enable the block as shown below. After that, click on the ‘Save’ button.

Note: Loop Builder is a premium block. To use this, you will need to install and activate the Essential Blocks PRO plugin on your website along with the free version.

How to Configure the Loop Builder in Gutenberg? #

Open the page or post where you want to add the dynamic content display using the EB Loop Builder. Search for the ‘Loop Builder’ block and insert it into the desired section. After inserting, you will get two options: ‘Choose’ or ‘Start blank’. Select ‘Start Blank‘ if you want to create the Loop according to your preferences.

If you click on ‘Choose’, you will find premade templates for the Loop Builder. There, you will have the option to choose from three different layouts: Classic, Minimal and Retro. 

• Classic Layout: It presents a grid format with an image and text underneath. It’s ideal for showcasing multiple profiles, products, or services in a structured and visually balanced way.
  
• Minimal Layout: This one focuses on simplicity and clean design. With fewer images and more text lines, it’s perfect for content-heavy pages or storytelling.
  
• Retro Layout: This brings a nostalgic, vintage-inspired grid of images and text. It’s playful and great for themed presentations, portfolios, or content with personality.

Whether you start with a blank template or a premade one, you can design the EB Loop Builder to match your preferences.

When you choose Start Blank or a template, the basic structure is automatically generated. Depending on the template, this may include:

• Post Template (controls how each post looks)
• Wrapper (contains elements like Heading, Image, Text, Taxonomy, Post Meta)
• Loop Pagination (controls navigation across multiple posts)

However, if you want to fine-tune the layout or enhance the design, you can customize each part’s structure for the following options.

Customize Loop Builder Structure #

When setting up your Loop Builder layout in Gutenberg, you’ll work with a few key blocks that structure and style your posts.

Group Block: This is already included by default. It acts as the main container for your loop items. You can adjust its styling or layout as needed.

Columns: If you prefer a multi-column layout (for example, 2 or 3 posts side by side), you can manually add a Columns block inside the Group for better visual organization. 

Loop Builder Block: This block is auto-inserted and powers the dynamic post loading. You can tweak its settings to control how posts are fetched and displayed.

Post Template: This block is preloaded but you can redesign it to match your brand or content style. This is where each post’s layout is defined.

Post Template #

The Post Template in Gutenberg controls how each post appears within a Loop Builder. It includes elements like the title, date, image and content, arranged using two inner blocks. By customizing it, users can style and structure repeated posts for a consistent, polished look across their site.

Wrapper: The Wrapper block helps style each post item individually. You can adjust padding, borders, background colors, or hover effects to make each post stand out.

Content Elements: Inside the Wrapper, you can customize or rearrange the following:

• Advanced Image for the featured image
• Advanced Heading for the post title
• Text for a short excerpt or description
• Post Meta for date, author, or category info
• Taxonomy refers to categories, tags, or any custom classification you’ve set for your posts.

Loop Pagination: Add this block to let users navigate through multiple pages ​​when your loop contains many posts.

General #

You can customize your loop directly from the Gutenberg right side panel under General → Loop Query Settings. 

• Post Type: Choose the post type (posts, pages, products, etc.) for your loop. 
• Post Per Page  / Order By / Order: Control how many posts display per page, the field used for sorting (date, title, etc.), and the order (Asc = oldest first, Desc = newest first).
• Authors: Filter posts by specific authors.
• Tags: Include or exclude posts by tag.
• Categories: Include or exclude posts by category.
• Include Specific Posts: Manually feature selected posts.
• Exclude Specific Posts: Remove posts you don’t want in the loop.
• Advanced Options: Toggle filters to exclude the current post, ignore sticky posts, or hide password-protected content from query results.
• Meta Query: Filter posts by custom fields (applied via PHP, so effects may only show on the frontend).
• Date Query: Filter posts by publish or modified date (full effects visible on frontend).

These filters give you full control over what content appears in your loop, so you can tailor the experience to your audience. 

Advanced Customization #

The Advanced Styling Panel allows you to fine-tune the appearance and behavior of individual elements with precision. 

• Visibility Options: Control when and where elements appear, often based on user roles or device types. 
• Margin & Padding: Adjust spacing on all four sides using px, em or %. 
• Responsive Control: Tailor design for mobile, tablet, and desktop.
• Background: Add colors, gradients, images, borders or shadows for depth and visual interest.
• Animation: Apply entrance effects or transitions for more engaging layouts.
• Conditional Display: Show or hide elements based on conditions (visible on frontend, not in editor).
• Custom CSS: Add custom styling rules for full design flexibility.

Loop Pagination #

Display pagination controls for Loop Builder to navigate through multiple pages of posts.

General #

• Pagination Settings: Configure page numbers, previous/next buttons and optional first/last links. Control how many links appear around the current page and align the pagination.
• Arrow & Label Settings: Customize navigation arrows or text labels. By default, labels are “Previous” and “Next,” but they can be changed.

Styling Loop Pagination #

The Loop Pagination feature lets you add pagination controls to your Loop Builder layouts in Gutenberg. With this option, visitors can easily navigate through multiple pages of posts without leaving the page design.

• Typography: Customize fonts, size, spacing and weight.
• Colors: Define text, link, background and hover colors.
• Spacing: Adjust padding and margins for a clean layout.
• Border & Shadow: Add borders or shadows for emphasis.
• Background: Customize background colors, gradients, or images for different sections. This adds personality and visual interest to your design.
• Icons, Badges & Indicators: Style position, color, hover states and more.

Advanced #

Here, you can easily customize the Responsive Control, Animation and Custom CSS for more advanced styling and customization options.

Final Outcome #

By following the basic steps and a bit more customization, this is how you can style your EB Loop Block however you want. And, it will appear on your web pages as shown below.

Getting stuck? Feel free to Contact Our Support for further assistance.