Create three columns in WordPress
- In this tutorial, I’ll show you how to use the WordPress columns apply – with two different methods:
- WordPress columns with Column shortcodes,
- WordPress columns with Gutenberg
WordPress columns with column shortcodes
- Install the free Column Shortcodes plugin. The installation takes place in the backend via Plugins> Install.
- Activate Column shortcodes.
- Put a new one contribution or a new one page to – or edit an existing post or page.
WooCommerce – the big manual
Click the shortcode button
The shortcode button
After activating Column Shortcodes you will find the Insert Media to the right of the editor Shortcode button, you can recognize it by the two square brackets. Click the button to get shortcodes for creating columns.
PS: What is a shortcode anyway? Tutorial: WordPress Shortcodes.
Generate shortcode for three columns
Three columns in WordPress
In the example three columns be created. To do this, click on the following in Column Shortcodes:
- one of three – the shortcode for the first column
- one of three – the shortcode for another column
- one of three (last) – the shortcode for the last column
Now the plugin has placed the shortcode for 3 columns of code.
Text and images in three columns
Shortcode for three columns
Note: You have the code next to each other, I’ve just arranged it a little more clearly. Now write your texts and insert pictures. Place the content between the opening and closing shortcode tags. Example:
[one_third]Text and image for first column
[one_third]Text for second column
[one_third]Image for third column
Adjust column spacing
Change the spacing of the columns
Now save your contribution (or your page) and look at the three columns in the visitor view. Does everything fit, or are the gaps between the columns too small? If you are dissatisfied:
- Click the shortcode button again
- On the right you find Column padding (optional)
- Below are 4 input fields – top / right / bottom / left – for adjusting the inner spacing, the Padding. The value 0 is preset everywhere.
- Tip: Enter values between 5 and 10 to increase the spacing – or minus values to reduce the space.
- Click on the shortcode one of three on the left. Your change applies exactly to this shortcode.
- So that everything stays symmetrical: Enter the same values again and click on the shortcode one of three (last).
A bit of advertising on our own behalf: Merchant in e-commerce: the handbook for training and work. From Bernd Schmitt.
WordPress columns with Gutenberg
That was the old way. In the future, estimated from spring 2019, you will no longer have to install a plugin to create columns in WordPress. 😉 If you install the Gutenberg editor, you can try it out now.
Several columns of text in Gutenberg – without a plugin, simply with a click of the mouse
- With the Gutenberg editor, which comes into the core from WordPress 5, you can create columns with a click of the mouse.
- To do this, select the block Layout elements> Columns. However, the columns for blocks that are not text blocks only work as beta at the moment (September 2018).
Arrange blocks in columns
Columns in WordPress. If you use the column block more often, it will appear in the preselection of the blocks.
In order to arrange not only text, but also buttons, lists, pictures or another block in columns, you proceed in two steps:
- Insert a column block
- Insert the desired block in the column
Two columns in WordPress. A good block can now be inserted in each column.
In the picture above, two columns have been created. A block can now be inserted in each of these columns. Warning: this feature is still in beta. I failed to nest columns.