The Ultimate Elementor Flexbox Tutorial: Beginner to Pro

The Ultimate Elementor Flexbox Tutorial

Hello and welcome to the Elementor Flexbox Tutorial. If you want to create a website that appears trendy and expert level, Elementor Flexbox is a terrific tool to have in your web design. Since you can create dynamic layouts that adjust to different screen sizes and orientations, your website will be more user-friendly as well as eye-catching.

In this Elementor Flexbox tutorial, we’ll go over all you need to know about Elementor Flexbox from beginner to pro, from basic concepts to more advanced techniques, so you can build appealing layouts like an expert.

Table of Content

What is Elementor Flexbox?

With the help of Elementor Flexbox, you can design adaptable and interactive layouts for your website. It makes use of the CSS3 Flexbox layout module, that is a trendy and effective method of organizing content on a page.

You can simply manage the alignment, distribution, and order of your content using Elementor Flexbox, making it simpler to design adaptable layouts that change according to the size of the screen.

Getting Started with Elementor Flexbox

You must already have the Elementor plugin installed on your WordPress website in order to use Elementor Flexbox. The Elementor editor can be used to build new pages or modify ones that already exist once it has been installed.

You can quickly add the Flexbox element to your web page by dragging and dropping the Flexbox widget right from the Elements section over the canvas. The Flexbox settings can then be customized to your preferences.

Basic Flexbox Settings

You may manage the distribution, order, and alignment of your content using basic Flexbox settings. A brief description of each setting is given below:

Alignment: Using this option, you may manage how your content is positioned both horizontally and vertically inside the Flexbox container. Options such as left, right, center, top, and bottom are available for you to select from.

Distribution: Using this attribute, you can manage the spacing between elements inside a Flexbox container. You can pick between, around, or evenly spaced as your options.

Order: The order of your content inside the Flexbox container can be changed using this parameter. Without having to update the HTML code, you can use this to reposition content on the page.

alignment, distribution, order settings in Elementor flexbox

Advanced Flexbox Settings

There are various additional settings available if you wish to expand your Flexbox expertise. The suggestions that follow are a couple of the more useful ones:

Flex Direction: This element allows you to change the direction in which the material within the Flexbox container flows. Numerous choices are offered, including row, column, row-reverse, and column-reverse. (see screenshot below)

Flex Wrap: With this option, you can decide how your content will be wrapped inside the Flexbox container. Options including wrap, wrap-reverse, and nowrap are available. (see screenshot below)

Flex Grow: You may regulate how much your content expands to take up space inside the Flexbox container via the Flex Grow parameter. This can be used to scale some items up or down relative to others. (see screenshot below)

advanced Elementor flexbox container settings

Tips for Using Elementor Flexbox

Now that you are familiar with the foundations of Elementor Flexbox, keep reading for some advice on how to use it effectively:

Keep it simple: A Flexbox layout shouldn’t have too many pieces or complicated options, so keep it simple. Preserve clarity and readability.

Use breakpoints: To design multiple layouts for various screen widths, use the built-in breakpoints in Elementor. This will guarantee that your website appears fantastic across all platforms.

Experiment with the settings: Try out various Flexbox parameters and discover how they effect your layout by experimenting with them. You might come upon some fresh and interesting layouts you never imagined were possible.


Difference Between Sections and New Elementor Flex Containers

  • With flexbox, you can add widgets directly to containers; with sections, you first have to add columns before you can add widgets.
  • The widget width is always full width in a column section structure, however it is inline in a flex container.
  • With older flex containers, you could only put one inner section inside a section, but with the most recent versions, you can add as many containers as you like.
  • Using the column-section structure, the widget direction might be changed using column or inline positioning. You can now alter the widget direction using Column, Row, Column Reverse, or Row Reverse with the most recent Flex container.
  • Reverse Columns or Duplicate Sections were employed within the column section structure to make the web pages responsive. For each device, you may implement a Custom arrangement of widgets or containers utilizing the most recent Flex container approach.
  • Left, Centre, and Right are the available alignment possibilities in the section/column structure. The alignment possibilities with flex containers, however, include flex-start, flex-center, and flex-End.

Advantages of using Elementor Flexbox container

Before a new feature is included in a plugin, extensive research is done to make sure that the function would be beneficial to users. The Elementor flex container operates similarly. The users of Elementor will gain a lot from the addition of this capability.

The benefits listed below are just a few of the ones you can get by using the Elementor flexbox container:

  • Flex containers will take the place of section and inner section, allowing you to create webpages that are more optimized.
  • The number of columns and inner sections will be decreased using flexbox. Less code will be generated in the backend as a result. Additionally, your WordPress site will load faster with less DOM.
  • You will have more freedom to create device-responsive websites thanks to flexbox container settings.
  • You can now hyperlink an entire section. Previously, you could only link widgets.
  • The flex container is for you if you were dissatisfied earlier since you could only add one inner part to a section. You can flexibly add containers inside of a container at any time.

