Elementor Container vs Section – Technical Comparison
Basic Comparison
Containers speed up pages, by decreasing the number of sections needed in a website. Compared to containers, sections frequently have more for the inner sections and columns.
Elementor introduced a new feature, the “Container” or “Flexbox Container” in 2023. This is a recent addition to the Elementor ecosystem. In this article, we will explore the comparison between the elementor container vs section to determine which one is more suitable for our needs in 2023.
I am a professional web developer and Before writing this article, I had already experienced the Elementor Container feature. in this article, I have shared my experience with the new feature from a wordpress expert point of view. We will also delve into the advantages and disadvantages of each of these options.
- The layout structure of websites is made more user-friendly and modern with the introduction of Elementor Container. It represents an evolution from the familiar but less flexible section-column layout.
- Although sections, sub-sections, and columns made website creation easier with the classic section-column style, its adaptability was limited. Only one column and one sub-section could be included in each Elementor section. As more of these elements were added to a page, it resulted in slower website loading times.
- Furthermore, it was difficult to create mobile-responsive designs using this outdated foundation.
- While the section-column structure has been a useful tool for designers.
Major Disadvantages of Container Flexbox
In this release version, we can not stretch full Width in some themes. so now how to stretch the section in elementor container? well, It would be nice if the full-width page stretch feature is re-introduced for containers, hope elementor will fix it soon .so parent containers can stretch across the screen regardless of boundaries
Alternatives :
We can use manual JS but I don’t think this nice experience for new users.
Let's Checkout Elementor Container Vs Section Visual,Technical and Performance differences
Visual Difference
The Elementor page builder keeps the traditional page builder look on container feature. But there are some noticeable changes.
| Elementor Section | Elementor Container |
|---|---|
|
No Change |
You will still have the dashboard on the left sidebar , where you can access all your elements, and settings option. but Now, in the Navigator, you see containers and items instead of divisions and sections. |
|
No Change |
You can still click the + icon or drag and drop elements to add them to your webpage. The only difference is you need to choose a container and direction instead of sections and the number of columns. |
|
No Change |
You also get new choices for containers, like which way they go, how they line up, how much space between them, and more. |
Technical Difference
| Elementor Section | Elementor Container |
|---|---|
|
Elementor sections help you organize things like widgets, images, and text on your webpage. You can divide a section into columns and put different elements in each one. |
Flexbox containers offer a flexible and adaptable way to organize webpage elements. A container is similar to a section but doesn't have a set grid. |
|
Additionally, widgets in sections are full-width but in containers, they are inline by default. now you can put as many elements as you want inside a parent container |
As you add more items, the container adjusts its alignment, position, and size automatically to accommodate them. |
Performance Difference
The Flexbox container performs significantly better than section column, Its difference is huge. especially for websites with complex designs.
| Elementor Section | Elementor Container |
|---|---|
|
You may have noticed In traditional Elementor sections, the display property is set as 'block'.As a result, when you add a new section or a widget, they stack up over one another.In contrast, Flexbox containers use a 'flex' property, which means they're flexible. When you add new things to a container, you can stack them up and down or put them next to each other. |
Flexbox containers use a 'flex' display property for flexibility. When you add new components, you can either stack them vertically or place them side by side horizontally. |
|
If you want to display them side by side, you must create several divisions and DOMs, slowing down your final website.Thats decreases page load time |
There’s no need to create extra divisions. This keeps the webpage code easy to run, leading to much shorter load times. |
Let’s break the comparison so you can choose a suitable one for you:
When considering which option to use, several factors come into play . If you are focused on designing a complex website with numerous inner sections and require pixel-perfect precision, Elementor’s section feature may be more manageable. However, it becomes more complicated when ensuring responsiveness across various devices and dealing with numerous columns and inner sections, potentially impacting your website’s speed compared to the Container feature.
However, Elementor’s container feature is a better choice if you want to quickly develop an optimised site that prioritises mobile responsiveness. Most of Elementor’s advanced features are now part of Elementor Pro, and they are actively improving performance. Therefore, container features are becoming increasingly valuable compared to section features. ELEMENTOR PRO
Click to explore Elementor Pro new features here
In summary, you should base your decision on the complexity of your website, your requirements for design, and the importance you place on responsiveness and performance. Elementor Pro, with its container feature, offers a versatile solution for many website projects.
How to Use Elementor Container (Step-by-Step)
Elementor’s Flexbox page builder is much like the regular Elementor block builder. Whether you’re brand new to Elementor or switching from the old builder, you won’t have any trouble getting the hang of it.
You might be wondering about various things like, ‘How do I enable/activate a container in Elementor? How do I use containers in Elementor? How can I add a container in Elementor?’ This section has the answers for you.
For new websites, the container is already active by default.
To get you started, here’s how to use containers to design a website :
- Step 1: Activate Container in Elementor Settings
To use the new container, you need to turn on the Container feature if you want to upgrade your site from an older version to a newer one. So, go to Elementor settings in your WordPress admin dashboard. Then, click on the ‘Features’ tab, scroll down, find the “Flexbox container”, and choose ‘Active’ from the drop-down menu. Save your changes, and you are ready for the next step.
- Step 2. Create a New Web Page
Now, we need to create a new page like we usually do. Move to the Pages section, select All Pages, and click Add New.
- Step 3. Open Elementor
Now , open WordPress page builder window on your screen.Simply provide a title for this new page, and click ‘Edit with Elementor’ to start using Flexbox containers.
- Step 4. Add a New Container
You will have the standard Elementor page builder in front of you. Additionally, you can easily add a new container by dragging and dropping it from the sidebar, or simply clicking the ‘+’ icon and choosing the structure you want
- Step 5. Styling the Container
After adding a container, you can customize it by changing things like its type,width, height, direction, size, alignment, and more.
- Step 6. Drag and Drop Widgets to Containers
You can easily add widgets to containers by selecting the widget you want from the Elements tab and then dragging and dropping it onto the ‘+’ icon inside the container.
- Step 7. Customize Widgets
Similar to how you set global container settings, you can also customize the content within a container. This means you can adjust things like the direction, alignment, justification, spacing, and wrapping, among others.
- Step 8. Publish Your First Flexbox Web Page
You can make as many containers as you like, duplicate them, and change their positions. Just keep following these steps as you add more elements, and when you are finished, click the Publish button to make your webpage live. If you want to see how it looks before publishing, click the Preview button to interact with your new Flexbox Container webpage.
FAQ - Frequently Asked Questions
Full-width widgets are organised on a page in sections in Elementor, but with Flexbox containers, widgets are inline in a container. Furthermore, Flex containers allow for infinite laying eggs, while sections are fixed and limited to one inner section.
Using Flexbox containers in Elementor, you have many choices to make sure your webpage looks good on different screens. For instance, you can decide if your content should go in rows or columns. You can also make sure your content lines up the right way and choose when it should wrap to the next line. And you can even control whether a widget shows up or not on certain devices.
Absolutely, you can use Elementor addons with Flexbox containers without any extra steps. These containers work smoothly with addons and third-party plugins.