Useful Blocks

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Useful Blocks – Bordered and Square Icon”}

Here are some examples of the Useful Blocks. You can easily define them (it’s a Joomla Module) with a lot of integrated options to choose from.

{spacer height=”20px”} {row} {col4} {loadposition block1} {/col} {col4} {loadposition block2} {/col} {col4} {loadposition block3} {/col} {/row} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Useful Blocks – Bordered and Round Icon”}

Here are some examples of the Useful Blocks. You can easily define them (it’s a Joomla Module) with a lot of integrated options to choose from.

{spacer height=”20px”} {row} {col6} {loadposition block4} {/col} {col6} {loadposition block5} {/col} {/row} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Useful Blocks – Not Bordered and Round / Square Icon”}

Here are some examples of the Useful Blocks. You can easily define them (it’s a Joomla Module) with a lot of integrated options to choose from.

{spacer height=”40px”} {row} {col6} {loadposition block6} {/col} {col6} {loadposition block7} {/col} {/row}

Posted on by GM in Features Leave a comment

Standard Tables

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Table with class ‘table'”}

Company Annual Revenue Website
Microsoft Corp. 77.65B microsoft.com
Apple Inc. 170.87B apple.com
Google Inc. Cl A 49.96B google.com
Intel Corp. 53.34B intel.com
Advanced Micro Devices Inc. 5.42B amd.com
NVIDIA Corp. 4.28B nvidia.com

