Shortcodes

Section

Section background color example

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

 

Get the codes
 [yt_section background="#444" color="#fff" image="" parallax="no" speed="10" max_width="960" font_size="12px" margin="0px" padding="0px" text_align="left" border="1px solid #cccccc" text_shadow="0 1px 10px #ffffff" url_youtube="" url_webm="" ] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: skyatlas" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="6" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: linux" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="5" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: umbrella" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="3" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: github-alt" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="4" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [/yt_section] 

Section images example

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

 

Get the codes
 [yt_section background="#444" color="#fff" image="images/191099.jpg" parallax="no" speed="10" max_width="960" font_size="12px" margin="0px" padding="0px" text_align="left" border="1px solid #cccccc" text_shadow="0 1px 10px #ffffff" url_youtube="" url_webm="" ] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: skyatlas" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="6" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: linux" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="5" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: umbrella" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="3" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: github-alt" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="4" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [/yt_section] 

Section Paralax images example

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

 

Get the codes
 [yt_section background="#444" color="#fff" image="images/191099.jpg" parallax="yes" speed="10" max_width="960" font_size="12px" margin="0px" padding="0px" text_align="left" border="1px solid #cccccc" text_shadow="0 1px 10px #ffffff" url_youtube="" url_webm="" ] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: skyatlas" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="6" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: linux" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="5" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: umbrella" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="3" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: github-alt" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="4" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [/yt_section] 

Section video youtube example

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

 

Get the codes
 [yt_section background="#444" color="#fff" image="" parallax="no" speed="10" max_width="960" font_size="12px" margin="0px" padding="0px" text_align="left" border="1px solid #cccccc" text_shadow="0 1px 10px #ffffff" url_youtube="Ia8ZiEqUhCg" url_webm="" ] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: skyatlas" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="6" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: linux" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="5" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: umbrella" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="3" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: github-alt" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="4" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [/yt_section] 

Section video webm example

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

Icon List Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae

 

Get the codes
 [yt_section background="#444" color="#fff" image="" parallax="no" speed="10" max_width="960" font_size="12px" margin="0px" padding="0px" text_align="left" border="1px solid #cccccc" text_shadow="0 1px 10px #ffffff" url_youtube="Ia8ZiEqUhCg" url_webm="" ] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: skyatlas" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="6" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: linux" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="5" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: umbrella" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="3" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [yt_icon_list yt_title="Icon List Heading" title_color="#fff" title_size="14px" icon="icon: github-alt" color="#fff" icon_color="#ffffff" icon_background="transparent" icon_size="40" icon_border="0px solid #444444" icon_shadow="0 0 0 #444444" icon_padding="20px" icon_radius="0px" icon_align="left" connector="no" icon_animation="4" ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis vel est vitae [/yt_icon_list] [/yt_section] 

Popovers

Popover hover light

I’m right popover, hover me !
I’m left popover, hover me !
I’m top popover, hover me !
I’m top popover, hover me !

 

Get the codes
 [yt_popovers style="light" title="Popover 1" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="right" close="no" ] I’m right popover, hover me ! [/yt_popovers] 
 [yt_popovers style="light" title="Popover 2" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="left" close="no" ] I’m left popover, hover me ! [/yt_popovers] 
 [yt_popovers style="light" title="Popover 3" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="top" close="no" ] I’m top popover, hover me ! [/yt_popovers] 
 [yt_popovers style="light" title="Popover 4" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="bottom" close="no" ] I’m top popover, hover me ! [/yt_popovers] 
I’m right popover, hover me !
I’m left popover, hover me !
I’m top popover, hover me !
I’m top popover, hover me !

Color style popover hover

 

Get the codes
 [yt_popovers style="red" title="Popover 1" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="right" close="no" ] I’m right popover, hover me ! [/yt_popovers] 
 [yt_popovers style="dark" title="Popover 2" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="left" close="no" ] I’m left popover, hover me ! [/yt_popovers] 
 [yt_popovers style="yellow" title="Popover 3" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="top" close="no" ] I’m top popover, hover me ! [/yt_popovers] 
 [yt_popovers style="green" title="Popover 4" text="Your content here." size="default" behavior="hover" shadow="yes" rounded="yes" position="bottom" close="no" ] I’m top popover, hover me ! [/yt_popovers] 

Popover click

I’m right popover, click me !
I’m left popover, click me !
I’m top popover, click me !
I’m top popover, click me !

 

Get the codes
 [yt_popovers style="blue" title="Popover 1" text="Your content here." size="default" behavior="click" shadow="yes" rounded="yes" position="right" close="yes" ] I’m right popover, click me ! [/yt_popovers] 
 [yt_popovers style="youtube" title="Popover 2" text="Your content here." size="default" behavior="click" shadow="yes" rounded="yes" position="left" close="yes" ] I’m left popover, click me ! [/yt_popovers] 
 [yt_popovers style="tipsy" title="Popover 3" text="Your content here." size="default" behavior="click" shadow="yes" rounded="yes" position="top" close="yes" ] I’m top popover, click me ! [/yt_popovers] 
 [yt_popovers style="bootstrap" title="Popover 4" text="Your content here." size="default" behavior="click" shadow="yes" rounded="yes" position="bottom" close="yes" ] I’m top popover, click me ! [/yt_popovers] 
I’m right popover, always me !
I’m top popover, always me !
I’m top popover, always me !
I’m left popover, always me !

Popover always

 

Get the codes
 [yt_popovers style="jtools" title="Popover 1" text="Your content here." size="default" behavior="always" shadow="yes" rounded="yes" position="right" close="yes" ] I’m right popover, always me ! [/yt_popovers] 
 [yt_popovers style="tipped" title="Popover 2" text="Your content here." size="default" behavior="always" shadow="yes" rounded="yes" position="left" close="yes" ] I’m left popover, always me ! [/yt_popovers] 
 [yt_popovers style="cluetip" title="Popover 3" text="Your content here." size="default" behavior="always" shadow="yes" rounded="yes" position="top" close="yes" ] I’m top popover, always me ! [/yt_popovers] 
 [yt_popovers style="red" title="Popover 4" text="Your content here." size="default" behavior="always" shadow="yes" rounded="yes" position="bottom" close="yes" ] I’m top popover, always me ! [/yt_popovers] 

Points Of Interest

Points Of Interest Example

Preview image
  • More
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. Close
  • More
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. Close
  • More
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. Close

 

Get the codes
 [yt_points width="100" src="/extensions/yt-shortcode/images/icon_point.png" ] [yt_points_item x="16" y="62" position="left" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. [/yt_points_item] [yt_points_item x="38" y="20" position="top" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. [/yt_points_item] [yt_points_item x="61" y="80" position="right" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae distinctio esse placeat minus fugit, voluptate, quos, ea, nisi temporibus repudiandae perspiciatis natus quasi ipsa corrupti ipsum amet facere ut nihil. [/yt_points_item] [/yt_points] 
 
 
 
Top