Do you want to add multi-column content to your WordPress posts?

Columns can be used to create Attractive layouts for your publications and pages.

Traditional print media, such as newspapers and magazines, have used a multi-column layout from the earliest days of printing. Their aim was to enable users easier to read a smaller text while using available space economically.

If you have not yet created a website or a blog on WordPress, we invite you to consult How to install a WordPress blog in 7 steps next, How to search, install and activate a WordPress theme on your blog

Single column layouts are more commonly used on the web. However, the grids with multiple columns are still useful for highlighting content and facilitating reading and analysis.

In this tutorial, we'll show you how to easily add multi-column content to your WordPress posts without writing any HTML code.

Add content to multiple wordpress columns e1565264744355

Adding Multi-Column Content in WordPress - The Easy Solution

Creating multi-column content, also known as grid content in WordPress, is now easy because it's a default feature. The new WordPress Gutenberg block editor proposes a block of columns.

To add a multiple column layout, you need to create a new post or edit one. Once in the edit area, click on the " Add At the top to add a block.

Then you have to select the block Columns "Located under the" Layout elements "tab.

Add wordpress columns

You will see the mouse pointer jump in the left column and a placeholder for the text will appear in the right column.

Columns on wordpress gutenbeg

As you can see in the screenshot above, the block Columns at first appears to be an empty area. If you hover the mouse to the left, you can see the border of the highlighted block.

You will also be able to see the block parameters in the right column of the screen.

Example of gutenberg columnsBy default, the column block adds two columns. You can increase the number of columns you want to add from the block settings on the right. This allows you to add up to six columns on a single row.

Edit gutenberg wordpress columnsJust click on a column and start typing to add content. You can use the Tab key on your keyboard to move to the next column.

Go to a next wordpress columnAdding multimedia and other content to your columns

In addition to text content, you can also add images and embed videos in WordPress columns.

Column block allows you to add blocks inside each column. Just hover the mouse over a column and you will notice the "Add a new block" inside. You can also add a block by entering the name of the block.

Add an image to a column

Your selected block will appear in the column. You can go there and add content.

To upload - upload - your media, discover our article on How to upload your bulk media on WordPress

Gutenberg column image block

This is what your new column might look like in the WordPress theme default Twenty Nineteen. In this example we are using three columns and the last column contains an image.

Image add gutenberg column

If you only want to add an image and text to the side, you can also use the block Media and text Instead of columns. This block is specifically designed to display media such as images and videos next to the text.

Wordpress block text media

Addition of several columns in the classic editor of WordPress

If you haven't upgraded WordPress to Gutenberg and are still using theclassic editoryou need to install a separate plugin to create a grid layout of columns.

Start by installing and activating the plugin Lightweight Grid Columns

For detailed instructions, follow our step-by-step guide on how to install a plugin in WordPress.

Upon activation, you can create a new message or open an old message to edit. Then click on the " Add columns In the visual editor toolbar.

Add columns wordpress classic editorYou will now see a popup window which allows you to add your first column. You can choose how much area your column can cover, on desktops, tablets and mobile devices differently.

Go further by discovering How to create a full width page on WordPress

For example, if you set the 50% desktop grid percentage, your column will cover half of the line.

Define the percentage of columns

It has many options to set the width of your column, from 5% to 100% with an 5 interval. You can choose one by clicking on the drop-down menu.

Column width option

Then, you must add the content of your column in the "Content" area, then click on the "OK" button to insert it in your publication.

Content of the divi column

The plugin will generate the required shortcode with your content and add it to your post editor.

Discover in this tutorial How to install and configure the WP Super Cache plugin to improve the performance of your blog.

Column added on classic wordpress editor

Now that your first column is added, you can repeat the process to add more columns. For the last column, do not forget to check the box 'Last column of the line'.

Add another column on the classic wordpress editor

After that, you will be able to save your preview and preview it. Here's what it looks like on our Twenty Seventeen test website.

Column added wordpress demo

If you also want to find WordPress themes that can help you create columns on your pages or publication, here are 3 WordPress themes premium perfect for this task.

1. TheGem

There are a lot of WordPress themes which may claim to offer a OnePage layout, but none can offer the wealth of options and features that TheGem WordPress template has. 

Thegem multipurpose wordpress themes create website

All the design elements you associate with a good OnePage website are present in this WordPress theme : a full-screen slider (which can be created using the Revolution Slider plugin delivered with the WordPress theme), a choice of six header styles and the ability to create full-width sections using the Visual Composer plugin included in the package.

In addition, it has a number of customization options for items such as fonts, colors, and icons. It's a rare thing, but there are also details we do not like about TheGem. But basically it's a WordPress theme that will suit you of course, given the number of positive points it has. It is a strong competitor, which would facilitate the creation of a OnePage website.

DownloadDemo |โ€ฏWeb hosting

2. Stockholm

Stockholm is a WordPress theme designed to help you create the website of a construction company, civil engineering, or any company related to the world of building renovation. This WordPress template is geared towards professionals who care about quality and detail.

stockholm-themes-wordpress-multipurpose-versatile-create-site-internet

Comes with an options panel and a user-friendly backend, they will allow you to easily manage your content. There are about 20 demos of this template presenting a wide range of activities on which this WordPress theme can be used. And these can also be used as a basis for future customization so that your website has a unique look.

Very responsive, it is displayed perfectly on any type of screen. If during the customization or installation of this template, you encounter difficulties, the complete documentation included in the package can serve as a guide. And if you still can not, support dedicated to this theme WordPress remains at your disposal.

DownloadDemo |โ€ฏWeb hosting

3. Jupiter

Jupiter is another very popular WordPress theme. It has 25 demos that cover 6 from our categories - agency, creative, education, food, health and eCommerce - and more will be added to it in future updates. Most of its layouts have a minimalist design, with a pleasant typography.

Jupiter-theme-wordpress-multipurpose-versatile-create-site-internet

One of Jupiter's main selling points is its Creative Header Customizer which allows you to quickly and easily customize the headers design of your website. Visual Composer, 3 sliders (Layer, Revolution, and iCarousel), 10 new shortcodes, more than 1800 icons, and 10 custom post types are all included on delivery.

Its page load times are also excellent. This is a superb product, and you will be hard pressed to find so many WordPress themes having its characteristics.

DownloadDemo |โ€ฏWeb hosting

Other recommended resources

To go further in optimizing your blog or your website, we also suggest that you consult some links that will immerse you in the world of Gutenberg

Conclusion

Here ! That's it for this tutorial. We hope this article has helped you learn how to add columns to your WordPress posts and pages. Feel free to share this tutorial with your friends on your social networks.

If you have suggestions or comments, they will be welcome. But if you are a novice, we invite you to consult our resources.

...