How to Add Elementor Containers
Elementor Containers use Flexbox for modern layouts, replacing sections; add via + icon in editor, customize Layout/Style tabs, nest for complexity, and convert legacy sections. Fixes for common issues like overflow involve setting direction to Row and widths to auto. Pro-only feature enabled in Settings.
Prerequisites
- Active Elementor Pro license
- Flexbox Container feature enabled in Elementor Settings > Features
- Compatible WordPress theme and site backup
- Basic Elementor editor knowledge
Step-by-Step Instructions
Enable Flexbox Containers
Elementor > Settings > Features and set Flexbox Container to Active. New pages will default to containers; legacy sites need conversion. Ensure Elementor Pro is active as containers are Pro-only.Open Elementor Editor
Edit with Elementor to launch the editor. The canvas shows existing elements or empty space for new containers.Add New Container
+ Add New Container button at page bottom or between elements. Click to insert; it defaults to Flexbox layout, Vertical direction, Space Between justification, 20px gap, and Boxed width (often 1140px max from site settings).Edit Container Settings
Edit Container handle (dot icon) above the container to open left Panel tabs: Layout for direction/width/height/gaps, Style for background/border/padding, Advanced for effects/responsiveness.Add Widgets to Container
Widgets Panel (use search bar) into the container. Elements stack vertically by default; set Layout > Direction to Row for horizontal.Customize Layout Options
Layout tab: Set Width to Boxed/Full/Custom (e.g. 1200px), Height to Fit to Content/Min Height (e.g. 100vh), Gap to 20px, Justify Content to Center/Space Between, toggle Wrap On for multi-line.Add Nested Inner Containers
+ icon or drag Container from panel. Defaults to Horizontal (Row) with 2 columns; set child Width to 50% for splits (e.g. 4 at 25% in 1200px parent).Convert Legacy Sections
Edit Section blue dot. In Layout tab, click Convert to duplicate as Container below. Verify alignment/padding/min-height in Style, then delete original.Save and Preview
Update button bottom-left. Preview responsiveness; no terminal needed as it's no-code GUI.Common Issues & Troubleshooting
Margin not working or child overflowing parent
Set parent Direction to Row in Layout tab; enables horizontal shrink. Set child widths to auto and disable flex-shrink conflicts.
Copy-paste nesting fails or navigator confusion
Paste at page bottom before dragging up. Name containers in Navigator panel for identification.
Unexpected flexbox behavior vs old sections
Toggle Wrap On, adjust Justify Content/gaps. Disable Flexbox feature if sticking to legacy sections.
Missing Inner Section widgets after enabling
Containers replace sections/columns; use nesting instead of Inner Section widget for deeper layouts.
Plugin/theme conflicts breaking layouts
Test on staging, ensure compatible theme. Reduce DOM by minimizing nested divs with containers.