Elementor Loop Builder tutorial

Let's create a custom Loop Grid using the Elementor Loop Item setting. The perfect tutorial to start using the powerful Elementor Loop Builder.

Highlighted Links.

Get your Elementor Pro license

I recommend "Advanced Solo" or higher

Transfer your websites to Hostinger

Get 10% off with WPROADS coupon

Thanks in advance for using the affiliate links I am sharing here and in other parts of my website. When you click on these links and you make a purchase I might earn a small commission. The price for you is the same but you will support my work.

Ever wondered how to use that Loop Item setting in your Theme Builder?

If you're building a dynamic blog design with Elementor, the Loop Builder is a game-changer. In this Elementor Loop Builder tutorial, we’ll walk you through creating sleek, responsive blog cards using the Loop Item and Loop Grid features. Whether you want clickable post cards, background images, subtle animations, or a minimalist layout, this step-by-step guide has you covered.

Let’s dive into this Elementor Loop Item tutorial to build your next beautiful blog archive layout.

What Is the Elementor Loop Builder?

The Loop Builder is a powerful Elementor Pro feature that allows you to create a custom design for repeating content like blog posts, products, or portfolio items. It works by combining:

Loop Item: A template for a single piece of content.
Loop Grid: The widget that displays your template across multiple items dynamically.

If you've used Elementor’s Theme Builder before, Loop Builder takes it to the next level by giving you pixel-perfect control over post previews.

Step 1: Create a New Loop Item Template

First, head to your Theme Builder in Elementor and create a new Loop Item.

Click on the Loop icon.
Exit the initial popup (if any).
In Settings, give your template a unique title like Blog Postcard v1.
Under Preview Settings, select a post to preview your layout live as you design.

This preview will help you style and test your layout effectively.

Step 2: Structure Your Loop Card with Containers

Inside your Loop Item, start by adding a container (Flexbox layout).

Set the container width to Full Width to avoid spacing issues.
Add the following elements inside:
- Post Title (Heading – use H3 or H4)
- Post Excerpt
- Divider (for visual separation)
- A nested container with:
  - Post Info – Author only
  - Read Post button

You can manage and preview structure better by opening the Structure panel in Elementor.

Step 3: Style the Card Elements

Use global styles (colors, typography) to stay consistent across your site.

Title

Use a global H4 style
Optionally, link it to the post URL

Divider

Apply a global border color

Author

Display as: By: Author Name
Disable linking to author archive
Add an avatar (around 25px) and use Text Small typography

Button

Change to “Read Post”
Style as a small button using global padding (e.g., 5px vertical, 15px horizontal)
Link it to the post URL dynamically

Layout Adjustments

Set the inner container layout to Horizontal and Space Between
Center align the elements vertically

Step 4: Add Padding, Border, and Background

Enhance your card visually:

Add 2 REM padding to the main container
Apply a border with:
- 1px solid light color
- Rounded corners (e.g., 20px or 5 REM)

Step 5: Add a Featured Image as Background

To make your card visually compelling:

Select the main container.
Set the background using a Dynamic Tag → Featured Image.
Choose Cover as background size and No Repeat.
Add a background overlay using a gradient:
- Start with a transparent version of your brand color (e.g., RGBA with 79% opacity).
- Fade into white or a light shade.

This keeps the content readable while displaying a stylish background.

Step 6: Use Loop Grid on the Blog Page

Now go to your Blog Archive Page:

Delete the default posts widget.
Drag in a Loop Grid widget.
Set the source to Posts.
Select your custom template, e.g., Blog Postcard v1.

Voilà! Your blog now shows beautifully designed dynamic cards.

Step 7: Fixing Alignment & Equal Height

To ensure all cards align perfectly:

Select the Excerpt widget inside your Loop Item.
Under Advanced > Layout, set the Flex Grow option to “Grow”.

This makes all excerpts expand uniformly, so all cards stay the same height.

Optional: Make the Whole Card Clickable

Want a smoother UX by making the entire card clickable? Here's how:

Remove individual links (like from the title and button).
Replace the button with a styled text element that looks like a button.
Style it using:
- Background color
- Padding (5px top/bottom, 15px sides)
- Border radius (e.g., 10px)
- Typography: Text Small
Set the entire container’s HTML tag to a under Layout > Additional Options.
Assign a Dynamic Tag → Post URL.

Important: You cannot have other nested links inside if the entire container is a link.

Add Hover Animation for Better UX

A subtle hover effect makes your cards interactive:

Select the card container.
Go to Advanced > Transform > Hover
Apply an Offset X of -5 or a small scale effect.

You can also tweak hover colors via custom CSS if needed.

Final Touches

Once everything looks great:

Publish your Loop Item.
Preview your Blog Archive.
Clear cache if needed for CSS changes to appear.

Now you have fully clickable, beautifully animated, responsive blog cards that dynamically showcase your latest content.

Conclusion

This Elementor Loop Grid tutorial walked you through building a custom blog layout using Elementor Pro’s most advanced features. From creating the Loop Item to customizing every pixel of your Loop Grid, you now have full control over how your posts appear.

Ready to Take It Further?

Watch the full video version of this tutorial on YouTube for deeper insights and live walkthroughs. Subscribe to stay updated on the latest Elementor and WordPress design strategies.

Happy designing with Elementor!

Pascal Claro

YouTuber & WordPress enthusiast, creator of WP Roads. Happy husband and father based in Paris. I love teaching you all how to create awesome WordPress websites!