How to Convert from Container to Column in WordPress: Step-by-Step Guide

Updated September 2026 for WordPress 7.0: the guide now covers the built-in Columns block first, then page builders.

To convert a container into columns in WordPress, open the page in the block editor, select the Group or container block, click the block's options and choose Transform to Columns, or insert a Columns block and move your content into it. In a page builder such as Elementor, right-click the container and pick a column layout, or drag a new column structure into place and move the widgets across. Below is the step-by-step version of both routes, with screenshots, plus the checks that keep the layout working on mobile.

The guide is written for site owners and marketers who edit their own pages; no code is required. If your theme or builder does not behave as described, the troubleshooting section at the end covers the usual reasons.

What are containers and columns in WordPress?

A container is a block that groups content and controls its width, background and spacing; a column is a vertical section inside a row that places content side by side. In the block editor the container is the Group block (and its Row and Stack variations), and side-by-side layouts use the Columns block. Page builders use the same idea with different names: Elementor has Containers and Columns, Divi has Sections, Rows and Columns, WPBakery has Rows and Columns.

A container stacks its content vertically; columns split the space horizontally. Converting from one to the other is how you turn a long single column of text and images into a layout that reads better on a wide screen: a feature list in three columns, an image next to text, a row of cards.

Why convert a container to columns?

Columns make pages easier to scan, use the width of desktop screens, keep related items together and reduce scrolling. Typical cases: services or benefits shown three across, a text block with an image beside it, pricing plans, team members and comparison layouts. Done properly, columns collapse into one stack on phones, so nothing is lost on small screens.

Before you start: back up and prepare

Take a backup before changing layouts on a live page. Most hosts have a one-click backup; otherwise use a plugin such as UpdraftPlus, or duplicate the page and work on the copy (see how to duplicate a page in WordPress). Then decide which route applies to you:

• Block editor (Gutenberg): the default editor in WordPress 7.0; no plugin needed.
• Page builder: Elementor, Divi, WPBakery or Beaver Builder, if the page was built with one of them. Do not mix editors on the same page.

How to convert a container to columns in the block editor

The block editor can transform a Group block into a Columns block directly, or you can insert Columns and move blocks into them. Here are the steps.

Step 1: Log in and open the page

Log in at yoursite.com/wp-admin, go to Pages (or Posts), find the page and click Edit.

Step 2: Select the container block

Click inside the section you want to convert, then open List View (the three-line icon in the top toolbar) and click the Group block that wraps the content. List View makes it easy to select the container instead of a block inside it.

Step 3: Transform the Group into Columns

Click the block icon at the left of the block toolbar to open the Transform to menu and choose Columns. WordPress places the existing content into a single column. If Columns is not offered for your block, insert a Columns block below the group instead (press /columns on an empty line) and drag the blocks from the group into it using List View.

Step 4: Choose the column layout

A new Columns block asks for a variation: 50/50, 33/33/33, 70/30 and so on. For a transformed block, select the Columns block and change the number of columns in the block settings panel on the right. Each column is a drop target: move blocks between columns with drag and drop or the arrows in List View.

Step 5: Adjust widths, spacing and alignment

Select an individual Column block to set its width as a percentage, and the parent Columns block to set the gap between columns, vertical alignment and whether the columns should stack on mobile. Keep the number of columns to three or four; more than that becomes unreadable on laptops.

Step 6: Preview on desktop, tablet and mobile

Use the View menu in the editor to preview on tablet and mobile sizes. By default the Columns block stacks on phones; check that images are not oversized and that headings still read in the right order.

Step 7: Save and check the live page

Click Update, then open the page on a real phone. If your site uses a cache plugin or host cache, clear it so visitors see the new layout.

How to convert a container to columns in Elementor and other page builders

In a page builder the conversion is done inside the builder's editor rather than the WordPress block editor. The steps are the same in spirit: select the container, pick a column structure, move the content.

1. Open the page with the builder. On the page, click Edit with Elementor (or the equivalent button for Divi, WPBakery or Beaver Builder).
2. Select the container. Click the container handle or use the Navigator/Structure panel to select the whole section, not a widget inside it.
3. Choose a column layout. In Elementor, set the container's direction to Row and drop new containers inside it for each column, or right-click a legacy Section and use its Structure option to pick 2, 3 or 4 columns. In Divi, hover the row and click the column-structure icon; in WPBakery, use the row's Row Layout button.
4. Move the widgets. Drag each widget (text, image, button) into the column where it belongs. Use the Navigator to drag precisely.
5. Set widths and gaps. Adjust column widths in percentages, the gap between columns and the padding inside them. Set the vertical alignment so short and long columns line up.
6. Check responsive settings. Switch the builder to tablet and mobile views. Decide whether columns stack or stay side by side, and set the mobile order if the image should come before the text on phones.
7. Update and clear the cache. Save, view the live page and clear any caching layer.

Best practices for column layouts

• Two or three columns for content, four at most for cards. Beyond that, columns get too narrow on laptops.
• Keep columns balanced. Similar amounts of content per column look intentional; one long column next to a short one looks broken.
• Let columns stack on mobile. Side-by-side text on a phone is unreadable. Only small elements such as icons or two short buttons should stay in a row.
• Size images for the column. A 2,000-pixel image in a 400-pixel column slows the page for nothing.
• Use headings correctly. A row of three cards should use the same heading level (usually H3) so the page outline stays logical for readers and search engines.
• Reuse patterns. Once a column layout works, save it as a pattern (block editor) or a template (builder) so every page uses the same structure.

Troubleshooting common issues

The columns do not stack on mobile

In the block editor, select the Columns block and enable Stack on mobile in its settings. In a builder, check the responsive settings of the container or row: some layouts are set to keep columns side by side on all sizes.

Content overflows or is cut off

Usually a fixed width or a large image inside a column. Set image width to 100% of the column, remove fixed pixel widths on tables or embeds, and reduce padding inside narrow columns.

The Transform to Columns option is missing

Transforms depend on the block. If the option is not shown, insert a new Columns block and move the content into it via List View. If the page uses a classic editor block, convert it to blocks first (block options, Convert to blocks).

The layout looks different from the editor

The theme's styles override the editor preview, or a cache is serving the old page. Clear the cache first; if the difference remains, the theme needs a style adjustment, which is a small job for a developer.

Plugin or theme conflicts

If the editor behaves strangely after installing a plugin, deactivate recently added plugins one at a time and test. Keep the theme, the builder and WordPress updated; WordPress 7.0 fixed many editor issues that older versions had.

When to ask a developer

Changing one page is a job for the editor. If you need the same column layout on dozens of pages, if the theme fights every change, or if the page must load fast on mobile, it is cheaper to have the layout built into the theme once. That is what our WordPress theme customization service does, and for larger changes see WordPress development services. Related reading: 5 things to know before using WordPress and 11 steps for the best WordPress website.

Wrapping up

Converting a container to columns takes a few minutes in the block editor or any page builder: select the container, transform or insert Columns, move the content, set widths, and check the page on a phone before you publish. Keep layouts simple, let columns stack on mobile and save the ones that work as patterns. If you would rather have it done for you, get in touch.