1. Slider
  2. Home Layout 1
  3. Home Layout 2
  4. Home Layout 3
  5. index American
  6. index Asian
  7. index Pizaa
  8. Index Burger
  9. Index Bakery
  10. Index Cafe
  11. Index One Page Vertical
  12. One Page Full Screen Background
  13. One Page Parallax Background
  14. One Page Zooming BG Slider
  15. Background Slider Fade
  16. Swiper Slider
  17. Swiper Slider Top
  18. Full Width Slider
  19. HTML5 Video BG
  20. Youtube BackGround
  21. Viemo BackGround
  22. Interactive BackGround
  23. Animations BackGround
  24. CSS Animations

<< RETURN TO HOME

Slider

Majesty theme come with 9 slider, background Sliders and video Background with 5 different menu position and can be ligth or dark with transparent . and vertical menu.

To enable metabox for slider in From page Page Attributes select page Builder with slider OR Blank Page.

Most of slider come with more options to control it without write jQuery code.

Create Slider::

  1. Create a new page, and add title for this page.
  2. From page Page Attributes select page Builder with slider OR Blank Page.
  3. click publish to display slider metabox
  4. Important: don't use solid menu when you using slider, solid menu is good if you don't need slider like home layout 4 in demo

Home Layout 1 - using JQUERY.MB.BGNDGALLERY

if you using XML Demo Content this page mean index 01.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select Zoom.
  6. in field Timer set 1000.
  7. in field effTimer set 15000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase margin-tb-30">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white">DISCOVER MORE</a>
</div>

Home Layout 2 - Youtube Video Background

if you using XML Demo Content this page mean index 02.

Youtube Video Background depend on jquery mb YTPlayer, you can read documentation about this jquery here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Light With Center Logo.
  4. in field Select Slider select Youtube Video Background.
  5. in field Youtube URL Add URL for youtube video.
  6. in field Poster Image upload your image this image used if user browser not support video.
  7. in field Overaly Transparent 0.3.
  8. in field content add the code under, and don't forget wrap your code with div has css class 'container dark slider-content'.
  9. for other fields select what you need or ignore it. to know more about this fields go to documentation page for this jQuery .
  10. Important i used OWL carouser here so you need to load jQuery for this. to do that go to theme options > advanced jQuery > OWL Carousel Jquery and select this page to load jQuery OWL Slider in this page
<div class="container dark slider-content">
<i class="icon-top-draw"></i>
<div id="text-transform" class="owl-carousel">
<div class="item">
<h1>Premium Restaurant Theme</h1>
</div>
<div class="item">
<h1>KEEP CALM & TASTE OUR FOOD</h1>
</div>
<div class="item">
<h1>Premium Restaurant Themes</h1>
</div>
</div>
<p class="font2">We Create Delicous Memories</p>
<i class="icon-bottom-draw"></i>
</div>

Home Layout 3 - Swiper jQuery Slider

if you using XML Demo Content this page mean index 03.

you can read documentation about Swiper jQuery Slider here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Dark Bottom Center Menu.
  4. in field Select Slider select Swiper jQuery Slider.
  5. in field Direction select Horizontal.
  6. in field Effect Slide.
  7. in field Loop True.
  8. in field Speed 300.
  9. in field navigation Arrow True.
  10. in field navigation Bullet False.
  11. After that ADD Slide each slide can be image OR HTML5 Video
  12. Slide 1
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select no.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<div class="logo">
<a href="#" class="light-logo"><img src="" alt="Logo"></a>
</div>
<h2>HOME OF THE BEST CUISINE</h2>
<h4 class="text-capitalize">We open 24 Hours.</h4>
</div>
  13. Slide 2
    1. in field Type Background HTML5 Video.
    2. in field Background Image Upload your image this used as poster here if user browser not support video.
    3. in field MP4 File URL Add URL to mp4 file.
    4. in field WebM File URL Add URL to WebM file.
    5. in field Overaly select Transparent 0.5.
    6. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      7. <div class="slider-content ">
