How to Convert Old Sections and Columns to Containers in Elementor

Plenty of Elementor sites still run on the old section, column, and inner section structure. They work, but they carry extra weight: more wrapper elements, more CSS, and layouts that are harder to make responsive. Containers fix all of that, and Elementor even includes a tool to convert old layouts for you.

In this tutorial you will learn when converting is worth it, how to use Elementor's built-in converter, what to check afterwards, and how to clean up the result so you get the real benefits of containers rather than just a different label.

Why Bother Converting?

• Lighter pages. A section with columns and an inner section can produce many nested wrappers. Containers usually need far fewer elements for the same layout.
• Easier responsive design. Container direction, wrap, and gap controls make tablet and mobile layouts simpler than adjusting column widths one by one.
• Future-proofing. New Elementor features, including everything in the Atomic Editor, are built around containers. Sections and columns are legacy.

Should You Convert Everything?

Not necessarily. A sensible approach:

• Convert pages you are actively redesigning, high-traffic pages where performance matters, and templates used across the site such as headers, footers, and single post templates.
• Leave alone old pages that rarely change and work fine. There is no prize for converting a forgotten 2021 landing page.

Before You Start

1. Back up your site. Use your host's backup or a backup plugin.
2. Work on staging if you can, especially for important pages.
3. Update Elementor and make sure containers are enabled. On current versions they are the default layout system.
4. Duplicate the page you plan to convert, so you can compare old and new side by side.

Using the Built-in Converter

1. Open the page in the Elementor editor.
2. Select a section by clicking its handle.
3. In the section's Layout tab, click Convert to turn it into a container.
4. Elementor creates a copy of the section built with containers and places it directly below the original.
5. Compare the two. If the new version looks right, delete the old section.

Because the converter creates a copy rather than replacing the original, you can always compare and roll back within the editor before saving.

What the Converter Does and Does Not Do

The converter is a faithful translator, not a designer. It maps sections to outer containers, columns to inner containers, and inner sections to nested containers. That means:

• The result often has more nesting than necessary, because it mirrors the old structure.
• Column widths become container widths, which may need adjusting on tablet and mobile.
• Spacing that relied on column padding or widget margins may look slightly different.
• Custom CSS that targeted section or column classes may stop working, since the HTML structure changed.

Cleaning Up After Conversion

This is where the real benefits come from. Go through each converted section:

1. Remove empty wrappers. If a container only holds one other container and has no styling of its own, move the content up and delete the extra level.
2. Replace margins with gap. Set a gap on the parent container and remove individual widget margins.
3. Use direction instead of widths for mobile. Change rows to columns on mobile rather than setting each child to 100%.
4. Consider grid. If the old section was a set of equal columns, a single grid container might replace several nested ones.
5. Reapply your design system. Check that global colors, fonts, or classes are still applied.

A Quick Example

An old feature section might look like this: a section with three columns, each holding an inner section with an icon column and a text column. After conversion you get a container with three containers, each holding a container with two more containers. That is a lot of boxes.

Cleaned up, the same design becomes a grid with three cells. Each cell is a single flexbox row containing the icon and a small column with the heading and text. The visual result is identical, but the markup is much leaner and the mobile version needs almost no tweaks.

Testing Checklist

• Compare desktop, tablet, and mobile views with the original.
• Check anchor links, sticky elements, and motion effects.
• Test forms, popups, and any elements triggered by CSS classes or IDs.
• Run a speed test before and after to see the improvement.
• Clear your site cache and regenerate Elementor's CSS if styles look off on the live page.

Common Problems

• Background images look different. Check background position and size, and whether the container is boxed or full width.
• Columns no longer stretch to equal height. Set Align Items to stretch on the parent container.
• Custom CSS stopped working. Update selectors to target the new container classes, or better, move the styling into Elementor's own controls or classes.
• Layout jumps on tablet. Converted widths often only have desktop values. Set tablet values explicitly.

Wrapping Up

Converting to containers is one of the best maintenance tasks you can do for an older Elementor site. Use the built-in converter to get a faithful copy, then take a few minutes to simplify the structure. The result is a lighter, more responsive page that is ready for everything Elementor builds next.