How to Use Elementor Flexbox Container

The instructions listed below will assist you make use of the Elementor Flexbox Container for creating a quick and responsive Elementor website. A few basic steps establish the process:

Step 1: Go to Elementor Experiments & activate the one called Flexbox Container

Go to Elementor Settings from the WordPress dashboard. Go to the Experiments tab now, and scroll down until you see the ‘Flexbox Container’ option. (see screenshot below)

turn on flexbox container from Experiments/Features settings

Select Active by selecting the Status dropdown menu once you’ve located the option. To save the status, scroll to the bottom then click on Save changes.

Step 2: Create a new page

To use this functionality, you must first build a new page after enabling the flex container. Click Add New after navigating to Pages > All Pages to do that. Give it a title now and select Edit with Elementor. (see screenshot below)

create a new page

Step 3: Add a container

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

choose a Elementor container structure clicking on the plus icon

choose a Elementor container structure

Remarkably, the navigator’s structure appears to be made up of columns but is actually a container with additional containers inside of it. You can also select a single container via the menu from the left and drag it into place.

Multiple aspects in the container are able to changed including

  • Container Width: You have the option of selecting 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 will match the viewport width exactly. But 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. You can choose from alternatives like div, header, footer, main, article, section, etc. A new tag has been added. In this technique, you may use a tag to transform an entire container into a link.

container settings of Elementor flexbox container

In addition, there are an enormous number of possible outcomes under “Items” (more on that later). Moreover, each inner container’s settings can be altered.

Step 4: Add widgets

Similar to how column section structures work, adding widgets follows the same steps. For each container’s plus icon, you must first browse for the widget before dragging it there. I’ll add a title, a video, and a social sharing icon, for instance. (see screenshot below)

add widgets to container of Elementor flexbox container

Step 5: Customize container contents

The container widgets can now be customized. Edit the container to accomplish this. Then select the Items option under Arrangement on the left panel. The choices are as follows for you to experiment with:

  • Direction: The row direction remains the default. Four alternates are available, though: 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 Centre, Flex End, and Scratch. With a Flex center value, you may center the objects in your container element after Flex starts placing them from the start point. On the other side, you can display every inner container on the bottom using Flex end. Additionally, if the stretch option has been selected, the inner containers will occupy any additional space. If you chose direction as a row, then all of these will be applicable.
  • (see screenshot below)

    On the flip side, the flex-start and center variables will operate in the same manner as the row if you select the direction as a column. The containers will, however, be moved to the right via the flex-end and to the left with the scratch, occupying any remaining space.

    Elementor flexbox container flex settings

  • Justify Content: You have six possibilities for doing this: flexible start, flexible center, flexible end, space between, space around, and space equally. The items will each have the same amount of space added in between them. The items’ top or bottom will not, however, gain any additional space.
  • (see screenshot above)

    Each container will gain space if the space surrounding option is selected, both at the top and bottom. The option to increase space evenly will also add 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 numerous lines rather than being wrapped 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. To examine your page with the new flex container structure, click the preview button after that.

    How to convert Section based Elementor page to Flexbox Container

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

    Step 1: Select the section you want to convert

    Separate conversions are required for each section. In order to convert a section, first select it. The option to select a section using the navigator is situated in the bottom-left corner, or you may click on the Six dots in order to so. (see screenshot below)

    select sections to convert Elementor flexbox container

    Step 2: Click on Convert to make the conversion

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

    convert sections to containers using Elementor flexbox container

    Step 3: Delete the previous section

    There will be two different versions of the same section once the conversion process is finished. One is container-based, while the other is based on sections. Sections make up the version at the top. Delete the previous/ Original version. (see screenshot below)

    delete and keep the new container structure to convert sections to containers using Elementor flexbox container

    Step 4: Update and Preview

    For each section of your page, repeat steps 1 through 3. Click the update button to save your changes once you have finished converting all of the sections to the Flexbox container layout. The same page will now appear when you click the preview button, but with a container layout.



    The upcoming Elementor Flex container has sparked great anticipation among WordPress developers who aim to enhance their websites with responsiveness and optimization across various device sizes. While caution is advised in using it on live websites due to its experimental stage, the Flex container offers a promising solution for converting existing sites into optimized container-based designs. To further amplify creativity and drive customer attraction, exploring Elements Kit is highly recommended. Embrace these tools to elevate your website development and achieve greater success.



    Please share your thought

    Looking for fresh content?

    Access free WordPress resources such as videos, plugins, and other helpful tools and offers.