<div class="logo">
<a href="#" class="light-logo"><img src="#" alt="Logo"></a>
</div>
<h2>FROM AN an Outstanding Chef</h2>
<h4 class="text-capitalize">We Create Sweet Memories.</h4>
</div>
  14. Slide 3
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.5.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<div class="logo"><a href="#" class="light-logo"><img src="#" alt="Logo"></a></div>
<h2>FROM AN an Outstanding Chef</h2>
<h4 class="text-capitalize">We Create Sweet Memories.</h4>
</div>

index American - Swiper jQuery Slider

see this.

Index Asian - using JQUERY.MB.BGNDGALLERY

see this slider this.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select Slide UP.
  6. in field Timer set 3000.
  7. in field effTimer set 2000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase mt30 mb30">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white">DISCOVER MORE</a>
</div>

index Pizaa - Youtube Video Background

if you using XML Demo Content this page mean index pizza.

Youtube Video Background depend on jquery mb YTPlayer, you can read documentation about this jquery here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Light With Center Logo.
  4. in field Select Slider select Youtube Video Background.
  5. in field Youtube URL Add URL for youtube video.
  6. in field Poster Image upload your image this image used if user browser not support video.
  7. in field Overaly Transparent 0.3.
  8. in field content add the code under, and don't forget wrap your code with div has css class 'container dark slider-content'.
  9. for other fields select what you need or ignore it. to know more about this fields go to documentation page for this jQuery .
<div class="container dark slider-content">
<i class="icon-top-draw"></i>
<div id="text-transform" class="owl-carousel">
<div class="item">
<h1>Premium Restaurant Theme</h1>
</div>
<div class="item">
<h1>KEEP CALM & TASTE OUR FOOD</h1>
</div>
<div class="item">
<h1>Premium Restaurant Themes</h1>
</div>
</div>
<p class="font2">We Create Delicous Memories</p>
<i class="icon-bottom-draw"></i>
</div>

Index Burger - using JQUERY.MB.BGNDGALLERY

if you using XML Demo Content this page mean Index Burger.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select Zoom.
  6. in field Timer set 6000.
  7. in field effTimer set 20000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase margin-tb-30">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white">DISCOVER MORE</a>
</div>

Index Bakery - using JQUERY.MB.BGNDGALLERY

if you using XML Demo Content this page mean Index bakery.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select fade.
  6. in field Timer set 4000.
  7. in field effTimer set 2000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase margin-tb-30">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white">DISCOVER MORE</a>
</div>

Index Cafe - using JQUERY.MB.BGNDGALLERY

see this slider this.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select Slide Down.
  6. in field Timer set 3000.
  7. in field effTimer set 2000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase mt30 mb30">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white">DISCOVER MORE</a>
</div>

Index One Page Vertical - Skipper jQuery Slider

if you using XML Demo Content this page mean Index One Page Vertical.

you can read documentation about Skipper jQuery Slider here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Vertical Menu.
  4. in field Select Slider select Skipper.
  5. in field Skipper Type select Full Height.
  6. in field transition Slide.
  7. in field Speed 500.
  8. in field navigation Arrow True.
  9. in field navigation Type Block.
  10. in field Auto Play true.
  11. in field autoPlayDuration true.
  12. in field hidePrevious false.
  13. After that ADD Slide
  14. Slide 1
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<span class="text-center"><img src="#" class="img-responsive aligncenter" alt=""></span>
<i class="icon-home-ico"></i>
<h1 class="text-uppercase" data-caption-animate="fadeInUp">Come in & Taste</h1>
</div>
  15. Slide 2
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<span class="text-center"><img src="#" class="img-responsive aligncenter" alt=""></span>
<i class="icon-home-ico"></i>
<h1 class="text-uppercase" data-caption-animate="fadeInUp">HIGH CLASS PROFESSIONAL SERVICE</h1>
</div>
  16. Slide 3
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<span class="text-center"><img src="#" class="img-responsive aligncenter" alt=""></span>
<i class="icon-home-ico"></i>
<h1 class="text-uppercase" data-caption-animate="fadeInUp">We Create Sweet Memories</h1>
</div>

