Once you understand what containers are, it’s time to start using them. Read on and you’ll learn how to get started.
First, make sure that everyone who manages your site is well-educated about containers. You can read our Elementor Containers post, and you can read Elementor’s many posts about containers and try out containers in Elementor’s sandbox:
- The difference between sections and containers
- Guide to learning about containers
- How do I learn about Flexbox Containers?
- Elementor sandbox training exercises
Second, you’ll have to make a plan about what, if anything, has to be updated. To create the plan, start by taking an inventory of your site. Then you’ll decide which templates and posts are important to update. Once you’ve got your plan, starting is a simple matter of turning on containers. Let’s look at the details of how to complete each of these steps.
Creating An Inventory
You can start by reviewing the Elementor templates you use. Your goal should be to identify the templates you rely on most often. Elementor has many different template types. To review your templates, select “Templates” in the left-hand Sidebar, then click, “All” to get to /wp-admin/edit.php?post_type=elementor_library .
To do your inventory, you should scroll down the main list paying attention to the “Type” column. Consider how many total templates you have, which of these you use on a regular basis, and where on the site you use different templates. Take special note of templates that are used in many places and templates you use often. These templates will likely be the ones most important to update to containers.
Make a note of the templates you’re going to want to update. Now review your various posts and pages. Are there any posts or pages that you’re often editing or adding to? If there are, these will also be candidates for update. Make a note of these items as well.
Enable Containers
To enable containers, select Elementor in the left-hand sidebar and then Settings. Once you’re on Elementor’s Settings page, click the Features tab and set “Flexbox Container” to active. We suggest you also enable the “Nested Elements” functionality. Containers can be nested inside each other, and building on the nested nature of containers and HTML in general allows Elementor to add nested functionality to specific widgets. So far they’ve added nested functionality to the tabs widget. More nested functionality is in the works.
Enabling containers will not update any of your existing pages, but new pages will be built with containers. As you add to existing pages, the additions will also be built with containers. Enabling the containers functionality allows you to start your shift from sections to containers.
Update Sections to Containers
The last thing you have to do is convert certain sections to containers. Look at your list of templates and posts you want to update and start working down the list from most used to least used.
There are two ways to make the update. You can update all sections at once, or you can click on each section and update the sections one at a time. We’ll go over how to update all sections at once.
The update process is straightforward:
- Open the template or post you want to edit
- Click the Cog Icon in the bottom left and then select Convert – this will create a container conversion below each existing section. In the navigator, containers are prefixed with a dash-lined box. Sections are not prefixed with a box.
Once you have the converted containers, compare each container to the section above it. Sometimes the conversion works, but sometimes you’ll have to make manual updates. Also, remember that your new containers don’t have to look identical to the old sections. The new containers just have to look well-designed. Once you’re satisfied with a container, go ahead and delete the section above it.
As you go through these conversions, it’s a good idea to get the rest of your team to also take a look at the new containers. The more eyes the better the chance of any mistakes being caught.
Our Recommendations
Once you complete the process above, you’ll have updated all the necessary pieces of your site to containers. Don’t worry about any portions of your site that are still sections. Parts of your site that you rarely touch are not worth updating, but it is important that going forward all new additions to the site are made using containers.
Don’t feel like you have to complete the conversion process quickly. You can take your time converting sections to containers. Elementor currently works well with both sections and containers. It’s important to use containers going forward to take advantage of new Elementor functionality and to ensure your site keeps working well into the future.
Now is a good time to make design updates to your site. As your go through your site, keep an eye out for ways you can update the design. It’s a good idea to have someone with a design eye take care of the updates from sections to containers.
Finally, we’re often the first ones to suggest doing something on staging and then migrating it to production, but in this case, it’s going to be much more efficient to make these updates directly on production. You don’t want to have to do the same updates twice or have to worry about your migration workflow. Do make sure to take a backup before starting any session of updates.
