Shortcodes

Gallery2

Gallery width No Caption 


Actually we are published in this shortcode items unlimited color option, you can use this shortcode, change your like color
 
Get the codes
 [yt_gallery title="Title gallery" columns="3" width="350" height="350" align="left" caption="0" border="0px solid #4e9e41" hover="1" padding="0px" ] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Wordpress" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Magento" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [/yt_gallery] 

Gallery width Caption 1


Actually we are published in this shortcode items unlimited color option, you can use this shortcode, change your like color
 
Get the codes
 [yt_gallery title="Title gallery" columns="3" width="350" height="350" align="left" caption="1" border="0px solid #4e9e41" hover="1" padding="0px" ] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Wordpress" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Magento" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [/yt_gallery] 

Gallery width Caption 2


Actually we are published in this shortcode items unlimited color option, you can use this shortcode, change your like color
 
Get the codes
 [yt_gallery title="Title gallery" columns="3" width="350" height="350" align="left" caption="2" border="0px solid #4e9e41" hover="1" padding="0px" ] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Wordpress" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Magento" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [/yt_gallery] 

Gallery width border 1


Actually we are published in this shortcode items unlimited color option, you can use this shortcode, change your like color
 
Get the codes
 [yt_gallery title="Title gallery" columns="3" width="350" height="350" align="left" caption="2" border="2px solid #4e9e41" hover="2" padding="0px" ] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Wordpress" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Magento" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [/yt_gallery] 

Gallery width border 2


Actually we are published in this shortcode items unlimited color option, you can use this shortcode, change your like color
 
Get the codes
 [yt_gallery title="Title gallery" columns="3" width="350" height="350" align="left" caption="2" border="2px solid #4e9e41" hover="1" padding="10px" ] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Joomla" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Wordpress" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [yt_gallery_item tag="Magento" title="Title gallery" src="/extensions/sj-shortcode/" video_addr="" ] Image Description [/yt_gallery_item] [/yt_gallery] 

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] 
Top