[:en]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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_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]
[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]
[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]
[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]
[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
[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
[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]
[su_spoiler title=”Spoiler title” class=”my-custom-spoiler”] Spoiler content [/su_spoiler]
[su_youtube url=”http://youtube.com/watch?v=DR2c266yWEA”]
[su_vimeo url=”http://vimeo.com/78106175″]
[su_video url=”http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v”]
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”]
[su_audio url=”http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3?1″]
[su_audio url=”http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3?2″ width=”400px”]
[su_youtube_advanced url=”http://youtu.be/NbE8INOjTKM” controls=”no” showinfo=”no” rel=”no”]
[su_youtube_advanced url=”http://youtu.be/NbE8INOjTKM” autohide=”no” theme=”light”]
[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]
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”]]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[su_posts template=”templates/list-loop.php” posts_per_page=”5″ orderby=”comment_count”]
[su_posts template=”templates/teaser-loop.php” orderby=”modified”]
[su_posts template=”templates/single-post.php” post_type=”attachment” post_status=”any”]
[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]
[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]
[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]
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]
[:]