Alternate loop template in Elementor that reverses per row

Introduction

In this tutorial, you’ll learn how to create a loop grid in Elementor that has two (2) different loop templates per row and reverses their order on each new row.

What you’ll need:

1. Elementor Pro
2. Elementor Container Feature
3. Loop Grid widget
4. Alternate Loop Template option
5. Custom CSS

Steps

Add Loop Grid widget to page

The first step involves adding a new loop grid widget to a container on your page. Then, in the editor, go ahead and create your first loop grid template. Here’s a tutorial on how to make the entire loop card clickable.

Toggle Alternate Loop Template

After creating your initial loop grid template, toggle on the “Apply an alternate template” and create your alternate template, which should be the template that you would like to span multiple columns.

Set the “Position in Grid” to 2 and disable the toggle to “apply only once”, so that the alternate template repeats after every 2 items in the grid.

Custom CSS

Finally, go under the advanced CSS for the Loop Grid widget and apply the following custom CSS

@media screen and (min-width:1024px){
selector .e-loop-item:nth-of-type(4n-3){
  grid-column: 3 / span 1;
}
selector .e-loop-item:nth-of-type(4n-2){
  grid-column: 1 / span 2;
}
selector .e-loop-item:nth-of-type(4n-1){
  grid-column: 1 / span 1;
}
selector .e-loop-item:nth-of-type(4n){
  grid-column: 2 / span 2;
}
selector .elementor-loop-container{
  grid-auto-flow: row dense;
}}