help center

Search
Close this search box.
On this page

Add an alternate template in a loop grid

Last Update: January 14, 2024

Loop grids are great for creating a consistent way to display a list of posts, products, listings and more. But sometimes you want to add something different to your loop. For instance, you may want to give every third product a special design. 

Alternate loop templates allow you to place customized templates inside your loop. 

Create an alternate loop template

  1. Create a template for a loop item. Learn how to create a new loop item using the Theme Builder. For this example, we created a loop item template called, Elementor Ad.
  2. Open a page in the Elementor Editor.
    alternate template 1 Add an alternate template in a loop grid 17
  3.  Create a loop grid or select an existing loop grid on the page.
  4. Select the Loop grid Widget using either the Navigator or by right-clicking the upper-right corner of the widget.
    alt temp loop 2 1 Add an alternate template in a loop grid 19
  5. In the Content tab, click the toggle to turn on Apply an alternate template.
    alt temp loop 3 1 Add an alternate template in a loop grid 21
  6. Click Alternate Template to select which loop item you’re going to insert into the loop.
    alt temp loop 4 Add an alternate template in a loop grid 23
  7. Enter the name of the template you want to use. You could also create a new alternative template at this point by clicking Edit Template. Clicking Edit Template from the widget panel will take you to the Theme Builder, where you’ll be able to create a new Loop Item.
    Alternate template position number Add an alternate template in a loop grid 25
  8. Use Position in grid to select the position of the alternative template. In this example we applied the alternate template on the item in the 5th position.

    alt temp loop 5 Add an alternate template in a loop grid 27

Create multiple alternative templates

You are not limited to one alternative template. There are two ways to introduce more alternative templates:
alt temp loop 6 Add an alternate template in a loop grid 29

  • Click the copy icon to copy the current alternative template, which you can then edit.
    alt temp loop 7 Add an alternate template in a loop grid 31
  • Click Add Item to add a new alternative template.

Static alternative templates

Static alternative templates allow you to inject an alternate template into your loop without overriding existing loop items. This makes it useful for ads or announcements as you can include them without removing any of your list items.
01 Create an alternative template cropped Add an alternate template in a loop grid 33

  1. Create an alternate template, as described above.
    02 Add position in grid cropped Add an alternate template in a loop grid 35 
  2. Define the Position in Grid to determine where the alternative item will appear in the grid.
    image 21 Add an alternate template in a loop grid 37
  3. (Optional) Turn Apply Once off if you want the alternative template to appear throughout the loop grid.
  4. Turn Static item position on. 
    04 Turn on Static item position Add an alternate template in a loop grid 39

Apply once

By default, your alternative template will appear throughout your loop according to how you position it in the grid (e.g. if it’s in position 5, it will appear as every fifth loop item). 

The Apply Once toggle allows you to change this default setting and have your alternative template appear only one time in your loop.

alt temp loop 12 Add an alternate template in a loop grid 41

Column Span

By default, alternative templates will take up the column width of one item in your grid. Use the Column Span dropdown to have the alternative template take up more column space.

alt temp loop 13 Add an alternate template in a loop grid 43

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!