Structuring your WordPress page properly starts with understanding how to add and manage sections in Elementor. This guide explains how to add both regular and inner sections, helping you design flexible, well-organized layouts.
Adding a Basic Section in Elementor
To begin designing your layout, you'll often start by inserting a new section. Elementor's drag and drop section builder makes this intuitive and fast. If you're wondering how to add a section in Elementor, this process is your foundation for every new layout.
- Open your page in the Elementor editor.
- Click the + button to add new section in Elementor editor.
- Choose your desired column structure (e.g., one column, two columns).
- Drag widgets into the section to build your content.
- Customize the section layout from the left-hand panel, including padding, background, and alignment settings.
You can also duplicate existing sections or save them as templates for reuse, which is useful when maintaining consistent design across your website.
How to Add Inner Section in Elementor
Inner sections allow you to nest layouts inside existing sections, enabling more complex designs like multi-column rows inside a single main section.
- Find the Inner Section widget in the Elementor panel.
- Drag it into an existing section or column.
- It will automatically add two columns by default.
- You can then insert widgets into either column, or add more columns as needed.
Customizing Sections in Elementor
Once you've added a section or inner section, Elementor provides a comprehensive set of customization tools to help you control the layout, style, and behavior of your content.
Whether you're designing a simple text block or a complex hero section, you can fine-tune nearly every visual aspect—from structure and spacing to background effects and animations. These tools allow you to create responsive, visually appealing designs without writing a single line of code.
How to Split Sections in Elementor
Sometimes, you need to divide an existing section into multiple columns or parts. Here's how you do it:
- Select the section.
- Click on the column handle to add or remove columns.
- Adjust column widths by dragging the divider or setting specific percentages.
This method is essential for advanced layout with Elementor and for maintaining design symmetry.
Elementor Section and Inner Section Difference
Understanding the difference between sections and inner sections improves your Elementor website structure guide.
Main Sections. These define the outermost layout blocks. They typically span the full width of the content area.
Inner Sections. These are nested within main sections or columns to create sub-structures. Ideal for intricate content groupings.
Troubleshooting Common Issues
If sections aren't displaying correctly or appear to be missing, it's often due to structural or styling missteps in the editor. Elementor is a powerful tool, but some issues arise when layout settings conflict or browser behavior interferes. Below are frequent problems along with practical steps to help you identify and resolve them:
- Limit section nesting. Elementor allows nesting through Inner Sections, but stacking too many levels deep can result in layout breaks, especially on mobile devices. Use a maximum of one or two nested levels and consider alternative layouts using columns or widgets.
- Check spacing settings. Excessive padding or negative margins can unintentionally hide sections or cause them to overlap with other content. Use the responsive preview to test across screen sizes and reset any values that appear misaligned.
- Clear cache and update plugins. Outdated versions of Elementor or browser caching issues may cause sections to appear broken or invisible. Always update to the latest plugin version and clear both browser and site cache to ensure changes are properly rendered.
Useful Links
Inner Section Widget Guide – Elementor Help Center – Official documentation detailing how to add, customize, and use the Inner Section widget. Includes updates as of September 29, 2024.
How to Use the Inner Section Widget – Elementor Academy – A step‑by‑step tutorial on leveraging the Inner Section widget for advanced layouts, with layout, style, and responsive setting guidance.
Elementor Help Center – The main support hub for all Elementor features, including section and column settings, troubleshooting, and links to community forums.
Elementor Container vs. Section Explained – A comparison guide (June 2025) explaining when to use traditional sections/inner sections versus the newer Flexbox Container feature.
Enhance Your Elementor Website with Powerful widgets!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Mastering how to add a section in Elementor is crucial for building well-structured and visually appealing WordPress pages. By using both standard and inner sections effectively, you gain complete control over layout design, from simple columns to complex multi-row structures. Keep experimenting with the customization options and design tips provided to create professional-level layouts easily.