{spacer height=”60px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Table with class ‘table table-striped'”}

Company Annual Revenue Website
Microsoft Corp. 77.65B microsoft.com
Apple Inc. 170.87B apple.com
Google Inc. Cl A 49.96B google.com
Intel Corp. 53.34B intel.com
Advanced Micro Devices Inc. 5.42B amd.com
NVIDIA Corp. 4.28B nvidia.com

{spacer height=”60px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Table with class ‘table table-bordered'”}

Company Annual Revenue Website
Microsoft Corp. 77.65B microsoft.com
Apple Inc. 170.87B apple.com
Google Inc. Cl A 49.96B google.com
Intel Corp. 53.34B intel.com
Advanced Micro Devices Inc. 5.42B amd.com
NVIDIA Corp. 4.28B nvidia.com

{spacer height=”60px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Basic Table with class ‘table table-hover'”}

Company Annual Revenue Website
Microsoft Corp. 77.65B microsoft.com
Apple Inc. 170.87B apple.com
Google Inc. Cl A 49.96B google.com
Intel Corp. 53.34B intel.com
Advanced Micro Devices Inc. 5.42B amd.com
NVIDIA Corp. 4.28B nvidia.com
Posted on by GM in Tables Leave a comment

Pricing Tables

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Pricing Tables Style 1″}

This is a default Pricing Table (Joomla Module is included) with 3 columns, the centered Column is in Template Color.

{spacer height=”10px”} {loadposition pricing1} {spacer height=”20px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Pricing Tables Style 2″}

This is a default Pricing Table (Joomla Module is included) with 3 columns and different Color Variations.

{spacer height=”10px”} {loadposition pricing2} {spacer height=”20px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Pricing Tables Style 3″}

This is a default Pricing Table (Joomla Module is included) with 4 columns, the third Column is in Template Color and highlighted. Also we have added the count to shortcode in the field for the value.

{spacer height=”10px”} {loadposition pricing3} {spacer height=”20px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Pricing Tables Style 4″}

This is a default Pricing Table (Joomla Module is included) with 2 columns in Template Color.

{spacer height=”10px”} {loadposition pricing4}

Posted on by GM in Tables Leave a comment

Videos & iFrames

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”YouTube Video”}

This is a basic example of embedding a responsive YouTube video.

{spacer height=”30px”} {youtube id=”tu-ICTkM4SE”} {toggle1 title=”Shortcode”}

{youtube id="tu-ICTkM4SE"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Vimeo Video”}

This is a basic example of embedding a responsive Vimeo video.

{spacer height=”30px”} {vimeo id=”63104408″} {toggle1 title=”Shortcode”}

{vimeo id="63104408"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Soundcloud (small)”}

This is a basic example of embedding a small Soundcloud iFrame.

{spacer height=”30px”} {soundcloud-small url=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/152155715&color=ff5500&auto_play=false&hide_related=false&show_artwork=true&show_comments=true&show_user=true&show_reposts=false”} {toggle1 title=”Shortcode”}

{soundcloud-small url="url-here.com"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Soundcloud (large)”}

This is a basic example of embedding a large Soundcloud iFrame.

{spacer height=”30px”} {soundcloud-large url=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/152155715&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true”} {toggle1 title=”Shortcode”}

{soundcloud-large url="url-here.com"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”General iFrame”}

This is a basic example of embedding a responsive iFrame.

{spacer height=”30px”} {iframe url=”http://clrs.cc/”} {toggle1 title=”Shortcode”}

{iframe url="http://clrs.cc/"}

{/toggle}

Posted on by GM in Features Leave a comment

Lightbox & Images

{headline type=”h2″ style=”heading-single” text=”Lightbox” align=”text-center” color=”color-theme”} {spacer height=”20px”}

RokBox is a fully responsive Lightbox Plugin for the Joomla CMS. This very popular extension can showcase many different media formats such as images, videos, music, embedded widgets, Ajax content, and Joomla modules, all from a three-dimensional display. It also takes advantage of new technologies such as HTML5/CSS3. Details {icon name=”fa-chevron-circle-right”}

{spacer height=”30px”} {row} {col4} {image-overlay link=”images/sampledata/portfolio/13.jpg” image=”images/sampledata/lightbox/image.jpg” data=”data-rokbox-album=’gallery'”}

Image

{/col} {col4} {image-overlay link=”http://youtu.be/HjcPOZ_z3Ts” image=”images/sampledata/lightbox/youtube.jpg” data=”data-rokbox-album=’gallery'”}

YouTube Video

{/col} {col4} {image-overlay link=”http://vimeo.com/94502406″ image=”images/sampledata/lightbox/vimeo.jpg” data=”data-rokbox-album=’gallery'”}

Vimeo Video

{/col} {/row} {spacer height=”33px”} {row} {col4} {image-overlay link=”http://www.wikipedia.com” image=”images/sampledata/lightbox/iframe.jpg” data=”data-rokbox-album=’gallery'”}

iFrame

{/col} {col4} {image-overlay link=”https://maps.google.com/maps?q=stuttgart&hl=de&ie=UTF8&sll=37.0625,-95.677068&sspn=83.206395,191.513672&hnear=Stuttgart,+Baden-W%C3%BCrttemberg,+Deutschland&t=m&z=12″ image=”images/sampledata/lightbox/googlemap.jpg” data=”data-rokbox-album=’gallery'”}

Google Map

{/col} {col4} {image-overlay link=”http://open.spotify.com/user/w00fz/playlist/2OCzUYQMB93T19UAq8hGSK” image=”images/sampledata/lightbox/spotify.jpg” data=”data-rokbox-album=’gallery'”}

Spotify

{/col} {/row} {spacer height=”33px”} {row} {col4} {image-overlay link=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/153021129&color=ff5500&auto_play=true&hide_related=true&show_artwork=true&show_comments=false&show_user=true&show_reposts=false” image=”images/sampledata/lightbox/soundcloud1.jpg” data=”data-rokbox-album=’gallery’ data-rokbox-caption=’SoundCloud Player (small, with Autoplay)’ data-rokbox-size=’900 200′”}

SoundCloud (Small)

{/col} {col4} {image-overlay link=”https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/153021129&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true” image=”images/sampledata/lightbox/soundcloud2.jpg” data=”data-rokbox-album=’gallery’ data-rokbox-caption=’SoundCloud Player (large, without Autoplay)'”}

SoundCloud (Large)

{/col} {col4} {image-overlay link=”http://twitpic.com/e59kre” image=”images/sampledata/lightbox/twitpic.jpg” data=”data-rokbox-album=’gallery’ data-rokbox-caption=’This is a Image from TwitPic'”}

TwitPic

{/col} {/row} {toggle1 title=”Shortcode”}

{image-overlay image="small-image.jpg" link="large-image.jpg"}  {image-overlay image="small-image.jpg" link="http://youtu.be/HjcPOZ_z3Ts"}  {image-overlay image="small-image.jpg" link="http://vimeo.com/94502406"}  {image-overlay image="small-image.jpg" link="http://www.wikipedia.com"}  {image-overlay image="small-image.jpg" link="https://maps.google.com/maps?q=stuttgart&hl=de&ie=UTF8&sll=37.0625,-95.677068&sspn=83.206395,191.513672&hnear=Stuttgart,+Baden-W%C3%BCrttemberg,+Deutschland&t=m&z=12"}  {image-overlay image="small-image.jpg" link="http://open.spotify.com/user/w00fz/playlist/2OCzUYQMB93T19UAq8hGSK"}  {image-overlay image="small-image.jpg" link="soundcloud-iframe-link" data="data-rokbox-size='900 200'"}  {image-overlay image="small-image.jpg" link="soundcloud-iframe-link" data="data-rokbox-caption='SoundCloud Player (large, without Autoplay)'"}  {image-overlay image="small-image.jpg" link="http://twitpic.com/e59kre"}

{/toggle} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” text=”Gallery 6 Columns” align=”text-center” color=”color-theme”} {spacer height=”20px”} {gallery columns=”6″} {gallery-image image=”images/sampledata/gallery/1.jpg” caption=”This is a optional Caption”} {gallery-image image=”images/sampledata/gallery/2.jpg”} {gallery-image image=”images/sampledata/gallery/3.jpg”} {gallery-image image=”images/sampledata/gallery/4.jpg”} {gallery-image image=”images/sampledata/gallery/5.jpg”} {gallery-image image=”images/sampledata/gallery/6.jpg”} {/gallery} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” text=”Gallery 5 Columns” align=”text-center” color=”color-theme”} {spacer height=”20px”} {gallery columns=”5″} {gallery-image image=”images/sampledata/gallery/1.jpg” caption=”This is a optional Caption”} {gallery-image image=”images/sampledata/gallery/2.jpg”} {gallery-image image=”images/sampledata/gallery/3.jpg”} {gallery-image image=”images/sampledata/gallery/4.jpg”} {gallery-image image=”images/sampledata/gallery/5.jpg”} {gallery-image image=”images/sampledata/gallery/6.jpg”} {gallery-image image=”images/sampledata/gallery/7.jpg”} {gallery-image image=”images/sampledata/gallery/8.jpg”} {gallery-image image=”images/sampledata/gallery/9.jpg”} {gallery-image image=”images/sampledata/gallery/10.jpg”} {/gallery} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” text=”Gallery 4 Columns” align=”text-center” color=”color-theme”} {spacer height=”20px”} {gallery columns=”4″} {gallery-image image=”images/sampledata/gallery/1.jpg” caption=”This is a optional Caption”} {gallery-image image=”images/sampledata/gallery/2.jpg”} {gallery-image image=”images/sampledata/gallery/3.jpg”} {gallery-image image=”images/sampledata/gallery/4.jpg”} {gallery-image image=”images/sampledata/gallery/5.jpg”} {gallery-image image=”images/sampledata/gallery/6.jpg”} {gallery-image image=”images/sampledata/gallery/7.jpg”} {gallery-image image=”images/sampledata/gallery/8.jpg”} {/gallery} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” text=”Gallery 3 Columns” align=”text-center” color=”color-theme”} {spacer height=”20px”} {gallery columns=”3″} {gallery-image image=”images/sampledata/gallery/1.jpg” caption=”This is a optional Caption”} {gallery-image image=”images/sampledata/gallery/2.jpg”} {gallery-image image=”images/sampledata/gallery/3.jpg”} {gallery-image image=”images/sampledata/gallery/4.jpg”} {gallery-image image=”images/sampledata/gallery/5.jpg”} {gallery-image image=”images/sampledata/gallery/6.jpg”} {gallery-image image=”images/sampledata/gallery/7.jpg”} {gallery-image image=”images/sampledata/gallery/8.jpg”} {gallery-image image=”images/sampledata/gallery/9.jpg”} {/gallery} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” text=”Gallery 2 Columns” align=”text-center” color=”color-theme”} {spacer height=”20px”} {gallery columns=”2″} {gallery-image image=”images/sampledata/gallery/1.jpg” caption=”This is a optional Caption”} {gallery-image image=”images/sampledata/gallery/2.jpg”} {gallery-image image=”images/sampledata/gallery/3.jpg”} {gallery-image image=”images/sampledata/gallery/4.jpg”} {/gallery} {spacer height=”40px”} {toggle1 title=”Shortcode”}

{gallery columns="4"}   {gallery-image image="image1.jpg"}   {gallery-image image="image2.jpg"}   {gallery-image image="image3.jpg"}   {gallery-image image="image4.jpg"} {/gallery}

{/toggle}

Posted on by GM in Features Leave a comment

Icons

{headline type=”h2″ style=”heading-single” color=”color-theme” align=”text-center” text=”Font Awesome default Icons”} {spacer height=”20px”} {headline type=”h5″ text=”Default Icons”}

This is a example of the default Font Awesome Icons in different Colors and with size fa-5x.

{spacer height=”10px”} {icon name=”fa-joomla fa-5x”}     {icon name=”fa-leaf fa-5x” color=”color-black”}     {icon name=”fa-flask fa-5x” color=”color-theme”}     {icon name=”fa-magic fa-5x” color=”color-success”}     {icon name=”fa-power-off fa-5x” color=”color-warning”}     {icon name=”fa-star-o fa-5x” color=”color-purple”}     {icon name=”fa-desktop fa-5x” color=”color-danger”}     {icon name=”fa-globe fa-5x” color=”color-orange”} {toggle1 title=”Shortcode”}

{icon name="fa-joomla" size="fa-5x"} {icon name="fa-leaf" size="fa-5x" color="color-black"} {icon name="fa-flask" size="fa-5x" color="color-theme"} {icon name="fa-magic" size="fa-5x" color="color-success"} {icon name="fa-power-off" size="fa-5x" color="color-warning"} {icon name="fa-star-o" size="fa-5x" color="color-purple"} {icon name="fa-desktop" size="fa-5x" color="color-danger"} {icon name="fa-globe" size="fa-5x" color="color-orange"}

{/toggle} {spacer height=”50px”} {headline type=”h5″ text=”Font Awesome default Icon sizes”}

This is a example of the default Font Awesome Icons in different Colors and with different sizes.

{spacer height=”10px”} {icon name=”fa-info”}     {icon name=”fa-lock fa-lg” color=”color-black”}     {icon name=”fa-magic fa-2x” color=”color-theme”}     {icon name=”fa-pencil fa-3x” color=”color-success”}     {icon name=”fa-power-off fa-4x” color=”color-warning”}     {icon name=”fa-file fa-5x” color=”color-purple”} {toggle1 title=”Shortcode”}

{icon name="fa-info"} {icon name="fa-lock" size="fa-lg" color="color-black"} {icon name="fa-magic" size="fa-2x" color="color-theme"} {icon name="fa-pencil" size="fa-3x" color="color-success"} {icon name="fa-power-off" size="fa-4x" color="color-warning"} {icon name="fa-file" size="fa-5x" color="color-purple"}

{/toggle} {spacer height=”50px”} {headline type=”h5″ text=”Font Awesome round icons”}

This is a example of the default Font Awesome Icons in solid round style.

{spacer height=”10px”} {icon-round name=”fa-info”}     {icon-round name=”fa-lock” color=”bg-color-black” size=”fa-lg”}     {icon-round name=”fa-magic” color=”bg-color-theme” size=”fa-2x”}     {icon-round name=”fa-pencil” color=”bg-color-success” size=”fa-3x”}     {icon-round name=”fa-power-off” color=”bg-color-warning” size=”fa-4x”}     {icon-round name=”fa-file” color=”bg-color-purple” size=”fa-5x”} {toggle1 title=”Shortcode”}

{icon-round name="fa-info"} {icon-round name="fa-lock" size="fa-lg" color="color-black"} {icon-round name="fa-magic" size="fa-2x" color="color-theme"} {icon-round name="fa-pencil" size="fa-3x" color="color-success"} {icon-round name="fa-power-off" size="fa-4x" color="color-warning"} {icon-round name="fa-file" size="fa-5x" color="color-purple"}

{/toggle} {spacer height=”50px”} {headline type=”h5″ text=”Font Awesome round bordered icons”}

This is a example of the default Font Awesome Icons in round bordered style.

{spacer height=”10px”}

{icon-round-border name=”fa-info”}     {icon-round-border name=”fa-lock” color=”color-black” size=”fa-lg”}     {icon-round-border name=”fa-magic” color=”color-theme” size=”fa-2x”}     {icon-round-border name=”fa-pencil” color=”color-success” size=”fa-3x”}     {icon-round-border name=”fa-power-off” color=”color-warning” size=”fa-4x”}     {icon-round-border name=”fa-file” color=”color-purple” size=”fa-5x”}

{toggle1 title=”Shortcode”}

{icon-round-border name="fa-info"} {icon-round-border name="fa-lock" size="fa-lg" color="color-black"} {icon-round-border name="fa-magic" size="fa-2x" color="color-theme"} {icon-round-border name="fa-pencil" size="fa-3x" color="color-success"} {icon-round-border name="fa-power-off" size="fa-4x" color="color-warning"} {icon-round-border name="fa-file" size="fa-5x" color="color-purple"}

{/toggle} {spacer height=”50px”} {headline type=”h5″ text=”Font Awesome square icons”}

This is a example of the default Font Awesome Icons in solid square style.

{spacer height=”10px”}

{icon-square name=”fa-info”}     {icon-square name=”fa-lock” color=”bg-color-black” size=”fa-lg”}     {icon-square name=”fa-magic” color=”bg-color-theme” size=”fa-2x”}     {icon-square name=”fa-pencil” color=”bg-color-success” size=”fa-3x”}     {icon-square name=”fa-power-off” color=”bg-color-warning” size=”fa-4x”}     {icon-square name=”fa-file” color=”bg-color-purple” size=”fa-5x”}

{toggle1 title=”Shortcode”}

{icon-square name="fa-info"} {icon-square name="fa-lock" size="fa-lg" color="color-black"} {icon-square name="fa-magic" size="fa-2x" color="color-theme"} {icon-square name="fa-pencil" size="fa-3x" color="color-success"} {icon-square name="fa-power-off" size="fa-4x" color="color-warning"} {icon-square name="fa-file" size="fa-5x" color="color-purple"}

{/toggle} {spacer height=”50px”} {headline type=”h5″ text=”Font Awesome square bordered icons”}

This is a example of the default Font Awesome Icons in square bordered style.

{spacer height=”10px”}

{icon-square-border name=”fa-info”}     {icon-square-border name=”fa-lock” color=”color-black” size=”fa-lg”}     {icon-square-border name=”fa-magic” color=”color-theme” size=”fa-2x”}     {icon-square-border name=”fa-pencil” color=”color-success” size=”fa-3x”}     {icon-square-border name=”fa-power-off” color=”color-warning” size=”fa-4x”}     {icon-square-border name=”fa-file” color=”color-purple” size=”fa-5x”}

{toggle1 title=”Shortcode”}

{icon-square-border name="fa-info"} {icon-square-border name="fa-lock" size="fa-lg" color="color-black"} {icon-square-border name="fa-magic" size="fa-2x" color="color-theme"} {icon-square-border name="fa-pencil" size="fa-3x" color="color-success"} {icon-square-border name="fa-power-off" size="fa-4x" color="color-warning"} {icon-square-border name="fa-file" size="fa-5x" color="color-purple"}

{/toggle} {spacer height=”50px”} {headline type=”h2″ style=”heading-single” color=”color-theme” align=”text-center” text=”All available Icons”} {spacer height=”20px”}

Here you can see all available Icons. But in the Package is also a Editor Button integrated for easy usage.

{spacer height=”20px”}

All Font Awesome Icons

Posted on by GM in Features Leave a comment

Animations

{headline type=”h2″ style=”heading-single” align=”text-center” color=”color-theme” text=”Animations when a Element becomes visible”}

Here are some examples how to use the Shortcodes for the Animations. These Animation Effect will be activated when a Element, no matter which one, becomes visible, means when it comes into the Viewport.

{spacer height=”30px”} {alert style=”success”}Best of all: you can use the Animations on the Module Class Suffix, so you can animate nearly every element!{/alert} {spacer height=”40px”} {row} {col5}{animate effect=”bounceIn”}{/animate}{/col} {col7}

Animation bounceIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInDown”}{/animate}{/col} {col7}

Animation bounceInDown

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInLeft”}{/animate}{/col} {col7}

Animation bounceInLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInRight”}{/animate}{/col} {col7}

Animation bounceInRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”bounceInUp”}{/animate}{/col} {col7}

Animation bounceInUp

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeIn”}{/animate}{/col} {col7}

