This video tutorial will cover everything you need to learn how to use the slider revolution 6. We’ll show you everything in this slider revolution tutorial so you really know how to use the slider revolution 6.

I hope you enjoy this updated video tutorial on how to use the slider revolution 2021. The last time we created this video was in 2016 and it was really well received. I hope we can do the same this time!

# 1: Get the Slider Revolution

The slider revolution is a premium plugin. I’m going to assume you already know that but if you didn’t, that means you have to pay for it. Yea, its a bummer but sometimes the best tools and resources are not free.

But you get a lot with the slider revolution, including free upgrades! Which is essential!

There are wo places you can get the Slider revolution and it really depends on you which you prefer.

• Slider revolution website – subscription

• Themeforest website – one time payment

Check which one you prefer but please use our link because it is an affiliate link so we get a small commission for referring you (no charge to you).

#2: Install/Activate the Slider Revolution

Once you download the slider revolution, you will want to make sure it is a zip file so you can install it as a plugin.

1. Now just go to the plugins page on your wordpress website and install the slider revolution.
2. Then activate it.

Now we can go and put in our code to activate the plugin for updates

1. Click on the Slider revolution tab on the right hand side.
2. On the top you should see Activation
3. Put in your activation code so you can register

You need to activate everything so you can access all the templates and library from the slider revolution 6.

Now we’re ready to go to learn how to make our first slider using the slider revolution 6!

#3a: Make A New Slider

To make a new slider —

1. Go to the modules tab
2. Click “New Blank Module”
3. Go through the Start Guide
4. Choose Scene (or slider or carousel)
5. Choose full screen (or any of the others)
6. Choose intelligent inheriting
7. Click go to Editor

Now we are going to learn all about how to use the Slider revolution as we make our slider

#3b Overview of the Slider Revolution Editor

In this section, I’ll give an overview of how to use the slider revolution. But the best way to really show you is by going through our exercise of using he slider.

It’s best to watch our video tutorial on the overview because there is a lot of little things and it would take forever to type up.

#4 Create Hero Slider

• Click on slider revolution
• Click on new module
• Choose slider option
• Full width
• Change the dimensions to 1200 x 600px
• Go to Defaults to change slide duration
• Go to Slide Options at the upper right top
• Click on Background
• Select Video Option
• Paste in video ID
• Go down to play button area and put in when you want the video to start and finish
• Go to the thumbnail tab and select your thumbnail
• Now go to the animation tab and you can change how the slider transitions in
• We just change the duration to 3000ms
• In the “on scroll section” go to parallax and select 10%

Now let’s add some layers!

Add an overlay

• Hover over Add layer and add a shape – rectangle
• Go to Size and Pos > select Cover
• Go to style and select color and transparency
• Let’s add a time frame for when we transition in (1500ms around 650 start time)
• We can also rename the overlay

Now let’s add a headline

• Click to add new layer – select text – select headline
• Choose the type (we can customize the font, so don’t worry too much what you select)
• Double click the text to change it (content button)
• Drag it where you want to place it and also use the Size and Position button
• Go to style to change the font to 70, 70, 800, -1
• Raleway (if you want)

Now let’s add a sub headline!

We’ll do all the steps above, just having different font and a different position.

• Click to add new layer – select text – select content
• Choose the type (we can customize the font, so don’t worry too much what you select)
• Double click the text to change it (content button)
• Drag it where you want to place it and also use the Size and Position button
• Go to style to change the font to 14, 20, 500, 4
• Raleway (if you want)

Now let’s add a button…if you want!

• Add a new layer > Button
• Select the type of button
• Change the content
• Drag it to where you want to place it
• Add some padding to it if you want in the style tab (10 top, 10 bottom, 30 right and left)
• I added a border (dotted and 1px all around)

Now let’s add an icon

• Select icon and search for film
• Move it to where you want it and center it
• Go to style and change it to 30, 30, 400, 3

Make sure you preview the slider so you can see what it looks like!

Now let’s talk about animating the layers

First, let me just tell you, that all the animations are 1500ms

We can time them to show up at different places by moving them on the slider scale

The slider runs for 9 seconds. You can change this on the Module General Options > defaults > slider duration section

Select the layer you want to animate

