A lot of people are building really great websites but want to add that special little touch to their website. And that special little touch is a slider.

So I decided to create a ‘how to use the slider revolution guide’ so that you can add a slider to your wordpress website or homepage?

A slider for your wordpress website is great for a following reasons –

  1. A slider allows you to show your visitors what you’re all about on your homepage
  2. A slider allows you to direct your visitors where you want them to go on your wordpress website

The slider plugin that we’re going to recommend to everyone that has a wordpress website is the Slider Revolution.

The Slider Revolution is a premium plugin and the BEST there is because of all of its functionality

There are just too many things to list but its by far the best slider plugin available for wordpress websites if you don’t have a built in slider option for your website/homepage

If you’re on the fence with using the Slider Revolution…the good news is that it’s really not expensive. 🙂 But I’ll let you decide.

Now let’s start learning how to use the slider revolution to add a slider to your wordpress website (We’ll be adding the slider to your wordpress homepage but you can add it anywhere, I promise!)

Please note, you must have a WordPress website for the Slider Revolution plugin to work on your website. So if you do not have a WordPress website then please do not follow this tutorial. (Don’t get upset at me if you didn’t read this disclaimer!)

Step #1: Get the Slider Revolution Plugin for WordPress

The Slider Revolution is a premium plugin offered by Themeforest. You can get it here.

Once you purchase the plugin, all you have to do is go to the download tab and download the files.

Step #2: Install and Activate the Slider Revolution for your WordPress Website

  1. Go to your wordpress website dashboard
  2. Find plugins on the left hand side and hover over it and click Add New
  3. Click the add new button at the top of the page
  4. Click choose file and file the slider revolution zip (revslider.zip) file and click to upload it
  5. Now just click activate and you should be good to go

The slider revolution tab should now show up on the left hand side of your wordpress website dashboard. If so, then let’s move on to the next step 🙂

Step #3: Create a New Slider

  1. Go to the Slider revolution plugin’s main page by clicking on slider revolution on the left hand side of the dashboard
  2. Push the slide button near the stop that says “New Slider”
  3. Enter a Slider Title (1) and Alias (2), and click “Save”
  4. You’ll be redirected to the plugin’s main admin page where you’ll see your new slider listed
  5. Now you need to choose the “Content Source”
  6. We have a few options with the content source. If you are choosing an image from your media library -> choose Default Slider
  7. You want to add a slider name and alias (just a nickname) in the next section below content sources. This will help you create a shortcode that we can paste on our wordpress website to add our slider
  8. In the next section, you want to choose the slider type you want (there are no wrong choices here – just personal preferences)
  9. You can see on the thumbnails for the sliders what the differences are for these 3 different options
  10. Next, you can load some preset settings for your slider
  11. In the next section, you want to choose the layout for your slider. The default will be set at auto layout. Here are the differences:
    • Auto: The slider will always inherit the width of its immediate HTML container, allowing it to fit seamlessly inside your theme’s page layout.
    • Full-width: Slider will always stretch across the entire width of the screen.
    • Full screen: Slider will always become the same size as the entire screen size.
  12. In the slide layout section, you will see layer grids. They should all have “Custom Grid Size” and by default “No” will be selected. If you turn any of them “On”, you can edit the slider view for that device separately, otherwise everything will automatically change based on your slide layout choice. You will be able to select which device you want to edit from on the slider template page.

Perfect! Now we have a new slider. But we’re far from done (not in a bad way!)

Step #4: Choose Settings for Your Slider

What we are going to do now is choose our settings for our slider.

There are a lot of settings to go through, so we are just going to focus on the most important ones that will help you get your slier up and running on your wordpress website. Feel free to test things out on your own.

For demo purposes, I will explain to you what we do in the settings section.

General Settings

  1. On the general settings tab > go to the default tab and choose Stop Slide on Hover (this will pause the slider when your mouse is over the slider)
  2. Now go to the Defaults tab and change the Default Slide Duration to change the amount of time it takes to switch between slider images. I like to go with something around 4500 milliseconds so you don’t stay on any slide for too long but just long enough
  3. There is a drop down menu titled “Transitions” -> click that and choose how you want your images to transition. You can also choose these on each slider image instead of making a global setting for it.