Animation fadeIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInDown”}{/animate}{/col} {col7}

Animation fadeInDown

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInDownBig”}{/animate}{/col} {col7}

Animation fadeInDownBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInLeft”}{/animate}{/col} {col7}

Animation fadeInLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInLeftBig”}{/animate}{/col} {col7}

Animation fadeInLeftBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInRight”}{/animate}{/col} {col7}

Animation fadeInRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInRightBig”}{/animate}{/col} {col7}

Animation fadeInRightBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInUp”}{/animate}{/col} {col7}

Animation fadeInUp

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”fadeInUpBig”}{/animate}{/col} {col7}

Animation fadeInUpBig

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”flipInX”}{/animate}{/col} {col7}

Animation flipInX

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”flipInY”}{/animate}{/col} {col7}

Animation flipInY

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”lightSpeedIn”}{/animate}{/col} {col7}

Animation lightSpeedIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateIn”}{/animate}{/col} {col7}

Animation rotateIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInDownLeft”}{/animate}{/col} {col7}

Animation rotateInDownLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInDownRight”}{/animate}{/col} {col7}

Animation rotateInDownRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInUpLeft”}{/animate}{/col} {col7}

Animation rotateInUpLeft

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rotateInUpRight”}{/animate}{/col} {col7}

Animation rotateInUpRight

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {row} {col5}{animate effect=”rollIn”}{/animate}{/col} {col7}