• Click animation
• Select in to choose animation for flowing in
• Choose animation
• Icon > slide from top
• Headline > Mask Zoom Out
• Subheadline > slide from bottom
• Button > slide from bottom

I change the start times on them to different times. Watch the video to see what I do.

Make sure you save your changes! And that’s all we need to do for this first slider! Onto the next…

#5 Before and After Slider (Multi Page)

• Add a new slider
• Go to Add ons in the general settings and enable before and after effect
• Go to the Slide options and add a background for the before and after tabs
• Lets add a new layer – in our example it will be a computer monitor.
• Change the size and position. Then go to the layer tab and the before and after button and select before
• then make a copy of this image
• and go and replace the image in the content tab
• and go and select after in the before and after tab
• Now we’ll just do the same thing for a text and button.

Just know that you can change the text and button and even positioning if you want for the before and after. It’s really up to you!

Super simple!

I’m going to add some animations and I’ll tell you what I add for each below and then we’re all done here!

Animations

I only added animations to the before side since that is what will be seen when the slider is loaded.

• Monitor – slide down
• Keyboard – rotate bottom
• Text – slide up or fade in (I chose one of the two)
• Button – slide up
• I timed them to happen – 2000ms
• and Just flowed them in at different times so its not all at the same Tim

#5 Ken Burns Effect

Let’s do something simple before we do something really cool. Let’s talk about the Ken Burns effect with the slider revolution.

Hover over Add Slide

And add a blank slide

Let’s add a background image from the slide options (I’ll use the object library)

Choose the original size option

Now let’s just add some basic layers and animations before we do the ken burns effect

#6 Portfolio Slider / Website

• New Slider
• Full screen
• Name it
• I decided to change the layout to fit my computer resolution better: so I put in 1400px x 868px

This is a multipage slider so lets add our first slider

Add a subheading – this is the text we use to have different color font

HI, MY NAME IS <span style="color: #fff;">JOHN</span> AND I LOVE

• The text is Raleway and the size is 20, 30, 300, 3
• The font color is #77777
• Now add two headlines
• And both fonts are Raleway and the size is 80, 70, 100, 5

• Now add a button
• The button will be Raleway font – 15, 15, 600, 1
• Padding – 13, 35, 13, 35

Now we need to make another slider page and then we can link the button to that page.

• So add a new slider on the upper left.
• You can change the title of it if you want
• Add a background image
• Now let’s add a text layer and I’m going to paste this in with some html code

SOME OF MY <span style="color: #fff;">BEST WORK</span>

• Align it and fix the font style if you want to make the rest of the site – Raleway, 20, 30, 300, 3
• Change the font color to #77777
• position – (460, 265)
• Now let’s add some thumbnails that we will use to link to the other slider pages
• We’ll add six and customize the size (width 250px, height 167px)
• The easiest way is to just duplicate the first one so you don’t have to change the size each time.
• Then just replace the image and move it to the right place
• from top left to right
• (460, 330), (720, 330), (980, 330)
• (460, 507), (720, 507), (980, 507)

Animations

• For the animations, we will have everything slide up from the bottom but cascade them based on the time they enter.
• All the animations will have a duration of 1500ms
• Make sure you also add some “out” animations

Link main slider button

• If you want to go back to the main slider and link the button, go back to the Slides link and click on the main slider
• Click on the button
• Go to actions
• Add the action to link to the second slider

Now we need to add our other sliders

• So add a new slider
• Add a background image
• Now let’s add a title – Raleway 20, 25, 400, 0
• Line them up to your liking. I use the grids.
• Add a sub headline text – Raleway 20, 30, 300, 3
• Now add a text box – 17, 30, 300, 2
• And a button with some margin if you want – Raleway, 15, 15, 600, 1
• Padding 13, 35, 13, 35

We create a few different slide pages for this portfolio slider. The steps are all the same and really depend on what you want to make. The best thing to do is watch the rest of the video tutorial on using the slider revolution 6.

I was typing this text tutorial as I was recording but never finished and might not make sense to keep typing it out. If you have a hard time following the video, let me know and I will have one of my freelancers finish this tutorial for you.

Thanks so much and keep on being amazing!

It looks like I need to finish the rest of this tutorial. In the mean time, go and check out the video on youtube.