Design a Elementor Masonry Loop Grid with Different Heights

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.

Prerequisites

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.