{Theme} allows you to create three types of Media Sections. To each type you can add any content you want.
Parallax
Kenburns media section
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-stellar-background-ratio="0.3" data-height="500" data-type="parallax" data-bg-image="assets/images/demo-content/gallery_bigimage9.jpg" data-bg-image-mobile="assets/images/demo-content/gallery_bigimage9.jpg"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 class="ct-sectionTitle text-uppercase ct-u-text--white"> Parallax Section </h5> <br> data-type="parallax"<br> data-height="650" </div> </div> </div> </div> |
Kemburns
Parallax media section
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="500" data-type="kenburns" data-bg-image-mobile="assets/images/demo-content/gallery_bigimage10.jpg"> <div class="ct-mediaSection-kenburnsImageContainer"> <img src="assets/images/demo-content/gallery_bigimage10.jpg" alt="demo image"> <img src="assets/images/demo-content/gallery_bigimage10.jpg" alt="demo image"> <img src="assets/images/demo-content/gallery_bigimage10.jpg" alt="demo image"> </div> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 class="ct-sectionTitle text-uppercase ct-u-text--white"> Kenburns Section </h5> <br> data-type="kenburns"<br> data-height="650" </div> </div> </div> </div> </section> |
Video
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="700" data-type="video" data-bg-image-mobile="assets/images/demo-content/macaroon3.jpg"> <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"> <iframe src="https://player.vimeo.com/video/47707314?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/47707314">COSMETIC</a> from <a href="https://vimeo.com/user12756525">vambee</a> on <a href="https://vimeo.com">Vimeo</a>.</p> </div> <div class="ct-u-displayTable"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 class="ct-sectionTitle text-uppercase ct-u-text--white"> Video Section </h5> <br> data-type="video"<br> data-height="650" </div> </div> </div> </div> </div> </section> |
Remember to include plugin jquery.stellar.min.js to page where you are using media sections for proper element working.