The Ultimate Elementor Flexbox Tutorial: Beginner to Pro

Step 3: Add a container

Now, you need to add a container instead of a section. Select the structure you prefer by clicking the + icon. (see screenshot below)

Remarkably, the navigator’s structure may appear to be made up of columns, but it is actually a container with additional containers inside it. Alternatively, you can select a single container via the menu on the left and drag it into place.

Multiple aspects of the container can be changed, including

• Container Width: You can choose a boxed or full-width container.
• Width: The width will be 928 pixels if you select Boxed as the container width. On the other hand, when you select Full Width, the container width matches the viewport width exactly. However, you can alter the width values for both.
• Overflow: You can select the overflow value from Default, Hidden, or Auto.
• HTML tag: The container’s HTML tag is also modifiable. For example, you can choose from alternatives like div, header, footer, main, article, section, etc. In addition, A new tag has been added. In this technique, With this technique, you may use a tag to transform an entire container into a link.

In addition, there are numerous possible options under “Items” (more on that later). Moreover, each inner container’s settings can be customized.

Step 4: Add widgets

Similar to how column section structures work, adding widgets follows the same steps. To begin, for each container’s plus icon, you must first find the widget before dragging it there.

Step 5: Customize container contents

The container widgets can now be customized. To do this, edit the container. Next, select the Items option under Arrangement on the left panel.

• Direction:The row direction remains the default. However, four alternatives are available: Row, Column, Reversed Row, and Reversed Column. If you select a column or reversed column, every container inside the primary container will display as an individual column.

(see screenshot below)

Note: You must change the inner containers’ width if you select a column.

• Align Container: Container alignment options include Flex Start, Flex Center, Flex End, and Stretch. With a Flex Center value, you may center the objects in your container element after Flex Start places them from the starting point.

(see screenshot below)

Conversely, the Flex Start and Center values work the same way as in the row when the direction is set to column. However, the containers will move to the right with Flex End and to the left with Stretch, occupying any remaining space.

• Justify Content: You have six options: Flex Start, Flex Center, Flex End, Space Between, Space Around, and Space Evenly.

(see screenshot above)

Each container will gain space at the top and bottom if the Space Around option is selected. The Space Evenly option adds the same amount of space all around the widgets and inner containers.

• Elements Gap: You can add space between elements (widgets and inner sections) with this option.
• Wrap: Select Wrap if you want the contents to flow across multiple lines instead of being forced into a single line.

Step 6: Publish & Preview

To change every setting for your container, repeat step 4. After finishing the customization, publish the page by clicking the publish button. Then, to examine your page with the new flex container structure, click the preview button.

How to convert a Section-based Elementor page to a Flexbox Container

Switching from the old Elementor Flex container to the new section/column-based structure is really simple.
The four straightforward actions listed below will help you accomplish this:

Step 1: Select the section you want to convert

Each section requires a separate conversion. To convert a section, first select it. You can select a section using the navigator located in the bottom-left corner, or by clicking the six dots. to do so. (see screenshot below)

Step 2: Click on Convert to make the conversion

To convert, first select the Convert to Container option situated underneath the layout on the left side. Next, click the CONVERT button. (see screenshot below)

Step 3: Delete the previous section

Once the conversion process finishes, there will be two versions of the same section: one container-based and the other section-based. The section-based version appears at the top. Therefore, delete the previous/original version.

Step 4: Update and Preview

Repeat steps 1 through 3 for each section of your page. Once you finish converting all sections to the Flexbox container layout, click the Update button to save your changes. Then, click the Preview button to see the same page with the new container layout applied.

Conclusion

The upcoming Elementor Flex container has generated great anticipation among WordPress developers who want to enhance their websites’ responsiveness and optimization across various device sizes. Although it is still in the experimental stage, developers should use caution when applying it to live websites. Still, this feature promises a powerful solution for converting existing sites into optimized, container-based designs. Therefore, embrace these tools to elevate your website development and achieve greater success.