Shortcodes - Columns | Nexus Websites Ltd

Difficulty

How long will it take?

5 Minutes

Youtube Video

Not yet available

Step 1

First of all, create or navigate to the page or post that you would like to edit.

To explain the process as easily as possible, the step by step will go through how to make a three column split on the page. See additional information below the step by step to see examples of different column shortcodes.

Step 2

Click on the shortcode dropdown, signified by a [] symbol.

Step 3

Click on the shortcode named “1/3” to insert it into the page.

Step 4

Select the three dots in between the code.

The three dots are simply there to represent where the content within the shortcode will go.

Step 5

Press enter three times.

This will create some blank space in the page editor for our content to go in.

Step 6

Select / highlight the entire shortcode within the content box and copy to clipboard.

Incase you were wandering, “one_third” means exactly what it says – use up one third of the page.

Step 7

Left click after the shortcode and paste twice so that there are 3 instances of the one_third tags.

We are creating 3 columns, hence the need for three of the 1/3 shortcodes.

If you are adding multiple different column shortcodes, you will need to use the drop down menu for each instead of copy and pasting.

Step 8

On the final shortcode, where it says one_third last=”no”, select the “no” and change it to “yes” (including the quotes)

lest=”yes” lets the page know that this will be the last column in the row. You must always do this only for the last column shortcode in each row.

Step 9

Enter all of your content between the three column shortcodes.

Step 10

Submit, update, publish or preview your page or post and it should look similar to this image.

To see many more examples of column shortcodes on a live preview, click here

Additional Information – Mix and Match

This guide only covers creating a three column split using three 1/3 shortcodes. There are seven types of column shortcodes available. You can mix them up as much as you like so long at the total equals one whole, and that the last shortcode in the row has the “last” parameter changed to “yes”.

For Example the four columns: 1/6 + 1/3 + 1/4 + 1/4 = 1.

This page uses three one_third shortcodes at the top for the difficulty, length and video boxes.

The step-by-step area is created with the text in a 1/3 shortcode, and the images in a 2/3 shortcode.

Additional Information – Shotcode-ception

For more advanced users – shortcodes can be used inside of other shortcodes. For example on the request a feature page, you may be able to see that we have two columns. A 1/3 column and a 2/3 column.

Within the 1/3 column there is the shortcode for our request a feature contact form.

In the 2/3 column this is a little more complex: there is a “tabs” shortcode. Inside each of the tabs contained within this shortcode, there is an “Accoridan” shortcode. (and inside of each accoridan there is the text for each bug / feature.

To clarify, there is one 2/3 shortcode, one “Tabs” shortcode, and three “Accordian” shortcodes – one contained in each of the three tabs.