Elementor

Using flexbox containers in Elementor custom website development

BIG linden / Support Docs / Using flexbox containers in Elementor custom website development

Elementor

Q:

We’re hearing a lot about using Flexbox containers instead of sections and columns for new development with Elementor. Can you provide any insight into using Flexbox?

Issue

The client wants to know more about using Flexbox Containers when creating a website with Elementor.

Using flexbox containers in Elementor custom website development

In Elementor, Flexbox Containers are an excellent way to layout content within your pages, as it provides you with greater control over how the elements behave on various screen sizes, allowing you create responsive sites that look great both on desktop and mobile devices.

Design your website for each device and create the perfect user experience… You decide how items grow and shrink, adjust the direction, distribution, or order, to fit on every screen size, without duplicating content.

“Flexbox – Elementor’s new building block that empowers you to efficiently lay out, align and distribute items in a Container in an ultra lightweight and responsive way…” explains the Elementor Flexbox team. “Flexbox Containers [are our] new lean layout structure that brings CSS Flexbox into the Editor.”

Using the new Flexbox containers empower Elementor developers to “build complex layout patterns by nesting any number of containers and items” they explain further. “They can easily be aligned, ordered, spaced and scaled in a horizontal or vertical direction.”

Flexbox eliminates the need for inner sections and columns entirely, bringing Elmentor’s development process ahead of the competition. This is clearly giving Elementor an edge as more and more organizations and developers choose Elementor for their website development project.

“With Flexbox Containers, you can use a single container, add all the logos you want, and change the Container’s direction from column to row, to see all your logos in one row, in a single click. You can also leverage the Justify Content control to distribute the logos as you’d like within the Container.”

Elementor Flexbox containers, released as a part of Elementor 3.6 with an original release date of March 22nd, then re-released as 3.6.1 on May 4, 2023. Elementor describes 3.6 as a “first step in a series of infrastructural updates that will transform the way you build websites.”

The aim of the release, and the new Flexbox containers, was to “achieve pixel-perfect responsive designs and highly advanced layouts quickly, and with a much slimmer markup, which improves performance significantly” they explain.

When Elementor 3.6 was initially released, back in late March, some users encountered technical issues with numerous third party plugins, which caused the Elementor editor to fail to load correctly, and was attributed to some incompatibility issues.

“We immediately released a patch with Elementor 3.6.1, which should resolve most occurrences of this issue by reducing the error enforcement rules, and will allow the Editor to load.”

Big benefits for using Flexbox

The real benefit for many will be the boost in performance. As developers integrate Flexbox into their best-practices for developing with Elementor, we expect to see a huge improvement in the overall user experience of Elementor websites (both from a development perspective, and an end-user browsing the website), but also we expect to see improvements in the overall performance of websites built with the platform.

“Flexbox Containers have fewer wrapping elements which generate less code, so your website loads and runs so much faster.”

Feedback is in, and users are reporting excellent results with Flexbox. “Once you get your head around the basics it’s an absolute pleasure to use. My pages load faster” offers Inspector-Tech on the Youtube live demonstration of the release. “I have no issues with pages displaying weirdly or any major compatibility issues with other plugins. I’m now able to concentrate about 85% purely on design and workflow whereas previously, it was about 25% design and 75% headaches because things would not work as expected. Seriously.”

Using containers for your page design properly, can drastically improve your page load performance and boost Lighthouse scores.

What is the difference between containers and sections in Elementor?

Functionally, from a development standpoint, there isn’t a lot of difference. Most developers are familiar with the concept of flexbox, so adopting this new tool within Elementor shouldn’t be difficult.

Simply by reducing the dividers used previously with sections/columns/inner sections and implementing new Flexbox containers, you can improve the DOM load on the page.

Some key benefits of Flexbox over sections:

  • Faster build time for designers and developers
  • Increased efficiency, running leaner code
  • Easily create clickable Containers
  • Unlimited nesting depth
  • Easier responsive design

Flexbox containers are a new feature in Elementor that allow for easier, more efficient page design. Flexbox eliminates the need for inner sections and columns entirely, bringing Elmentor’s development process ahead of the competition. Containers make it easy to align items horizontally or vertically, as well as distribute them evenly within the container with no additional code needed. Using flexboxes offer many benefits such as improved performance (faster load times), increased efficiency (running leaner code), unlimited nesting depth and easier responsive design without any major compatibility issues with other plugins.

What is the Elementor Flexbox container?

In the most basic terms, Flexbox consists of two primary components: the flex container (where your flex items reside) and the flex items (the content within your flex containers). They operate on an axis system — main axis and cross axis, controlled by a myriad of flexible properties that handle spacing, alignment, and sequencing.

Ready to try the new Elementor Containers? Check out the Containers Playground

To make it easier to learn and explore the possibilities of using Flexbox containers, Elementor built the Containers Playground. The Playground includes a number of ‘lessons’ intended to teach you how to use Containers in your design workflow and help you to get accustomed to designing with Flexbox Containers.

Additional reading

More articles about Elementor

More articles related to .

Capabilities related to Elementor:

Unmatched expertise in Elementor development. Industry-leading Elementor dev, design, and support team.
We know custom widgets in Elementor. Get the tools you need to succeed.

REQUEST A 1:1 CONSULTATION

Get a 30 minute 1:1 consult with a BIG consultant and get a 7 page report on making digital work in your organization with key insight into paths for success and playbooks just for your unique needs.

Please understand not all requests can be met. Please contact us with any questions.