Using the standard WordPress visual editor can be a little tricky to design a web page that requires columns. It can be achieved using HTML, but that isn’t that helpful if you don’t have a reasonable understanding of HTML and just want to get your layout sorted. So we have created a set of shortcodes to help with this layout issue.
Shortcodes are special instructions enclosed in square brackets e.g. [shortcode] and normally, when a shortcode effects an area of text or images, there is a terminating shortcode designated by a forward slash e.g. [/shortcode]
Shortcodes are used in the visual page or post editor but do not change the text in real-time, so you will need to use the preview mode to check the impact the shortcodes have.
The column short codes divide the post or page into halves, thirds, quarters, fifths our sixths. Additionally the last column has to be designated as specifically as the last using the appropriate shortcode e.g. [[/two_third_last]]
Two Columns
Using the following shortcodes like this:
Regal Development [/one_half]][[one_half_last]
Eve Tree Care [/one_half_last]]
Will produce an effect like this:
Regal Development [/one_half][one_half_last]
Eve Tree Care[/one_half_last]
Three Columns
Using the following shortcodes like this:
Regal Development
Eve Tree Care[/one_third]][[one_third_last]
Surrey Lawncare[/one_third_last]]
Will produce an effect like this:
Regal Development[/one_third][one_third]
Eve Treecare [/one_third][one_third_last]
Surrey Lawn Care[/one_third_last]
There are multiple combinations of columns & widths that you can achieve.
The full list of column shortcodes are as follows:
[[one_half][/one_half]]
[[one_third][/one_third]]
[[one_fourth][/one_fourth]]
[[one_fifth][/one_fifth]]
[[one_sixth][/one_sixth]]
[[two_third][/two_third]]
[[three_fourth][/three_fourth]]
[[two_fifth]]two_fifth]]
[[three_fifth][/three_fifth]]
[[four_fifth][/four_fifth]]
[[five_sixth][/five_sixth]]
[[one_half_last][/one_half_last]]
[[one_third_last]]one_third_last]]
[[one_fourth_last][/one_fourth_last]]
[[one_fifth_last][/one_fifth_last]]
[[one_sixth_last][/one_sixth_last]]
[[two_third_last][/two_third_last]]
[[three_fourth_last][/three_fourth_last]]
[[two_fifth_last][/two_fifth_last]]
[[three_fifth_last][/three_fifth_last]]
[[four_fifth_last][/four_fifth_last]]
[[five_sixth_last][/five_sixth_last]]
Leave a Reply