Layout & Visual

There are some cool options in these tabs for the layout and visual.

Navigation

Please remember that you need to click enable and disable for what you want and don’t want to work

Parallax & 3D

Performance & SEO Optimization

Problem Handlings

Google Fonts

Import/Export Replace

API Functions

Step #5: Add new Slide to Slider

  1. To add a new slide, just go back to the top of the slider page you want to add the slide to and click the image that says “Add Slide”
  2. Then you can choose what type of slider background image/video you want in the next section

Here is where you can learn about the other content source options:

Pro Tip: You can add the demo sliders and check out how they are created if you need additional help.

All you have to do is register your Slider Revolution plugin to access the “library” or what the Slider Revolution plugin calls the “store”

  1. Go to the slider revolution plugin’s main page
  2. Click the Add Slider Template
  3. After choosing “Add Slider Template”, the official Template Store will then slide into view where you can view all of the available prebuilt, professional templates.
  4. Click the “magnifying glass” icon to preview the official template.  Click the “download” or “plus” icon to install the template.
  5. After choosing your template, choose how you want to import it.
    • “Online” will import the template automatically from the ThemePunch servers
    • You can also choose “Local” and import the slider from one of the demo zips included with the plugin’s original source.
      • If you choose Local > find a folder named “example-zips” by clicking the “browse” button
      • Locate the zip file listed in the green box from your computer
      • Then click “Import Template Slider”

Step #6 : Add Individual Slides

To link your entire slider image to another URL page

We are not going to link our slider to another page because we will be using buttons to do that

How to use Ken Burns Effect 

  1. To use ken burns -> after you add the background image you want. Just click on ken burns and turn it on.
  2. Then choose the scale and off settings you want.

Step #7: Customize Your Slider for your Homepage or Website

This is where we are going to add text and other cool effects to our slider. Are you excited?? 🙂

You’ll see right at the top of the slider image that there are a bunch of tabs in a header menu area. The first area we are going to focus on is the Style tab

Adding Text

  1. The first thing we want to do is add a text layer so we can add a header to our slider
  2. Hover over the blue button where the image shows for the slider that says Add Layer
  3. Select Text/Html
  4. Now type in whatever you want for your headline for your slider in the large black box
  5. You can drag the text box that shows up with the dotted lines to position it where you want
  6. Above the image you can also change the font style/size/color and alignment

Adding Images

Adding Videos

Play around with these video options and see what works for you and your wordpress website 🙂

Buttons

NYC TECH CLUB Tip: If you click on the arrow next to the style button above your slider image you will expand the menu options so you can modify the border and other fun things!

Slider effects

I will let you choose any sort of animations you want. This tutorial does not cover them.

Parallax Options

  1. If you enabled parallax for your slider, you can click on the button that says Parallax above the slider image
  2. Then just choose your settings in the drop down menu

Step #: Using Predefined Layer Settings (Optional section – not mandatory)

The Slider Revolution has some predefined styles that you can use to help set your font and slider apart from some generic look.

You can select different predefined layer settings for each layer or save the settings so your entire slider all the layers on this slide  have the same look at feel. Just follow the steps below (don’t click save changes if you want to choose different settings each time)

  1. After you create your new slider, scroll down to the slider image
  2. Right underneath the style button you will see a T
  3. This is where you can select your predefined layer settings
  4. You can also make any additional layer setting adjustments you want
  5. Once you’re done and happy with your setting options, hover over the disk to and click RENAME the settings for all of your layers (only do this step if you want all your other layers for this slide to have the same settings).
    1. You want to rename your settings so you don’t override the original

You can also choose the predefined look for each layer as you make it. So you DO NOT NEED TO DO this. This entire section is optional.

Step #5: Add the Slider to your WordPress website

There are a few ways to add your slider to your website.

Shortcode

Select Slider on Page Options

