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
[column width=”1/2″ first=”yes”]
[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.
[/column]
[column width=”1/2″ last=”yes”]
[noformat][dropcap]D[/dropcap]ropcaps[/noformat]
or
[noformat][dc]D[/dc]ropcaps[/noformat]
[/column]
[line]
Highlights
[column width=”1/2″ first=”yes”]
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.
[/column]
[column width=”1/2″ last=”yes”]
[noformat][mark]highlighted text with leading color[/mark][/noformat]
or
[noformat][mark color=”yellow”]highlighted text with yellow[/mark][/noformat]
[/column]
[line]
[tooltip title=”Example” gravity=”s”]Tooltips[/tooltip]
[column width=”1/2″ first=”yes”]
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.
[/column]
[column width=”1/2″ last=”yes”]
[noformat][tooltip title=”I’m tooltip”]here[/tooltip][/noformat]
or
[noformat][tooltip title=”Tooltip” gravity=”e”]And here[/tooltip][/noformat]
[/column]
[line]
Lists with icons
[column width=”1/2″ first=”yes”]
[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.
[/column]
[column width=”1/2″ last=”yes”]
[noformat]
[list icon=”check”]
- list element one
- list element two
- list element three
[/list]
[/noformat]
[/column]
[line]
Tabs
[column width=”1/2″ first=”yes”]
[tab label=”First tab” first=”yes”]
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.
[/tab]
[tab label=”Second tab”]
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.
[/tab]
[tab label=”Third tab” last=”yes”]
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]
[/column]
[column width=”1/2″ last=”yes”]
[noformat]
[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]
[/noformat]
[/column]
[line]
Icons
[column width=”1/2″ first=”yes”]
[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.
[/column]
[column width=”1/2″ last=”yes”]
[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]
[/column]
[line]
Boxes
[column width=”1/2″ first=”yes”]
[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]
[/column]
[column width=”1/2″ last=”yes”]
[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]
[/column]
[line]
Lines
[column width=”1/2″ first=”yes”]
Some text, then line:
[line]
And new text below line.
[/column]
[column width=”1/2″ last=”yes”]
[noformat]
Some text, then line:
[line]
And new text below line.
[/noformat]
[/column]
[line]
Quotes
[column width=”1/2″ first=”yes”]
[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.
[/column]
[column width=”1/2″ last=”yes”]
[noformat]
[quote align=”left” width=”30%”]Quoted text goes here[/quote]
Vivamus elementum semper nisi. Aenean vulputate …
[/noformat]
[/column]
[line]
Buttons
[column width=”1/2″ first=”yes”]
[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]
[/column]
[column width=”1/2″ last=”yes”]
[noformat]
[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]
[/noformat]
[/column]
[line]
Columns
[col width=”1/2″ first=”yes”]
[column width=”1/3″ 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.
[/column]
[column width=”1/3″]
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.
[/column]
[column width=”1/3″ last=”yes”]
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]
[/col]
[col width=”1/2″ last=”yes”]
[noformat]
[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]
[/noformat]
[/col]
[line]
Media
[column width=”1/2″ first=”yes”]
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.
[/column]
[column width=”1/2″ last=”yes”]
[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]
[/column]
[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.