Elementor’s new container system, introduced in Elementor 3.6, is a revolutionary new way to build websites. Based on the CSS Flexbox layout model, containers give you unprecedented flexibility and control over the design and layout of your pages.
One of the biggest benefits of the new container system is that it allows you to create more complex and sophisticated layouts without having to write any code. With containers, you can easily create layouts with multiple columns, nested containers, and flexible alignment options.
Another great benefit of the new container system is that it makes it easier to create responsive websites. Containers automatically adjust their size and layout to fit different screen sizes, so you can be sure that your website will look great on any device.
In addition to these benefits, the new container system also offers a number of other performance and usability improvements. For example, containers can help to reduce DOM bloat and improve page loading times. They also make it easier to manage and style your content.
Benefits of Elementor’s New Container System
Here is a more detailed look at some of the benefits of Elementor’s new container system:
- More flexibility and control: Containers give you unprecedented flexibility and control over the design and layout of your pages. You can easily create layouts with multiple columns, nested containers, and flexible alignment options.
- Responsive design: Containers automatically adjust their size and layout to fit different screen sizes, so you can be sure that your website will look great on any device.
- Improved performance: Containers can help to reduce DOM bloat and improve page loading times.
- Easier usability: Containers make it easier to manage and style your content.
How to Use Elementor’s New Container System
To use Elementor’s new container system, simply drag and drop a container widget onto your page. You can then add other widgets to the container, or even nest other containers inside of it.
Once you have added your widgets to the container, you can use the container’s settings to control its layout and design. For example, you can specify the number of columns, the alignment of the widgets, and the spacing between them.
You can also use the container’s settings to control its responsiveness. For example, you can specify how the container should behave on different screen sizes, and how the widgets inside of the container should be aligned.
Examples of Using Elementor’s New Container System
Here are a few examples of how you can use Elementor’s new container system to create different types of layouts:
- Hero section: You can use a container to create a hero section at the top of your page. The hero section is typically a large, full-width section that features your website’s logo, tagline, and a call to action.
- Features section: You can use a container to create a features section on your page. The features section is a great place to showcase your product or service’s key features and benefits.
- Testimonial section: You can use a container to create a testimonial section on your page. The testimonial section is a great way to build trust and credibility with your visitors.
- Blog layout: You can use containers to create a blog layout for your website. The blog layout typically consists of a list of blog posts, with each post displayed in its own container.
- Product catalog layout: You can use containers to create a product catalog layout for your eCommerce website. The product catalog layout typically consists of a list of products, with each product displayed in its own container.
These are just a few examples of how you can use Elementor’s new container system to create different types of layouts. The possibilities are endless!
Tips for Using Elementor’s New Container System
Here are a few tips for using Elementor’s new container system effectively:
- Use nesting to create complex layouts: You can nest containers inside of other containers to create complex and sophisticated layouts.
- Use flexbox properties to control the layout of your content: Containers support all of the CSS Flexbox properties, so you can use them to control the layout of your content in great detail.
- Use responsive settings to make your website responsive: Containers automatically adjust their size and layout to fit different screen sizes, but you can also use the responsive settings to further customize their behavior.
- Use presets to save time: Elementor comes with a number of pre-made container presets that you can use to get started quickly.
Conclusion
Elementor’s new container system is a revolutionary new way to build websites. With containers, you can create more complex and sophisticated layouts, responsive websites, and improve the performance and usability of your website.
