EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30
EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30 EXCLUSIVE DEAL 30% OFF on QODE Wishlist for WooCommerce plugin Discount code: WISHLIST30
BACK TO TOP

How to Create and Use WordPress Columns

How to Create and Use WordPress Columns

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:

How to Create Columns in WordPress using Gutenberg

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

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

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

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

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

In this case, we will upload an image.

Upload an image

Click on the Preview button to see how your post content looks arranged into columns.

Post content arranged into columns

How to Create WordPress Columns using Elementor

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

You can now choose the structure of your section. We will choose a three-column section.

Choose the structure of your section

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

To add an image to a column, simply drag the Image widget to the subsection.

Drag the Image widget

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

…and then upload or select a file from your media library.

Upload or select a file from your media library

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

Remember to paste the URL into the appropriate field to embed the video you want.

Paste the URL into the appropriate field

Now, to edit this entire section, you‘ll need to go to the Edit Section menu.

Edit Section menu

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

We will use the Content Width option to even out the text with the image column.

Content Width option

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

You can format each text block, add backgrounds, buttons, captions for pictures, audio widgets and countless other elements to any of your columns.

Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Biagiott banneri
Biagiotti

Beauty and Cosmetics Shop

How to Create Columns using WPBakery

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

Then, choose the Row element.

WPBakery Row

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

Your added row is now subdivided into two equal columns.

Two equal columns

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

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

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

Of course, you may prefer the classic editor. There is a columns solution for that, too.

How to Create Columns using the WordPress Classic Editor

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

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

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

Twitter will link to a page with the requisite code. To copy the embed code, simply click the Copy Code button.

Copy Code button

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

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

In the preview, your content will appear like this.

Preview columns

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.

Post your comment

Comments0