WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Multi-Column Content in WordPress Posts (No HTML Required)

How to Add Multi-Column Content in WordPress Posts (No HTML Required)

Last updated on January 2nd, 2020 by Editorial Staff
277 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Multi-Column Content in WordPress Posts (No HTML Required)

Do you want to add multi-column content in your WordPress posts? Columns can be used to create engaging layouts for your posts and pages.

Traditional print media, like newspapers and magazines, have been using multi-column layouts since the very early days of printing. Their goal was to make it easier for users to read the smaller text while utilizing the available space economically.

Single column layouts are more commonly used on the web. However, multi-column grids are still useful for highlighting content and making it easier to scan and read.

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

Add Multi-Column Content in WordPress Posts and Pages

Adding Multi-Column Content in WordPress – The Easy Way

Creating multi-column content aka grid column content in WordPress is now easy because it comes as a default feature. The new WordPress Block Editor Gutenberg includes a columns block.

To add a multi-column layout, you need to create a new post or edit an existing one. Once you’re in the post edit area, click on the ‘Add’ icon on the top to add a block.

Next, you need to select the ‘Columns’ block located under ‘Layout Elements’ tab.

Add Columns Block in Your WordPress post

You will now see the mouse cursor jumping on the left column and a text placeholder will appear on the right column.

Columns block WordPress in WordPress added to post

As you can see in the above screenshot, the Columns block seems just an empty area at first. If you mouse over to the left, you can see the block border highlighted.

You will also be able to see the block settings on the right column of the post edit screen.

Columns Block WordPress - 2 Columns

By default, the columns block will adds two columns. You can increase the number of columns you want to add from the block settings on the right. It allows you to add up to six columns in a single row.

Add more columns to your Columns

Simply click on a column and start typing to add content. You can use the tab key on your keyboard for switching to the next column.

Add Text in Your WordPress Columns

Adding Media and Other Content in Your Columns

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

The columns block allows you to add blocks inside each column. Simply take the mouse to a column, and you will notice the ‘Add new block’ icon inside it. You can also add a block by typing / and then the block name.

Add new block in WordPress columns

Your selected block will now appear inside the column. You can now go ahead and add content to it.

Image Block Added to WordPress

Here’s how your new column may look in the default Twenty Nineteen theme. In this example, we are using three columns and the last column contains an image.

3 Columns in WordPress Post - Preview

If you only want to add an image and some text next to it, then you can also use the ‘Media and Text’ block instead of columns. This particular block is made specifically for showing media like images and videos next to some text.

Add Media and Text Block in WordPress

Adding Multiple Columns in Old WordPress Classic Editor

In case you haven’t upgraded your WordPress to Gutenberg and still using the Classic Editor, then you’ll need to install a separate plugin for creating a grid column layout.

First, install and activate the Lightweight Grid Columns plugin. For detailed instructions, follow our step by step guide on how to install a plugin in WordPress.

Upon activation, you can create a new post or open an old post to edit. Next, click on the ‘Add Columns’ button from the visual editor toolbar.

Add Columns Icon Lightweight Grid Columns Plugin

Now you will see a popup window to add your first column. You can choose how much area your column can cover, in desktops, tablets, and mobile devices differently.

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

Grid Width Percent - Lightweight Grid Columns

There’re plenty of options to set your column width, from 5% to 100% in the interval of 5. You can choose one by clicking the dropdown.

Column Width Options - Grid Percentages

After that, you need to add your column content in the ‘Content’ box and then click the “OK” button to insert it into your post.

Add Content to Your Column  - Lightweight Grid Columns Plugin

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

Shortcode and Content Added to WordPress Column

Now that your first column is added, you can repeat the process to add more columns. For the last column in row, don’t forget to check the box ‘Last column in row’.

Shortcode and Content for 2 Columns in WordPress

After that, you can save your post and preview it. Here’s how it looked on our test site using Twenty Seventeen theme.

Two WordPresss Columns in Twenty Seventeen Theme

We hope this article helped you learn how to add columns in your WordPress posts and pages. You may also want to see our simple guide on how to easily align images in WordPress posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

277 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

42 Comments

