Container Layout
Adds a Content Layout control to every Elementor container with four modes: Flex, Grid, Slider, and Custom Layout — plus the ECS Container Placeholder widget and the ECS Custom Layout document type.
Layout modes
| Mode | Description |
|---|---|
| Flex | Default Elementor flex container. |
| Grid | CSS grid with column and gap controls. |
| Slider | CSS scroll-snap slider — no external libraries. |
| Custom Layout | Distribute children into a template via placeholder widgets. |
Slider mode
Slider uses CSS scroll-snap. No Swiper or external library on pages that don't need it. A small JS file (ecs-slider.js) is loaded only on pages with a slider container.
| Control | Description |
|---|---|
| Visible slides | 1 / 2 / 3 / 4 at once |
| Space between | Gap (px) |
| Infinite loop | Wrap around |
| Autoplay / speed | Auto-advance, delay (ms) |
| Transition speed | Animation duration (ms) |
| Pause on hover | Stop autoplay on hover |
| Navigation | arrows / dots / both |
Custom Layout mode
Inject a container's direct children into an arbitrary template. The template is an Elementor document of type ECS Custom Layout with ECS Container Placeholder widgets as target slots.
- Go to Templates → Custom Layouts → Add New.
- Build your structure. Place placeholder widgets where children should appear.
- On a container → Content Layout → Custom Layout.
- Select your template from the dropdown.
- Add widget children — ECS distributes them at render time.
| Scenario | Result |
|---|---|
| Children = Placeholders | 1:1 mapping |
| Children > Placeholders | Template cycles |
| Children < Placeholders | Unfilled placeholders render empty |
Use cases
Alternating card layout: template has image-left on odd rows, image-right on even rows.
Magazine hero + grid: first placeholder spans full width, the next six arrange in a 3-column grid.
Global card design system: one template defines card anatomy. Reuse across containers and pages.