How to Create and Use WordPress Columns
![How to Create and Use WordPress Columns](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/How-to-Create-and-Use-WordPress-Columns.jpg)
While something as simple as columns may seem like the most pedestrian and, let’s be honest, boring element of any website, it’s really not. In fact, columns might even be the most important component when it comes to arranging your content into a harmonious whole. Without them, it would be a lot harder to organize all the other elements of your site, like buttons and images, or even shortcodes and widgets, into logical and, above all, aesthetically pleasing compositions. So, today we’ve decided to show you how to create and use columns in four of the most popular WordPress content editors. Here’s what we’ll cover:
To add a column to a post using the Gutenberg editor, first, open your post and click the plus sign in the post’s top left-hand corner to open the block selector. Now select the columns block, which you can find in the Layout Elements tab.
![Create Columns using Gutenberg](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/1-Create-Columns-using-Gutenberg.jpg)
There are several column variations, but we will use a layout of two equal-width columns for the purposes of this tutorial.
![Several column variations](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/2-Several-column-variations.jpg)
You will see that your row has been divided into two equal parts. You will also see the block settings on the right-hand side. This is where you can edit the relative width of your columns.
![Edit the relative width of your columns](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/3-Edit-the-relative-width-of-your-columns.jpg)
To input text into any column, click on its plus sign and select a paragraph block, then type or paste your text.
![Select a paragraph block](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/4-Select-a-paragraph-block.jpg)
Just as with text, you can add any other Gutenberg block to your column: images, galleries, videos, and anything else – including other columns. Let’s add an image to the right-hand side column.
![Add an image to the right hand side column](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/5-Add-an-image-to-the-right-hand-side-column.jpg)
In this case, we will upload an image.
![Upload an image](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/6-Upload-an-image.jpg)
Click on the Preview button to see how your post content looks arranged into columns.
![Post content arranged into columns](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/7-Post-content-arranged-into-columns.jpg)
In case you are using Elementor, adding columns works a little different. After opening your post in Elementor, you may introduce columns to an area in Elementor by clicking on the Add Section button.
![Create Columns using Elementor](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/8-Create-Columns-using-Elementor.jpg)
You can now choose the structure of your section. We will choose a three-column section.
![Choose the structure of your section](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/9-Choose-the-structure-of-your-section.jpg)
As you can see, the active area is subdivided into three sections. To add text to your sections, simply add the Text Editor widget to any of the subsections.
![Add the Text Editor widget](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/10-Add-the-Text-Editor-widget.jpg)
To add an image to a column, simply drag the Image widget to the subsection.
![Drag the Image widget](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/11-Drag-the-Image-widget.jpg)
To fill the column up with an image, click on the Choose Image area in the Edit Image tab on the left-hand side…
![Choose Image area](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/12-Choose-Image-area.jpg)
…and then upload or select a file from your media library.
![Upload or select a file from your media library](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/13-Upload-or-select-a-file-from-your-media-library.jpg)
Deselect the column to return to the elements menu.
To add a video to your column, you need to drag the Video widget to the remaining column.
![Drag the Video widget](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/14-Drag-the-Video-widget.jpg)
Remember to paste the URL into the appropriate field to embed the video you want.
![Paste the URL into the appropriate field](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/15-Paste-the-URL-into-the-appropriate-field.jpg)
Now, to edit this entire section, you‘ll need to go to the Edit Section menu.
![Edit Section menu](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/16-Edit-Section-menu.jpg)
The Edit Section menu on the right-hand side gives you several Layout options, governing the appearance of the columns on your page. This really depends on your layout preferences.
![Edit Section menu](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/17-Edit-Section-menu.jpg)
We will use the Content Width option to even out the text with the image column.
![Content Width option](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/18-Content-Width-option.jpg)
The Structure section is there to make it easy for you to change the width ratio for your columns. We will select the 50, 25, 25 layout and see how that affects the column width.
![The Structure section](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/19-The-Structure-section.jpg)
You can format each text block, add backgrounds, buttons, captions for pictures, audio widgets and countless other elements to any of your columns.
If your preferred WordPress editor is WPBakery, you can still create and use columns fairly easily.
First, open the post in WPBakery and click the Add Element button.
![Add Element button](https://qodeinteractive.com/magazine/wp-content/uploads/2020/02/Special-Characters-8.jpg)
Then, choose the Row element.
![WPBakery Row](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/20-WPBakery-Row.jpg)
To split this element into two columns, hover over the columns tab. You need the Column Layout tab to subdivide your elements into columns. We will select two equal columns (1/2 + 1/2).
![Column Layout tab](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/21-Column-Layout-tab.jpg)
Your added row is now subdivided into two equal columns.
![Two equal columns](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/22-Two-equal-columns.jpg)
To add content to one column, click its plus sign and choose the appropriate element. For text, it is the Text Block element, for images you need the Single Image element, for a video, a YouTube (or other) element, and so on. We will add some text to the left-hand side column, and an image to the right. We have already discussed text, and now we’ll take a look at the Single Image element.
![Single Image element](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/23-Single-Image-element.jpg)
Here you see the various image configuration options. To populate the image element, click on the image button and select an image. If you don‘t want to use the media library, you may select other image sources from the Image source drop-down menu.
![Image source drop down menu](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/24-Image-source-drop-down-menu.jpg)
Since we already have an image in our library, we will reuse it.
Once you’ve set up your image, click the preview button to see what your content looks like in the post.
Your image, as configured, will appear in the right-hand side column.
![Columns solution](https://qodeinteractive.com/magazine/wp-content/uploads/2020/08/32-Columns-solution.jpg)
Of course, you may prefer the classic editor. There is a columns solution for that, too.
Finally, to add columns in the classic editor you will need a plugin. We recommend the Column Shortcodes plugin. If you’re not sure how to do it, we have a tutorial on how to install a WordPress plugin.https://wordpress.org/plugins/column-shortcodes/
This plugin will allow you to create column shortcodes – tiny bits of code which will allow you to rearrange your text and other content.
We want to subdivide our post into two equal width columns. We will begin by switching to the text view before copying the appropriate shortcodes. You will find the shortcodes by clicking the brackets ( [ ] ) button.
![Create Columns using the Classic Editor](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/25-Create-Columns-using-the-Classic-Editor.jpg)
To subdivide our post into two equal columns, we will first insert the one half column shortcode by clicking on it. Two tags will appear at our cursor position. These represent the beginning and the end of the left-hand side column.
![Insert the one half column shortcode](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/26-Insert-the-one-half-column-shortcode.jpg)
Now, say we want to embed a tweet into our post’s left-hand side column. You will need to copy the embed code from Twitter. Click on the Embed Tweet command in the drop down menu on the tweet.
![Embed Tweet command](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/27-Embed-Tweet-command.jpg)
Twitter will link to a page with the requisite code. To copy the embed code, simply click the Copy Code button.
![Copy Code button](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/28-Copy-Code-button.jpg)
Then we need to paste it between the shortcode opening tag and the closing tag, making the tweet the only content in our left-hand side column.
![Paste code](https://qodeinteractive.com/magazine/wp-content/uploads/2020/08/29-Paste-code.jpg)
To add the right-hand side column, we will place the cursor at the end of our post and select the appropriate shortcode from the brackets ( [ ] ) menu. Be mindful that this plugin needs your rightmost column to contain the (last) shortcode. We will therefore select the one half (last) command, and paste some text between the opening and closing tags.
![One half (last) command](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/30-One-half-last-command.jpg)
In the preview, your content will appear like this.
![Preview columns](https://qodeinteractive.com/magazine/wp-content/uploads/2020/07/31-Preview-columns.jpg)
And that is how you subdivide your content into columns using a plugin and the classic editor.
In Conclusion
So, whether you use an editor’s in-built options or l a plugin, arranging your content into columns is no trouble at all. It is up to you to see which column layout fits your overall website design the best. While your visitors are there for your content, there are things you can do to make that content more appealing without a great deal of effort or technical skill.
Whether you want to emulate newsprint or experiment with pictures and other embedded elements, you should try one of our suggestions for columns. With columns, you can easily make each and every one of your posts appear more easily legible, more user-friendly and more professional with just a few clicks.