Adding a Slider through Your Widgets

Visual Composer

Enter a set of page ID’s to only display the slider on a set of specific pages (page ID’s separated by commas).

Step #6: Add Slider to Other Pages on WordPress Website

Paste in short code or use the menu option just like you would on your homepage 🙂

Step #7: Activate / Deactivate Slider

Step #8: Slide Options

If you click the pencil on the slider there are a few things you can do – I’m just going to list them here.

To change the order of your slides -> just click on the slider image and drag it where you want (if you have more than one slider image)

That’s pretty much all there is to the slider revolution.

If you activate your slider revolution then you can access the slider revolution store to download all the default and premium sliders that are already created from the slider revolution dashboard. We review this in our how to use the slider revolution plugin video.

To Follow the Demo Slider Tutorial

-> PLEASE DOWNLOAD THIS ZIP FILE WITH IMAGES (for tutorial purposes only, not for distribution or commercial use. They are part of the slider revolution).

Demo Slide #1:

  1. Create New Slider
  2. Content Source = Default Slider
  3. Title the slider and give it a short code
  4. Choose Standard slider
  5. Select full screen layout
  6. Save settings
  7. Scroll to the top > on the right hand side > select general settings > on Slideshow > turn on Stop Slider After > Change “At Slide” to 1 (if you want the slider to continuously change, do not turn on Stop Slider)
  8. Go to the Layout & Visual tab and in the spinner tab > turn off the spinner (if you want)
  9. Save settings again
  10. Now click on the button near the top that is titled “Slide Editor”
  11. You will be on the 1st slide when you get on the next page
  12. Go to main background and select the button titled Main/Background Image > click the button to choose your image
  13. Select the image you want and upload it
  14. Now you want to scroll down and add your different layers (icons, text, buttons)
  15. If you want to add an icon go to this website and what you want to do is copy the short code next to the icon
  16. Go back to your slide page > click Add layer > select text/html > paste the following into the text box -> <i class=”paste icon short code“></i>
  17. Now you can change the size of the icon and position (which we do in the video tutorial -> please watch and LIKE it!)
  18. The next thing we’re going to do is add a header title by doing the following steps > Add layer > select text/html > Type in your title
  19. In my title, I change the font size and the font to Raleway > you can also center the header, which I like to do (again watch the video)
  20. Now let’s add a sub-title by doing the same steps again > Add layer > choose text/html > type in whatever you want > change the font if you like > move your subtitle line wherever you want 🙂 … the Slider Revolution does have some default settings for some stuff and in this case it has a subtitle default setting we want, so you can just double click on this layer and right under the Style button select Nongeneric-subtitle and then it should look just like the demo 🙂
  21. The last thing we want to do for this first demo slider is add a button so > Add new layer > choose button > type in the text > then you can choose a default setting for a button or change the font or colors however you want
  22. Tip for buttons: If you want the button to hover or if you want to change the background of how everything looks > double click on the button > then click on the down arrow next to the Style menu button > you will see the section expand.
  23. Now on the right side you should see Idle and Hover. Idle is for how the button looks when your mouse is not over it. And hover is for the look when you hover over the button. If you want to change the background and border and look for the idle and hover look, make sure you click on Idle and Hover and change the settings.
  24. The one thing we want to make sure to do if we add a button or buttons to our slider is make sure we link it correctly. In this demo slider we are just linking it to the next slider so make sure you double click the slider button > now click on the button above that says “Action” > click the + and then choose Click > then choose the action you want (you can paste in a URL or whatever you want)…we will just choose Jump to next slide
  25. Make sure you click Save Settings before you finish up this slider. Then we can move on to the next slider image.

We add two slider images to this first demo slider. All you have to do to create the next slider image is go back to the top of the page and click on the + Add Slider and then follow the steps 10-24 above again to add your next slider 🙂

NYC TECH CLUB animation tip: If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

