Inner Section Widget

🌟 Purpose

The Inner Section widget enables you to nest one section within another, effectively adding another layer of layout control. It’s ideal for building more complex page structures and organizing content within an existing section.

➕ How to Add

1. In the Elementor editor, access the Widgets panel.

2. Drag and drop the Inner Section widget into any section or column.

3. By default, it includes two columns—which you can add to or remove (up to ten columns total).

4. Note: You can place an Inner Section inside a normal section or column, but not within another Inner Section.

🏗️ Common Use Cases

• Hero areas with multiple content blocks (e.g., image in one column, text in another).

• Pricing tables showing multiple plans side by side.

• Portfolio grids with thumbnails and descriptions.

• Team member sections, contact info layouts, or testimonial areas.

⚙️ Layout Settings

• Content Width: Choose between boxed or full-width layouts; boxed mode accepts a custom width.

• Columns Gap: Defines space between columns (options like narrow, wide, custom, etc.).

• Height Control: Set the section’s height as default, fit-to-screen, or a custom minimum height.

• Vertical Align: Align column contents (top, middle, bottom, or evenly spaced).

• Overflow: Decide whether content that exceeds the container should be visible or hidden.

• HTML Tag: Choose the tag wrapping the section for structure or SEO.

• Structure Presets: Choose column layouts by percentage (e.g., 50/50, 33/66, 66/33).

🎨 Style Controls

Under the Style tab, you can:

• Apply backgrounds (color, gradient, image, or video), including hover state versions.

• Add and style background overlays with adjustable opacity and blend modes.

• Define border style, width, and radius.

• Add box shadows for depth.

• Insert top or bottom shape dividers (wave, zigzag, curve, etc.) with adjustable style and height.

• Customize typography settings for text and links within the Inner Section.

⚙️ Advanced Settings

In the Advanced tab, you can:

• Adjust padding, margins, z-index, and control responsive visibility.

• Enable sticky behavior (top or bottom) with a “stay in column” option to keep content fixed on scroll.

• Add custom motion effects, entrance animations, and HTML attributes.

• Insert custom CSS for advanced design tweaks.

✅ Best Practices

• Use Inner Sections to structure multi-column layouts without complicating the main section.

• Limit column count to what’s necessary to avoid clutter.

• Match background styles and overlays across nested elements for consistent design.

• Use sticky inner sections sparingly to highlight key content without overwhelming the layout.

• Choose appropriate structure presets to ensure responsive alignment across devices.

The Inner Section widget enriches your design toolkit by allowing nested layouts, split content, and advanced styling—all within Elementor’s intuitive interface.