Features

Home » Features

Column Shortcode

2 Column Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada

Get the code

[column_content type="one_half" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_half_last" subcls="Add extra class to column"] Column content goes here.. [/column_content][clear]

3 Column Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada

Get the code

[column_content type="one_third" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_third" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_third_last" subcls="Add extra class to column"] Column content goes here.. [/column_content][clear]

4 Column Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada

Get the code

[column_content type="one_fourth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fourth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fourth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fourth_last" subcls="Add extra class to column"] Column content goes here.. [/column_content][clear]

5 Column Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros nulla, scelerisque nec orci eget, vestibulum fermentum neque. Morbi eget odio malesuada

Get the code

[column_content type="one_fifth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fifth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fifth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fifth" subcls="Add extra class to column"] Column content goes here.. [/column_content]
[column_content type="one_fifth_last" subcls="Add extra class to column"] Column content goes here.. [/column_content][clear]

miscellaneous Shortcode

Tabs

  • TAB TITLE 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur. Phasellus vel aliquam est.

  • TAB TITLE 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur.

  • TAB TITLE 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur. Phasellus vel aliquam est.

Get the code

[tabs]
[tab title="TAB TITLE 1"] TAB CONTENT 1 [/tab]
[tab title="TAB TITLE 2"] TAB CONTENT 2 [/tab]
[tab title="TAB TITLE 3"] TAB CONTENT 3 [/tab]
[/tabs]

Accordion

ACCORDION TITLE 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur. Phasellus vel aliquam est.

ACCORDION TITLE 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur. Phasellus vel aliquam est.

ACCORDION TITLE 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor lacus ac tristique ornare. Duis vitae facilisis felis, id egestas velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada risus nisl, at aliquam est convallis id. Duis viverra vehicula libero at consectetur. Phasellus vel aliquam est.

Get the code

[accordion]
[accordion_content title="ACCORDION TITLE 1"] ACCORDION CONTENT 1 [/accordion_content]
[accordion_content title="ACCORDION TITLE 2"] ACCORDION CONTENT 2 [/accordion_content]
[accordion_content title="ACCORDION TITLE 3"] ACCORDION CONTENT 3 [/accordion_content]
[/accordion]


Toggle Elements

Toggle Title 1

Toggle content 1…

Toggle Title 2

Toggle content 2…

Toggle Title 3

Toggle content 3…

Get the code

[toggle_content title="Toggle Title 1"] Toggle content 1... [/toggle_content][toggle_content title="Toggle Title 2"] Toggle content 2... [/toggle_content][toggle_content title="Toggle Title 3"] Toggle content 3... [/toggle_content]

Progress bar

Coding
90%
Design
70%
Building
55%

Get the code

[skill title="Coding" percent="90"][skill title="Design" percent="70"][skill title="Building" percent="55"]


Social Icons

( Note: More social icons can be found at: http://fortawesome.github.io/Font-Awesome/icons/)

Get the code

[social_area][social icon="facebook" link="#"][social icon="google-plus" link="#"][social icon="twitter" link="#"][social icon="pinterest" link="#"][/social_area]

Search Box / Search Form

Get the code

[searchform]


List Style

  • List style 1
  • List style 2
  • List style 3

Get the code

[unordered_list style="list-1"]<li>List style 1</li><li>List style 1</li><li>List style 1</li>[/unordered_list]
Usable attibutes

You can use above shortcode with list-1 to list-10 attibutes

Dropcap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at malesuada erat. Nulla id accumsan nisl. Morbi quis vulputate mi. Nunc posuere feugiat libero eget varius. Sed at aliquam ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Get the code

[dropcap]L[dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at malesuada erat. Nulla id accumsan nisl. Morbi quis vulputate mi. Nunc posuere feugiat libero eget varius. Sed at aliquam ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


Blockquote

Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique molestie mauris, non ultricies turpis consequat eget. Curabitur accumsan fermentum lacus ut imperdiet. Nunc massa lectus, blandit in accumsan at, tristique non mi. Pellentesque fermentum ligula nec quam suscipit ornare.
Duis turpis eros, tincidunt id tincidunt at, tempor a nisi. Fusce turpis mi, sollicitudin non volutpat id, ornare at nunc. Vestibulum tristique molestie mauris, non ultricies turpis consequat eget. Curabitur accumsan fermentum lacus ut imperdiet. Nunc massa lectus, blandit in accumsan at, tristique non mi. Pellentesque fermentum ligula nec quam suscipit ornare.

Get the code

[blockquote align="left/right"] Text Here.. [/blockquote]

YouTube Video

Get the code

[youtube vid_src="https://www.youtube.com/embed/_mlf-lP9g6E" vid_height="350"]

Vimeo Video

Get the code

[vimeo vid_src="https://player.vimeo.com/video/144785540" vid_height="350"]


Alert Boxes

This is a sample of the ‘success’ style message box shortcode. To use this style use the following shortcode
This is a sample of the ‘error’ style message box shortcode. To use this style use the following shortcode.
This is a sample of the ‘warning’ style message box shortcode. To use this style use the following shortcode.
This is a sample of the ‘info’ style message box shortcode. To use this style use the following shortcode.
This is a sample of the ‘about’ style message box shortcode. To use this style use the following shortcode.

Get the code

[message type="success"]This is a sample of the 'success' style message box shortcode. To use this style use the following shortcode[/message]
[message type="error"]This is a sample of the 'error' style message box shortcode. To use this style use the following shortcode.[/message]
[message type="warning"]This is a sample of the 'warning' style message box shortcode. To use this style use the following shortcode.[/message]
[message type="info"]This is a sample of the 'info' style message box shortcode. To use this style use the following shortcode.[/message]
[message type="about"]This is a sample of the 'about' style message box shortcode. To use this style use the following shortcode.[/message]

Buttons

Get the code

[gradient_button size="small/medium/large/x-large" bg_color="#e00" color="#fff" text="Medium Gradient Button" title="Medium Gradient Button" url="" position="left"]

Get the code

[simple_button size="small/medium/large/x-large" bg_color="#e00" color="#fff" text="Medium Simple Button" title="Medium Gradient Button" url="" position="left"]

Round Button

Get the code

[round_button style="light" text="Round Button" title="Round Button" url="" position="left"]

Round Button

Get the code

[round_button style="dark" text="Round Button" title="Round Button" url="" position="left"]