Demo Slider #2

  1. Create New Slider
  2. Content Source = Default Slider
  3. Title the slider and give it a short code
  4. Choose Standard slider
  5. Select full width layout
  6. I create custom grid sizes for the full width layouts for all four types in the next section
  7. Save settings
  8. Scroll to the top > on the right hand side > select general settings > on Slideshow > turn on Stop Slider After > Change “At Slide” to 1 (if you want the slider to continuously change, do not turn on Stop Slider)
  9. Go to the Layout & Visual tab and in the spinner tab > turn off the spinner
  10. Go to the Parallax & 3D tab and turn on Parallax
  11. Save settings again
  12. Now click on the button near the top that is titled “Slide Editor”
  13. You will be on the 1st slide when you get on the next page
  14. We are adding a Youtube video for this background image so click on the Youtube video button in the main background section
  15. You want to paste in the URL of the video you want – in our case for this demo slider we use “8dTzy_N0Pn4”
  16. In the same section, you’ll see a parallax tab down on the right > click on that > change the parallax level to whatever you want -> this just lets you decide how far you want the scroll to go before you move on from the slider
  17. Now you want to scroll down and add your different layers (icons, text, buttons)
  18. If you want to add an icon go to this website and what you want to do is copy the short code next to the icon
  19. Go back to your slide page > click Add layer > select text/html > paste the following into the text box -> <i class=”paste icon short code“></i>
  20. Now you can change the size of the icon and position (which we do in the video tutorial -> please watch and LIKE it!)
  21. The next thing we’re going to do is add a header title by doing the following steps > Add layer > select text/html > Type in your title
  22. In my title, I change the font size and the font to Raleway > you can also center the header, which I like to do (again watch the video)
  23. Now let’s add a sub-title by doing the same steps again > Add layer > choose text/html > type in whatever you want > change the font if you like > move your subtitle line wherever you want 🙂 … the Slider Revolution does have some default settings for some stuff and in this case it has a subtitle default setting we want, so you can just double click on this layer and right under the Style button select Nongeneric-subtitle and then it should look just like the demo 🙂
  24. The last thing we want to do for this first demo slider is add a button so > Add new layer > choose button > type in the text > then you can choose a default setting for a button or change the font or colors however you want
  25. Tip for buttons: If you want the button to hover or if you want to change the background of how everything looks > double click on the button > then click on the down arrow next to the Style menu button > you will see the section expand.
  26. Now on the right side you should see Idle and Hover. Idle is for how the button looks when your mouse is not over it. And hover is for the look when you hover over the button. If you want to change the background and border and look for the idle and hover look, make sure you click on Idle and Hover and change the settings.
  27. The one thing we want to make sure to do if we add a button or buttons to our slider is make sure we link it correctly. In this demo slider we are just linking it to the next slider so make sure you double click the slider button > now click on the button above that says “Action” > click the + and then choose Click > then choose the action you want (you can paste in a URL or whatever you want).
  28. Make sure you click Save Settings before you finish up this slider.

NYC TECH CLUB animation tip (again): If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

Demo Slider #3