Index One Page Full Screen Background

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Full Screen Background.
  5. in field Background Image Upload Your images.
  6. in field Overaly Transparent 0.3.
  7. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
  8. if you need add link to go down for custom section add this after end div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h1 class="text-uppercase">Come in & Taste</h1>
</li>
<li>
<h1 class="text-uppercase">HIGH CLASS PROFESSIONAL SERVICE</h1>
</li>
<li>
<h1 class="text-uppercase">From an Outstanding Chef</h1>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
</div>
<a href="#" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Index One Page Parallax Background

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Parallax Background.
  5. in field Background Image Upload Your images.
  6. in field Overaly Transparent 0.3.
  7. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
  8. if you need add link to go down for custom section add this after end div has css class 'slider-content'.
<div class="slider-content">
<ul class="text-rotator">
<li>
<h1 class="text-uppercase">Come in & Taste</h1>
</li>
<li>
<h1 class="text-uppercase">HIGH CLASS PROFESSIONAL SERVICE</h1>
</li>
<li>
<h1 class="text-uppercase">From an Outstanding Chef</h1>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white scroll-down">Our Menu</a>
</div>
<a href="#" class="go-down"><i class="fa fa-angle-double-down"></i></a>

One Page Zooming Background Slider - using JQUERY.MB.BGNDGALLERY

if you using XML Demo Content this page mean Index One Page Zooming.

you can read documentation about jQuery BGNDGALLERY here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Background Slider.
  5. in field transition select Zoom.
  6. in field Timer set 1000.
  7. in field effTimer set 15000.
  8. in field Overaly Transparent 0.3.
  9. in field Slider Images Upload Your images.
  10. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h2 class="text-uppercase">Come in & Taste</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious food</h2>
</li>
<li>
<h2 class="text-uppercase">most delicious desserts</h2>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="text-uppercase">We Create Sweet Memories</p>
<a href="#" class="btn btn-gold white scroll-down">DISCOVER MORE</a>
</div>

Background Slider Fade - Skipper jQuery Slider

if you using XML Demo Content this page mean Index One Page Full width.

you can read documentation about Skipper jQuery Slider here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default Menu.
  4. in field Select Slider select Skipper.
  5. in field Skipper Type select Full width.
  6. in field transition fade.
  7. in field Speed 500.
  8. in field navigation Arrow false.
  9. in field navigation Type Bubble.
  10. in field Auto Play true.
  11. in field autoPlayDuration 5000.
  12. in field hidePrevious true.
  13. After that ADD Slide
  14. Slide 1
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<h1>Come in & Taste</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
</div>
<a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>
  15. Slide 2
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<h1>HIGH CLASS PROFESSIONAL SERVICE</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
</div>
<a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>
  16. Slide 3
    1. in field Background Image Upload your image.
    2. in field Overaly select Transparent 0.3.
    3. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      4. <div class="slider-content">
<h1>HIGH CLASS PROFESSIONAL SERVICE</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
</div>
<a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Swiper Slider - Swiper jQuery Slider

if you using XML Demo Content this page mean Index One page Slider.

