How to add multiple columns in WordPress

Would you like 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 since the early days of printing. Their goal was to make it possible Users Easier reading of a smaller text while using the available space sparingly.

If you have not yet created a website or blog in WordPress then we invite you to consult How to Install a WordPress Blog 7 Steps How to find, install and activate a WordPress theme on your blog

Single-column layouts are more common on the web. the Grid with multiple columns are still useful for highlighting content and making it easier to read and analyze.

In this tutorial, we are going to show you how to effortlessly add multi-column content to your WordPress posts without writing any HTML code.

Adding Multi-Column Content in WordPress – The Simple Solution

Creating multi-column content, also known as grid content in WordPress, is now easy as it is a standard feature. The new WordPress Gutenberg Block Editor suggests a column block.

To add a multi-column layout, you need to create a new post or edit one. In the editing area click on ” Add Add a block at the top.

Then you need to select the block columns “Located under the” Layout Elements “tab.

Add WordPress Columns

The mouse pointer jumps in the left column and a placeholder for the text appears in the right column.

Columns on WordPress Gutenbeg

As you can see in the screenshot above, the block is columns seems to be an empty area at first. If you move the mouse to the left, you will see the edge of the marked block.

You can also 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 in the block settings on the right. This way you can 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 columnAdd multimedia and other content to your columns

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

With the column block you can insert blocks in each column. Just move your mouse over a column and you will see the “Add a new blockInside. You can also add a block by typing the name of the block.

Add a picture to a column

Your selected block is displayed in the column. You can go there and add content.

To upload your media upload our article How do I upload your mass media to WordPress?

Gutenberg column picture block

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

Add a picture Gutenberg Column

If you just want to add a picture and some text to the page, you can also use the pad Media and text Instead of columns. This block is specially designed for displaying media such as pictures and videos alongside text.

Wordpress block text media

Adding multiple columns in the classic WordPress editor

If you haven’t upgraded WordPress to Gutenberg and are still using thatclassic editorYou need to install a separate plugin to create a grid layout of columns.

Start by installing and activating the plugin Light grid columns.

You can find detailed instructions in our step-by-step guide to install a plugin in WordPress.

Upon activation, you can compose a new message or open an old message for editing. Then click on ” Add columns In the visual editor toolbar.

Add columns WordPress Classic EditorYou will now see a pop-up window where you can add your first column. You can choose how much area your column can cover differently on desktops, tablets, and mobile devices.

Go ahead and discover How to create a full page width on WordPress

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

Define the percentage of columns

There are many options for setting the width of your column, from 5% to 100% with a 5 interval. You can choose one by clicking the drop-down menu.

Column width option

Then you need to add the content of your column in the “Contents” section and then click the “OK” button to add it to 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.

Added column in classic WordPress editor

After you’ve added your first column, you can repeat the process to add more columns. For the last column don’t forget to check the box ‘Last column of the row‘.

Add another column to the classic WordPress editor

After that, you can save your preview and preview it. This is what it looks like on our Twenty Seventeen test website.

Column added WordPress demo

If you are also looking for WordPress themes with which you can create columns on your pages or in your publication, here you will find 3 WordPress themes premium perfect for this task.

1. TheGem

There are many WordPress themes that claim to offer a OnePage layout, but none can offer the plethora of options and features available in the WordPress TheGem-Tempate.

Thegem multipurpose WordPress theme build website

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

There are also a number of customization options available for elements such as fonts, colors, and symbols. It’s a rare thing, but there are also details that we don’t like about TheGem. But basically, it’s a WordPress theme that, given the number of positive points, naturally appeals to you. It’s a tough competitor that would make it easier to build a OnePage website.

Download | Demo | Web hosting

2. Stockholm

Stockholm is a WordPress theme that you can use to make the website for a construction company, civil engineering, or any company related to the world of building renovation. This WordPress template is aimed at professionals who value quality and detail.

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

With a radio button and a user-friendly backend, you can easily manage your content. There are roughly 20 demos of this template showcasing a wide range of activities that this WordPress theme can be used for. And these can also be used as a basis for future customizations so that your website has a unique look.

Very responsive, it will display perfectly on any screen. If you encounter any difficulty while customizing or installing this template, the full documentation included in the package can serve as your guide. And if you still can’t, WordPress support is still available.

Download | Demo | Web hosting

3. Jupiter

Jupiter is another very popular WordPress theme. It includes 25 demos covering 6 from our categories – Agency, Creative, Education, Food, Health, and Ecommerce – and more will be added in future updates. Most of the layouts have a minimalist design with 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 your website’s header design. Visual Composer, 3 sliders (Layer, Revolution and iCarousel), 10 new shortcodes, 1800+ icons and 10 custom post types are included.

The page load time is also excellent. This is a great product and it will be difficult to find that many WordPress themes with their characteristics.

Download | demo | Web hosting

Other recommended resources

To further optimize your blog or website, we recommend consulting a few 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. Don’t hesitate Share this tutorial with your friends on your social networks.

If you have any suggestions or comments, they are welcome. But if you are a beginner we invite you to consult ours resources.

Previous post How to insert columns!
Next post Block: Columns – Gutenberg Primer