Append Sliders to Your Header

Why Use Revolution Slider

The Revolution Slider plugin is the main bundled plugin to add sliders to the website in the X and Pro themes. It gives endless options and settings to create sliders. We encourage that you get familiar with the ins and outs of the plugin to create beautiful sliders and add them to the website. Click here for more information about Revolution Slider. We assume that you already added a slider using the Revolution Slider plugin for the rest of the article.

How to Add the Slider Below the Website’s Header

You can add the slider to the below section of the header of each page of the website by going to the edit screen of the page in question and find the Slider Settings: Below Masthead section below the standard WordPress editor. The Masthead is referred to the whole header section of the website including the Logo, Navigation and etc. Click here to see a live demo of the slider below the masthead.

• Slider: All the sliders that you create in the Revolution Slider plugin will be listed here so you can select to show on this page.
• Optional Background Video: You can add the URL of the video files which will be added as a background of the slider. You need to add multiple video formats to make sure you will have a cross-browser experience. Separate each file URL with the pipe (|) character. Recommended file types to add are mp4, ogv, and webm.

• Video Poster Image (For Mobile): The background video feature will not be available for the mobile devices due to policies put in place by IOS and Android. Use this option to add a poster image which will replace the video when viewed by the mobile devices. Click Select Background Image(s) to open up the standard media selector dialog of the WordPress to select the image.

• Enable Scroll Bottom Anchor: Enable this option if you want to have a scroll to bottom icon added on top of the slider. Clicking the icon will force the page to scroll past the slider and show the rest of the website content.

• Scroll Bottom Anchor Alignment: Select proper alignment of the scroll to the bottom icon and position it on the slider.
• Scroll Bottom Anchor Color: Select the color of the icon depending on the content of the slide. If the slide is dark, use a light color and vice versa.
• Scroll Bottom Anchor Color Hover: Select the hover color of the icon here.

The slider will be positioned below the header in this case. You can implement the scroll bottom anchor or the video background inside the Revolution Slider too and it's up to you to decide which option to use.

How to Add the Slider Above the Website’s Header

The process of adding the slide above the header of the website is the same as we described above, with the difference that the same options will be available in the Slider Settings: Above Masthead section. Click here to see a live demo of the slider above the masthead.

How Else You Can Add a Slider to the Website

You can also use the Cornerstone in the X and Content Builder in the Pro theme to add the sliders created with the Revolution Slider plugin using the Classic Revolution Slider element. So you are not limited to add the slider only above or below the header of the website and you can literally add the slider wherever you want on the page.

The above/below masthead feature lists the slides created by the LayerSlider extension too if you feel more comfortable using that.

Summary

We learned about the settings available on each page editing screen to add the sliders which you have created with the Revolution Slider, above or below the header of the website. We also discussed the additional settings at hand to add more features to the slide such as the scroll bottom anchor and video background.