Animation rollIn

{spacer height=”10px”}

Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

{/col} {/row} {divider-circle-big-right class=”mb45 mt25″} {toggle1 title=”Shortcode”}

{animate effect="bounceIn"}Your Content or Element here{/animate}  Or use the Module Class Suffix: animation bounceIn Please do not forget the whitespace in front of animation)  Possible animation names:  bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig flipInX flipInY lightSpeedIn rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rollIn

{/toggle}

Posted on by GM in Features Leave a comment

Seperators & Dividers

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Circle Dividers Full”}

Here are some examples of the circle Dividers.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-big-left}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-circle-big-center}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-big-right}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-circle-big-left} {divider-circle-big-center} {divider-circle-big-right}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Circle Dividers Half”}

Here are some examples of the circle Dividers with half of the width.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-small-left}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-circle-small-center}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-circle-small-right}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-circle-small-left} {divider-circle-small-center} {divider-circle-small-right}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Special Dividers”}

Here are some examples of the special Dividers.

{spacer height=”40px”}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-default}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-fade}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-border}

Proin sodales commodo lectus sed vehicula. Maecenas sit amet magna nec enim tempor scelerisque.

{divider-icon icon=”fa-heart”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-rocket”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-book”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{divider-icon icon=”fa-cogs”}

Vivamus eu augue aliquam, mollis sem eget, gravida nibh. Suspendisse cursus dolor ac nisl condimentum faucibus.

{spacer height=”40px”} {toggle1 title=”Shortcode”}

{divider-default} {divider-fade} {divider-border} {divider-icon icon="fa-heart"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Spacer”}

This is a Element which can be very useful, it creates a transparent spacer area, for this Demo we have give them a Background Color so that you can see it.

{spacer height=”40px”}
{spacer height=”80px”}
{spacer height=”120px”}

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{spacer height="40px"}

{/toggle}

Posted on by GM in Elements Leave a comment

Tooltips & Popovers

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Tooltips”}

