• Blogs
  • Development
  • How to Convert a Container-Based Layout to a Column-Based Layout in WordPress

Array / 5 min read

How to Convert a Container-Based Layout to a Column-Based Layout in WordPress

a wordpress UX designer using a laptop

Columns and containers are some of WordPress’s most popular layout styles. Depending on the project’s specifications and your personal preferences as a designer or developer, you may need to convert a WordPress container layout to a column layout.

To do that, you can use Gutenberg’s built-in Column block or modify the settings for page builders like Elementor.

Let’s get into how to convert your container-based layout into a column-based layout in WordPress.

Key Takeaways

  • Containers and columns are 2 popular layout styles WordPress designers and developers use to organize content.
  • You can convert a container-based layout into a column based layout with the Gutenberg editor or by changing Elementor’s settings. 

Containers vs Columns: What’s the Difference?

What Are Containers in WordPress Themes and Layouts?

In WordPress themes, a container is a layout style that organizes content inside a bounding box. This bounding box typically spans the page’s width by default.

One notable application of the container layout is Elementor’s Flexbox Container, an alternative to the section and column layouts developers have traditionally used with the <div> and <section> HTML elements. You can edit the Flexbox Container by modifying traits like width, height, content, and alignment. Flexbox Containers can also contain other Flexbox Containers within them, giving you significant control over the page’s layout.

The Gutenberg editor also displays blocks as fixed-width containers by default, covering the entire width of the post or page.

What Are Columns in WordPress Themes and Layouts?

Columns are a layout style used to organize content vertically rather than horizontally like in containers. Columns are great for breaking up text and arranging content side-by-side .

Developers and designers can structure their site’s content in columns by using the Gutenberg editor or a site builder like Elementor, Divi, or Beaver Builder.

Important: Back Up Your Site Before Moving Forward

Backups give you a checkpoint you can return to if anything goes wrong, allowing you to reverse unintended consequences and try again. This allows you to go back to a previous stage on your site’s development if you don’t like the results of converting containers to columns.

There are several methods to create backups, but using plugins is one of the easiest. Our team has used the backup plugin UpdraftPlus, and it’s very reliable. Read our backup guide for a step-by-step on how to back up your WordPress site.

How to Convert a Container Layout into A Column Layout in WordPress?

Now that we understand the difference between these layout styles, let’s explore some methods for implementing columns in your WordPress site. 

You can convert containers to columns in various ways, but in this guide, we’ll focus on the Gutenberg editor and Elementor. Gutenberg is the default page and post editor, and Elementor is one the most popular free page builders, making them both accessible to all WordPress users.

Here’s a step-by-step guide on how to convert containers to columns in WordPress.

Method #1: Using Gutenberg

Gutenberg has a built-in method for displaying content as columns through the Column block.

By default, WordPress displays blocks as containers that span the page or post’s width, such as when you insert an image and a paragraph one after another.

a laptop on a white table with code on the screen, behind the laptop there's a coffee cup and a pot with a small plant

If you want to display images and text as vertically separated blocks of content, you can use the Column block. 

First, create a new post/page or edit an existing post/page by going to Posts or Pages from the admin dashboard. Then click Add new post or Add new page, or click Edit on an existing post or page.

Once in the post or page, click the + button to insert a new block and search for “columns.”

Gutenber's Columns block

The new block will provide various distribution options. Let’s first use the 50/50 option to create two columns of equal width. 

The several options for organizing Gutneberg's Columns block, highlighting the 50/50 structure

Now, you can display a paragraph and an image side-by-side. Start by adding a new Paragraph block. 

Creating a Paragraph block on the left column

On the new paragraph block, type or paste the text.

Write on the newly created Gutenberg Paragraph block

As you write, you will notice the text stays within the Paragraph column you just created.

A new Paragraph block on the left column of a 50/50 split in WordPress's Gutenberg

Now, let’s add the Image block to the side.

Adding an Image block to the right column on a 50/50 split in WordPress's Gutenberg

After adding the image, it’ll also stay within its corresponding column instead of covering the width of the page or post.

A Gutenberg 50/50 column block, with text on the left column and a photo of a laptop on the right side

You can repeat the process to add multiple columns of varying widths.

The various options available in Gutenberg's Columns block

Method #2: Using Elementor

If you’re using Elementor instead of Gutenberg to build your pages and posts, you can also convert container-based layouts into column-based layouts by changing the plugin’s settings.

For example, here’s a test page created with Elementor. It has text, buttons, and an image.

A page created with the Elementor plugin for WordPress

By default, Elementor is using the Flexbox Container feature we mentioned earlier. If you click the Add New Container button, you will see multiple container structures to choose from.

Elementor's "add new container" button
Elementor's various container layouts

We want to change this feature to display multiple column structures instead. To do that, go to the WordPress dashboard and click on Elementor > Settings.

Button to Elementor's settings on the WordPress admin

Go to the Features tab.

Elementor's settings, highlighting the "Features" tab

Once in the Features screen, scroll down until you see the Flexbox Container section. Click on the dropdown menu and select Inactive.

Deactivating the Flexbox Container feature in Elementor's Features settings

Click Deactivate on the pop-up message. This will deactivate the Flexbox Container feature and go back to the traditional sections and columns.

Pop-up message that appears after deactivating Elementor's Flexbox Container feature

Scroll down to the bottom of the page and click on Save Changes.

The "Save Changes" button in Elementor's Features settings

Finally, return to the page you were editing and click the Add New Section button.

The "Add new section" button in Elementor

You will have multiple column structures to choose from.

Multiple column layout options in Elementor

Now You Know How to Convert a Container Layout to a Column Layout in WordPress

Depending on your project’s specifications or preferences, you may prefer using a section and column layout rather than a container-based one.

In this article, we explained 2 methods for converting a container layout to a column layout in WordPress. Hopefully, you can use this new knowledge to change the layout style and gain more control over your site’s design.

If you found this post useful, read our blog for more WordPress insights and guides!