The default layout element in Elementor is the container. However, before the development of containers, Elementor used sections and columns for layout, so many creators are used to creating with sections.
When moving from designing webpages with sections to design with containers, there are a few things to keep in mind:
- Sections and columns work vertically. When you add an element to a section, that element will be placed under or above any existing elements. With containers, you select whether elements will line up vertically or horizontally.
- Containers allow you to create more sophisticated designs with a greater level of customization. For example, the Icon Box widget allows designers using sections to combine an icon, a heading, and text within a contained area. Using a container’s nested elements, creators can combine elements to create their own customized widgets, for example, combining an icon with a heading and an animated headline.
- With sections and columns, the columns will always take up 100% of the section’s width, for example, two columns that are each 50% of the total width. Alternatively, nested elements in containers can take up either more than 100% of a container’s width, or less than 100% of its width. For example, two nested containers that are each 60% of the parent container’s width.
- One of the greatest advantages containers have over sections is their flexibility in responsive design. For more details, see Responsive design using containers. To check out examples of responsive design, see Spacing identical elements in a container, and Spacing identical elements in a container with nested elements.
- When creating sections in a design, you can also specify a minimum height for them. But the individual columns within the section cannot do this. With containers, both the parent container and the nested elements can be set to a minimum height. In fact, it is often better not to give the parent container a minimum height, and just assign a minimum height to the nested elements.
To learn more about the differences between sections and containers, see What is the difference between containers and the traditional section/column?
For a more detailed look at how to convert sections into containers, see Convert sections into containers.
For a more detailed understanding of containers and their benefits, and to see a list of videos and articles about using containers, check out How to learn about containers.
