Slider revolution is a most famous WordPress slider plugin. As the name of slider and its success the developers always bringing innovations to their slider revolution. Cause of the flexibility and ease of use we also have been using Slider revolution in all our premium WordPress themes since start.
Previously we explained how to edit, update, and copy slides. But after the launch of Revolution slider 6 our experienced developers faced problems to understand the new interface also. That made us curious and we thought to create a helpful video which you can watch below.
As you must have seen the video explains everything from scratch to end how to build a slider. Make sure you learn it completely how to make a slider because its the face of any WordPress website or other websites.
How to install Revolution Slider in WordPress
If you have bought the plugin the best way is connect envato API with your WordPress website and it would auto install and update your slider.
In other case if you have got the plugin with your WordPress theme. Please check Appearance >> install plugins that is where mostly premium WordPress themes have option to install packaged plugins.
If you have zip file then wp-admin >> plugins >> add new >> Upload plugin and upload your zip file.
After uploading the plugin activate it and you are ready to create your slider!
How to create a slider in Revolution Slider 6
Once you have installed and activated the slider revolution plugin now you would see Slider Revolution in sidebar menu in your WordPress admin screen.
Clicking on the menu you would now see some options by Slider revolution.
- New Blank Module (This would let you create blank slider)
- New Module from Template (Ready made templates only for registered slider versions)
- Manual Import (If you have exported slider or slider with your theme here you can import your slider)
- Add ons are also for registered plugins only you may check various available addons.
We are creating a slider from Blank module so we would click on New Blank Module. This would brought us to a blank and slider screen to work on.
Settings in Slider Revolution
The setting icon let you add various things from which we would require Title and Layout for now.
Enter Title and Slider alias
Add the title and slider alias and make sure its something recognizable. So in future slider name can tell you what the slider is about. Here you can also get the slider’s shortcode to put the slider in post, page or widgets.
Layout of Slider Revolution
In layout we have different types of available layouts to use for our slider.
- Type slider . Let you set your own sizes for layers
- Scene if selected the slider would be size of full screen or on which screen its loaded.
- Carousel would be rotation of multiple images.
For sizing if you want to display your slider full width then select full-width option. The full-screen option would display slider according to screen size on which slider is loaded.
Layer area sizes in Slider Revolution Layout
This is very important see if you have selected slider full width your layer area would definitely be the size of your template’s layout. For example if your template is using Bootstrap’s grid columns then the available area is 1200px for desktop.
Setting layer size properly would keep your content inside the layer area no matter if slider is full width content would stay inside layer size. So set the layer sizes as per your requirements also the slider size can be defined here.
Turn on the small sizes if you want to setup and run slider on all other type of screens. Turning them on would provide you option in top bar for making adjustments for small screens.
Set Navigation and Progress bar for slider
Now its time to set a navigation and progress bar if needed. Slider revolution offers different kind of navigations to move slides.
To find the navigation just above along setting icon you can find navigation icon to click on.
- Progress bar (Shows the progress when next slide would come)
- Arrows there are several types of arrows available for navigation
- Bullets and tabs and many more just check.
Set slider background in slide options
Now we are entering into the slide territory from the slider’s options and navigation options. Most important thing most people want to do is set slide background color or slide background image.
Set background image for Slider revolution’s slide
On top of side panel you can see main options 1) Slider settings 2) Navigation settings 3) Slide Options
If you are looking for images to use in your revolution slider, you can get an awesome discount using this coupon code for shutterstock
Select slide options icon just like in image above. Select background and there you can find a dropdown to select background color or background image.
If you select slide background image this would give you options to add background image. The size of background image its position repeat or not and everything else which can be needed.
Set background image for Slider revolution’s slide
So in case you want to add video background to your slider revolution slide. You have many main options of video types like.
- YouTube video in slide background
- Vimeo video in slide background
- HTML 5 video in slide background
Let’s say you want to add youtube video in your revolution slider’s slide background. In top of options panel select slide options, Background, YouTube video. And enter youtube video ID. For example in this URL: https://www.youtube.com/watch?v=qCDg61qUGa8 The video Id is qCDg61qUGa8.
Once you add this would start loading the background video in slide. To bring video poster as background image in mobile phone click on button youTube Poster.
Note: Videos doesn’t play auto on mobile phones.
Add layers to your slider’s slides
Now its most important part of any slider cause this is where we have the content for our slide. On top bar we can see Add Layer option there we have various type of layers.
So click on layers and add the layer whichever you need. Text, image, button, video, shape, audio, row etc.
Always group your layers this would help you to align all layers vertically or horizontally together. Without grouping the layers the work can be complex and not professional so always group your layers in slider revolution for better positioning.
How to add semi-transparent overlay to background or image
Add colored overlays to your Slides for extra styling, images have various colors and when you put a colored semi-transparent color above an image. The mixture produce several beautiful colors.
The main purpose is to increase visibility mostly so the text on image looks clear and readable.
- 1. Inside the Module Editor, select “Shape” from the “Add Layer” menu
- 2. Inside the Layer’s Size & Position settings, set the “Size Preset” to “Cover” and the “Layer Align” to “Scene”.
- 3. Adjust the background color of the Shape
For details check knowledge base of revolution slider.
We offer free slider fixes and creations to our WordPress maintenance service clients.