9. Shortcodes

The theme comes with 3 shortcodes: columns, info box and tabs.


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.


[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.


[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]


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.


[tabs][tab title="Tab title"]Tab Content[/tab][tab title="Tab title"]Tab Content[/tab][tab title="Tab title"]Tab Content[/tab][/tabs]


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.


[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]

Still need help? Contact Us Contact Us