How to Create Alternating Blog Posts in Elementor

Are you looking to add a touch of dynamic visual appeal to your blog posts? Elementor, the most popular drag-and-drop page builder, offers a versatile solution for creating unique and engaging content layouts.

One fascinating feature is the ability to create alternating blog posts, each displaying a different layout or style within the same feed. This article will show you the step-by-step process of crafting alternating blog posts in Elementor, using its powerful tools (Loop Item template and Loop Grid widget) and customization options.

Steps to Alternate Blog Posts in Elementor

Step 1: Create the Loop Template

We must have at least two loop item templates with different layouts, styles, or colors to create an alternating blog post.

If you’re unfamiliar with loop templates and want to know how to create loop item templates, you can check out this article (read: Elementor Loop Builder: What is It and How to Use It?).

So, please create at least two loop item templates using Loop Builder before continuing to the next steps. In this example, we’ve created two loop item templates with Loop Item #1 and Loop Item #2.

Step 2: Add the Loop Grid Widget

Once you’ve created the loop item templates, go to the Elementor editor by creating a new page or selecting the existing one.

Add the Loop Grid widget by dragging and dropping it into the canvas area.

Add the first loop item template

Once you add the Loop Grid widget, navigate to the widget settings, then select the loop template that you want to display. In this example, we select Loop Item #1.

Afterward, set the number of columns and items to appear on each page of the loop grid. To make all the rows in the loop have the same height, you can turn the Equal Height toggle on.

Add the second loop template

We will now go on to the main topic of this article, which is the alternative template. Enable the Apply the alternate template option by switching the toggle on. It will allow you to make part of your loop using a different template.

Afterward, choose your second loop item template. For this example, we select Loop Item #2.

We applied several changes to this alternate template, which you can see below:

• Position in grid: 2
  • Select the position of the alternative template. In this example, we applied the alternate template to the item in the second position.
• Apply Once: NO
  • We want the alternative template to appear throughout the loop grid (not only once), so we turned off this option.
• Column Span: 2
  • Click the Column Span drop-down button to have the alternative template take up more column space.

If you’re happy with the result, you can save and publish your page if you want to.

(Bonus) Alternates Blog Posts Every Four Post Items

As you can see from the image and GIF above, the blog posts are alternated repeatedly every three items.

In this section, we will show you how to alternate the blog posts every four post items. You can do that, by only adding the simple CSS snippet.

Please copy this CSS snippet below and paste it into the Custom CSS input field on your Loop Grid widget settings (Edit Loop Grid -> Advanced tab -> Custom CSS).

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

What did the code do?

• Media Query: @media screen and (min-width:1024px) {
  • This defines a media query that applies the following styles only to screens with a minimum width of 1024 pixels (desktop).
• Selector, Grid Layout and Grid Auto-Flow:
  • Every fourth post item (4n) starts in the second column and spans two columns.
  • The third post item before every fourth post item (4n-3) starts in the third column and spans one column.
  • The second post item before every fourth post item (4n-2) starts in the first column and spans two columns.
  • The first post item before every fourth post item (4n-1) starts in the first column and spans one column.
  • The grid-auto-flow property controls the placement of grid items within the container.
  • The row dense value specifies that items should be placed in rows, filling each row as much as possible before moving to the next.

The Bottom Line

This article shows how easily you can alternate blog posts in Elementor without relying on any additional add-ons. By utilizing the power of the Elementor Loop Grid widget and the Loop Builder flexibility, you have full control over the appearance and layout of your alternating blog posts.

By leveraging custom CSS, you can set your blog posts to alternate repeatedly every four post items/elements, providing an engaging and interactive way for visitors to view your blog posts.