Shortcodes

Short codes in all modern themes are created with Shortcodes Ultimate. We strongly believe that short codes have no business weighing down themes. With Shortcodes Ultimate you can choose only the short codes you want, and most importantly, if (more like, when) you decide to change your theme, you won’t lose everything!

Basic accordion

[su_accordion]
[su_spoiler title=”Sample Accordion Title 1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[/su_accordion]

Fancy accordion

[su_accordion]
[su_spoiler title=”Sample Accordion Title 1″ style=”fancy”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 2″ style=”fancy”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 3″ style=”fancy”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[/su_accordion]

Accordion with open spoiler

[su_accordion]
[su_spoiler title=”Sample Accordion Title 1″ style=”fancy” open=”yes”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 2″ style=”fancy”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 3″ style=”fancy”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[/su_accordion]

Accordion with different icons

[su_accordion]
[su_spoiler title=”Sample Accordion Title 1″ style=”fancy” icon=”plus-square-1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 2″ style=”fancy” icon=”caret-square”] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 3″ style=”fancy” icon=”folder-1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 4″ style=”fancy” icon=”arrow-circle-1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[su_spoiler title=”Sample Accordion Title 5″ style=”fancy” icon=”arrow-circle-2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/su_spoiler]
[/su_accordion]

Unlimited colors

[su_button background=”#2D89EF”] Click me [/su_button] [su_button background=”#9E2DEF”] Click me [/su_button] [su_button background=”#F72EBA”] Click me [/su_button]

[su_button background=”#FF2F3B”] Click me [/su_button] [su_button background=”#FF742F”] Click me [/su_button] [su_button background=”#FFA52F”] Click me [/su_button]

[su_button background=”#FFCF2F”] Click me [/su_button] [su_button background=”#FFF92F”] Click me [/su_button] [su_button background=”#C5ED2C”] Click me [/su_button]

[su_button background=”#3AD828″] Click me [/su_button] [su_button background=”#27CBD5″] Click me [/su_button] [su_button background=”#000000″] Click me [/su_button]

[su_button background=”#eee” color=”#2D89EF”] Click me [/su_button] [su_button background=”#eee” color=”#9E2DEF”] Click me [/su_button] [su_button background=”#eee” color=”#F72EBA”] Click me [/su_button]

[su_button background=”#eee” color=”#FF2F3B”] Click me [/su_button] [su_button background=”#eee” color=”#FF742F”] Click me [/su_button] [su_button background=”#eee” color=”#FFA52F”] Click me [/su_button]

[su_button background=”#eee” color=”#FFCF2F”] Click me [/su_button] [su_button background=”#eee” color=”#FFF92F”] Click me [/su_button] [su_button background=”#eee” color=”#C5ED2C”] Click me [/su_button]

[su_button background=”#eee” color=”#3AD828″] Click me [/su_button] [su_button background=”#eee” color=”#27CBD5″] Click me [/su_button] [su_button background=”#eee” color=”#000000″] Click me [/su_button]

 

Different background styles

[su_button style=”default”] Click me [/su_button] [su_button style=”flat”] Click me [/su_button] [su_button style=”glass”] Click me [/su_button]

[su_button style=”noise”] Click me [/su_button] [su_button style=”bubbles”] Click me [/su_button] [su_button style=”soft”] Click me [/su_button]

 

Customizable border radius

[su_button radius=”square”] Click me [/su_button] [su_button radius=”auto”] Click me [/su_button] [su_button radius=”10″] Click me [/su_button] [su_button radius=”round”] Click me [/su_button]

 

Built-in icon font

List of built-in icons

[su_button icon=”icon: check”] Click me [/su_button] [su_button icon=”icon: arrow-right”] Click me [/su_button] [su_button icon=”icon: shopping-cart”] Click me [/su_button]

[su_button icon=”icon: cogs” color=”#000000″ icon_color=”#000000″] Click me [/su_button] [su_button icon=”icon: comments” color=”#000000″ icon_color=”#000000″] Click me [/su_button] [su_button icon=”icon: cloud-download” color=”#000000″ icon_color=”#000000″] Click me [/su_button]

 

Unlimited sizes

[su_button size=”1″] Click me [/su_button] [su_button size=”2″] Click me [/su_button]

[su_button size=”3″] Click me [/su_button] [su_button size=”4″] Click me [/su_button]

[su_button size=”5″] Click me [/su_button] [su_button size=”6″] Click me [/su_button]

[su_button size=”7″] Click me [/su_button] [su_button size=”8″] Click me [/su_button]

[su_button size=”9″] Click me [/su_button] [su_button size=”10″] Click me [/su_button]

[su_button size=”32″] Unlimited sizes! [/su_button]

 

Full-width column

[su_row]
[su_column size=”1/1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/2 + 1/2

[su_row]
[su_column size=”1/2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size=”1/2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/3 + 1/3 + 1/3

[su_row]
[su_column size=”1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size=”1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size=”1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/2 + 1/4 + 1/4

[su_row]
[su_column size=”1/2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size=”1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/su_column]
[su_column size=”1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/su_column]
[/su_row]

3/4 + 1/4

[su_row]
[su_column size=”3/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit. [/su_column]
[su_column size=”1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[/su_row]

1/5 + 4/5

[su_row]
[su_column size=”1/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[su_column size=”4/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

2/5 + 3/5

[su_row]
[su_column size=”2/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique. [/su_column]
[su_column size=”3/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

2/3 + 1/6 + 1/6

[su_row]
[su_column size=”2/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size=”1/6″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[su_column size=”1/6″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[/su_row]

[su_divider]
 
[su_divider style=”dotted”]
 
[su_divider style=”dashed”]
 
[su_divider style=”double”]

 

Basic Gallery

[su_custom_gallery source=”media: 31,25,20″ width=”200″ height=”200″ title=”never”]

 

Gallery with Lightbox

[su_custom_gallery source=”media: 31,25,20″ link=”lightbox” width=”200″ title=”never” height=”200″]

 

Gallery – Link to single image

[su_custom_gallery source=”media: 31,25,20″ width=”200″ target=”blank” link=”image” height=”200″ title=”never”]

 

Gallery – Title on hover

[su_custom_gallery source=”media: 31,25,20″ width=”200″ link=”image” height=”200″]

 

Lightboxes

[su_lightbox src=”https://www.youtube.com/watch?v=31g0YE61PLQ”][su_button su_button size=”15″] Video Lightbox [/su_button][/su_lightbox]

[su_lightbox type=”image” src=”http://replygif.net/thumbnail/377.gif”][su_button su_button size=”15″] Image Lightbox [/su_button][/su_lightbox]

[su_lightbox src=”http://modernthemes.net/”][su_button su_button size=”15″] frame content [/su_button][/su_lightbox]

 

Posts

[su_posts]

 

Quotes

[su_quote cite=”Michael Scott”]

I am a huge Woody Allen fan, although I’ve only seen Antz.

[/su_quote]

[su_quote cite=”Theodore Roosevelt” size=”10″]

If you could kick the person in the pants responsible for most of your trouble, you wouldn’t sit for a month.

[/su_quote]

[su_quote cite=”Mike Dimmer” size=”10″]

We live in a place where no one is meant to survive.

[/su_quote]

Basic Responsive Slider

[su_slider source=”media: 31,25,20″ target=”blank” width=”700″ title=”no” pages=”no”]

 

Responsive Slider with Lightbox

[su_slider source=”media: 31,25,20″ link=”lightbox” width=”700″ title=”no” pages=”no”]

 

Responsive Carousel Slider

[su_carousel source=”media: 31,25,20″ title=”no”]

 

Carousel Slider with Lightbox

[su_carousel source=”media: 31,25,20″ link=”lightbox” title=”no”]

 

Responsive Table

[su_table]

Table	Table	Table
Table	Table	Table
Table	Table	Table
Table	Table	Table
Table	Table	Table
Table	Table	Table
Table	Table	Table

[/su_table]

 

Basic Tabs

[su_tabs][su_tab title=”Title 1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/su_tab]
[su_tab title=”Title 2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/su_tab]
[su_tab title=”Title 3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/su_tab][/su_tabs]

 

Custom Active Tabs

[su_tabs active=”2″]
[su_tab title=”Tab 1″] Tab 1 content [/su_tab]
[su_tab title=”Tab 2″] Tab 2 content [/su_tab]
[su_tab title=”Tab 3″] Tab 3 content [/su_tab]
[/su_tabs]

 

Vertical Tabs

[su_tabs vertical=”yes”]
[su_tab title=”Tab 1″] Tab 1 content [/su_tab]
[su_tab title=”Tab 2″] Tab 2 content [/su_tab]
[su_tab title=”Tab 3″] Tab 3 content [/su_tab]
[/su_tabs]

 

Disabled Tabs

[su_tabs]
[su_tab title=”Tab 1″] Tab 1 content [/su_tab]
[su_tab title=”Tab 2″] Tab 2 content [/su_tab]
[su_tab title=”Tab 3″] Tab 3 content [/su_tab]
[su_tab title=”Tab 4 (disabled)” disabled=”yes”] Tab 4 content [/su_tab]
[su_tab title=”Tab 5 (disabled)” disabled=”yes”] Tab 5 content [/su_tab]
[/su_tabs]

YouTube Video

[su_youtube url=”https://www.youtube.com/watch?v=NudDIgXkPLY”]

 

Vimeo Video

[su_vimeo url=”http://vimeo.com/22665032″]