Shortcodes

Note with title

[spacer size=”15″]

[box title=”Box title I” color=”#969696″] Content [/box]

[box title=”Box title II” color=”#f9b209″] Content [/box]

[box title=”Box title III” color=”#80ca0a”] Content [/box]

[spoiler title=”Get example code”]

 [[box title="Box title III" color="#80ca0a"] Content [/box]]

[/spoiler]

Notes

[spacer size=”15″]

Note text
Note text
Note text
Note text

[spoiler title=”Get example code”]

 [note color="#fdeb56"] Note text  [/note]

[/spoiler]

Notes with custom icon

[spacer size=”15″]

Note text
Note text
Note text

[spoiler title=”Get example code”]

 [note color="#e57777"] <img src="" width="32" height="32" /> Note text [/note]

[/spoiler]

Call out boxes

[spacer size=”15″]

[callout bg=”#e20000″ color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus.[/callout]

[callout bg=”#ff6600″ color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus.[/callout]

[callout bg=”#39cb00″ color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat. Aenean tincidunt ante posuere enim iaculis et blandit erat eleifend. Etiam quis mauris vitae tellus lacinia accumsan a id nisi. Praesent quis sapien quam. Etiam pharetra eleifend lorem, vel euismod tortor iaculis vitae. Duis nec mauris tellus, id consectetur neque. Pellentesque tincidunt cursus ante, pulvinar adipiscing urna feugiat posuere. Ut augue tortor, sagittis non sollicitudin vitae, facilisis vitae ipsum. Maecenas congue ornare porttitor[/callout]

[column size=”1-2″][callout bg=”#00b1dd” color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus.[/callout]
[/column]

[column size=”1-2″ last=”1″][callout bg=”#cb036f” color=”#ffffff”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus.[/callout]
[/column]
[spoiler title=”Get example code”]

 [[callout bg="#cb0056" color="#ffffff"] Content [/callout]]

[/spoiler]

Multiple color dropcaps

[spacer size=”15″]
[column size=”dropcap” last=”0″][dropcap]1[/dropcap][/column]
[column size=”dropcap_txt” last=”1″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”gray”]2[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”blue”]3[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”red”]4[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”green”]5[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”yellow”]6[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”orange”]7[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”pink-orange”]8[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[br]
[column size=”dropcap” last=”0″ style=”0″][dropcap color=”purple”]9[/dropcap][/column]
[column size=”dropcap_txt” last=”1″ style=”0″] [spacer size=”10″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae interdum nisl. Maecenas eu justo purus. Phasellus convallis euismod metus, quis fermentum lacus mattis et. Aenean auctor ornare feugiat.[/column]
[spacer size=”10″]
[spoiler title=”Get the code”]


[dropcap]L[/dropcap]Content[/column]

[dropcap color="green"]L[/dropcap]Content[/column]

[dropcap color="orange"]L[/dropcap]Content[/column]

[column size="dropcap" last="0"][dropcap]1[/dropcap][/column]
[column size="dropcap_txt" last="1"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="gray"]2[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="blue"]3[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="red"]4[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="green"]5[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="yellow"]6[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="orange"]7[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="pink-orange"]8[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[column size="dropcap" last="0" style="0"][dropcap color="purple"]9[/dropcap][/column]
[column size="dropcap_txt" last="1" style="0"]Content[/column]

[/spoiler]

Clearing floats

[spacer size=”15″]
This element is left floated, but a [clear] shortcode after it clears all floats and you can add your text below it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. Proin consectetur.

[spoiler title=”Get the code”]

[pullquote align="left"] Content [/pullquote]
[clear] 

[/spoiler]

Custom div

[spacer size=”15″]
[div style=”border-width:5px; border-style:dotted; border-color:#dddddd ;text-align:center;”]

This is a custom styled div

[/div]
[spacer size=”15″]
[spoiler title=”Get the code”]

[[div style="border-width:5px; border-style:dotted; border-color:#dddddd ;text-align:center;"] Content [/div]] 

[/spoiler]

Custom headings

[spacer size=”15″]
[heading] This is a heading shortcode [/heading]
[heading bg=”#4cacfd” color=”#ffffff”] This is a heading shortcode [/heading]
[spoiler title=”Get the code”]

[[heading bg="#ccc" color="#111"] Content [/heading]] 

[/spoiler]

Text highlight

[spacer size=”15″]

[highlight bg=”#fff287″ color=”#000″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/highlight] Proin sollicitudin ante id libero vulputate semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[highlight bg=”#ffafaf” color=”#fff”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/highlight] Proin sollicitudin ante id libero vulputate semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[highlight bg=”#abfa9e” color=”#037d00″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/highlight] Proin sollicitudin ante id libero vulputate semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[highlight bg=”#c3eff0″ color=”#002c68″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/highlight] Proin sollicitudin ante id libero vulputate semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

[highlight bg=”#e1dee0″ color=”#656565″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/highlight] Proin sollicitudin ante id libero vulputate semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
[spoiler title=”Get the code”]

 [[highlight bg="#000" color="#fff"] Content [/highlight]] 

[/spoiler]

Empty space with adjustable height

100px additional empty space is added after this line.
[spacer size=”100″]
[spoiler title=”Get the code”]

[[spacer size=""100"]]

[/spoiler]

Links with selectable color

[spacer size=”15″]

[fancy_link color=”#555″ link=”javascript:;”] Read more [/fancy_link]

[fancy_link color=”green” link=”javascript:;”] Anything can be posted here[/fancy_link]

[fancy_link color=”blue” link=”javascript:;”] Any color posible[/fancy_link]

[spoiler title=”Get the code”]

 [[fancy_link color="blue" link="http://example.com/"] Content [/fancy_link]]

[/spoiler]

Divider with optional Top function

[spacer size=”15″]





[spoiler title=”Get the code”]

[divider]
[divider top="1"] 

[/spoiler]

List styles

[spacer size=”15″]

Styled lists are available in following types: star, arrow, cross, check, thumbs, gear, time, note, plus, guard, event, idea, link, settings, home, phone, email, user, twitter, skype , white-bullet, orange-bullet, black-bullet, red-bullet, yellow-bullet, green-bullet and blue-bullet.

[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[/column]
[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[/column]
[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[/column]
[column size=”1-4″ last=”1″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[/column]

[spoiler title=”Get the list code”]

[list style="star"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[/spoiler]
[spacer size=”15″]

[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]
[/column]
[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[spacer size=”5″]
[/column]
[column size=”1-4″]

  • List item
  • List item
  • List item


[spacer size=”5″]

  • List item
  • List item
  • List item


[/column]
[column size=”1-4″ last=”1″]

  • List item
  • List item
  • List item


[/column]

[spoiler title=”Get the list code with columns”]

[column size="1-4"]

[list style="white-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[list style="orange-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[/column]

[column size="1-4"]

[list style="black-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[list style="red-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[/column]

[column size="1-4"]

[list style="yellow-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[list style="green-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[/column]

[column size="1-4" last="1"]

[list style="blue-bullet"]
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
[/list]

[/column]

[/spoiler]

Table

[spacer size=”15″]

Insert your table html into one of the predifined table style shortcodes and it will do the job for you.


[spacer size=”15″]
[table style=”2″]
[div style=”text-align:center”]

Basic

Professional

Ultimate

Feature 1

  • Supported

  • Supported

  • Supported

Feature 2

  • Supported

  • Supported

  • Supported

Feature 3

  • Not included

  • Supported

  • Supported

Feature 4

  • Not included

  • Supported

  • Supported

Feature 5

  • Not included

  • Not included

  • Supported

Details Details Details

[/div]
[/table]

[spoiler title=”Get full code”]

[table style="2"]
[div style="text-align:center"]
<table>
<thead>
<th></th>
<th><h3>Basic</h3></th>
<th><h3>Professional</h3></th>
<th><h3>Ultimate</h3></th>
</thead>
<tbody>
<tr>
<td><h5>Feature 1</h5></td>
<td>
[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]
</td>
<td>
[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
<td>
[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
</tr>
<tr>
<td><h5>Feature 2</h5></td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
</tr>
<tr>
<td><h5>Feature 3</h5></td>
<td>[list style="cross"]
<ul>
<li>Not included</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
</tr>
<tr>
<td><h5>Feature 4</h5></td>
<td>[list style="cross"]
<ul>
<li>Not included</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
<td>[list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]</td>
</tr>
<tr>
<td><h5>Feature 5</h5></td>
<td>[list style="cross"]
<ul>
<li>Not included</li>
</ul>
[/list]</td>
<td>[list style="cross"]
<ul>
<li>Not included</li>
</ul>
[/list]</td>
<td> [list style="check"]
<ul>
<li>Supported</li>
</ul>
[/list]
</td>
</tr>
<tr>
<td></td>
<td>[button link="#" color="#f6b440" size="1" style="1" dark="1" square="0" target="self"]View details[/button]</td>
<td>[button link="#" color="#f6b440" size="1" style="1" dark="1" square="0" target="self"]View details[/button]</td>
<td>[button link="#" color="#f6b440" size="1" style="1" dark="1" square="0" target="self"]View details[/button]</td>
</tr>
</tbody>
</table>
[/div]
[/table]

[/spoiler]

Pullquote with left align

[spacer size=”15″]

Lorem ipsum dolor sit amet consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem.Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem.

[spoiler title=”Get the code”]

[pullquote align="left"] Content [/pullquote] 

[/spoiler]

Pullquote with right align

[spacer size=”15″]

Vestibulum non lectus in arcu gravida blandit imperdiet lorem eu ultrices.
Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque.Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis.Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem.Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis.[spoiler title=”Get the code”]

[pullquote align="right"] Content [/pullquote] 

[/spoiler]

Quote style 1

[spacer size=”20″]
[quote style=”1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. Proin consectetur risus in dolor luctus lacinia. Vestibulum at accumsan sem. Nulla sodales leo in nunc eleifend cursus. [/quote]
[spoiler title=”Get the code”]

[[quote style="1"] Content [/quote]]

[/spoiler]

Quote style 2

[spacer size=”20″]
[quote style=”2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. Proin consectetur risus in dolor luctus lacinia. Vestibulum at accumsan sem. [/quote]
[spoiler title=”Get the code”]

[[quote style="2"] Content [/quote]]

[/spoiler]

[column size=”1-2″ last=”0″ ]
[quote style=”2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. [/quote]
[spoiler title=”Get the code”]

[column size="1-2" last="0"] 
[[quote style="2"] Content [/quote]]
[/column]

[/spoiler]
[/column]

[column size=”1-2″ last=”1″ ]
[quote style=”2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. [/quote]
[spoiler title=”Get the code”]

[column size="1-2" last="1"]
[[quote style="2"] Content [/quote]]
[/column]

[/spoiler]
[/column]

Quote style 3

[spacer size=”20″]
[quote style=”3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus. Proin consectetur risus in dolor luctus lacinia. Vestibulum at accumsan sem.[/quote]
[spoiler title=”Get the code”]

[[quote style="3"] Content [/quote]]

[/spoiler]

[column size=”1-2″ last=”0″ ]
[quote style=”3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus.[/quote]
[spoiler title=”Get the code”]

[column size="1-2" last="0"]
[[quote style="3"] Content [/quote]]
[/column]

[/spoiler]
[/column]

[column size=”1-2″ last=”1″ ]
[quote style=”3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin urna lacus.[/quote]
[spoiler title=”Get the code”]

[column size="1-2" last="1"]
[[quote style="3"] Content [/quote]]
[/column]

[/spoiler]
[/column]

Service boxes

[spacer size=”15″]

Create service boxes with title, text and any custom icon with only one shortcode. Boxes scale according to width and selected icon size.


[spacer size=”15″]

[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]

[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]

[column size=”1-4″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]

[column size=”1-4″ last=”1″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec in semper odio [/service][/column]

[column size=”1-2″ last=”0″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec rutrum turpis sed felis malesuada at ornare turpis porta. Ut vulputate lacinia nunc, eu tincidunt sem volutpat nec. Quisque nec sapien est. Nam ultrices placerat faucibus. In sed vehicula erat. Phasellus turpis erat, vestibulum sed pellentesque at, convallis a leo. [/service][/column]

[column size=”1-2″ last=”1″ style=”0″][service title=”Service title” icon=”http://www.dummyimage.com/32×32/000/fff&text=ICON”] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac urna eget arcu imperdiet condimentum vitae sit amet velit. Donec rutrum turpis sed felis malesuada at ornare turpis porta. Ut vulputate lacinia nunc, eu tincidunt sem volutpat nec. Quisque nec sapien est. Nam ultrices placerat faucibus. In sed vehicula erat. Phasellus turpis erat, vestibulum sed pellentesque at, convallis a leo. [/service][/column]

[spoiler title=”Get full code”]

[column size="1-4" ][service title="Service title" icon="http://../lamp_active.png"] Content [/service][/column]

[column size="1-4" ][service title="Service title" icon="http://../information.png"] Content [/service][/column]

[column size="1-4" ][service title="Service title" icon="http://../pie-chart_graph.png"] Content [/service][/column]

[column size="1-4" last="1" ][service title="Service title" icon="http://../credit_card_back.png"] Content [/service][/column]

[column size="1-2" ][service title="Service title" icon="http://../lamp_active.png"] Content [/service][/column]

[column size="1-2" last="1" ][service title="Service title" icon="http://../credit_card_back.png"] Content [/service]
[/column]

[/spoiler]

Possibilities using multiple shortcodes.


[column size=”1-3″ last=”0″]

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.

[/column]
[column size=”1-3″ last=”0″]

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.

[/column]
[column size=”1-3″ last=”1″]

Sample Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.

[/column]

[column size=”1-4″ last=”0″]
[frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”0″]
[frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]
[column size=”1-4″ last=”0″]
[frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]

[column size=”1-4″ last=”1″][frame align=”left”][/frame]
YOUR TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nulla vel lorem dapibus fringilla eget non felis. Vestibulum gravida, nibh non rutrum ultricies, est nunc porttitor lectus.
[/column]

[spoiler title=”Get full code”]

[column size="1-3" ]
<img align="center" src="http://www.yourdomain.com/image.png" alt="" width="150" height="150" />
<h4 style="text-align: center;">Sample Title</h4>
<p style="text-align: center;">Content</p>
[/column]

[column size="1-3" ]
<img align="center" wp-image-3746" src="hhttp://www.yourdomain.com/image.png" alt="" width="150" height="150" />
<h4 style="text-align: center;">Sample Title</h4>
<p style="text-align: center;">Content</p>
[/column]

[column size="1-3" last="1"]
<img align="center" src="http://www.yourdomain.com/image.png" alt="" width="150" height="150" />
<h4 style="text-align: center;">Sample Title</h4>
<p style="text-align: center;">Content</p>
[/column]


Second Row


[column size="1-4" last="0"]
[frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame]
<span style="color: #99cc00;"><strong>YOUR TITLE</strong></span>
Content
[/column]

[column size="1-4" last="0"]
[frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame]
<span style="color: #99cc00;"><strong>YOUR TITLE</strong></span>
Content
[/column]

[column size="1-4" last="0"]
[frame align="left"]<img  src="http://www.yourdomain.com/image.png" alt="" />[/frame]
<span style="color: #99cc00;"><strong>YOUR TITLE</strong></span>
Content
[/column]

[column size="1-4" last="1"][frame align="left"]<img src="http://www.yourdomain.com/image.png" alt="" />[/frame]
<span style="color: #99cc00;"><strong>YOUR TITLE</strong></span>
Content
[/column]

[/spoiler]

Buttons

[spacer size=”15″]

Buttons are available in any color and any size. You can choose between four button styles, set dark or white content text color, choose between rounded or square corners and define whether link should open in current or new window.

Style one

[spacer size=”25″]
[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″ last=”1″]

Button text Button text Button text

Button text
[/column]

[spoiler title=”Get example code”]

 
[button link="http://www.example.com/" color="#000" size="1" style="1" dark="0" square="0" target="self"] Button text [/button]

[/spoiler]

Style two

[spacer size=”25″]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″ last=”1″]

Button text Button text Button text

Button text
[/column]

[spoiler title=”Get example code”]

 
[button link="http://www.example.com/" color="#000" size="1" style="2" dark="0" square="0" target="self"] Button text [/button]

[/spoiler]

Style three

[spacer size=”25″]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″ last=”1″]

Button text Button text Button text

Button text
[/column]

[spoiler title=”Get example code”]

 
[button link="http://www.example.com/" color="#000" size="1" style="3" dark="0" square="0" target="self"] Button text [/button]

[/spoiler]

Style four

[spacer size=”25″]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″]

Button text Button text Button text

Button text
[/column]

[column size=”1-4″ last=”1″]

Button text Button text Button text

Button text
[/column]

[spoiler title=”Get example code”]

 
[button link="http://www.example.com/" color="#000" size="1" style="4" dark="0" square="0" target="self"] Button text [/button]

[/spoiler]

Button can be really big

[spoiler title=”Get example code”]

 
[button link="http://www.example.com/" color="#9dce4a" size="16" style="1" dark="1" square="0" target="self"] Button text [/button]

[/spoiler]

Tabs

[spacer size=”15″]

[column size=”1-2″]

Tabs style 1

[spacer size=”15″]
[tabs style=”1″]

[/tabs]
[spoiler title=”Get the code”]

[column size="1-2"]
[[tabs style="1"]


[/tabs]]
[/column]

[/spoiler]
[/column]
[column size=”1-2″ last=”1″]

Tabs style 2

[spacer size=”15″]
[tabs style=”2″]

[/tabs]
[spoiler title=”Get the code”]

[column size="1-2" last="1"]
[[tabs style="2"]


[/tabs]]
[/column]

[/spoiler]
[/column]

Twitter

[spacer size=”15″]

With Recent Tweets shortcode you can easily insert any twitter feed where you want.

[tweets username=”mnkystudio” limit=”3″ style=”1″ ]
[spoiler title=”Get the code”]

[[tweets username="mnkystudio" limit="3" style="1" ]]

[/spoiler]

Video

[spacer size=”15″]

Embed flexible size Youtube and Vimeo video by just posting video link into a shortcode.


[spacer size=”15″]
[column size=”5-6″ last=”1″]
[media url=”http://vimeo.com/22894261″ height=”430″]
[/column]
[spoiler title=”Get the code”]

 [[media url="http://vimeo.com/22894261"]] 

[/spoiler]
[spacer size=”15″]
[column size=”1-2″] [media url=”http://www.youtube.com/watch?v=R424MGHDFDc” width=”460″ height=”280″] [/column]
[column size=”1-2″ last=”1″] [media url=”http://www.youtube.com/watch?v=k-OOfW6wWyQ” width=”460″ height=”280″] [/column]
[spoiler title=”Get the code”]

 
[column size="1-2"]
 [media url="http://www.youtube.com/watch?v=R424MGHDFDc" width="460" height="280"] 
[/column]
[column size="1-2" last="1"]
 [media url="http://www.youtube.com/watch?v=k-OOfW6wWyQ" width="460" height="280"] 
[/column]

[/spoiler]

[textdivider text=”Content cover” color=”#aaa9a9″ bg=”#ffffff” line=”#e0e0e0″]
[spacer size=”15″]
[cover color=”#f1f1f1″ bg_repeat=”no-repeat”]

Any Content goes here! You can change cover icon and background color!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar blandit dignissim. Donec vitae enim nec est tempor tincidunt. Duis in arcu a neque dignissim laoreet. Pellentesque dignissim mi adipiscing magna dictum quis facilisis sapien accumsan. Nulla pretium, metus sit amet fringilla semper, metus erat pretium eros, vitae cursus ipsum tellus at nibh. Proin feugiat arcu eu tortor commodo semper. Donec erat dui, congue non facilisis a, porttitor sit amet nulla.[/cover]
[cover color=”#ffb911″ img=”http://www.mnkystudio.com/imagine/wp-content/uploads/2012/06/bulbicon.png” ]

Flexible and responsive!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar blandit dignissim. Donec vitae enim nec est tempor tincidunt. Duis in arcu a neque dignissim laoreet. Pellentesque dignissim mi adipiscing magna dictum quis facilisis sapien accumsan. Nulla pretium, metus sit amet fringilla semper, metus erat pretium eros, vitae cursus ipsum tellus at nibh. Proin feugiat arcu eu tortor commodo semper. Donec erat dui, congue non facilisis a, porttitor sit amet nulla.

In iaculis ipsum ipsum. Ut nisi risus, ultricies ac volutpat varius, feugiat consectetur ligula. Maecenas eget lorem sagittis lorem interdum malesuada a eu lectus. Aenean elementum est non neque venenatis commodo. Vestibulum placerat libero ut eros mollis sit amet semper elit aliquam.[/cover]
[spacer size=”15″]
[textdivider text=”Dividers” color=”#aaa9a9″ bg=”#ffffff” line=”#e0e0e0″]
[spacer size=”15″]





[textdivider text=”Divider title” color=”#22b14c” bg=”#ffffff” line=”#e0e0e0″]
[textdivider text=”Divider title” color=”#ffffff” bg=”#ffc90e” line=”#ffc90e”]
[textdivider text=”Divider title” color=”#ed1c24″ bg=”#ffffff” line=”#ed1c24″]

Leave a Comment

Your email address will not be published. Required fields are marked *