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 shotrcode on the end. Some shortcodes don’t need the closing tag (for example horizontal lines). Have a look at some examples of Website shortcodes:

[line]

Dropcaps

[dc]D[/dc]ropcaps 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.

[noformat]ropcaps[/noformat]

or

[noformat][dc]D[/dc]ropcaps[/noformat]
[line]

Highlights

Nam quam nunc, blandit vel, luctus pulvinar, [mark]highlighted text with leading color[/mark] 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. [mark color=”yellow”]highlighted text with yellow color[/mark]. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

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

or

[noformat][mark color=”yellow”]highlighted text with yellow[/mark][/noformat]
[line]

[tooltip title=”Example” gravity=”s”]Tooltips[/tooltip]

Nam quam nunc, blandit vel, luctus pulvinar, [tooltip title=”I’m tooltip”]here[/tooltip] 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. [tooltip title=”Tooltip” gravity=”e”]And here[/tooltip] vitae sapien libero venenatis.

[noformat][tooltip title=”I’m tooltip”]here[/tooltip][/noformat]

or

[noformat][tooltip title=”Tooltip” gravity=”e”]And here[/tooltip][/noformat]
[line]

Lists with icons

[list icon=”check”]
  • list element one
  • list element two
  • list element three
[/list]

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

[noformat] [list icon=”check”]
  • list element one
  • list element two
  • list element three
[/list] [/noformat]
[line]

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.

[noformat]

Content of the first tab…

Second tab’s content…

Content of the tab number thee…

[/noformat]
[line]

Icons

[icon name=”comment”] Some text after icon. Some more here and another icon: [icon name=”heart” size=”small”] Works nice.

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

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

[/noformat]
[line]

Boxes

[box color=”blue” icon=”plus” size=”big”]

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

[/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]
[noformat] [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] [/noformat]
[line]

Lines

Some text, then line:

[line]

And new text below line.

[noformat]

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

[/noformat]
[line]

Quotes

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

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.

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

Vivamus elementum semper nisi. Aenean vulputate …

[/noformat]
[line]

Buttons

[noformat] or
[/noformat]
[line]

Columns

[col width=”1/2″ first=”yes”]

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.

[/col] [col width=”1/2″ last=”yes”] [noformat]
First column content…
Second column content…
Third column content…
[/noformat] [/col] [line]

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

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

[noformat]

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.

[/noformat]
[line]

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