How To Use Elementor Flexbox Container Element?

Since Elementor Page Builder 3.6, a new important element called Elementor Flexbox Container element has been released. Flex Container Elementor element allows you to build your Elementor website with more flexibility using Flexbox CSS properties. Elementor Flexbox Container also helps you to create outstanding and attractive layouts easily with just a few clicks and create more responsive and lean designs. Using this feature also will improve your website performance.

Elementor Flexbox Container will replace sections, columns and inner sections in Elementor. So, take the chance now to understand and build layouts using them.

Advantages of using Elementor Flexbox Container

First, we need to list the advantages of using Elementor Flexbox Container element and what it brings for web creators.

• Create More Optimizing Layouts: With Elementor Flexbox Container, you can set content direction, items alignment, justify content, etc. which will replace sections columns and inner sections in old Elementor sections.
• Reduce DOM bloat: Flexbox container reduces the number of columns and inner-section while creating nested layouts by removing redundant inner div containers and then aligning items using Flexbox CSS. Those removed divs will decrease the page code and which will increase your page loading speed and performance
• More Responsiveness: All those options will help you to change the user experience based on the device viewport.
• Infinite Nesting Ability: In the old Elementor section, you were able to insert one inner section in the section. But with the new Elementor Container, you will be unlimited Containers inside each other to create complex layouts.
• Hyperlink Container: Now you can hyperlink the entire container not just the widget and don’t need to use the external addon to achieve that.

Now, we’ve listed some advantages of Elementor Flexbox Container, now let’s start by how to enable this new option.

How to Enable Elementor Flex Container Element?

First, you should have Elementor version above 3.6 installed on your website, then:

1. Head up to Settings under Elementor in your WP Dashboard.
2. Navigate to Experiments tab in Elementor Dashboard.
3. Scroll down to Flexbox Container option and set it to Activate.
4. Then scroll to the end of the page and Save Changes.

How to use Elementor Flexbox Container?

Now, open any Elementor page with Edit With Elementor button and you will be able to see Container element in Elementor editor panel. You can drag and drop it to the editing area or click on the plus (+) button.

Elementor Flex Container Element Options

Elementor Container Flexbox brings new options that will help you to create and build your layout without any restrictions and with more freedom.

Let’s start with Container options:

• Content Width: Select container width boxed or full width.
  • Boxed: This allows you to set a specific width for your container in different measurement units and responsive viewport.
  • Full Width: This allows your container to take full-screen width.
• Width: Set the width for your container element.
• Min Height: Set minimum height for the container.
• Overflow: Set container overflow default, hidden or auto.
  • Default: This will allows your element to be outside the container.
  • Hidden: Hides overflowing elements.
  • Auto: Adds a horizontal scroll bar to your container.
• HTML Tag: Select container HTML tag from dropdown. You can make the whole container clickable using a tag.

Also, it brings new group options called Items which will be applied to container elements:

• Direction: Set container elements direction: Row, Column, Reversed Row or Reversed Column.
  • Row: Position elements horizontally.
  • Columns: Position elements vertically.
  • Reversed Row: Position elements horizontally in reverse order.
  • Reversed Column: Position elements vertically in reverse order.
• Align Items: Align container elements to Flex Start, Center, Flex End or Stretch.
  • Flex Start: Algin elements to start of container in Row or Column directions.
  • Center: Algin elements to center of Elementor container.
  • Flex End: Algin elements to end of container.
  • Stretch: Stretch your elements to fit the container.
• Justify Content: Defines space between and around content elements along the main axis of a flex container, and the inline axis of a grid container.
  • Flex Start: Justify elements toward the start edge of container.
  • Center: Justify elements toward the center of container.
  • Flex End: Justify elements toward the edge of container main-end side.
  • Space Between: Set spacing between each pair of elements is the same.
  • Space Around: Set spacing between each pair of elements is the same.
• Elements Gap: Set spaces between Elementor elements.
• Wrap: Set elements wrap to be in multiple lines or just one line.

How to Convert Elementor Section to Elementor Flex Container Element?

So, what will happen to my existing Elementor sections? Don’t worry, Elementor released an option to convert sections to a new flexbox container with just one click.

Head up to section settings and you can find Convert button in Layout in Elementor Panel. Once you click on this button, a copy of the container containing widgets will be created underneath the section. Also, you can find the same settings in Page Settings that will help you to convert all sections on the page to Elementor Flexbox Containers.

Conclusion

Now start to test and play with Elementor Flexbox Containers options and try to create new and outstanding layouts with just a few clicks.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.