Introduction

We’ve created a number of really useful shortcodes that are included in all of our Premium Themes. These are really handy to get your content looking nice and neat for your visitors. In our collection you’ll from common buttons to jQuery tabs and toggles.

It’s simple to add shortcodes. From the publish page area press the ThinkUpShortcodes button and choose which shortcodes you want to insert. If you have problem please refer to the docs below or send us a message.

[divider_top]

[margin size=”20″]

Buttons

Input Attributes:
 - Size: small, medium, large
 - Color: aqua, black, blue_dark, blue_light, brown, green_dark, green_light, grey, red_dark, red_light, pink, purple  
 - Link: target url.

[margin size=”20″]

12 Button Colors

[button4 size=”large” color=”blue_light” link=”#”]Button[/button4]
[button4 size=”large” color=”blue_dark” link=”#”]Button[/button4]
[button4 size=”large” color=”red_light” link=”#”]Button[/button4]
[button4 size=”large” color=”red_dark” link=”#”]Button[/button4]

[margin size=”20″]

[button4 size=”large” color=”green_light” link=”#”]Button[/button4]
[button4 size=”large” color=”green_dark” link=”#”]Button[/button4]
[button4 size=”large” color=”pink” link=”#”]Button[/button4]
[button4 size=”large” color=”purple” link=”#”]Button[/button4]

[margin size=”20″]

[button4 size=”large” color=”aqua” link=”#”]Button[/button4]
[button4 size=”large” color=”brown” link=”#”]Button[/button4]
[button4 size=”large” color=”grey” link=”#”]Button[/button4]
[button4 size=”large” color=”black” link=”#”]Button[/button4]

[margin size=”20″]

[margin size=”10″]

4 Button Styles

[button1 size=”large” color=”blue_dark” link=”#”]Button[/button1]
[button2 size=”large” color=”blue_dark” link=”#”]Button[/button2]
[button3 size=”large” color=”blue_dark” link=”#”]Button[/button3]
[button4 size=”large” color=”blue_dark” link=”#”]Button[/button4]

[margin size=”20″]

[margin size=”10″]

3 Button Sizes

[button3 size=”small” color=”blue_dark” link=”#”]Button[/button3]
[button3 size=”medium” color=”blue_dark” link=”#”]Button[/button3]
[button3 size=”large” color=”blue_dark” link=”#”]Button[/button3]

[margin size=”20″]

[divider_top]

[margin size=”20″]

Columns

2 Column

[one_half]
This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.
[/one_half]

[one_half_last]
This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.
[/one_half_last]

[margin size=”10″]

3 Column

[one_third]
This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text.
[/one_third]

[one_third]
This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text.
[/one_third]

[one_third_last]
This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text. This is sample text. This is some text.
[/one_third_last]

[margin size=”10″]

4 Column

[one_fourth]
This is some sample text. This is some sample text. This is some sample text. This is some sample text.
[/one_fourth]

[one_fourth]
This is some sample text. This is some sample text. This is some sample text. This is some sample text.
[/one_fourth]

[one_fourth]
This is some sample text. This is some sample text. This is some sample text. This is some sample text.
[/one_fourth]

[one_fourth_last]
This is some sample text. This is some sample text. This is some sample text. This is some sample text.
[/one_fourth_last]

[margin size=”10″]

5 Column

[one_fifth]
This is some text. This is some text. This is some text. This is some text.
[/one_fifth]

[one_fifth]
This is some text. This is some text. This is some text. This is some text.
[/one_fifth]

[one_fifth]
This is some text. This is some text. This is some text. This is some text.
[/one_fifth]

[one_fifth]
This is some text. This is some text. This is some text. This is some text.
[/one_fifth]

[one_fifth_last]
This is some text. This is some text. This is some text. This is some text.
[/one_fifth_last]

[margin size=”10″]

6 Column

[one_sixth]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth]

[one_sixth]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth]

[one_sixth]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth]

[one_sixth]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth]

[one_sixth]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth]

[one_sixth_last]
This is some text. This is some text. This is some text. This is some text.
[/one_sixth_last]

[divider_top]

[margin size=”20″]

Dividers

[divider]
[divider_top]

[margin size=”10″]

[divider_top]

[margin size=”20″]

Icons (Colored)

Input Attributes:
 - icon: Address-book, Arrow, Arrow-back, Arrow-back-red, Arrow-red, Bookmark, Briefcase, Chat, Checkmark, Clock, Config, Database, Database-add, Database-warning, Database-x, Exclamation, Folder, Folder-add, Folder-remove, Graph, Heart, Heart-add, Heart-x, Home, Info, Lifesaver, List, Mail, Mail_forward, Mail_reply, Mail-add, Mail-spam, Mail-x, Music, No, Paper, Paper-add, Paper-arrow, Paper-arrow-back, Paper-pencil, Paper-warning, Paper-x, Pencil, Person, Person-add, Person-add-black, Person-black, Person-group, Person-group-add, Person-group-warning, Person-group-x, Person-warning, Person-warning-black, Person-white, Person-white-add, Person-white-warning, Person-white-x, Person-x, Person-x-black, Person-x-white, Photo, Piechart, Plus, Questions, Refresh, Rss, Screen, Search, Speech-Bubble, Speech-Bubble-add, Speech-Bubble-x, Warning, World, World-download, World-search, X
 - title: optional.
 - Link: optional.

[margin size=”20″]

Single Icons

[icon icon=”Address-book”][icon icon=”Arrow”][icon icon=”Arrow-back”][icon icon=”Arrow-back-red”][icon icon=”Arrow-red”][icon icon=”Bookmark”][icon icon=”Briefcase”][icon icon=”Chat”][icon icon=”Checkmark”][icon icon=”Clock”][icon icon=”Config”][icon icon=”Database”]
[icon icon=”Database-add”][icon icon=”Database-warning”][icon icon=”Database-x”][icon icon=”Exclamation”][icon icon=”Folder”][icon icon=”Folder-add”][icon icon=”Folder-remove”][icon icon=”Graph”][icon icon=”Heart”][icon icon=”Heart-add”][icon icon=”Heart-x”][icon icon=”Home”]
[icon icon=”Info”][icon icon=”Lifesaver”][icon icon=”List”][icon icon=”Mail”][icon icon=”Mail_forward”][icon icon=”Mail_reply”][icon icon=”Mail-add”][icon icon=”Mail-spam”][icon icon=”Mail-x”][icon icon=”Music”][icon icon=”No”][icon icon=”Paper”]
[icon icon=”Paper-add”][icon icon=”Paper-arrow”][icon icon=”Paper-arrow-back”][icon icon=”Paper-pencil”][icon icon=”Paper-warning”][icon icon=”Paper-x”][icon icon=”Pencil”][icon icon=”Person”][icon icon=”Person-add”][icon icon=”Person-add-black”][icon icon=”Person-black”][icon icon=”Person-group”]
[icon icon=”Person-group-add”][icon icon=”Person-group-warning”][icon icon=”Person-group-x”][icon icon=”Person-warning”][icon icon=”Person-warning-black”][icon icon=”Person-white”][icon icon=”Person-white-add”][icon icon=”Person-white-warning”][icon icon=”Person-white-x”][icon icon=”Person-x”][icon icon=”Person-x-black”][icon icon=”Person-x-white”]
[icon icon=”Photo”][icon icon=”Piechart”][icon icon=”Plus”][icon icon=”Questions”][icon icon=”Refresh”][icon icon=”Rss”][icon icon=”Screen”][icon icon=”Search”][icon icon=”Speech-Bubble”][icon icon=”Speech-Bubble-add”][icon icon=”Speech-Bubble-x”][icon icon=”Warning”]
[icon icon=”World”][icon icon=”World-download”][icon icon=”World-search”][icon icon=”X”]

[margin size=”20″]

Icons with Text

[one_half]
[icon_text icon=”Address-book” link=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla.[/icon_text]
[/one_half]

[one_half_last]
[icon_text icon=”World-download” link=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla.[/icon_text]
[/one_half_last]

[margin size=”20″]

Icons with Title & Text

[one_half]
[icon_full icon=”Address-book” title=”Title” link=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla.[/icon_full]
[/one_half]

[one_half_last]
[icon_full icon=”World-download” title=”Title” link=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla.[/icon_full]
[/one_half_last]

[divider_top]

[margin size=”20″]

Icons (Font Awesome)

Input Attributes:
 - title: optional
 - link: optional
 - icon: Select icon from the Font Awesome library.
 - color: light, dark
 - size: small, medium, large, extra large
 - background: on, off
 - spin: on, off

[margin size=”20″]

Single Icons

The entire Font Awesome icon catalogue has been included in our shortcodes. The Font Awesome icons included can be found here: Font Awesome Icons.

[margin size=”10″]

Icons with Text

[one_half]
[font_text link=”” icon=”star” color=”dark” size=”medium” border=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_text]
[/one_half]

[one_half_last]
[font_text link=”” icon=”thumbs-up” color=”dark” size=”medium” border=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_text]
[/one_half_last]

[margin size=”10″]

Icons with Title & Text – Style 1

[one_half]
[font_full1 title=”Title” link=”” icon=”star” color=”dark” size=”medium” background=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_full1]
[/one_half]

[one_half_last]
[font_full1 title=”Title” link=”” icon=”thumbs-up” color=”dark” size=”medium” background=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_full1]
[/one_half_last]

[margin size=”10″]

Icons with Title & Text – Style 2

[one_half]
[font_full2 title=”Title” link=”” icon=”star” color=”dark” size=”medium” background=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_full2]
[/one_half]

[one_half_last]
[font_full2 title=”Title” link=”” icon=”thumbs-up-alt” color=”dark” size=”medium” background=”off” spin=”off”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi nulla quis.[/font_full2]
[/one_half_last]

[divider_top]

[margin size=”20″]

[one_third]

Images

[/one_third]

[one_third]

YouTube

[youtube id=”xBzPioph8CI” thumb=”http://www.thinkupthemes.com/wp-content/uploads/2013/09/Test4_home-240×144.jpg” title=”YouTube Title” details=”YouTube Video Tutorial”]
[/one_third]

[one_third_last]

Vimeo

[vimeo id=”22884674″ title=”Vimeo Video Title” details=”Vimeo Video Details”]
[/one_third_last]

[divider_top]

[margin size=”20″]

Notification Boxes

Input Attributes:
 - type: download, error, info, message, normal, question, stop, success, warning

[margin size=”20″]

With Icon

[one_half]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half]
[one_half_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half_last]

[one_half]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half]

[one_half_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half_last]

[one_half]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half]

[one_half_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half_last]

[one_half]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half]

[one_half_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[/one_half_last]

No Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.

[divider_top]

[margin size=”20″]

Pricing Table

Input Attributes (general):
 - width: specify the width of the entire pricing table (px)
 - linktext: change the Buy Now button text (optional)

Input Attributes (individual):
 - title: optional
 - price: price 1, price 2, price 3, price 4...
 - size: small, big, small, small...
 - rows: row 1, row 2, row 3, row 4...
 - icons: tick, tick, cross, cross...
 - link: url 1, url 2, url 3, url 4...

[margin size=”40″]

[pricing1 width=”400″ linktext=”Buy Now”
title_1=”title1″ price_1=”$49″ size_1=”small” rows_1=”row 1,row 2,row 3″ icons_1=”tick,cross,cross” link_1=”#”
title_2=”title2″ price_2=”$99″ size_2=”big” rows_2=”row 1,row 2,row 3″ icons_2=”tick,tick,tick” link_2=”#”
title_3=”title3″ price_3=”$79″ size_3=”small” rows_3=”row 1,row 2,row 3″ icons_3=”tick,tick,cross” link_3=”#”]

[divider_top]

[margin size=”20″]

Progress Bars

Input Attributes:
 - title: optional
 - style: normal, info, success, warning, danger
 - progress: 0% - 100%
 - show: on, off

[margin size=”20″]

5 Colors Styles

[progress1 title=”Normal” style=”normal” progress=”60″ show=”on”][/progress1]
[progress1 title=”Info” style=”info” progress=”60″ show=”on”][/progress1]
[progress1 title=”Success” style=”success” progress=”60″ show=”on”][/progress1]
[progress1 title=”Warning” style=”warning” progress=”60″ show=”on”][/progress1]
[progress1 title=”Danger” style=”danger” progress=”60″ show=”on”][/progress1]

3 Effects

[progress1 title=”Basic” style=”normal” progress=”60″ show=”on”][/progress1]
[progress2 title=”Striped” style=”normal” progress=”60″ show=”on”][/progress2]
[progress3 title=”Animated” style=”normal” progress=”60″ show=”on”][/progress3]

[divider_top]

[margin size=”20″]

Slideshow

Input Attributes:
 - image: URL
 - title: Image title
 - details: Image details
 - arrows: on, off
 - dots:  on, off

[margin size=”20″]

[slideshow arrows=”on” dots=”off”
image_1=”http://design.thinkupthemes.com/test5/files/2013/08/bla-880×384.jpg” title_1=”” details_1=”Lorem Ipsum”
image_2=”http://design.thinkupthemes.com/test5/files/2013/08/Balance_Ambigram-880×384.jpg” title_2=”” details_2=”Nec in felis”
image_3=”http://design.thinkupthemes.com/test5/files/2013/08/wine__final02-880×384.jpg” title_3=”” details_3=”Faucibus nec”]

[divider_top]

[margin size=”20″]

Social Media

Facebook – Like Button

[margin size=”20″]

Twitter – Tweet Button

[margin size=”20″]

Twitter – Follow Button

[margin size=”10″]

[margin size=”10″]

[margin size=”20″]

LinkedIn – Share Button

[margin size=”20″]

Google+ – Recommend Button

[divider_top]

[margin size=”20″]

Tabs

Tabs – Style 1

[tabs1
title_1=”Title 1″ tab_1=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue diam gravida arcu porta feugiat. Pellentesque convallis laoreet pellentesque. Sed scelerisque rhoncus felis. Aliquam euismod vestibulum nisl, sed congue mi condimentum sit amet. Maecenas scelerisque convallis lacus, a sollicitudin sapien mollis in, morbi id..” icon_1=”user-md” title_2=”Title 2″ tab_2=”Fusce sit amet ultrices ante, non ullamcorper dui. Donec ut tincidunt eros. Nunc consequat at orci sed dictum. Donec sagittis erat. Sed semper pellentesque est nec bibendum. Ut pretium gravida arcu laoreet cursus. Pellentesque lectus purus, mollis posuere mauris eget, dapibus lobortis urna. Nulla rhoncus eu velit.” icon_2=”” title_3=”Title 3″ tab_3=”Morbi sollicitudin malesuada facilisis. Cras sed est vestibulum massa commodo mattis. Donec malesuada tincidunt pretium. In sollicitudin nulla vitae neque pellentesque commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae nulla sit amet tortor venenatis suscipit congue a justo. Sed rhoncus libero..” icon_3=”coffee”]

Tabs – Style 2

[tabs2 title_1=”Title 1″ tab_1=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue diam gravida arcu porta feugiat. Pellentesque convallis laoreet pellentesque. Sed scelerisque rhoncus felis. Aliquam euismod vestibulum nisl, sed congue mi condimentum sit amet. Maecenas scelerisque convallis lacus, a sollicitudin sapien mollis in, morbi id..” icon_1=”user-md” title_2=”Title 2″ tab_2=”Fusce sit amet ultrices ante, non ullamcorper dui. Donec ut tincidunt eros. Nunc consequat at orci sed dictum. Donec sagittis erat. Sed semper pellentesque est nec bibendum. Ut pretium gravida arcu laoreet cursus. Pellentesque lectus purus, mollis posuere mauris eget, dapibus lobortis urna. Nulla rhoncus eu velit..” icon_2=”” title_3=”Title 3″ tab_3=”Morbi sollicitudin malesuada facilisis. Cras sed est vestibulum massa commodo mattis. Donec malesuada tincidunt pretium. In sollicitudin nulla vitae neque pellentesque commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae nulla sit amet tortor venenatis suscipit congue a justo. Sed rhoncus libero..” icon_3=”coffee”]

[divider_top]

[margin size=”20″]

Toggles

Toggle – Style 1

[accordion1
title_1=”Title 1″ tab_1=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue diam gravida arcu porta feugiat. Pellentesque convallis laoreet pellentesque. Sed scelerisque rhoncus felis. Aliquam euismod vestibulum nisl, sed congue mi condimentum sit amet. Maecenas scelerisque convallis lacus, a sollicitudin sapien mollis in, morbi id orci ac turpis.”
title_2=”Title 2″ tab_2=”Fusce sit amet ultrices ante, non ullamcorper dui. Donec ut tincidunt eros. Nunc consequat at orci sed dictum. Donec sagittis erat. Sed semper pellentesque est nec bibendum. Ut pretium gravida arcu laoreet cursus. Pellentesque lectus purus, mollis posuere mauris eget, dapibus lobortis urna. Nulla rhoncus eu velit sed tincidunt vestibulum.”
title_3=”Title 3″ tab_3=”Morbi sollicitudin malesuada facilisis. Cras sed est vestibulum massa commodo mattis. Donec malesuada tincidunt pretium. In sollicitudin nulla vitae neque pellentesque commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae nulla sit amet tortor venenatis suscipit congue a justo. Sed rhoncus libero quis vehicula condimentum.”]

[margin size=”10″]

Toggle – Style 2

[accordion2
title_1=”Title 1″ tab_1=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue diam gravida arcu porta feugiat. Pellentesque convallis laoreet pellentesque. Sed scelerisque rhoncus felis. Aliquam euismod vestibulum nisl, sed congue mi condimentum sit amet. Maecenas scelerisque convallis lacus, a sollicitudin sapien mollis in, morbi id orci ac turpis.”
title_2=”Title 2″ tab_2=”Fusce sit amet ultrices ante, non ullamcorper dui. Donec ut tincidunt eros. Nunc consequat at orci sed dictum. Donec sagittis erat. Sed semper pellentesque est nec bibendum. Ut pretium gravida arcu laoreet cursus. Pellentesque lectus purus, mollis posuere mauris eget, dapibus lobortis urna. Nulla rhoncus eu velit sed tincidunt vestibulum.”
title_3=”Title 3″ tab_3=”Morbi sollicitudin malesuada facilisis. Cras sed est vestibulum massa commodo mattis. Donec malesuada tincidunt pretium. In sollicitudin nulla vitae neque pellentesque commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae nulla sit amet tortor venenatis suscipit congue a justo. Sed rhoncus libero quis vehicula condimentum.”]

[margin size=”10″]

[divider_top]