This is my favorite slider in the demo sliders and probably a little more complicated with the animations. So if you really like this demo slider, make sure you watch the video on how to use the slider revolution plugin that I created to see how this slider is created, step by step.

  1. Create New Slider
  2. Content Source = Default Slider
  3. Title the slider and give it a short code
  4. Choose Standard slider
  5. Select full width layout
  6. I create custom grid sizes for the full width layouts for all four types in the next section
  7. Save settings
  8. Scroll to the top > on the right hand side > select general settings > on Slideshow > turn on Stop Slider After > Change “At Slide” to 1 (if you want the slider to continuously change, do not turn on Stop Slider)
  9. Go to the Layout & Visual tab and in the spinner tab > turn off the spinner (if you want)
  10. Save settings again
  11. Now click on the button near the top that is titled “Slide Editor”
  12. You will be on the 1st slide when you get on the next page
  13. Go to main background and select the button titled Main/Background Image > click the button to choose your image
  14. Select the image you want and upload it
  15. Now you want to scroll down and add your different layers (icons, text, buttons)
  16. We’re going to add a sub header title by doing the following steps > Add layer > select text/html > Type in your title
  17. We will choose a default setting for this sub header title so make sure you are clicked on this current layer > go under the style button and click the down arrow if needed and right under you will see a T > click that drop down and choose Photography-Subline
  18. Now we add two more layers (both header titles) > so click Add layer > select text/html > Type in your title
  19. For each of these layers we want to choose the default setting > Photography Display
  20. You can also change the colors like we do in the How to use the slider revolution plugin video
  21. The last thing we want to do for this first demo slider is add a button so > Add new layer > choose button > type in the text > then you can choose a default setting for a button or change the font or colors however you want
  22. Tip for buttons: If you want the button to hover or if you want to change the background of how everything looks > double click on the button > then click on the down arrow next to the Style menu button > you will see the section expand.
  23. Now on the right side you should see Idle and Hover. Idle is for how the button looks when your mouse is not over it. And hover is for the look when you hover over the button. If you want to change the background and border and look for the idle and hover look, make sure you click on Idle and Hover and change the settings.
  24. The one thing we want to make sure to do if we add a button or buttons to our slider is make sure we link it correctly. In this demo slider we are just linking it to the next slider so make sure you double click the slider button > now click on the button above that says “Action” > click the + and then choose Click > then choose the action you want (you can paste in a URL or whatever you want)…we will add our other slides in a bulk add before we link this button
  25. Make sure you click Save Settings before you finish up this slider. Then we can move on to the next slider image.

NYC TECH CLUB bulk slide tip: To add bulk slides > just scroll to the top where it has the + Add slide > hover over it > click Add Bulk Slides > then we can all all the slide images we want for our other sliders

You can title each slide to make it easier to link to or remember by just clicking on the title of each slide image and changing it

NYC TECH CLUB animation tip (again): If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

Now we should be onto our second slide

  1. Since we already added our slider images through bulk adding > click on the image that you want as your second slider image (this is the slider image we are going to link our button on our 1st slider image to)
  2. We’re going to add a sub header title by doing the following steps > Add layer > select text/html > Type in your title
  3. We will choose a default setting for this sub header title so make sure you are clicked on this current layer > go under the style button and click the down arrow if needed and right under you will see a T > click that drop down and choose Photography-Subline
  4. Position your sub header line wherever you want
  5. Now what we are going to do is add some thumbnail layers (smaller images) that we will link to separate slider pages
  6. Click add layer > select thumbnail > upload thumbnail or choose the thumbnail you want from your media library
  7. You can change the size of these thumbnails in the slider revolution if you want by just changing the width and height
  8. Position the thumbnail where you want
  9. You can click on the thumbnail and click on the Action button above and link the thumbnail to whatever slider you want > click the + > click > jump to > choose which slide you want to link to or URL
  10. Repeat steps 5-9 so you have 6 thumbnails that are linked to different slider images
  11. Click save settings

NYC TECH CLUB animation tip (again): If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

Thumbnail slider images (we will repeat these steps 5 other times -> 6 in total)

  1. The next thing we are doing is customizing the slider image pages that we are linking the thumbnails to. This is very simple and takes all that we’ve learned from the above two sections.
  2. Click on the image slider near the top of the page that you want to edit next
  3. You should already have the images all uploaded from the bulk > if not click the + Add new slider image and upload the image you want
  4. Now add three layers 1) one for the headline, 2) one for the sub header line 3) text description
  5. Edit and customize the look of each layer > we use the photography display default setting for the headline / photography-subline for the sub header line / and the photography-textbox for the description

