Video header

(Add the following shortcode into the BannerPane)

<!-- Copy this code into any of Banner Panes specifying correct path to video files -->
<div class="homepage-hero-module" data-vide-bg="/Portals/0/video/explore" data-vide-options="position: 50% 100%, muted: true, loop: true, autoplay: true">
    <div class="wsc-dottedoverlay twoxtwo"></div>
    <!--Caption wrapper start-->
    <div class="wsc-banner-caption-wrapper wsc-content-white">
        <div class="container">
            <div class="wsc-banner-caption wsc-banner-caption-center ">
                <h2 class="animation fadeInUp animation-delay-1000">
                    <strong>Welcome to Generic4</strong>
                </h2>
                <h5 class="animation fadeInUp animation-delay-1200">
                    Create just what you need for your Perfect Website. Choose from a wide range of
                    Elements &amp; simply put them on our Generic4.
                </h5>
                <br />
                <a class="animation animation-delay-1400 fadeInUp wsc-button wsc-button-large wsc-button-light wsc-button-border"
                    href="#">Purchase Today</a>
            </div>
        </div>
    </div>
    <!--End caption wrapper-->
</div>

Overlay pattern 1

<div class="wsc-dottedoverlay twoxtwo"></div> 

Overlay pattern 2

<div class="wsc-dottedoverlay twoxtwowhite"></div> 

Overlay pattern 3

<div class="wsc-dottedoverlay threexthree"></div> 

Overlay pattern 4

<div class="wsc-dottedoverlay threexthreewhite"></div> 

Overlay dark

<div class="wsc-solid-overlay wsc-dark-overlay"></div> 

Overlay white

<div class="wsc-solid-overlay wsc-white-overlay"></div> 

Overlay dark more

<div class="wsc-solid-overlay wsc-dark-overlay-more"></div> 

Overlay white less

<div class="wsc-solid-overlay wsc-white-overlay-less"></div> 

Blur effect

<video class="fillWidth wsc-blur" autoplay="autoplay" loop="loop">
...
</video>

Blur effect more

<video class="fillWidth wsc-blur-more" autoplay="autoplay" loop="loop">
...
</video>

Blur effect less

<video class="fillWidth wsc-blur-less" autoplay="autoplay" loop="loop">
...
</video>

Content color white

<div class="wsc-banner-caption wsc-banner-caption-center wsc-content-white"> 
<h3 class="animation fadeInUp animation-delay-500"><strong>Welcome to Generic4</strong></h3> 
<h6 class="animation fadeInUp animation-delay-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6> 
</div>

Content color dark

<div class="wsc-banner-caption wsc-banner-caption-center wsc-content-dark"> 
<h3 class="animation fadeInUp animation-delay-500"><strong>Welcome to Generic4</strong></h3> 
<h6 class="animation fadeInUp animation-delay-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6> 
</div>

Alternative alignment: left

<div class="wsc-banner-caption wsc-banner-caption-left wsc-content-white"> 
<h3 class="animation fadeInUp animation-delay-500"><strong>Welcome to Generic4</strong></h3> 
<h6 class="animation fadeInUp animation-delay-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
<a class="animation animation-delay-900 fadeInUp wsc-button wsc-button-light wsc-button-border" href="#">Purchase Today</a>
</div>

Alternative alignment: right

<div class="wsc-banner-caption wsc-banner-caption-right wsc-content-white"> 
<h3 class="animation fadeInUp animation-delay-500"><strong>Welcome to Generic4</strong></h3> 
<h6 class="animation fadeInUp animation-delay-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
<a class="animation animation-delay-900 fadeInUp wsc-button wsc-button-light wsc-button-border" href="#">Purchase Today</a>
</div>