Shortcodes

Our Shortcodes offers you the ability to easily display blocks of code for some important elements that a website might have. Most of the elements below are Bootstrap based but we have also enhanced them, for example with more style variations. Feel free to use all of them into your project. Keep in mind that our shortcodes below will work only with our Themes, we have not yet made a plugin.

To make our shortocdes code display on syntax editor we have added the question mark “?” into the begging of the shortcode, (just after the opening bracket “[“) . When you copy and paste the shortcode code into your site remove it. Also, make sure that there are no spaces between brackets “[” and “]”

 

Parallax Background

You may easily make parallax backgrounds to display your content with a cool image effect underneath it.
 

Your content goes here

[html]
[?official_parallax src="your image URI"] Your content goes here… [/official_parallax] [/html]

 

Rows and Columns

Use the shortcode below to create responsive columns on your site. You may put other shortcodes inside as well.
Notice: make sure that the sum of all columns in a row is always 12
 

Column 1
Column 2
Column 3
Column 1
Column 2

[html]
[?official_row]
[?official_column size="3"]Column 1 [/official_column] [?official_column size="6"]Column 2 [/official_column] [?official_column size="3"]Column 3 [/official_column] [/official_row]

[?official_row]
[?official_column size="6"]Column 1 [/official_column] [?official_column size="6"]Column 2 [/official_column] [/official_row] [/html]

 

Tabs

Bootstrap based tabs are a great way to display similar information without taking to much space
 
[tab title=”Tab 1″ active=”active”]Your Content goes here 1[/tab]
[tab title=”Tab 2″]Your Content goes here 2[/tab]
[tab title=”Tab 3″]Your Content goes here 3[/tab]

[html]
[?official_tab]
[?official_tab_item title="Tab 1" active="active"]Your content goes here[/official_tab_item] [?official_tab_item title="Tab 2"]Your content goes here[/official_tab_item] [?official_tab_item title="Tab 3"]Your content goes here[/official_tab_item] [/official_tab] [/html]

 

Accordion

Just like Tabs, Bootstrap based accordion offers you some great possibility to display similar information in a collapsible way, for example your F.A.Q
 

Your Content goes here
Your Content goes here
Your Content goes here

[html]
[?official_accordion]
[?official_accordion_panel title="Accordion Panel" active="in"]Your content goes here[/official_accordion_panel] [?official_accordion_panel title="Accordion Panel"]Your content goes here[/official_accordion_panel] [?official_accordion_panel title="Accordion Panel"]Your content goes here[/official_accordion_panel] [/official_accordion] [/html]

 

Carousel

With Bootstrap based carousel or image slider, you may use it as you see from the example below to quickly display photos with caption as a slider.
 

[html]
[?official_carousel items="3" indicators="yes" controls="yes" interval="5000"]
[?official_carousel_item src="your image URI" title="Carousel Title" description="Carousel Descripton" active="active"]
[?official_carousel_item src="your image URI" title="Carousel Title" description="Carousel Descripton"]
[?official_carousel_item src="your image URI" title="Carousel Title" description="Carousel Descripton"]
[/official_carousel] [/html]

 

Youtube and Vimeo

You may display your embed videos from youtube or vimeo (more providers coming soon) with our shortcode. Just have to put the video id.
 

[html]
/* Note: Youtube doesnt need to have a "provider" attribute as it is the default one */
[?official_video id="sd0grLQ4voU"]
[?official_video provider="vimeo" id="157179553"]
[/html]

 

Owl Carousel

Owl Carousel is a jQuery based plugin to make simple and responsive carousel sliders. For more information you may check Owl Carousel website
 

[html]
[?official_owl items="3" navigation="true" agination="true" autoPlay="true"]
[?official_owl_item]Owl Carousel Item [/official_owl_item] [?official_owl_item]Owl Carousel Item [/official_owl_item] [?official_owl_item]Owl Carousel Item [/official_owl_item] [/official_owl] [/html]

 

Google maps

Google maps shortcode gives you the possibility to display anywhere on your WordPress site a map based on your preferences and of course your desired location. The map is responsive and takes full width of the parent element. You may set the height from the shortcode attribute as shown below
 

[html]
[?official_map address="London" height="33%" zoom="10" title="My Place" description="My place description goes here"]
[/html]