Docs / ECS / Modules / Loop Custom Layout
Free

Loop Custom Layout

Arrange Loop Grid items inside an ECS Custom Layout template via placeholder widgets — powered by Elementor’s Loop Grid query.

WARN
Requires the Container Layout module and Elementor Pro (for Loop Grid).

Setup

  1. Enable both Container Layout and Loop Custom Layout.
  2. Create or open a Loop Item template in the Theme Builder.
  3. Add a container, set Content Layout → Custom Layout.
  4. Select a template.
  5. Add your dynamic widgets (featured image, post title, excerpt) as direct children.
  6. Use the Loop Item template in a Loop Grid widget.

How distribution works per row

At render time, ECS intercepts each Loop Item render and injects that item's children into the template's placeholders. Children cycle in order — same as Container Layout, but triggered once per loop row.

Use cases

Magazine-style Loop Grid: first item in every row spans full width, next three items fill a 3-column row.

Cards with a fixed image slot: image always occupies the top placeholder, regardless of DOM order.

Alternating row layouts: two templates cycle automatically.