Flexbox Containers

Starting from version 3.19, Elementor has introduced a new method for creating content layouts called "Flexbox Containers." You can find more information about Flexbox Containers in this article: https://elementor.com/help/elementor-editor/creating-a-page-layout/flexbox-containers/

Below, we will address the following questions:

How to switch back to sections / columns?

Containers have been introduced to replace the previous method of creating content using sections and columns. While flexbox containers offer additional flexibilities, some users may initially find them somewhat complicated compared to the previous method. Additionally, most of TheGem demo content has been created using sections and columns.

If you find flexbox containers uncomfortable to use, you can always switch back to sections and columns in Elementor's settings by following these steps:

https://elementor.com/help/deactivate-containers/

I want to use containers, but what about TheGem default paddings and gaps?

By default, Elementor's flexbox containers have their own default values for column gaps and container paddings, which may differ from those used in TheGem theme for section/column designs.

To ensure compatibility between the gaps and paddings used in flexbox container layouts and those used in section/column layouts, TheGem has introduced the "Default Paddings" option for flexbox containers:

By default, this option is active for each container and does the following:

If the container does not contain another container(s) inside itself:
a) Left & right default container paddings are set to 21 px.
b) Top & bottom default container paddings remain as per Elementor's defaults: 10 px.
If the container contains another container(s) inside itself:
a) Left & right default container paddings are set to 0.
b) Top & bottom default container paddings are set to 0.

With this option active, by adding containers inside the container and adding items/widgets inside these containers, you get the same default paddings as you used to have by using sections and columns. This simplifies your workflow as no additional actions for adjusting paddings and gaps are needed. You can simply drag and drop containers and widgets in your content area, and everything gets aligned automatically.

If you prefer to use default Elementor container paddings and gaps, you can disable this feature "Default Paddings" in Theme Options -> Extras globally:

What about the Header Builder? Is there anything specific I need to know?

There is nothing specific to know about the Header Builder in regards to flexbox containers. You can create your header templates with Elementor using flexbox containers in the same way you did previously (check this article https://docs.codex-themes.com/article/257-editing-header-template).

Thanks to the "Default Paddings" setting, all gaps and paddings used for containers and content widgets are automatically adjusted for a perfect TheGem look:

Simply add the container as your main header container
Then, drag and drop the content widgets into this container and align them accordingly with the "Flex Options" as described in this article.

Note: If your added content widgets are positioned vertically (under each other), please check the "Direction" setting of your main container - it should be set to "Row - horizontal":

Can I convert my existing section/column layouts to flexbox containers?

Certainly, you can do it using the following button in the Elementor section:

Note: if the columns, inner sections, and content elements within the section (to be converted to a flexbox container) have custom paddings and gaps manually defined, the resulting layout may differ from the original. This occurs because while the conversion of the default paddings and gaps used in sections, columns, and content widgets works seamlessly, manual custom paddings cannot be automatically adjusted and overwritten. As a result, minor discrepancies between the section/column and flexbox container layouts may occur. In such cases, you would need to manually adjust the paddings and gaps to ensure consistency in the layout.