Case-study loops that don’t look like a loop.

The default Loop Grid is useful, but it often looks like a product grid: repeated cards, equal spacing, and the same rhythm from top to bottom. Editorial pages usually need more hierarchy.

What Loop Custom Layout does

Loop Custom Layout works with the same injection system as ECS Container Layout. You build an ECS Custom Layout template with placeholder widgets, then Loop Grid items flow into those placeholders at render time.

Requirements

• Container Layout must be active.
• Loop Custom Layout must be active.
• Elementor Pro is required because the workflow uses the Loop Grid widget.

Build the layout template

1. Create an ECS Custom Layout template.
2. Add ECS Container Placeholder widgets where content should land.
3. Design the surrounding structure: large area, compact area, meta zone, image zone, or any other layout pattern.

The placeholders are the important part. They define where the Loop Item children are injected.

Connect it to the Loop Item

1. Create or edit a Loop Item template.
2. Add a container inside the Loop Item.
3. Set the container Content Layout to Custom Layout.
4. Select the ECS Custom Layout template.
5. Add dynamic widgets as direct children of that container: featured image, post title, excerpt, terms, author, reading time, or custom fields.

ECS distributes those children through the placeholders in order. When there are more children than placeholders, the placeholders cycle. When there are fewer, the remaining placeholders render empty.

Make the grid feel editorial

For a journal index, the loop wrapper can use a larger first item and smaller supporting items. The layout template controls the card anatomy; CSS on the loop wrapper can control the grid rhythm.

.loop-grid > .elementor-loop-item:first-child {
  grid-column: 1 / -1;
}

That keeps the query simple while giving the first story more visual weight.

What to verify

• Every placeholder receives the expected child widget.
• Long titles and excerpts do not break the layout.
• Tablet and mobile views keep the editorial hierarchy readable.
• The Elementor editor remains usable; Custom Layout injection activates on the front end.

The result is still a normal Loop Grid, but it no longer has to look like one.