This is a basic example of the Tooltips, they are working with Shortcodes.

{spacer height=”40px”}

Vivamus {tooltip link=”#” text=”default Tooltip” title=”Hello I am a Tooltip”} lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top side, awesome, right!”} euismod semper.

Integer posuere erat a ante {tooltip link=”#” text=”Tooltip” title=”I am a Tooltip on the top”} venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis {tooltip link=”#” text=”Tooltip” title=”Hello I am a Tooltip on the top”} natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Vestibulum id ligula porta felis euismod semper. Donec {tooltip link=”#” text=”Tooltip with much Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.”} ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta  {tooltip link=”#” text=” Tooltip with much more Text” title=”Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. “} ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{tooltip text="Text here" title="Content here"} {tooltip text="Text here" title="Content here" link="http://www.google.de"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Popovers”}

This is a basic example of the Popover Shortcode.

{spacer height=”40px”}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom”}    |    {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”left” text=”Popover Left” class=”btn btn-default”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”Popover Top” class=”btn btn-primary”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Bottom” position=”bottom” text=”Popover Bottom” class=”btn btn-danger”} {popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Left” position=”right” text=”Popover Right” class=”btn btn-success”}

{divider-circle-big-left class=”mt30 mb40″}

{popover content=”Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.” title=”Popover Top” position=”top” text=”“}

{spacer height=”30px”} {toggle1 title=”Shortcode”}

Default Example {popover content="Content" title="Title" position="top" text="Click me"}  Button Example {popover content="Content" title="Title" position="top" text="Click me" class="btn btn-default"} 

{/toggle}

Posted on by GM in Elements Leave a comment

Labels

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Labels”}

