- Blogs
- Development
- How to Convert a Container-Based Layout to a Column-Based Layout in WordPress
Development / 5 min read
How to Convert a Container-Based Layout to a Column-Based Layout in WordPress
![a wordpress UX designer using a laptop](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-HERO-1024x451.jpg.webp)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-1-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-2-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-3-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-4-1024x451.jpg)
On the new paragraph block, type or paste the text.
![Write on the newly created Gutenberg Paragraph block](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-5-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-6-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-7-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-8-1024x451.jpg)
You can repeat the process to add multiple columns of varying widths.
![The various options available in Gutenberg's Columns block](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-9-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-10-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-11-1024x451.jpg)
![Elementor's various container layouts](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-12-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-13-1024x451.jpg)
Go to the Features tab.
![Elementor's settings, highlighting the "Features" tab](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-14-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-15-1024x451.jpg)
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](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-16-1024x451.jpg)
Scroll down to the bottom of the page and click on Save Changes.
![The "Save Changes" button in Elementor's Features settings](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-17-1024x451.jpg)
Finally, return to the page you were editing and click the Add New Section button.
![The "Add new section" button in Elementor](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-11-1024x451.jpg)
You will have multiple column structures to choose from.
![Multiple column layout options in Elementor](https://wcanvas.com/wp-content/uploads/2024/03/wordpress-container-to-column-18-1024x451.jpg)
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!
Related Articles
![someone using a laptop to develop a website](https://wcanvas.com/wp-content/uploads/2024/07/full-site-editor-wordpress-BLOG-ARCHIVE.jpg.webp)
Development / 6 min read
Development / 6 min read
The Benefits of the Full Site Editor for WordPress Users
Full Site Editor (FSE) is a WordPress feature that allows any user to modify their entire site through the familiar interface of the Gutenberg editor. This makes FSE a great…
Read More![](https://wcanvas.com/wp-content/uploads/2024/07/is-wordpress-dying-BLOG-ARCHIVE.jpg.webp)
Development / 14 min read
Development / 14 min read
Is WordPress Dying in 2024?
The question, "Is WordPress dying?" seems to be as old as WordPress itself, but is there any truth to it? If you're considering whether you should use WordPress in 2024…
Read More![The WordPress interface for publishing posts](https://wcanvas.com/wp-content/uploads/2024/07/wordpress-how-to-post-BLOG-ARCHIVE.jpg.webp)
Development / 2 min read
Development / 2 min read
How to Publish Draft Pages in WordPress?
If you’re learning how to use WordPress and wondering how to publish your draft pages or posts, the process is actually really simple, and this article will show you how…
Read More![black alphabetical wall decor](https://wcanvas.com/wp-content/uploads/2024/07/change-font-color-BLOG-ARCHIVE.jpg.webp)
Development / 4 min read
Development / 4 min read
How to Change the Font Color in WordPress: 4 Easy Methods
Are you wondering how to change the font color in your WordPress site? Many people do when looking for a font color that balances readability with brand identity. In this…
Read More![a Mac laptop over a table running the WordPress editor](https://wcanvas.com/wp-content/uploads/2024/07/wordpress-cookie-check-failed-BLOG-ARCHIVE.jpg.webp)
Development / 9 min read
Development / 9 min read
How to Fix the WordPress “Cookie Check Failed” Error
The “cookie check failed” error is a message that appears on some WordPress sites, preventing users from accessing some or all content and admins from managing the website. Let’s explore…
Read More