Hey Hey NYCTECHCLUB in the house!

How to Add Slider to WordPress Website – Slider Revolution Tutorial – Step by Step

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

  • You can add videos to your slider
  • You can add images to your slider
  • You can customize your sliders

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

  • In section 5 of the slider revolution page, it should be titled “Customize, Build & Implement” …you can push save settings
  • After you do that, either push the button that says “Scroll to Options” or just scroll up to the top of the page and on the right side you will see a bunch of tabs for settings

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.

  • You can show or not show the spinner when the slider loads
  • You can disable the slider for mobile if you want

Navigation

  • I’ll just write a note here – most of the sliders you see just have bullets or arrows. You can modify that and show text as navigation if you want. Mess around with this section and really change up your slider 🙂
  • The position tab allows you to move around your navigation menu (just something to think about)
  • One thing I like to do is go to the TOUCH tab and enable touch so a visitor can swipe the slider left and right with their finger
  • Its best to turn on the touch and the vertical drag

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

Parallax & 3D

  • We are skipping this section for the most part, but if you want your slider to have a parallax scroll – just enable it 🙂

Performance & SEO Optimization

  • Although SEO optimization is important, the only thing to know here is you can load all your slider images at once or one at a time. Choose whatever option you want.

Problem Handlings

  • For compatibility with older mobile devices and legacy IE, you can choose to simplify the slider’s functionality or replace it with an alternative image.

Google Fonts

  • Google fonts are automatically loaded to the slider. You can edit your fonts on the individual slide pages.

Import/Export Replace

  • If you want to override any settings, you can do that here by importing them. We are skipping this session.

API Functions

  • Skipping this section.

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

  • Once you create your slider and go through your global settings -> you want to go to the bottom and click on the button that says “EDIT SLIDES” or near the top click on Slide Editor
  • This will bring you to the page where we can upload our images and create our actual slider with text and buttons
  • The main thing we have to do is focus on the Source tab
  • This is where we will choose Main/Background Image if we want to upload an image(s) to our slider
  • Go ahead and click on main/background image
  • Click the Change Image Button
  • Search in your media library or go and click on upload files and upload a new image
  • You can go through the other tabs – we usually just use the default option settings we chose in the previous step so there is not much to change here.
  • Go to the Slide Animation tab -> if you choose any of these options, as you LOOP through your slider, it will change the animation based on what you’ve selected.
  • You can hover over any of the options and a pop up will appear and show you a sample animation 🙂

To link your entire slider image to another URL page

  • Go to the Link & SEO tab
  • In the drop down menu where it says “Enable Link” change that to enable
  • Add a URL to the Slide Link section
  • Then choose to have the new page open in a new browser window or the same 🙂
  • Make sure you click save

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

  • Click on the Add Layer button
  • Choose Image
  • The media library should pop up and you can either 1) choose an image that you’ve previously uploaded or 2) upload a new file
  • Now you can move the image around to your liking and also link it if you want

Adding Videos

  • Click on the Add Layer button
  • Choose Video
  • Paste in the video URL and click search
  • The video should show up
  • Now you can customize the viewing options for the video -> you can choose whether you want it to cover the full width of your slider if you click and turn “on” full screen
  • In the pop up -> if you click on settings you can select if you want the video to loop over and over again or if you want to switch to the next slide after the video ends.
  • You can also enable if you want to allow the visitor to have the option to view the video full screen 🙂

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

Buttons

  • You can add buttons the same way as images, video and text. All you have to do is add a new layer and choose button
  • Then you can choose the type of button you want by clicking on the type of button you want
  • Add text to the button either by adding the text into the area on the pop up that says “text” or by double clicking on the button and then modifying your text that way
  • Don’t forget to choose your border and background color for the button! See the NYC TECH CLUB tip below if you forgot to do this when you created your button
  • If you want to make any edits to the button or any other layer
    • Just go to the top of the slider image and you will see a menu button
    • Click on that and choose the layer you want to edit and click the pencil to edit or just make sure you’re on the chosen layer
    • Once you’re on the right layer, you can choose any of the menu items to modify color/style and so forth
  • To link your button, just click on the button and then scroll to the top of the image and click on “Action”
    • You will see a blue + button on the left hand side > click on that
    • Choose the action type (we use click)
    • Then choose in the next drop down menu what action you want to do (we choose “simple link”)
    • We add a URL to our simple link
    • There are lots of options here for you to choose from

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

  • The easiest way is to take the short code that was generated when you created the nickname for your slider and paste that into the main content section of the page you want the slider to show up

Select Slider on Page Options

  • If you go to your page that you want to add a slider, there is a symbol at the end of the font options on the right (its a circular symbol)
  • Click that
  • Choose the slider you want to show
  • And a short code will be inserted

Adding a Slider through Your Widgets

  • From “WP Menu -> Appearance -> Widgets”, you’ll find “Revolution Slider” listed
  • Drag and drop the “Revolution Slider” box into one of your theme’s “Widget Areas”.
  • Optional title to be displayed above the slider
  • Choose the actual Slider you wish to display
  • Choose to only display the slider on your homepage

Visual Composer

  • If you have the Visual Composer plugin, you can just click the + button and add a Revolution slider
  • From there you can choose the slider you want to show

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

  • To deactivate any slider image from a slider, just go to that slider and hover over it and you will see a red icon and a green icon
    • The red icon is the deactivate button
    • If the green check mark is brighter, that means the slide image is active
  • You can still edit the slider whether its active or deactivated. This does not delete the 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.

  • Duplicate – make a copy of your slider
  • Add to templates – if you want to save this slider to use again somewhere else or recall it
  • Delete – this is where you get rid of the slider completely if you don’t like it

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!