How to align content page/post
To align content on your page simply click on columns shortcode button, that can be found integrated in default editor panel in visual mode, than insert your content between the opening and closing tags of the inserted code. See image below.
Columns Shortcode Options
Columns shortcode comes with following options:
“Column 1/2” option allows you to insert a “half width column” shortcode. Content between the opening and closing tags of this shortcode will take up a half of full width column.
“Column 1/3” option allows you to insert a “one-third” shortcode. Content between the opening and closing tags of this shortcode will take up a third of a full width column.
“Column 1/4” option allows you to insert a “one-fourht” shortcode. Content between the opening and closing tags of this shortcode will take up a quarter of a full width column.
“Column 2/3” option allows you to insert a “two-third” shortcode. Content between the opening and closing tags of this shortcode will take up a two thirds of a full width column.
“Column 3/4” option allows you to insert a “three-fourth” shortcode. Content between the opening and closing tags of this shortcode will take up a three quarters of a full width column.
Clear
“Clear” option allows you to insert a “clear” shortcode. This shortcode will force downstream content to display in a new row.
[notification type=”notification_warning_tiny”]
You should inseart “Clear” shortcode after every last column in your row. Otherwise your downstream content can appear in a top row.
[/notification]
Last
Each of “Column” option also has a “Last” modifier. I.E.: “Column 1/2 last”, “Column 1/3 last”, “Column 1/4 last”, etc.
[notification type=”notification_warning_tiny”]
You should use shortcode with “Last” modifier for every last column in your row. Otherwise your last column will be displayed in a new row.
[/notification]
Insert shortcode
After you click on shortcode button it will be placed in content, inside your editor. Exactly where the syntax is placed depends on where your cursor is. So don’t forget to place cursor in correct place in your content, before adding shortcode.
Lets see how it works
Below you can see too blocks, made using column shortcodes.
[one_half] First of a half width column [/one_half]
[one_half last=last] Second of a half width column [/one_half]
[clear]
Lets check the code:
[one_half] First of a half width column [/one_half]
[one_half last=last] Second of a half width column [/one_half]
[clear]Сonclusion
So, as you can see from code example, the first column made using “one_half” shortcode and the second, which is the last one, has last modifier “one_half last=last”. At the very end of column shortcodes groupd we have “clear” to, lets call it “close” our column group.
EXAMPLES
THIRD WIDTH COLUMNS
[one_third] First of a third width column [/one_third]
[one_third] Second of a third width column [/one_third]
[one_third last=last] Third of a third width column [/one_third] [clear]
SAMPLE CODE FOR THIRD WIDTH COLUMNS
[one_third] First of a third width column [/one_third]
[one_third] First of a third width column [/one_third]
[one_third last=last] Second of a third width column [/one_third]
[clear]FOURTH WIDTH COLUMNS
[three_fourth] Three fourth width column
[/three_fourth]
[one_fourth last=last] One fourht width column [/one_fourth] [clear]
SAMPLE CODE FOR FOURTH WIDTH COLUMNS
[three_fourth] Three fourth width column [/three_fourth]
[one_fourth last=last] One fourht width column [/one_fourth]
[clear][totop] to Top [/totop]