WordPress is a powerful and popular platform for creating websites, blogs, and online stores. However, sometimes you may want to change the look and feel of your site by converting from a container-based layout to a column-based layout.
A container-based layout is a fixed-width design that limits your content to a single block. A column-based layout is a flexible design that allows you to divide your content into multiple columns, creating a dynamic and visually appealing presentation.
In this article, we will show you how to convert from container to column in WordPress using different tools and methods. Whether you want to use a theme, a page builder, or custom code, we will guide you through each step of the process. By the end of this article, you will be able to transform your WordPress site from a container-based layout to a column-based layout with ease. Let’s get started!
Prerequisites
Before you start converting from container to column in WordPress, you need to make sure you have some prerequisites in place. These include a WordPress site, a theme or page builder that supports columns, and some basic knowledge of WordPress editing.
1. A WordPress website
The first prerequisite for converting from container to column in WordPress is having a WordPress website. WordPress is a free and open-source software that powers millions of websites around the world. You can use WordPress to create any type of website, from blogs and portfolios to e-commerce and membership sites.
To use WordPress, you need to have a domain name and a web hosting service. Your website’s address on the internet is known as a domain name, such as www.example.com. A web hosting service is where your website’s files and data are stored online. You can choose from various web hosting providers that offer WordPress hosting plans.
Once you have a domain name and a web hosting service, you can install WordPress on your site and start creating your content.
2. A column-based theme or page builder
The second prerequisite for converting from container to column in WordPress is having a column-based theme or page builder. A column-based theme or page builder is a tool that allows you to create and customize your website layout using columns.
Columns are sections of your page that can display different types of content, such as text, images, videos, etc. You can adjust the size, position, and style of each column to create a dynamic and visually appealing design. There are many column-based themes and page builders available for WordPress, both free and premium. Some of the most popular ones include Elementor, Divi, Beaver Builder, and Visual Composer.
These tools provide drag and drop interfaces, pre-made templates, and various modules and elements that you can use to create your column layouts. You can choose a theme or page builder that suits your needs, preferences, and budget.
Steps
Now that you have the prerequisites ready, you can start converting from container to column in WordPress. The process varies depending on whether you use a page builder or a Full Site Editing Block theme.
1. For Page Builders
• Step 1: Create a new page or edit an existing one. Go to Pages > Add New or Pages > All Pages and select the page you want to edit.
• Step 2: Access the column layout options. Depending on the theme or page builder you are using, you will see different options to add and edit columns.
For example, if you are using Elementor, Click on the + icon to open the section structure. You can choose any columns layout combinations from Select your structure or drop the Inner Section widget from the left panel to the page to create nested columns
Click on + icon to open structure in Elementor page builder
Select column structure: Elementor page builder
If you are using Divi, you can click on the + icon and choose a column structure from the popup.
• Step 3: Add and configure columns. You can adjust the number, size, and position of the columns by dragging the edges or using the settings panel. You can also add different elements and modules to each column, such as text, images, buttons, etc.
• Step 4: Customize column content. You can style each column and its content using the options available in the theme or page builder. You can change the colors, fonts, backgrounds, borders, margins, paddings, animations, and more.
• Step 5: Preview and publish. Once you are happy with your column layout, you can preview how it looks on different devices and browsers. It is also possible to save it as a template for future use. When you are ready, click on Publish or Update to make your column layout live on your website.
2. For Block Themes
If you are using a block theme that supports Full Site Editing, you can also convert from container to column in WordPress using the Columns block. The Columns block is a container block that lets you create and customize your layout using columns. Columns are sections of your page that can display different types of content, such as text, images, videos, etc. You can adjust the number, size, and position of the columns by dragging the edges or using the settings panel.
You can also add different blocks to each column, such as Cover, Image, Heading, Paragraph, etc. Here are the steps to convert from container to column in WordPress using the Columns block:
• Step 1: Create a new page or edit an existing one. Go to Pages > Add New or Pages > All Pages and select the page you want to edit.
• Step 2: Add a Columns block. Click on the inserter icon and type columns or use the slash command /columns and select the Columns block. Choose the number and the size of the columns
Block themes Columns select
NOTE: Another way to create columns is to transform an existing block into a Columns block. To do this, click on the block icon in the toolbar and select “Transform to” from the dropdown menu. You will see a list of options, including Columns. Choose Columns and the block will become a Columns block with the original block inside it.
Transform to columns in Block theme
• Step 3: Add and configure columns. You can change the number of columns by clicking on the plus or minus icons in the block toolbar or in the sidebar settings. You can also drag the edges of the columns to resize them. You can add different blocks to each column by clicking on the inserter icon within each column.
• Step 4: Customize column content. You can style each column and its content using the options available in the block toolbar and the sidebar settings. You can change the colors, fonts, backgrounds, borders, margins, paddings, animations, and more.
• Step 5: Preview and publish. Once you are happy with your column layout, you can preview how it looks on different devices and browsers. You can also save it as a reusable block for future use. When you are ready, click on Publish or Update to make your column layout live on your website.
Conclusion
Converting from container to column in WordPress is a great way to improve the design and functionality of your website. By using columns, you can create dynamic and visually appealing layouts that showcase your content in an organized and engaging way. You can use a theme or a page builder that supports columns to make the conversion process easy and hassle-free.
We hope this article helped you learn how to convert from container to column in WordPress using different tools and methods. Happy column building!
Additional Tips : How to convert from container to column in WordPress
1. Use a column-based theme or page builder to make it easier to create and manage your column layouts.
2. Use the “Columns” option in the page editor or block themes to quickly and easily add columns to your pages.
3. Drag and drop elements to the columns to quickly and easily arrange your content.
4. Use the “Update” button to save your changes and publish your page.