Leave a Reply
  1. Nishant Kumar says:
    Feb 19, 2021 at 10:01 pm

    Really very useful. I am not aware of how to add a column section in the WordPress blog. Now I got it.

    Reply
    • WPBeginner Support says:
      Feb 22, 2021 at 10:35 am

      Glad our guide could help :)

      Reply
  2. Matt says:
    Nov 28, 2020 at 2:31 am

    Hi there – thanks for this post really helpful post. One quick question – is the text auto assigned to each of the (two) columns to ensure the columns are the same height on the page, or is this something you have to test/manage on text entry?

    Reply
    • WPBeginner Support says:
      Nov 30, 2020 at 10:54 am

      You would need to manually ensure your content is the same or similar length if you wanted that.

      Reply
  3. Sir Newton says:
    Oct 20, 2020 at 2:48 am

    Please, how can I make my ecommerce website to display two column product view on mobile.
    Thanks

    Reply
    • WPBeginner Support says:
      Oct 20, 2020 at 10:08 am

      You would want to check with the support for your theme or the ecommerce plugin you are using for modifying the styling of your store page.

      Reply
  4. Stuart says:
    Feb 7, 2020 at 11:47 am

    Hi – I need 11 columns. Is there a way of exceeding what I figure to the max (10)?

    Reply
    • WPBeginner Support says:
      Feb 10, 2020 at 10:23 am

      We do not have a recommended method for going 11 columns wide at the moment. Depending on what you’re looking to display you may want to take a look at creating a table instead of columns.

      Reply
  5. Caite Adamek says:
    Dec 5, 2019 at 4:47 am

    Is there a way to automatically transfer the columns? When I set up my 2 columns, I put the images in the 1st column, then the text in the 2nd. I noticed that the mobile version can’t display the 2 columns next to each other, so the images are displayed first, then the text. I would like the text to be displayed first, then the images. Do I have to retype it all, or is there a clever way to switch the content of the 2 columns?

    Reply
    • WPBeginner Support says:
      Dec 5, 2019 at 10:59 am

      Not at the moment, you could create a 2 column area beneath where you have it currently and place the content how you want it there then delete the original.

      Reply
  6. Kimberly Kelley says:
    Jun 12, 2019 at 6:35 pm

    Using the multi-column (2) columns, the videos overlap themselves. is there anyway to adjust the max with of the videos since the only way I can seem to add them is via url, not embed code.

    Reply
    • WPBeginner Support says:
      Jun 14, 2019 at 10:14 am

      You may want to check if the videos overlap on the when not viewing in the editor, otherwise, you could look in the advanced CSS section and set the width using that selector: https://www.wpbeginner.com/glossary/css/

      Reply
  7. Nicole says:
    Apr 6, 2019 at 6:11 pm

    Any way to vertically center things in a column with new blocks/Gutenberg editor? Like I’d want a vertically centered image on the left, and text on the right. So say 30 lines of text and a 200 px height image – is there an easier way than manually inserting and sizing spacer blocks?

    Reply
    • WPBeginner Support says:
      Apr 8, 2019 at 11:59 am

      For what it sounds like you’re wanting, you may want to use the media and text block rather than the columns block.

      Reply
  8. Rob Tait says:
    Nov 27, 2018 at 9:23 am

    Hi

    How do I write in 1 column and then 2 columns for next paragraph and then back to 1 column for the 3rd p/graph?

    Any help much appreciated?

    Thanks
    Rob

    Reply
  9. Ashish says:
    Aug 7, 2018 at 10:44 pm

    Why can’t we just elementor or any such page builder plugin. It is a lot more easier to use with so many additional features.

    Reply
  10. dimiter kirov says:
    Jul 27, 2018 at 12:27 am

    This plugin has not been updated for 3 years and to top it all it won’t work with Gutenberg plugin

    Reply
  11. Jenny says:
    Jul 18, 2018 at 7:26 pm

    Hello,
    I tried adding columns to one of my pages and the Advanced Column button did not appear. I checked my plugins and it said it’s installed. Do you know what the problem would be?

    Thank you!
    Jenny

    Reply
    • Rob Tait says:
      Nov 27, 2018 at 9:01 am

      You need to install an advanced visual editor such as TIny MCE in order to see the button. It won’t display on the standard default visual editor. Just had the same problem but it now shows after installing the above which is free.
      Hope that helps
      Rob

      Reply
  12. Dennis says:
    May 23, 2018 at 10:36 am

    Great. Just what I was looking for and finally, someone who can explain everything step by step.

    Reply
  13. Heather says:
    Feb 11, 2018 at 11:35 pm

    I installed the plugin and activated it. It is displaying as “activated.” Still, there is no button. How do I troubleshoot this; I already know how to install a plugin so that fix is not applicable.

    Reply
  14. Kirk says:
    Oct 2, 2017 at 7:18 pm

    Installed the plugin with a basic free theme, and the column button never appeared in my Pages editor. I know you’re not the creator of the plugin, just wanted to share our experience

    Reply
  15. om zho says:
    Jul 22, 2017 at 4:41 pm

    upon pasting from text edit, the text spacing is weird as there are no “clean format” selection for advance WP column.. how can you fix it?

    Reply
  16. Martine S. says:
    Apr 21, 2017 at 9:57 am

    Hey, this sounds great! But how will it look on phones? I’m using a similar plugin to have two columns, one for Norwegian and one for English. But when people read my blog via phone, the second column comes right after the first column so it looks like a full text – in two different languages!

    Reply
    • Joe Nelo says:
      May 2, 2017 at 6:44 pm

      What plug in are you using to display two columns of text? I am trying to do the same for English and Esperanto.

      Reply
  17. Elizabeth says:
    Mar 30, 2017 at 10:55 am

    How do you activate the puglin??

    Reply
    • WPBeginner Support says:
      Mar 30, 2017 at 11:28 pm

      Hey Elizabeth,

      Please see see our step by step guide on how to install a WordPress plugin.

      Reply
  18. PB says:
    Jan 19, 2017 at 10:56 am

    Is there a way to ensure the text in these columns displays as a list, i.e. with hard line breaks between items rather than as a single block of run-on text?

    Many thanks in anticipation of your advice

    Reply
  19. Steve Elliott says:
    Jun 2, 2016 at 4:02 pm

    Is there a way to five these columns a background color?

    Reply
  20. Bhagyashree barlingay says:
    Apr 28, 2016 at 10:10 am

    I cannot copy/paste material that I have already typed , into these columns.

    Reply
  21. Naveed says:
    Apr 21, 2016 at 3:04 am

    i am using wordpress version 4.5 , but this plugin is not compatible with my theme can i use this plugin for my theme ??

    Reply
  22. ik says:
    Mar 26, 2016 at 12:36 am

    Can you add images to each column? Or can you add action buttons to each column?

    Reply
    • WPBeginner Support says:
      Mar 27, 2016 at 2:49 pm

      Yes.

      Reply
  23. Kate says:
    Jan 12, 2016 at 9:40 am

    Columns working but when trying to embed VIDEO within columns only text of the code is showing…

    Reply
  24. Daniel Speraw says:
    Feb 22, 2015 at 8:55 pm

    It looks good when columns are added to the post, but when I look at it published it has reverted to 1 centered column. I’ve tried it multiple times and in two browsers. Any thoughts?
    This is by far the easiest plugin. I REALLY want to use it.
    Many thanks,
    Daniel

    Reply
  25. Meshellklip says:
    Jan 3, 2015 at 10:48 am

    Can you add images to each column? Or can you add action buttons to each column?

    Reply
  26. Sri Harsha Chilakapati says:
    Sep 21, 2014 at 9:47 am

    Hi,

    My site uses the responsive Customizr theme, and I don’t wanna lose that responsiveness. Can I add responsive columns using this plugin?

    Reply
  27. Chris Xphstos says:
    Feb 23, 2014 at 6:25 am

    Ηι!

    Is there a way to present a layout with columns but not one post with 2-3-4 columns etc.?
    Each column withing a page will be a seperated post. Something like Joomla’s Blog Layout…

    Reply
    • WPBeginner Support says:
      Feb 23, 2014 at 5:54 pm

      For that you would want to look into a multi column WordPress theme, there are plenty of such themes out there.

      Reply
  28. Karen says:
    Jan 1, 2014 at 2:59 am

    Thank you! I’ve been wanting to learn how to do this for a while now – all good now! xx

    Reply
  29. Debra Torres says:
    Dec 23, 2013 at 12:22 pm

    This is exactly what I needed! Been trying to use tables for columns and getting so frustrated. Thank you, thank you, thank you!

    Reply
  30. Mark Corder says:
    Dec 23, 2013 at 9:45 am

    I must say – if you need to use multiple columns on a regular basis, this looks like a great solution even if you DO know HTML/CSS! Love the fact that they included a breakpoint in the Options for adapting to responsive designs…

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
TrustPulse
TrustPulse
Instantly get 15% more conversions with social proof. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Keep Your WordPress Content Safe with BackupBuddy
BackupBuddy Coupon
Get 25% off BackupBuddy, the best and most popular WordPress backup plugin.
ShowThemes
ShowThemes Coupon
Get 20% off on ShowThemes beautiful WordPress themes for event websites.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.