Skip to Main Content

How to add multiple columns on WordPress without using a plugin

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 since the very beginning of printing. Their purpose 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 then, How to search, install and activate a WordPress theme on your blog

Single-column layouts are more commonly used on the Web. However, grids Multiple columns remain 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.

Adding Multi-Column Content in WordPress - The Easy Solution

Creating multi-column content, also called grid content on WordPress, is now simple because it is a default feature. The new WordPress Gutenberg block editor proposes a block of columns.

To add a multi-column layout, you must create a new article or edit a new one. Once in the editing area, click on the icon " Add At the top to add a block.

Then you have to select the block Columns Under the "Layout Elements" tab.

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

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

You will also see the block settings in the right column of the screen.

By 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 one line.

Just 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.

Adding multimedia and other content to your columns

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

The column block allows you to add blocks inside each column. Just place the mouse on a column and you will notice the iconAdd a new block" inside. You can also add a block by entering the name of the block.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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

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

Here's what your new column might look like in the Twenty Nineteen default WordPress theme. In this example, we use three columns and the last column contains an image.

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.

Adding multiple columns in the classic editor of WordPress

If you have not upgraded WordPress to Gutenberg and still use 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 to install a plugin in WordPress.

When you activate, you can create a new message or open an old message to edit. Then click on the button Add columns In the toolbar of the visual editor.

You will now see a popup window that allows you to add your first column. You can choose the area that 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.

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.

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

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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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

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'.

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.

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 many WordPress themes that can claim to offer a OnePage layout, but none can offer the wealth of options and features available in the WordPress tempo TheGem.

All the design elements that you associate with a good OnePage website are present in this WordPress theme: a full-screen slider (which can be created with the Revolution Slider plugin that comes 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 point he has. It is a strong competitor, which would facilitate the creation of a OnePage website.

Download | Demo |Web Hosting

2. Stockholm

Stockholm is a WordPress theme designed to help you create the website of a construction company, civil engineering company, 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 serve 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.

Download | Demo |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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

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 loading time is also excellent. This is a great product, and it will be difficult to find so many WordPress themes with its characteristics.

Download | Demo |Web Hosting

Other recommended resources

To go further in the optimization of your blog or your website, we also suggest you to 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 publications and WordPress 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.

...

This article features 18 comments
  1. Hi, I have this plug-in ... but it does not work well, it happens:

    I create two columns, one smaller for the photo, another bigger for the text, then the text is only 2 lines, not in the full height of the column, once saved the JUMP text under the photo, rather than stay accano, see that disappears a column ... ..
    What do I do? why does this happen, is there another plg-in better and simpler than this here?
    Thank you, I would be grateful for the help!

    1. Hello Irina,

      Try to activate the default theme of WordPress, if everything works fine, then it's because the problem comes from your current WordPress theme.

      Also check that you have made plugin updates.

      1. I copy text and paste tempted by a CTRL + V, without success. The context menu with the right click does not offer paste.
        I have not found any alternative to retype ...

        1. Sorry for the late response.
          Can ensure that right-clicking on another element of the page, the shortcut menu appears? If that is the case then probably a JavaScript problem on accommodation.
          If you're on Google Chrome, then go to the page where you're having trouble, then hit "F12" (a window will open or be attached to the page) and choose the "Console" tab . Take a screenshot of this tab and I'll tell you if there is a problem.

          1. Hello,
            Thank you for your reply.
            My website is hosted by Free, it is possible that there is a javascript problem.
            Can you tell me how you pass screenshot I made?
            cordially

          2. We want Mireille but the type of service you ask is unfortunately paying and we invite you to contact our technical team on blogpascher.com

          3. Since I installed a flanged version for Free, I think the problem comes from there.
            I will try installing a different version ...

      2. I copied a text and I tried to stick it in a column in the plugin. Unable or with the keyboard shortcut CTRL + V, or in the context menu of right click that does not offer this feature.
        Is there any other solution than retyping everything?

  2. hello i have installed advanced wp columns.
    but when I look on the page I present a white square on the top left of each column? can you help me. thank you

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
10 shares
Share8
tweet1
Save1
WhatsApp