How to Activate Flexbox Container in Elementor
Do you want to activate Flexbox Container in Elementor?
If yes then in this tutorial we have shared the step by step process using which you can do this easily.
Flexbox Container or the Container widget is one of the most awaited features that was introduced in Elementor 3.6 as an experiment.
And it gives you a new and better way of creating layouts using Elementor.
Since its release, Flexbox Container has received quite a few changes and in Elementor 3.8, its status was updated to Beta.
And in Elementor 3.10, it was officially upgraded to stable.
It is important to know that, this feature is available for all Elementor users, be it free, Pro or Cloud Website.
And to help you better understand it, Elementor has created a free Flexbox Playground that you can use.
Keeping this in mind, in this tutorial we will be discussing how can you easily activate Flexbox Container in Elementor.
Activate Flexbox Container in Elementor
Before we dive into the process, it is important to know that in Elementor 3.16, Flexbox Container feature has been promoted to stable and it comes active by default in new installations.
In case you still have the Flexbox Container widget missing in Elementor then this tutorial is for you.
And before you make any changes we recommend taking a complete backup of your site.
Also, it will be better if you make such changes on a staging environment first and then move to LIVE.
Having said that, below all the topics we have covered.
Login to WordPress
To activate Flexbox Container in Elementor, the first step is to login to your WordPress dashboard.
And for this you can visit https://your-site.com/wp-admin and it will take you to the login page.
Here you will have to enter your credentials and click Log In.
Visit Features in Elementor
Once you are in the WordPress dashboard, the next step is to navigate to Elementor Features.
Before we move forward, it is important to know that in Elementor 3.11, the Experiments tab in Settings was renamed as Features to correctly represent its purpose.
Having said that,
To visit Features, you need to click Settings under Elementor in your WordPress dashboard.
And it will take you to Elementor General Settings.
Here you will have to click Features tab, and it will show you all the Experiments.
Activate Elementor Flexbox Container Experiment
Before we move forward, it is important to know that Flexbox Container is a feature that comes disabled by default.
And this means you will have to enable it.
For this you will have to search for Flexbox Container under Ongoing Experiments.
And once found you need to select Active in the drop down and click Save Changes in the bottom of the page.
On doing so you will notice that the Gray icon will turn Green.
Check if Flexbox Container is Active in Elementor
The first tell tell sign of active Flexbox Container experiment in Elementor is the Green / Active icon in front of the feature.
The second was to see if Flexbox Container in enabled in Elementor is to visit the Elementor editor.
And in the widgets panel you will notice a new Container widget in place of Inner Section widget.
See the below screenshot for reference
- Before activating Flexbox Container
- After activating Flexbox Container
It is important to know that quite a few times we have seen users asking about missing inner section widget in Elementor editor.
Active Flexbox Container is the problem in most cases.
Also, here missing inner section widget means you will no longer be able to use it.
However, you will be able to make changes to the existing templates / pages / post / columns / sections and more.
In case you want to convert section- column layouts to Flexbox then you will have to select it and it will show you the option to Covert in the Elementor side panel.
On clicking this option, it will create a copy of it using the Container widget and you can make changes to it as per your needs.
Once you are done making changes, delete the section – column layout and Save Changes.
This concludes everything you need to know about activating Flexbox Container in Elementor.
If you have liked what you have read and want to get Elementor Pro license then you can do so by clicking our SPECIAL LINK or the button below.
Elementor Pricing and Plans
Now that you know how to activate Flexbox Container in Elementor, the next topic we are going to discuss is its pricing and plans.
Elementor has 4 plans
- Essential (1 site)- $59
- Advanced (3 sites)- $99
- Expert (25 sites)- $199
- Agency (1000 sites)- $399
Elementor Pro Essential plan includes
- 1 Site
- Premium Support
- 50 Pro Widgets
- Theme Builder
- Dynamic Content
- Form Builder
And more
Elementor Pro Advanced plan includes
- Up to 3 Sites
- Premium Support
- 82 Pro Widgets
- Theme Builder
- Dynamic Content
- Form Builder
- Popup Builder
- Custom Code & CSS
- Ecommerce Features
- Collaborative Notes
And more
Elementor Pro Expert plan includes
- Up to 25 Sites
- Premium Support
- 82 Pro Widgets
- Theme Builder
- Dynamic Content
- Form Builder
- Popup Builder
- Custom Code & CSS
- Ecommerce Features
- Collaborative Notes
And more
Elementor Pro Agency plan includes
- Up to 1000 Sites
- Premium Support
- 82 Pro Widgets
- Theme Builder
- Dynamic Content
- Form Builder
- Popup Builder
- Custom Code & CSS
- Ecommerce Features
- Collaborative Notes
And more
It is important to know that Elementor Essential plan only includes features required to build a custom business website or a WordPress blog from scratch.
And in Elementor Advanced plan onwards you get access to all the Woocommerce and marketing features as well.
We suggest choosing Advanced or any of the plans above it (Expert or Agency) as these give you access to all the features you need to engage with your audience and grow your site.
Once you have selected a plan, the next step is to create a free Elementor account and buy Elementor Pro.
After that you will have to
Before we move forwards, it is important to know that, if you are looking for a web hosting to host your Elementor site then Elementor Cloud Website is for you.
Elementor Cloud is an all in one platform using which you can build your site from scratch.
And it includes everything you need to get started.
Elementor hosting has 4 plans and using our SPECIAL LINK (Elementor Cloud Website discount code attached) you will get up to 33% OFF.
- Basic- $9.99
- Business- $19.99
- Grow- $22.99
- Scale- $49.99
What’s included
- Hosting powered by Google Cloud Platform
- Free SSL
- CDN from Cloudflare
- Free custom domain connection
- 100+ pre-designed websites
- Hello theme and WP pre-installed
- Automatic Backups
- Drag-and-drop, no code editor
- Staging Environment
- Premium support
And more
Now that you are familiar with the pricing and plans the next step is to sign up with Elementor Cloud Website.
Having said that,
I hope you will find this tutorial helpful and are able to activate Flexbox Container in Elementor.
In case you have any queries then feel free to get in touch.
To stay up to date with our content we recommend you subscribe to our YouTube channel and email list.
Also, don’t forget to join our Facebook group.