The website uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more.

Captions & Animations

Captions & Animations

Image Slide Captions


Up Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Call to Action


Down Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Call to Action


Left Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Call to Action


Right Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Call to Action

{include file="custom/widgets/widget_image_slide_captions.tpl"}

Image Flip Captions

First Caption Front

First Caption Back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor risus, venenatis et tellus eget, suscipit pretium erat.

Call to Action

Second Caption Front

Second Caption Back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor risus, venenatis et tellus eget, suscipit pretium erat.

Call to Action

Third Caption Front

Third Caption Back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor risus, venenatis et tellus eget, suscipit pretium erat.

Call to Action

Fourth Caption Front

Fourth Caption Back

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor risus, venenatis et tellus eget, suscipit pretium erat.

Call to Action

{include file="custom/widgets/widget_image_flip_captions.tpl"}

Image Reveal Captions Style 1

{include file="custom/widgets/widget_image_reveal_captions_01.tpl"}

Image Reveal Captions Style 2

First Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa...

Second Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa...

Third Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa...

Fourth Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa...

{include file="custom/widgets/widget_image_reveal_captions_02.tpl"}

Image Staff Captions

Some Person

CEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo...

Some Person

Sales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo...

Some Person

Support

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo...

Some Person

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam massa quis mauris sollicitudin commodo...

{include file="custom/widgets/widget_image_staff_captions.tpl"}

Call to Action Area

This is a Caption

You can use this block to place some important information


{include file="custom/widgets/widget_call_to_action.tpl" height="225px" padding="50px" bg="https://unsplash.it/1140/300/cats" caption="This is a Caption" size="40px" color="#fff" subcaption="You can use this block to place some important information" subsize="20px" subcolor="#fff" link="#link" title="Call to Action"}

Parallax Backgrounds Style 1 (Fixed Background)

This is a Caption

You can use this block to place some important information


{include file="custom/widgets/widget_parallax_fixed.tpl" height="300px" padding="75px" bg="https://unsplash.it/1140/600?random" caption="This is a Caption" size="48px" color="#fff" subcaption="You can use this block to place some important information" subsize="20px" subcolor="#fff" link="#link" title="Call to Action"}

Parallax Backgrounds Style 2 (Moving Background)

This is a Caption

You can use this block to place some important information


{include file="custom/widgets/widget_parallax_moving.tpl" height="300px" padding="75px" bg="https://unsplash.it/1140/1000?random" caption="This is a Caption" size="48px" color="#fff" subcaption="You can use this block to place some important information" subsize="20px" subcolor="#fff" link="#link" title="Call to Action"}

Images with Positioned Captions

Call to Action

H2 Caption Top Left

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="TL" padding="20px" width="100%" bg="https://unsplash.it/600/300?random" heading="h2" caption="H2 Caption Top Left" descr="You can use this block to place some important information" button="primary" link="#link" title="Call to Action"}
Call to Action

H2 Caption Top Right

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="TR" padding="20px" width="75%" bg="https://unsplash.it/600/300?random" heading="h2" caption="H2 Caption Top Right" descr="You can use this block to place some important information" button="success" link="#link" title="Call to Action"}
Call to Action

H3 Caption Bottom Left

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="BL" padding="20px" width="50%" bg="https://unsplash.it/600/300?random" heading="h3" caption="H3 Caption Bottom Left" descr="You can use this block to place some important information" button="danger" link="#link" title="Call to Action"}
Call to Action

H3 Caption Bottom Right

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="BR" padding="20px" width="auto" bg="https://unsplash.it/600/300?random"?random heading="h3" caption="H3 Caption Bottom Right" descr="You can use this block to place some important information" button="ghost" link="#link" title="Call to Action"}
Call to Action

H3 Caption Middle Left

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="MIDL" padding="20px" width="85%" bg="https://unsplash.it/600/300?random" heading="h3" caption="H3 Caption Bottom Left" descr="You can use this block to place some important information" button="danger" link="#link" title="Call to Action"}
Call to Action

H3 Caption Middle Right

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="MIDR" padding="20px" width="85%" bg="https://unsplash.it/600/300?random" heading="h3" caption="H3 Caption Bottom Right" descr="You can use this block to place some important information" button="ghost" link="#link" title="Call to Action"}
Call to Action

H3 Caption Middle

You can use this block to place some important information

Call to Action
{include file="custom/widgets/widget_image_with_positioned_caption.tpl" position="MID" padding="20px" width="50%" bg="https://unsplash.it/1200/300?random" heading="h3" caption="H3 Caption Middle" descr="You can use this block to place some important information" button="ghost" link="#link" title="Call to Action"}

Animations

Animate

Animated Basic Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis faucibus felis, ut dapibus nunc congue id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, ipsum ac ultrices condimentum, erat lacus sollicitudin quam, vel imperdiet nisi ex non sapien.
Pellentesque ut viverra lectus. Ut interdum lectus vel auctor faucibus. Sed blandit justo rutrum tortor ultrices, ac faucibus lorem posuere. Cras ornare suscipit felis, ut malesuada dolor interdum in. Nullam est nisl, hendrerit sit amet sodales mollis, imperdiet ac augue. Nulla volutpat nisl sed odio congue sollicitudin. Cum sociis natoque penatibus et magnis dis parturient.
Cras eros tortor, vulputate ac odio vel, mollis maximus arcu. Fusce tellus erat, mattis vel iaculis placerat, suscipit non dolor. Nam nec leo mi. Morbi ullamcorper tincidunt eros ut tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quam arcu, bibendum id varius vel, facilisis id ipsum. Praesent efficitur neque eget.
{include file="custom/widgets/widget_basic_slider_01.tpl" animationIn="bounceInRight" animationOut="bounceOutLeft" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_02.tpl" animationIn="zoomInUp" animationOut="flipOutX" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_03.tpl" animationIn="zoomIn" animationOut="zoomOut" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_04.tpl" animationIn="flipInX" animationOut="shake" stopOnHover="true" loop="true" delay="5000"}
{include file="custom/widgets/widget_basic_slider_05.tpl" animationIn="lightSpeedIn" animationOut="rotateOut" stopOnHover="true" loop="true" delay="5000"}

Animated Elements (When in Viewport)

{include file="custom/widgets/widget_animated_elements_01.tpl" effect="fadeInUp"}
{include file="custom/widgets/widget_animated_elements_02.tpl" effect="fadeInDown"}
{include file="custom/widgets/widget_animated_elements_03.tpl" effect="fadeInLeft"}
{include file="custom/widgets/widget_animated_elements_04.tpl" effect="fadeInRight"}

Animate Any Element (When in Viewport)