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_heading size=”20″ align=”left”]Heading tag[/su_heading]
[su_tabs active=”3″ vertical=”yes”][su_tab title=”Title 1″]Content 1[/su_tab]
[su_tab title=”Title 2″]Content 2[/su_tab]
[su_tab title=”Title 3″]Content 3[/su_tab][/su_tabs]
Default 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_tabs]
Custom active tab
[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]
Tabs anchors
[su_tabs]
[su_tab title=”Tab 1″ anchor=”First”] Tab 1 content [/su_tab]
[su_tab title=”Tab 2″ anchor=”Second”] Tab 2 content [/su_tab]
[su_tab title=”Tab 3″ anchor=”Third”] Tab 3 content [/su_tab]
[/su_tabs]
Custom styles
[su_tabs class=”my-custom-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_tabs]
Basic accordion
[su_accordion]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[/su_accordion]
Fancy accordion
[su_accordion]
[su_spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/su_spoiler]
[/su_accordion]
Accordion with open spoiler
[su_accordion]
[su_spoiler title=”Spoiler title” open=”yes”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[/su_accordion]
Different spoiler styles
[su_spoiler title=”Spoiler title” style=”default”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”simple”] Spoiler content [/su_spoiler]
Open spoilers
[su_spoiler title=”Spoiler title” style=”default” open=”yes”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”fancy” open=”yes”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” style=”simple” open=”yes”] Spoiler content [/su_spoiler]
Spoilers with anchors (see the code)
[su_spoiler title=”Spoiler title” anchor=”Spoiler-1″] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” anchor=”Spoiler-2″] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” anchor=”Spoiler-3″] Spoiler content [/su_spoiler]
Use next links to open this spoilers
Open spoiler 1 | Open spoiler 2 | Open spoiler 3
Accordion + Spoilers + Anchors (see the code)
[su_accordion]
[su_spoiler title=”Spoiler title” anchor=”Accordion-1″] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” anchor=”Accordion-2″] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title” anchor=”Accordion-3″] Spoiler content [/su_spoiler]
[/su_accordion]
Use next links to expand accordion items
Open spoiler 1 | Open spoiler 2 | Open spoiler 3
Different icons
[su_accordion]
[su_spoiler title=”plus” icon=”plus”] Spoiler content [/su_spoiler]
[su_spoiler title=”plus-circle” icon=”plus-circle”] Spoiler content [/su_spoiler]
[su_spoiler title=”plus-square-1″ icon=”plus-square-1″] Spoiler content [/su_spoiler]
[su_spoiler title=”plus-square-2″ icon=”plus-square-2″] Spoiler content [/su_spoiler]
[su_spoiler title=”arrow” icon=”arrow”] Spoiler content [/su_spoiler]
[su_spoiler title=”arrow-circle-1″ icon=”arrow-circle-1″] Spoiler content [/su_spoiler]
[su_spoiler title=”arrow-circle-2″ icon=”arrow-circle-2″] Spoiler content [/su_spoiler]
[su_spoiler title=”caret” icon=”caret”] Spoiler content [/su_spoiler]
[su_spoiler title=”caret-square” icon=”caret-square”] Spoiler content [/su_spoiler]
[su_spoiler title=”folder-1″ icon=”folder-1″] Spoiler content [/su_spoiler]
[su_spoiler title=”folder-2″ icon=”folder-2″] Spoiler content [/su_spoiler]
[/su_accordion]
Custom styles
[su_spoiler title=”Spoiler title” class=”my-custom-spoiler”] Spoiler content [/su_spoiler]
YouTube video
[su_youtube url=”http://youtube.com/watch?v=DR2c266yWEA”]
Vimeo video
[su_vimeo url=”http://vimeo.com/78106175″]
Self-hosted video (mp4/flv)
[su_video url=”http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v”]
Non-responsive videos
You can customize width and height for this videos
[su_youtube url=”http://youtube.com/watch?v=DR2c266yWEA” width=”300″ height=”200″ responsive=”no”]
[su_vimeo url=”http://vimeo.com/78106175″ width=”300″ height=”200″ responsive=”no”]
Self-hosted audio-files (HTML5/Flash)
[su_audio url=”http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3?1″]
Audio player with custom width
[su_audio url=”http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3?2″ width=”400px”]
Advanced YouTube setup #1 – no controls, no related videos
[su_youtube_advanced url=”http://youtu.be/NbE8INOjTKM” controls=”no” showinfo=”no” rel=”no”]
Advanced YouTube setup #2 – always visible controls, light theme
[su_youtube_advanced url=”http://youtu.be/NbE8INOjTKM” autohide=”no” theme=”light”]
Media grid: responsive videos + columns
[su_row]
[su_column size=”1/2″] [su_youtube] [/su_column]
[su_column size=”1/2″] [su_vimeo] [/su_column]
[/su_row]
[su_row]
[su_column size=”1/2″] [su_youtube] [/su_column]
[su_column size=”1/2″] [su_vimeo] [/su_column]
[/su_row]
Autoplay and loop
You can add autoplay=”yes” and loop=”yes” to any of these elements and the playback will be automatically started and looped.
For example: [[su_youtube url=”” autoplay=”yes”]]
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]
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]
[su_button style=”stroked”] Click me [/su_button] [su_button style=”3d”] Click me [/su_button] [su_button style=”ghost” color=”#2D89EF”] 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
[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]
Different animation types
[su_animate type=”bounceIn” delay=”1″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”flipInX” delay=”2″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”flipInY” delay=”3″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”fadeInDown” delay=”4″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”fadeInLeft” delay=”5″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”fadeInRight” delay=”6″] [su_note] Animated text [/su_note] [/su_animate]
[su_animate type=”fadeInUp” delay=”7″] [su_note] Animated text [/su_note] [/su_animate]
Animated columns
[su_row]
[su_column size=”1/2″]
[su_animate type=”fadeInLeft” delay=”1″ duration=”1.5″] [su_box] Column content [/su_box] [/su_animate]
[/su_column]
[su_column size=”1/2″]
[su_animate type=”fadeInRight” delay=”1″ duration=”1.5″] [su_box] Column content [/su_box] [/su_animate]
[/su_column]
[/su_row]
Animated buttons
[su_animate delay=”1″ inline=”yes”] [su_button] Click me [/su_button] [/su_animate] [su_animate delay=”2″ inline=”yes”] [su_button] Click me [/su_button] [/su_animate] [su_animate delay=”3″ inline=”yes”] [su_button] Click me [/su_button] [/su_animate]
Animated tabs
[su_tabs]
[su_tab title=”Tab title”] [su_animate type=”fadeInUp”] Tab content [/su_animate] [/su_tab]
[su_tab title=”Tab title”] [su_animate type=”fadeInUp”] Tab content [/su_animate] [/su_tab]
[su_tab title=”Tab title”] [su_animate type=”fadeInUp”] Tab content [/su_animate] [/su_tab]
[/su_tabs]
List of 5 most popular posts (by comments number)
[su_posts template=”templates/list-loop.php” posts_per_page=”5″ orderby=”comment_count”]
Most recent posts as a teasers
[su_posts template=”templates/teaser-loop.php” orderby=”modified”]
Recent uploaded media file
[su_posts template=”templates/single-post.php” post_type=”attachment” post_status=”any”]
Basic example
[su_box title=”This is a box with nested spoilers”]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[/su_box]
The same nested shortcodes
[su_spoiler title=”Click me to see nested spoilers” style=”fancy”]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[/su_spoiler]
The same nested shortcodes mixed with other shortcodes
[su_spoiler title=”Click me to see nested accordion” style=”fancy”]
[su_accordion]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[_su_spoiler title=”Spoiler title”] Spoiler content [_/su_spoiler]
[/su_accordion]
[/su_spoiler]
Shortcodes inside of attributes
To use shortcodes inside of attributes you need to replace square brackets with { and }. Open code to see example
[su_button url=”{shortcode attribute=’value’}”] Button [/su_button]
[su_row]
[su_column size=”1/3″][su_service title=”Service title 1″ icon=”icon: external-link-square” icon_color=”#cfceb7″]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_service]
[/su_column]
[su_column size=”1/3″][su_service title=”Service title 2″ icon=”icon: external-link-square” icon_color=”#cfceb7″]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_service][/su_column]
[su_column size=”1/3″][su_service title=”Service title 3″ icon=”icon: external-link-square” icon_color=”#cfceb7″]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_service][/su_column]
[/su_row]