Comprehensive analysis of Elementor Container: detailed tutorials from basic setup to advanced applications

What is Elementor Container

Elementor Container is a new feature in the Elementor page builder for creating highly flexible and responsive page layouts. Container provides more powerful control and more layout options than traditional Section layouts. It supports two main layout modes : Flexbox and Grid.

1. How to enable Elementor Container?

First you need to combine your Elementor Page Builder plugin with theElementor Pro PluginUpgrade to the latest version.

After upgrading the plugin to the latest version, navigate toElementor>set uppage under the Features tab

In Stable Features putGrid ContainerActivation:

activateFlexbox ContainerIf you want to use the Mega Menu that comes with Elementor, you also need to activate the Nested Elements and Menu functions.

Once the settings are complete drag and drop the page to the bottom and click the save button.

2. How to convert Section in a page to Container?

After entering the page editor select the Section you want to convert into a Container and drag the Container into the selected slider.

After conversion, an identical Container module will be automatically copied under the converted Section module. After confirming that there is no problem with the Container module, you can directly delete the Section module above it to complete the conversion from Section to Container.

3. Some advantages of Elementor Container over Section

3.1 Greater responsiveness

Container can take full advantage of the controls in the layout to automatically make responsive adjustments. This means that in most cases, you don't need to do much setup to achieve an automatic responsive layout for your content. Section, on the other hand, requires you to manually configure and adjust for different devices to achieve the perfect responsive effect.

Container also allows you to customize the responsive layout for different devices to meet specific needs.

3.2 Better layout control

Container has more freedom and flexibility than Section. You can nest multiple levels of Containers and customize their width and height. This makes creating feature-rich and complex templates much faster and easier. Container offers more flexibility than traditional layouts, whereas Section layouts can only divide widgets into sections and columns.

3.3 Page Speed Improvement

Will Elementor be slow?Section layouts can be a bit slow for you, but not Container!

Elementor Container improves page speed by reducing the number of separators used. Sections, on the other hand, typically contain more columns and internal sections, and the more delimiters there are, the larger the Document Object Model (DOM) becomes, which increases page load time. Using Container reduces data requests and shrinks the DOM, resulting in a significant increase in page load speed.

3.4 Adding Links Directly to the Container

When doing a Loop Item, you can just add links to the entire Container instead of adding links to each element. Simply change the Container's HTML tags to read<a>tags, can be realized. This makes link management easier and more efficient.

4 Basic Settings of Elementor Container

4.1 FlexBox and Grid for Elementor Container

FlexBox and Grid are two layout modes which are suitable for different design needs.FlexBox is suitable for highly free layout, while Grid follows the grid. You can choose the appropriate layout mode according to your specific needs.

a. What is FlexBox Container?

FlexBox Container is a flexible layout that offers highly free layout options for your website.

b. What is Grid Container?

Grid Container is a grid layout method that controls the arrangement of elements by setting rows and columns to keep all grids highly consistent. If your page requires a grid layout, using Grid Container will be more convenient and efficient.

4.2 How to add Container to a page?

a. Add via canvas

Where you need to add the Container in the Elementor canvas, click on the + sign for the module below and click on the + sign in the popup area.

Then click Flexbox or Grid in the pop-up layout to add the corresponding Container to add to the page.

This method is used to add the top Container in the page, which is the outermost layout container of the page. The top Container is external to the page canvas and does not nest other Containers.

You can choose to use multiple Containers on a page, or use one Container and nest other layout Containers inside it, depending on your layout planning.

b, through drag-and-drop layout elements to add

Adding a nested inner container is accomplished by dragging and dropping the layout element as follows: In the Elementor element library on the left side of the Elementor canvas, locate the Container element under Layout and drag and drop it to the corresponding area.

After dragging and dropping you can you can also observe this dragged Container through the navigator, nested inside a Container.

The Containers added below are all by defaultFlexbox mode, which you can modify in the Layout settings as you see fit to theGridMode.

4.3 Container Layout Settings

1. Container general settings

To set the Container layout, follow these steps:

1. Select the Container you want to set with the mouse.
2. In the left window, switch to the "Layout" tab.
3. You can make layout settings for Container under this tab, such as adjusting width, height and alignment.

