September 29, 2023

Design a Elementor Masonry Loop Grid with Different Heights

Play Video

One way to add a dynamic touch to your website is by using the Elementor Masonry Loop Grid. This feature allows you to display posts in a grid format with varying heights, adding a unique and engaging layout to your site. In this tutorial, we’ll walk you through how to design an Elementor Masonry Loop Grid with different heights for every third post.


Make sure you have the following installed and activated:

  • Elementor (Pro)
  • Flexbox container and loop grid features activated in Elementor

Step 1: Create a Basic Loop Grid

  1. Navigate to your Elementor editor.
  2. Add a new Loop Grid widget to your page.
  3. Set the grid to have four columns.
  4. Add 12 items to the grid (4×3 layout).

Tip: Make sure you have at least 12 posts to display in the grid for the best visual effect.

Step 2: Edit the Template

  1. Click on “Edit Template” within the Loop Grid widget.
  2. Add the following elements:
    • Featured Image
    • Post Title
    • Post Info (metadata)
  3. Set the height of the Featured Image to 200 pixels.
  4. Set the object fit property of the Featured Image to “Cover”.

Note: Setting a specific height for the Featured Image is crucial for the next steps.

Step 3: Create an Alternate Template

  1. Copy the entire container of the template you just created.
  2. Save and go back to the Loop Grid settings.
  3. Click on “Alternate Template” within the Loop Grid settings.
  4. Create a new template and paste the copied content.

Step 4: Modify the Alternate Template

  1. Open the alternate template.
  2. Change the height of the Featured Image to 400 pixels.

Insight: By doubling the height, you add a dynamic touch to the grid, making it more visually appealing.

Step 5: Apply the Alternate Template

  1. Go back to the Loop Grid settings.
  2. Select the alternate template you just created.
  3. Set it to apply to every third post.

Step 6: Enable Masonry

  1. Still in the Loop Grid settings, enable the “Masonry” option.

Note: Enabling Masonry will give your grid a clean, geometric look, avoiding the staggered effect at the bottom.

Elementor Masonry Loop Grid Design – Conclusion

Designing an Elementor Masonry Loop Grid with different heights adds a layer of visual complexity to your website, making it more engaging for your visitors. By following these steps, you can easily create a dynamic grid layout that stands out.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Design a Elementor Masonry Loop Grid with Different Heights
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.