July 5, 2023

Add Elements between Elementor Loop Grid Posts

Play Video

Explore with Web Squadron how to add elements between Elementor Loop Grid Posts. This technique can be used to insert any element, such as an image, text, headline, or even a product, between your posts. The best part? We will be using the Flexbox container, a layout mode providing for the arrangement of elements on a page, making the process simpler and more flexible.

Creating the Loop Grid

  1. Start by creating a loop grid
    In your Elementor editor, search for the Loop widget and drag it into your workspace. This will automatically create a container for your loop grid. Add some padding to the top of the container to ensure it’s not directly against the top of the page.
  2. Create a template within the loop grid
    Click on the loop grid and hit “Create Template”. This will allow you to design the layout of your posts. For the purpose of this tutorial, we will keep it simple by adding a featured image and a post title. Remember to link your post title to the post URL and check how it looks on mobile devices.
  3. Adjust the orientation of your posts
    If your posts have different orientations (horizontal and vertical), you can define the height of your images to ensure they all have the same size. Set the size to “Cover” and decide on the position of the image (Top Center, Center Center, etc.).

Add Elements between Elementor Loop Grid Posts

  1. Duplicate your loop grid
    Once you have your loop grid set up, duplicate it. You should now have two identical loop grids.
  2. Modify the first loop grid
    Go to the first loop grid and set it to display only two items per page. This will leave a space for the third element, which will be different from the posts.
  3. Adjust the layout
    Set the direction of all items to be a row and enable the “Wrap” option. This will allow the elements to wrap onto the next line if there’s not enough space on the current one.
  4. Add your element
    Now, you can add any element you want in the space left by the third post. This could be an image, a text box, a quote box, or anything else. Set the width of the element to 33% to ensure it fits perfectly in the grid.
  5. Modify the second loop grid
    Go to the second loop grid and set it to start from the third post. This can be done by going to the “Query” tab, then the “Exclude” tab, and setting the “Offset” to 2. This will exclude the first two posts that are already displayed in the first loop grid.

And there you have it! You’ve successfully added elements between your Elementor loop grid posts. This technique opens up a world of possibilities for your layout design, allowing you to create unique and engaging content for your visitors.

Benefits of this Elements between Elementor Loop Grid Posts Tutorial

Flexibility in Design

This technique provides a high level of flexibility in your website design. By using Elementor and the Flexbox container, you can easily adjust the layout of your posts and insert any element between them. This allows you to create unique and engaging layouts that stand out from the crowd.

No Coding Knowledge Required

One of the main advantages of this technique is that it doesn’t require any coding knowledge. Elementor is a drag-and-drop page builder, making it accessible to anyone, regardless of their technical skills. This means you can focus on the creative aspect of your website design, without worrying about the technical details.

Improved User Experience

By adding different elements between your posts, you can enhance the user experience on your website. This could be through adding engaging images, informative text boxes, or even products for sale. This variety can make your content more engaging and enjoyable for your visitors, encouraging them to spend more time on your site and interact with your content.

Additional Tips

  • Controlled Width
    It’s important to have a controlled width for your loop grids and elements. This ensures that your layout remains consistent and doesn’t get distorted.
  • Mobile View
    Always check how your layout looks on mobile devices. This ensures that your website is responsive and provides a good user experience on all devices.
  • Experiment
    Don’t be afraid to experiment with different elements and layouts. Elementor and Flexbox containers offer a wide range of possibilities, so feel free to get creative!

Common Issues and Solutions

  • Duplicate Posts
    If you see duplicate posts in your layout, don’t panic. This is likely because you have not set the offset correctly in the second loop grid. Make sure to set the offset to 2 to exclude the first two posts that are already displayed in the first loop grid.
  • Element Size
    If your element is not fitting correctly in the grid, check the width setting. For a three-column layout, the width should be set to 33%.
  • Post Orientation
    If your posts have different orientations, make sure to define the height of your images. This ensures that all images have the same size, regardless of their original orientation.

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.
Add Elements between Elementor Loop Grid Posts
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.