Sometimes you want a page on your website or blog to stand out with a special layout. While some people use page builders, an alternative is Gutenberg or a plugin like Shortcodes Ultimate.
Multi-column text, like newspapers and magazines, can make a dull block of text more interesting. It is easier on the eye in some ways and it looks even better when the columns contain images as well. WordPress posts and pages do not normally have columns (the sidebar isn’t counted), so using them occasionally makes the content more visually interesting. Short lines of text are more easily read than long lines too.
There are several ways to create columns of text and images in a WordPress post or page and one method is to use the Gutenberg Columns block. I will look at this first. Another method is to use a free plugin like Shortcodes Ultimate. I look at this further down this article and it is useful because it not only works with Gutenberg, but also the Classic WordPress Editor, which some people still use.
Multiple columns with Gutenberg
1 Insert the Columns block
Place the cursor on a new line in the WordPress editor. Then find and insert the Columns block. You can do this by typing /columns or by clicking one of the plus buttons and searching or browsing for the Columns block.
2 Choose the columns and widths
This appears in the post editor and you can choose the number of columns you want and how they are divided. I will choose 50/50, but it is up to you and you may want three columns or uneven columns. The Shortcodes Ultimate plugin is a bit more flexible as we will see later, but Gutenberg is so easy to use and it covers most people’s needs. Just click the one you want.
3 Empty columns awaiting content
I chose two columns for this block and there are two empty columns with plus buttons. These are to add blocks to each of the columns. Click one to start adding blocks in columns. Click a plus button and select a block to add to the column. For example, you may want to add a Paragraph text block.
4 Add content to columns
It can be a bit difficult adding more blocks to a column. If you have added a text block, the easiest way to add a new block to that column is to position the cursor at the end of the text and press Enter to create a new line. Mouse over it and click the plus button that appears on the right or type / followed by the block name or select a block from the menu that appears.
5 The finished result
It does take a bit of getting used to, but once you get the hang of it, Gutenberg makes creating columns and adding content to them quick and easy.
Multiple columns with Shortcodes Ultimate
This method of creating columns of text and images in WordPress posts uses shortcodes and they are a feature built into WordPress. The number and capabilities can be greatly extended by adding plugins like Shortcodes Ultimate to include not only more shortcodes, but more powerful ones with many more features.
Shortcodes Ultimate works with Gutenberg editor and the Classic WordPress editor for those that are still using it.
How to get Shortcodes Ultimate
This is a plugin and it is free in the WordPress plugins library, which makes installing and activating it very straightforward. Here is a step by step guide.
- Click Plugins in the sidebar of WordPress
- Click the Add New button at the top
- Enter shortcodes ultimate into the search box at the top right
- Click the Install Now button next to Shortcodes Ultimate
- Click the Activate button to enable it
Create text columns with Shortcodes Ultimate
The plugin is now ready to use and it adds dozens of brilliant shortcodes, but here I will focus on just one of them and it is for creating multi-column layouts. (I looked at another feature of Shortcodes Ultimate in How to hide content and spoilers in WordPress posts).
1 Shortcodes Ultimate button
A new button is added to the toolbar in the post editor and this is used to insert shortcodes into the post content. There is a Shortcodes block if you want to manually create something from scratch, but this toolbar button is the easiest method to use. Click it.
2 Browse and select a shortcode
There is a large collection of shortcodes and the one we want is Columns (not Column without an s). Select Columns and insert it.
3 Edit and insert the columns shortcode
A form like this appears and down near the bottom in the Content section is the code itself. This section is editable. For example, you could copy a line of code, paste it in, then change all the 1/2 to 1/3 to create three columns, like this:
The Preview section shows how it will look. Click Insert Shortcode to inset this in the WordPress post. I will use the two-column option with column size set to 1/2.
4 The shortcode code
Shortcodes code looks messy and confusing if you are not used to it. Ignore the text between square brackets and look for Column content. There is one for each column and this is where you type text or insert images to appear in the coloumn.
5 Insert images into columns
You’ll see a little down arrow in the toolbar and this enables you to show a menu containing useful features. For example, you can select text and use the menu to change the style or color of it. You can also insert images into the columns using this menu. Select Inline image and you can choose an image from the media gallery.
If an inserted image is not the correct size, click the image and a Width option appears. Enter any value you want, or delete it and leave the box blank to use the image’s default size. Click the curved arrow to apply it.
6 The finished columns
Inserting columns or any shortcodes using Shortcodes Ultimate looks a confusing mess in the WordPress editor, but somehow it all works out fine when the post is viewed. Use the Preview button in the top right corner of the WordPress editor to see what it looks like without publishing it. Here you can see that the result is almost identical to using the Gutenberg editor.
An advantage of Shortcodes Ultimate is that you can customize the shortcode, which is useful if you are an expert and want something non-standard.
Potential problems with columns in WordPress
When creating multiple column tables or multiple column text, you must consider how it will look on a phone. Not everyone uses a desktop or laptop computer with a big screen, so take care. What looks good on your computer may not look good on a mobile device with a small screen.
Lack of space collapses columns, so you may not see them on your phone, just regular text.
This is something you will have to experiment with and the results may depend on your theme. Try creating tables and multi-column text and view it on your phone to see what happens.