Now we just want to add a button to bring us back to the main portfolio slide page with all the thumbnails (you don’t have to do this but for this demo, we do!)

  1. Add a button so > Add new layer > choose button > type in the text > then you can choose a default setting for a button or change the font or colors however you want
  2. Tip for buttons: If you want the button to hover or if you want to change the background of how everything looks > double click on the button > then click on the down arrow next to the Style menu button > you will see the section expand.
  3. Now on the right side you should see Idle and Hover. Idle is for how the button looks when your mouse is not over it. And hover is for the look when you hover over the button. If you want to change the background and border and look for the idle and hover look, make sure you click on Idle and Hover and change the settings.
  4. The one thing we want to make sure to do if we add a button or buttons to our slider is make sure we link it correctly. In this demo slider we are just linking it to the next slider so make sure you double click the slider button > now click on the button above that says “Action” > click the + and then choose Click > then choose the action you want (you can paste in a URL or whatever you want)…we will just choose the portfolio slide image (it might be named differently for you)
  5. Make sure you click Save Settings before you finish up this slider. Then we can move on to the next slider image.
  6. Repeat these 5 steps for the rest of the slider images that you used as thumbnail slides

NYC TECH CLUB animation tip (again): If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

And we’re done with this demo slider!

Demo Slider #4

In this slider, we will use the Ken Burns effect which is a premium feature to zoom in and out, left and right of an image (no matter what size it is!)

  1. Create New Slider
  2. Content Source = Default Slider
  3. Title the slider and give it a short code
  4. Choose Standard slider
  5. Select full width layout
  6. I create custom grid sizes for the full width layouts for all four types in the next section
  7. Save settings
  8. Scroll to the top > on the right hand side > select general settings > on Slideshow > turn on Stop Slider After > Change “At Slide” to 1 (if you want the slider to continuously change, do not turn on Stop Slider)
  9. Go to the Layout & Visual tab and in the spinner tab > turn off the spinner (if you want)
  10. Save settings again
  11. Now click on the button near the top that is titled “Slide Editor”
  12. You will be on the 1st slide when you get on the next page
  13. Go to main background and select the button titled Main/Background Image > click the button to choose your image
  14. Select the image you want and upload it
  15. Now we want to quickly set the Ken Burns effect
  16. In the same section you’re in, just go to the tab titled Ken Burns  and turn on Ken Burns
  17. Now you will see the section expand and you can choose to zoom based on scale or offsetting things right and left. Please watch the video to see the customizations we make.
  18. Now you want to scroll down and add your different layers (icons, text, buttons)
  19. We’re going to add a sub header title by doing the following steps > Add layer > select text/html > Type in your title
  20. We will choose a default setting for this sub header title so make sure you are clicked on this current layer > go under the style button and click the down arrow if needed and right under you will see a T > click that drop down and choose Nongeneric-subtitle
  21. Now we’ll add a headline > Add layer > select text/html > Type in your title
  22. There’s no default setting for the headline text we want but you can change the font to the same as the nongeneric subtitle which is Raleway and then increase the font size and bold everything
  23. Now we’ll add a description by clicking  Add layer > select text/html > Type in your description
  24. The default setting we want to use for this one is photography-textbox (make sure the font is raleway)
  25. The last thing we want to do for this first demo slider is add a button so > Add new layer > choose button > type in the text > then you can choose a default setting for a button or change the font or colors however you want
  26. Tip for buttons: If you want the button to hover or if you want to change the background of how everything looks > double click on the button > then click on the down arrow next to the Style menu button > you will see the section expand.
  27. Now on the right side you should see Idle and Hover. Idle is for how the button looks when your mouse is not over it. And hover is for the look when you hover over the button. If you want to change the background and border and look for the idle and hover look, make sure you click on Idle and Hover and change the settings.
  28. The one thing we want to make sure to do if we add a button or buttons to our slider is make sure we link it correctly. In this demo slider we are just linking it to the next slider so make sure you double click the slider button > now click on the button above that says “Action” > click the + and then choose Click > then choose the action you want (you can paste in a URL or whatever you want) which is just have the slider jump to the next slide / previous slide / URL to another page
  29. Make sure you click save on each slider image page

All you have to do to create the next slider image is go back to the top of the page and click on the + Add Slider and then follow the steps 13-29 above again to add your next slider.

NYC TECH CLUB animation tip (again): If you watch the slider revolution tutorial video on how to use the slider revolution, you’ll see that I also show you how to animate the slides/layers and time when they come into your slider. It’s best to watch the video to see how that is done. 

And you’re done!