Container Layout is used to switch the layout of the Container, there are two options Flexbox and Grid, the default option is Flexbox.

Content WidthUsed to set the width of the Container, you can choose "Boxed" or "Full Width". By default, it is set to "Boxed", which means that the content width is based on a fixed value. You can set the global content width in Elementor's site settings.

The default width of Boxed is the width of the content that you have set up globally in Site Setting, and you can modify the width via the slider.

Full WidthIts default width will be spread based on the wrapped Container, or if it's the top outermost Container in the canvas, the width will be spread based on the browser window by default. You can adjust the width via the slider.

Min HeightUsed to set the minimum height of Container. When there is no content or less content in the Container, it will show the minimum height; if there is more content in the Container, it will be automatically adjusted according to the height of the content. You can modify the height by sliding the bar or entering a value.

Container Layout can switch from Flexbox to Grid, and the Item settings of Flexbox and Grid are different.

2、Item settings of Flexbox

When you set Container Layout to Flexbox, you can see the Item settings as follows:

Direction represents the display direction, there are 4 options, according to the arrow direction winds are: left to right, top to bottom, right to left, bottom to top.

Use Direction to change the direction and order of the elements you place in the Container.

Justify ContentUsed to set the alignment of the elements inside the Container on the main axis. If Direction is set to Horizontal (left-to-right or right-to-left), Justify Content is used to set the alignment of the element in the horizontal direction; if Direction is set to Vertical (top-to-bottom or bottom-to-top), Justify Content is used to set the alignment of the element in the vertical direction.

Justify ContentUsed to set the alignment of the Container's internal elements on the spindle, with the following five options:

1. Start: Arranges the elements from the start of the Container layout direction.
2. Center: Centers the elements in the Container.
3. End: Arranges the elements from the end of the Container layout direction.
4. Space Between: The first element is placed at the start, the last element at the end, and the remaining elements are evenly distributed.
5. Space Around: Each element has the same surrounding space.
6. Space Evenly: The distance between each element is equal.

Align ItemsUsed to set the alignment of the Container's internal elements in line with the main axis direction. It contains the following four options:

1. Start: Aligns the elements inside the Container based on the starting point of the Direction layout direction.
2. Center: Centers the elements inside the Container based on the Direction layout direction.
3. End: Aligns the elements inside the Container based on the endpoint of the Direction layout direction.
4. Stretch: Stretch elements to fit the size of the container. If elements are 'auto'-sized, they will be stretched to fit the size of the container; if they are set to a fixed size, they will not be automatically stretched.

4、Additional Options其他选项设置

There are 2 options in Container's Additional Options.

Overflow Overflow Settings

Controls whether the Container's content doesn't fit in the browser window, and whether overflow should be hidden or visible, resulting in horizontal scrolling.

OverflowThere are three options:

• Default allows items outside the container to overflow.
• Hidden Hide overflowed items, no access to overflowed items.
• Auto Creates a scroll bar to keep items accessible when content overflows, a setting that allows content to be slid in a moving view.

Hidden state, if the content is overflowed, you can't see the overflowed content.

4.4 Container style settings

Switch to the Container's Style tab to set the Container's style.

1）Background(background)

You can set the background color for the Container via the background.

You can also set a background image for Container's.

(2) Background Overlay)

Background Overlay allows you to overlay a layer of color or image mask to the background you set, you can set the transparency of the color or image to match the effect you want to achieve.

3) Border (border settings)

Border is used to set the Container's border and projection effect.

4) Shape Divider (Shape Divider)

Shape split line can be used to do some Container between the split effect, which is a function provided by the UAE plugin.

You can choose whether to set the split shape of the top or bottom of the Container by toggling Top and Bottom, and in Type you can choose a shape you like (only the ones provided)

Summary:

This article takes you through how to enable Elementor Container, convert a Section on a page to a Container, and understand the advantages of Container over Section, such as greater responsiveness, flexible layout control, and increased page speed. The tutorial also covers Container layout settings, including the use of Flexbox and Grid layout modes, as well as how to add links and custom styles to the Container. Whether you're a beginner or an experienced web designer, this tutorial will help you take full advantage of the power of Elementor Container to improve web design efficiency and effectiveness.