9. Shortcodes
The theme comes with 3 shortcodes: columns, info box and tabs.
Columns
The shortcode is [column] and accepts 2 parameters: size and last
The columns work on a 12 column grid system, so the size parameter is a number from 1 to 12 ( 1 being 1/12 column and 12 being a full row column ).
The last parameter is used for the last column in a row with the value of yes. So if you have 3 columns with size of 4 ( 4/12 ) the last column shortcode should have the last parameter with the value yes.
Example:
[column size="4"]column content[/column] [column size="4"]column content[/column] [column size="4" last="yes"]column content[/column]
Info Box
The shorcode is [info_box] and accepts 2 parameters: title and color
The title is the heading that will display in the info box.
The color is the top border color of the info box, use a HEX code.
Example:
[info_box title="The title of the info box" color="#67cbac"]Info box content[/info_box]
You can put info boxes inside of the columns, like this:
[column size="4"][info_box title="The title of the info box"]The content of the info box[/info_box][/column]
Tabs
The shortcodes used are [tabs] and [tab]
The [tabs] shortcode does not accept any parameters, it is only used to wrap a set of [tab] shortcodes.
The [tab] shortcode accepts 1 parameter: title
The title parameter is used to set the title that will show in the tabs navigation.
Example:
[tabs][tab title="Tab title"]Tab Content[/tab][tab title="Tab title"]Tab Content[/tab][tab title="Tab title"]Tab Content[/tab][/tabs]
Buttons
The shortcode is [button] and accepts 2 parameters: url and class
The url is of course the URL to where the button should go.
The class is where you add more info about the button. primary for the purple button, secondary for the green button and medium for a larger button. You can add your own as well, it will be applied to the button class so you can use custom CSS to change the style.
Example:
[button url="http://google.com" class="primary"]Purple Button[/button] [button url="http://google.com" class="secondary"]Green Button[/button] [button url="http://google.com" class="primary medium"]Larger Purple Button[/button]