you can read documentation about Swiper jQuery Slider here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Dark Bottom Center Menu.
  4. in field Select Slider select Swiper jQuery Slider.
  5. in field Direction select Horizontal.
  6. in field Effect Slide.
  7. in field Loop True.
  8. in field Speed 300.
  9. in field navigation Arrow True.
  10. in field navigation Bullet False.
  11. After that ADD Slide each slide can be image OR HTML5 Video
  12. Slide 1
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.3.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<div class="logo">
<a href="#" class="light-logo"><img src="#" alt="Logo"></a>
</div>
<h1>HOME OF THE BEST CUISINE</h1>
<h4 class="text-capitalize">We open 24 Hours.</h4>
</div>
  13. Slide 2
    1. in field Type Background HTML5 Video.
    2. in field Background Image Upload your image this used as poster here if user browser not support video.
    3. in field MP4 File URL Add URL to mp4 file.
    4. in field WebM File URL Add URL to WebM file.
    5. in field Overaly select Transparent 0.5.
    6. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      7. <div class="slider-content ">
<div class="logo">
<a href="#" class="light-logo"><img src="#" alt="Logo"></a>
</div>
<h2>FROM AN an Outstanding Chef</h2>
<h4 class="text-capitalize">We Create Sweet Memories.</h4>
</div>
  14. Slide 3
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.5.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<div class="logo"><a href="#" class="light-logo"><img src="#" alt="Logo"></a></div>
<h2>FROM AN an Outstanding Chef</h2>
<h4 class="text-capitalize">We Create Sweet Memories.</h4>
</div>

Swiper Slider Top - Swiper jQuery Slider

if you using XML Demo Content this page mean Index One page Slider top.

you can read documentation about Swiper jQuery Slider here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select Dark Bottom Center Menu.
  4. in field Select Slider select Swiper jQuery Slider.
  5. in field Direction select Vertical.
  6. in field Effect Slide.
  7. in field Loop True.
  8. in field Speed 300.
  9. in field navigation Arrow false.
  10. in field navigation Bullet true.
  11. After that ADD Slide each slide can be image OR HTML5 Video
  12. Slide 1
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.3.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<h1 class="text-capitalize">From an Outstanding Chef</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2 skipperparaghraph">We Create Sweet Memories</p>
</div>
  13. Slide 2
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.3.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<h1 class="text-capitalize">HIGH CLASS PROFESSIONAL SERVICE</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2 skipperparaghraph">We Create Sweet Memories</p>
</div>
  14. Slide 3
    1. in field Type Background Image.
    2. in field Background Image Upload your image.
    3. in field Overaly select Transparent 0.5.
    4. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
      5. <div class="slider-content">
<h1 class="text-capitalize">Come in & Taste</h1>
<i class="icon-home-ico"></i>
<p class="mt30 font2 skipperparaghraph">We Create Sweet Memories</p>
</div>

Full Width Slider - Skipper jQuery Slider

if you using XML Demo Content this page mean Index One Page Full width.

you can read documentation about Skipper jQuery Slider here to know about options avilable for this plugin in theme.

see this.

HTML5 Video Background

if you using XML Demo Content this page mean Index One Page Video.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select HTML5 Video.
  5. in field MP4 File URL Add URL to mp4 file.
  6. in field WebM File URL Add URL to WebM file.
  7. in field poster Image Upload Your images. if user browser not support video
  8. in field Overaly select Transparent 0.5.
  9. in field content add the code under, and don't forget wrap your code with div has css class 'video-content'.
<div class="video-content">
      <ul class="text-rotator">
        <li>
          <h1 class="text-uppercase">Come in & Taste</h1>
        </li>
        <li>
          <h1 class="text-uppercase">HIGH CLASS PROFESSIONAL SERVICE</h1>
        </li>
        <li>
          <h1 class="text-uppercase">From an Outstanding Chef</h1>
        </li>
      </ul>
      <
      <i class="icon-home-ico"></i>
      <p class="mt30 font2">We Create Sweet Memories</p>
    </div>
<a href="#" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Youtube Background - Youtube Video Background

if you using XML Demo Content this page mean Index One page Youtube.

