While something as simple as columns may seem like the most pedestrian and, let’s be honest, boring element of any website, it really isn’t. In fact, columns can be the most important component when it comes to organizing your content into a cohesive whole. Without them, it would be much more difficult to organize every other element of your site like buttons and images, even shortcodes and widgets, into logical and above all aesthetically pleasing compositions. That’s why today we decided to show you how to create and use columns in four of the most popular WordPress content editors. Here are the things we will cover:
To add columns to a post using the Gutenberg editor, first open your post and click plus Sign in at the top left of the post to open the block selector. Now select the columns block you can find in it. Layout Elements tab.
There are several column variations, but for the purposes of this tutorial, we will use two equal-width column layouts.
You will see your row split into two equal parts. You will also see the block settings on the right. This is where you can edit the relative width of your columns.
Click on any column to enter text. plus sign and choose one paragraph block it, then type or paste your text.
Just like with text, you can add any other Gutenberg block to your column: anything including images, galleries, videos, and other columns. Let’s add a picture to the right-hand column.
In this case, we To upload a shape.
Click preview button To see how your post content is organized into columns.
If you’re using Elementor, adding columns works a little differently. After you open your post in Elementor, you can introduce columns to a space in Elementor by clicking the icon. Add Section button.
You can now choose the structure of your partition. We will choose a section with three columns.
As you can see, the active area is divided into three parts. To add text to your sections text editor widget to any of the subsections.
To add an image to a column picture widget to subsection.
To fill the column with an image Select Image the area inside Edit Image tab on the left…
…and then upload or select a file from your media library.
Deselect the column to return to the Items menu.
To add a video to your column, Video widget to the remaining column.
Don’t forget to paste the URL into the appropriate field to embed the video you want.
Now, to edit this entire section, you will need to navigate to: edit section Menu.
this edit section menu on the right Order options that manage the appearance of the columns in your sheet. It really depends on your layout preferences.
we will use Content Width option to sync text with image column.
this Structure section exists to make it easier for you to change the width ratio of your columns. we will choose 50, 25, 25 layout and see how that affects column width.
You can format each block of text in any of your columns, add backgrounds, buttons, captions for images, sound widgets, and countless other elements.
If your preferred WordPress editor is WPBakery, you can still create and use columns fairly easily.
First, open the post in WPBakery and Add Item button.
Next, select Row.
Hover over the columns tab to split this item into two columns. You need Column Layout tab to divide your items into columns. We will select two equal columns (1/2 + 1/2).
The row you added is now split into two equal columns.
To add content to a column, click the plus sign and select the appropriate item. For the text, this text block item for the images you need Single Picture item, for a video, a YouTube (or other) item etc. We’ll add some text to the left-hand column and an image to the right. We have already discussed the text and now we will take a look. Single Picture element.
Here you see various display configuration options. Click the image button and select an image to fill the image item. If you don’t want to use the media library, you can choose other image sources from the following. Image source Drop down menu.
Since we already have an image in our library, we will use it again.
After creating your image, click the preview button to see how your content looks in the post.
Your image will appear in the right-hand column as configured.
Of course, you can choose the classic editor. There is a column solution for that too.
Finally, you will need a plugin to add columns in the classic editor. we recommend Column Shortcodes Addition. If you’re not sure how, we have a tutorial on how to install a WordPress plugin.https://wordpress.org/plugins/column-shortcodes/
This plugin allows you to create column shortcodes, which are small pieces of code that will allow you to rearrange your text and other content.
We want to split our post into two equal width columns. We’ll start by switching. text display suitable shortcodes before copying. By clicking on the brackets you will find the shortcodes ( [ ] ) button.
To divide our post into two equal columns, first one half column shortcode by clicking on it. Two labels will appear at our cursor position. These represent the beginning and end of the left-hand column.
Now let’s say we want to embed a tweet in the left column of our post. You will need to copy the embed code from Twitter. Click the Embed Tweet command from the drop-down menu in the Tweet.
Twitter will link to a page with the required code. Just click to copy the embed code. Copy Code button.
Next, we need to paste the shortcode between the opening tag and the closing tag, making the tweet the only content in our left-hand column.
To add the right-hand column, we will place the cursor at the end of our text and select the appropriate shortcode from the brackets ( [ ] ) menu. Note that this plugin needs the rightmost column to contain the (last) shortcode. Therefore we will choose one and a half (last) Enter the command and paste some text between the opening and closing tags.
This is how your content will appear in the preview.
This is how you divide your content into columns using a plugin and classic editor.
As a result
So whether you use an editor’s built-in options or a la plugin, it’s no problem to organize your content in columns. It’s up to you to see which column layout best fits your overall website design. While your visitors are there for your content, there are things you can do to make it more engaging without much effort or technical skill.
Whether you want to emulate newsprint or experiment with images and other embedded elements, you should try one of our column recommendations. With columns, you can make each of your posts look easier to read, more user-friendly, and more professional in just a few clicks.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
