Navigate / search

Shortcodes

If you are not familiar with shortcodes, these are extra magic spells to use in text which can for example add a special highlight or text box. You just start with opening shortcode, put some text or other stuff inside and write closing shortcode at the end. Some shortcodes don’t need the closing tag (for example horizontal lines). Have a look at some examples of Website shortcodes:


Dropcaps

Dropcaps are so easy to add. Sullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

[dropcap]D[/dropcap]ropcaps

or

[dc]D[/dc]ropcaps

Highlights

Nam quam nunc, blandit vel, luctus pulvinar, highlighted text with leading color hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. highlighted text with yellow color. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

[mark]highlighted text with leading color[/mark]

or

[mark color="yellow"]highlighted text with yellow[/mark]

Tooltips

Nam quam nunc, blandit vel, luctus pulvinar, here hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Nam quam nunc, blandit vel, luctus pulvinar. And here vitae sapien libero venenatis.

[tooltip title="I'm tooltip"]here[/tooltip]

or

[tooltip title="Tooltip" gravity="e"]And here[/tooltip]

Lists with icons

  • list element one
  • list element two
  • list element three

There are 100 pretty predefined icons to choose, or you can upload your own.

[list icon="check"]

<ul>
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
</ul>

[/list]

Tabs

Content of the first tab. It can contain anything. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Second tab’s content. It can also contain anything. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Content of the tab number thee. It can contain anything, not only text. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

[tab label="First tab" first="yes"]
Content of the first tab…
[/tab]
[tab label="Second tab"]
Second tab’s content…
[/tab]
[tab label="Third tab" last="yes"]
Content of the tab number thee…
[/tab]

Icons

comment Some text after icon. Some more here and another icon: heart Works nice.

showreel star basket consulting sign-in edit my-account & 93 (x2 sizes) more.


[icon name="comment"] Content of the first tab. It can contain anything. [icon name="heart" size="small"] Aenean leo ligula.

[icon name="showreel" size="big"] [icon name="star" size="big"] [icon name="basket" size="big"] [icon name="consulting" size="big"] [icon name="sign-in" size="big"] [icon name="edit" size="big"] [icon name="my-account" size="big"] & 93 (x2 sizes) more.

Boxes

Big blue box with a big icon and some text inside.
Second line.

Red box with some text inside.

Orange box with a small icon and some text inside.

Simple green box with some text inside.

Gray box with an icon and some text inside.

[box color="blue" icon="plus" size="big"]
Big blue box with a big icon and some text inside.
[/box]
[box color="red"]
Red box with some text inside.
[/box]
[box color="orange" icon="flag"]
Orange box with a small icon and some text inside.
[/box]
[box color="green"]
Simple green box with some text inside.
[/box]
[box color="gray" icon="order-check"]
Gray box with an icon and some text inside.
[/box]

Lines

Some text, then line:


And new text below line.


Some text, then line:
[line]
And new text below line.

Quotes

Quoted text goes here

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

[quote align="left" width="30%"]Quoted text goes here[/quote]

Vivamus elementum semper nisi. Aenean vulputate …

Buttons

or


[button type="tiny" url="#yourlink1"]Tiny button[/button]
[button type="small" url="#yourlink2"]Small button[/button]
[button url="#yourlink3"]Standard button[/button]
or
[button icon="heart" url="#yourlink4"]Button with icon[/button]
[button type="big" icon="sign-in" url="#yourlink5"]Big button[/button]

Columns

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Quisque rutrum. Aenean imperdiet.

Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.

[column width="1/3" first="yes"]
First column content…
[/column]
[column width="1/3"]
Second column content…
[/column]
[column width="1/3" last="yes"]
Third column content…
[/column]

Media

There are 4 versions of the site – desktop, tablet, mobile and mini. By default all content is the same for all versions. If you want to hide part of a content for some site versions (e.g mobiles), or show just only some versions, use the media shortcode

For example, this paragraph is invisible on mobile phones, and small smartphones.
And this paragraph is visible only on mobile phones.

Read more about using this shortcode in the theme documentation, which is included to the purchase package.


There are 4 versions of the site – desktop, tablet, mobile and mini. By default all content is the same for all versions. If you want to hide part of a content for some site versions (e.g mobiles), or show just only some versions, use the media shortcode

[media version="lte-mobile" visible="false"]For example, this paragraph is invisible on mobile phones, and small smartphones.[/media]
[media version="mobile"]And this paragraph is visible only on mobile phones.[/media]

Read more about using this shortcode in the theme documentation, which is included to the purchase package.

These above are just examples to present power of shortcodes. Full list of shortcodes and their parameter can be found in the theme documentation.