Sections, columns and containers

Elementor builds pages by dragging widgets into a structure. Getting the structure right is the difference between a site you can edit in a year and one you rebuild.

Containers replaced sections and columns in recent versions, and they are better: they use flexbox, nest cleanly and produce far less markup. If you are starting now, use containers. If you inherit a site built on sections, do not convert it halfway, because a page with both is confusing to everyone including you.

Think in rows and blocks. A page is a stack of horizontal bands. Each band is one container. Inside it, the content sits in nested containers. Build the outer structure first and fill it afterwards, rather than dragging widgets in and trying to arrange them later.

Width settings. A container can be full width, with its content constrained to a readable measure inside. This is what gives you a full width coloured band with centred text, which is most of modern web design.

Naming matters. Rename your containers in the navigator panel: Hero, Services, Testimonials. A page of twenty containers all called Container is unmaintainable, and the person who suffers is whoever opens it next.

Do not nest deeply. Three levels is plenty. Deep nesting produces slow pages and a structure nobody can edit without breaking something.

Set your global spacing values once in the site settings and use them, rather than typing a different padding on every container. That is what makes a site look designed.