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?
- to do that. Give it a title now and select Edit with Elementor. (see screenshot below)
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)
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.
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)
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.
- 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)
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)
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)
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.
Conclusion
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. Embrace these tools to elevate your website development and achieve greater success.