This is a basic example of the Labels, they are working with Shortcodes.

{spacer height=”40px”}

Vivamus {label text=”default”} lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis {label text=”label-primary” color=”label-primary”} euismod semper.

Integer posuere erat a ante {label text=”label-success” color=”label-success”} venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis {label text=”label-info” color=”label-info”} natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Vestibulum id ligula porta felis euismod semper. Donec {label text=”label-warning” color=”label-warning”} ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta {label text=”label-danger” color=”label-danger”} ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna.

{spacer height=”20px”} {toggle1 title=”Shortcode”}

{label text="Text here"} {label text="Text here" color="label-primary"} {label text="Text here" color="label-success"} {label text="Text here" color="label-info"} {label text="Text here" color="label-warning"} {label text="Text here" color="label-danger"}

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Labels in Headlines”}

This is a basic example of the Labels, they are also working in Headlines.

{spacer height=”40px”}

Headline H1 {label text=”new”}

{spacer height=”30px”}

Headline H2 {label text=”new” color=”label-primary”}

{spacer height=”30px”}

Headline H3 {label text=”new” color=”label-success”}

{spacer height=”20px”}

Headline H4 {label text=”new” color=”label-info”}

{spacer height=”20px”}

Headline H5 {label text=”new” color=”label-warning”}

{spacer height=”20px”}

Headline H6 {label text=”new” color=”label-danger”}
Posted on by GM in Elements Leave a comment