WordPress: create columns – onlineshop-diy

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

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:

1. [one_third] Text and image for first column [/one_third]
2. [one_third] Text for second column [/one_third]
3. [one_third] Image for third column [/one_third_last]

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:

1. Click the shortcode button again
2. On the right you find Column padding (optional)
   
3. Below are 4 input fields – top / right / bottom / left – for adjusting the inner spacing, the Padding. The value 0 is preset everywhere.
4. Tip: Enter values ​​between 5 and 10 to increase the spacing – or minus values ​​to reduce the space.
5. Click on the shortcode one of three on the left. Your change applies exactly to this shortcode.
6. 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:

1. Insert a column block
2. 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.

similar posts