Youtube Video Background depend on jquery mb YTPlayer, you can read documentation about this jquery here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu..
  4. in field Select Slider select Youtube Video Background.
  5. in field Youtube URL Add URL for youtube video.
  6. in field Poster Image upload your image this image used if user browser not support video.
  7. in field Overaly Transparent 0.3.
  8. in field content add the code under, and don't forget wrap your code with div has css class 'container dark slider-content'.
  9. for other fields select what you need or ignore it. to know more about this fields go to documentation page for this jQuery .
  10. if you need add link to go down for custom section add this after end div has css class 'container dark slider-content'.
  11. Important i used OWL carouser here so you need to load jQuery for this. to do that go to theme options > advanced jQuery > OWL Carousel Jquery and select this page to load jQuery OWL Slider in this page
<div class="container dark slider-content">
<i class="icon-top-draw"></i>
<div id="text-transform" class="owl-carousel">
<div class="item">
<h1>Premium Restaurant Theme</h1>
</div>
<div class="item">
<h1>KEEP CALM & TASTE OUR FOOD</h1>
</div>
<div class="item">
<h1>Premium Restaurant Themes</h1>
</div>
</div>
<p class="font2">We Create Delicous Memories</p>
<i class="icon-bottom-draw"></i>
</div>
<a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Viemo Background - jQuery okvideo

if you using XML Demo Content this page mean Index One Page Viemo.

viemo Video Background depend on jquery okvideo, you can read documentation about this jquery here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu..
  4. in field Select Slider select .
  5. in field Vimeo URL Add URL for youtube video.
  6. in field Poster Image upload your image this image used if user browser not support video.
  7. in field Overaly Transparent 0.7.
  8. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content container'.
  9. for other fields select what you need or ignore it. to know more about this fields go to documentation page for this jQuery .
  10. if you need add link to go down for custom section add this after end div has css class 'container dark slider-content'.
<div class="slider-content  container ">
<i class="icon-home-ico"></i>
<h1 class="text-uppercase">COME ON IN & ENJOY YOUR FOOD</h1>
<p class="text-uppercase">Aenean sodales dictum augue, in faucibus nisi sollicitudin eu. Nulla semper arcu vel diam auctor.</p>
</div>
<a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Interactive Background -

if you using XML Demo Content this page mean Index One Page Interactive.

This used jquery interactive bg, you can read documentation about this jquery here to know about options avilable for this plugin in theme.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Interactive Background.
  5. in field Background Image Upload Your images.
  6. in field Overaly Transparent 0.3.
  7. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
  8. if you need add link to go down for custom section add this after end div has css class 'slider-content'.
<div class="slider-content">
<ul class="text-rotator">
<li>
<h1 class="text-uppercase">Come in & Taste</h1>
</li>
<li>
<h1 class="text-uppercase">HIGH CLASS PROFESSIONAL SERVICE</h1>
</li>
<li>
<h1 class="text-uppercase">From an Outstanding Chef</h1>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
</div>
 <a href="#about" class="go-down"><i class="fa fa-angle-double-down"></i></a>

Animations Background

if you using XML Demo Content this page mean Index One Page Animation BG.

  1. go to top how to know how to display slider metabox for page.
  2. in metabox Header & slider Settings.
  3. in field Select Header & Menu select default menu.
  4. in field Select Slider select Movement Background.
  5. in field Background Image Upload Your images.
  6. in field Overaly Transparent 0.3.
  7. in field content add the code under, and don't forget wrap your code with div has css class 'slider-content'.
<div class="slider-content">
<ul id="fade">
<li>
<h1 class="text-uppercase">Come in & Taste</h1>
</li>
<li>
<h1 class="text-uppercase">HIGH CLASS PROFESSIONAL SERVICE</h1>
</li>
<li>
<h1 class="text-uppercase">From an Outstanding Chef</h1>
</li>
</ul>
<i class="icon-home-ico"></i>
<p class="mt30 font2">We Create Sweet Memories</p>
<a href="#ourmenu" class="btn btn-gold white scroll-down">Our Menu</a>
</div>

CSS Animations

if you using XML Demo Content this page mean Index One Page Animation BG.

see this.