The Ultimate Elementor Flexbox Tutorial: Beginner to Pro

• What is Elementor Flexbox?
• Create a new page and select Edit with Elementor. (see screenshot below)
  

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)

At first glance, the navigator looks like columns, but it is actually a single container holding multiple inner containers. Alternatively, you can select an individual container from the menu on the left and drag it into place.

You can change multiple aspects of the container, including the following:

• Container Width: First, you can choose between a boxed or full-width container.
• Width: When you choose Boxed, Elementor sets the width to 928 pixels. Selecting Full Width makes the container match the screen width, but you can adjust both options as needed.
• Overflow: Next, you can select an overflow value from Default, Hidden, or Auto.
• HTML tag: Finally, you can modify the container’s HTML tag. For example, you may choose from options such as div, header, footer, main, article, or section. In addition, a new tag option allows you to turn the entire container into a clickable link.

In addition, there are numerous options under the “Items” section. At the same time, you can customize each inner container’s settings.

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 a 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)

When the direction is set to column, Flex Start and Center behave as they do in a row. Flex End moves the containers to the right, while Stretch moves them to the left, filling the 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

After conversion, you will see two versions of the same section. Keep the new container-based section and delete the original section. 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. Since this feature is still experimental, test it carefully before using it on live sites. However, it offers a powerful way to convert existing pages into fully responsive, container-based layouts. Therefore, embrace these tools to elevate your website development and achieve greater success.