WordPress

WordPress

Add Multi-Column Content in WordPress

  • 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.
  • You will now see the mouse cursor jumping on the left column and a text placeholder will appear on the right column.
  • You will also be able to see the block settings on the right column of the post edit screen.
  • You can increase the number of columns you want to add from the block settings on the right.

Creating new columns in Gutenberg:

  1. While in the post editor, move your cursor between two blocks on your page, and click the ‘Add Block’ button
  2. Now choose the ‘Columns’ block
  3. This will insert a 2 column block, and you can adjust the number of columns via the ‘Block Details’ area of the dashboard

Creating new columns in WordPress Custom CSS/HTML

<div style="width:30%;padding:0 10pt 0 0;float:left;">

First Column

</div>

<div style="width:30%;padding:0 10pt 0 0;float:center;">

Second Column

</div>

<div style="width:30%;padding:0 10pt 0 0;float:right;">

Third Column

</div>

Columns in WordPress using Plugins

  • Install Responsive Column Plugins
  • There are a number of different WordPress plugins are available to help you add columns to WordPress. For example, plugins such as Lightweight Grid Columns can be installed and activated on a WordPress website in a matter of seconds.

Columns in WordPress

How to add columns into WordPress posts. Adding columns in the post has been something frankly, that WordPress users have struggled with for a long time.

There was never a built-in way with WordPress. You always had to install a new plugin and they didn’t always work so well. With the new WordPress Gutenberg editor, we finally have a native solution for adding columns into posts.

What we can do is to add the new column Gutenberg block. And adding it is actually really easy. All you need to do is add a new block and then use this “Add block” button in the left sidebar. Now if you check out my most used section, you’ll see the columns box showing up there.

You can also always find it in the Layout Elements section or you can simply search for it to make it show up in the block selector. If I click on it, I’ll immediately have a two-column layout added to my post. Now what this is doing is adding two blocks for me and placing them side-by-side.

By default, I can begin typing to treat them as paragraph blocks. I’ll fill in some demo content right now. Great, so the spelling, nothing like that really matters right now.

I’ll click update. I just want to show you how this displays on the front-end so you can check this out and you’ll see I now have this nice two-column display just like we see in the editor.

So far so good. Already, this is a much easier, more intuitive solution than we’ve ever had before. Now if you want to change this layout to have three, four, five, or even six columns, you need to select the column block.

Now what I want you to pay attention to right now is the way we switched between Document and Block settings in the sidebar here. If I click on this paragraph element, you’ll see the settings change over to the block settings. I can always click the document to return the document or I can click somewhere in the sidebar.

If I switch from a paragraph to a heading element if you watch the sidebar, you’ll see that the settings change to be relevant for the selected block. If I go to the column block, I can select the paragraphs, but there’s no obvious way to select the column block, which is the container for these two paragraph blocks. Sometimes if you really carefully click in between here like that, you can get it, but the easiest way to select the column is to hover over here and click on this icon with the six dots.

That will select the columns and trust me if you’re not aware of that, it can be really, really frustrating as you try to click around and figure out how to select the columns. Again, once you know how to select the column block, it’s a lot easier. Now you’ll find that there’s a way to adjust the number of columns.

You can do that very easily and in the Advanced section, there’s just an option for CSS classes, which you probably won’t need. Of course, I can add more text in here since it’s a paragraph block and once I enter in some text, I can use the block transform button to switch it to any other type of text-based block. But, if I highlight and delete that text, I now have the option to create any kind of block I want.

For instance, I could add an image and you’ll notice some of these options. These are the same options you normally see when uploading an image and if I want to choose an image from my Media Library, this will open it right up. I’ll select one of these images and you’ll see it inserted within my three-column layout.

If I update the post and view it on the front-end, we’ll see it displays just like we saw in the editor. So with the ability to add any type of block I want, I can add shortcodes, tables, headings, lists.

The column block is really, really versatile and you can create some pretty cool layouts. Most importantly, you just need to know that if you want to switch a paragraph block to another type of block, you have to first delete all of the text and then you’ll see the “Add block” button. And if you want to edit the column itself, click on this icon on the left side and then you’ll be able to adjust the number of columns.