How to use Revolution Slider in WordPress

Mar 11, 2015 | WordPress Plugins, WordPress Wednesday

If you’ve purchased the Slider Revolution or perhaps purchased a theme that had the Rev Slider included in it – you’re probably on “option-overload.” That’s okay – there is a lot you can do with it. Let’s review some of the basics in this video.

Here’s the link to buy Slider Revolution:

Video Transcript

[This is Kori Ashton of WebTegrity in San Antonio, Texas USA]

Hi, y’all. Welcome to another WordPress Wednesday.

Today we’re going to talk about the Revolution Slider. Several of our students have asked us to kind of do a quick tutorial on it. Some of our clients even use this specific slideshow environment inside of WordPress. It’s so robust. It has so many options. It’s a little bit overwhelming. Sometimes you don’t even really know where to start. We call that option overload. But if you take the time to kind of read through everything that you see— walk through it step-by-step— you’re going to be able to create something super cool.

Before I get started though I want to make mention of our incredible partners and thank them. WPEngine: for their amazing secure hosting that they provide for WordPress websites. Check them out. Their support and their fast server speed is highly worth the dollar amount that you’re going to be paying for your hosting package with them. They’re incredible.

WPElevation: if you’re an entrepreneur using WordPress you need to check out their system. It’s fantastic. And WP101 offers you really more involved, in-depth video tutorials just like what I do, but they take it to the very next level. Totally worth their value of getting a lifetime membership for that website. Check those guys out and be sure to tell them that Kori Ashton sent you their way. I would appreciate that.

We’re going to talk about the Rev Slider. They [Code Canyon, the author of the plugin] call it Slider Revolution. Most people call it the Rev Slider. It’s $18 [US]. You do have to pay for this. But it’s $18! And in the big scheme of things this is pretty stellar. Some premium themes that you might find on have this included inside of it, so you kind of get this value added to a premium theme if you’re buying one for say $58 or $48 this would automatically come in it. And you still need to know how to use it properly.

There’s a lot of cool functionality you can do. I’ll put the link to this particular plugin in the description box below so you can get to this specific page and purchase this if you’d like to. I’m not an affiliate marketer. I don’t get any money off of it.

What I want you to see is a live preview of what this Revolution Slider can do. I’m going to click Live Preview. Check this out. Look at those things just fly in. All of that was like a little video almost. I’m going to click next over here. It slides over. Cool. Look at that zoom effect take place. Whoa. Fast. Smoother. Easy to use. I feel like I’m watching a movie. This is just a slide show.

Wait a second. That transition was totally different. The fade effect. Look at all these things flying in. Literally, these things are just created making layers and kind of stacking them on each other. And, yet, the Revolution Slide is very fast because all of this text that you see is actually text. They’re not images.

That’s great for two things. One: it loads a lot more quickly. Two: Google can still read this text that’s sitting in here. That’s phenomenal for SEO purposes. You always want to be able to read text because Google cannot read images except for the image title, of course, and the image alt tag.

Another really cool thing that Rev Slider can do is have video inside of it. What!?! [music from video playing] What!? How crazy cool is that? It totally supports video. So, not only do you have this cool little flying in, really wow factor that you can build pretty easily, but it also holds video. So, you can have a video sitting here with a big CTA button [call to action] that says, Check out our video. Click that, and let it play. Very, very dynamic. Lots of possibilities. So, let’s get into it.

What you’ll have to do is actually purchase the plugin for $18. It’s going to then prompt you to download the zipped file. Once you download it—let’s see if I can show it to you here. Let me get to my files and open this up here for a second. You would just go to your downloads and be sure this is in here [zip file].

Be sure you want to double-click that and open it up. Unzip it, basically. Because inside of it actually is the file that you want to upload to your WordPress website. You would go to your plugins area once you’ve downloaded it to your computer. You would click Add New up at the top. And then you would want to do an Upload Plugin. That’s where you would upload that zipped folder just called Rev Slider. Browse. Upload that. Install it. And, of course, you’ll activate it.

Once you’ve activated it, down on the left-hand side of your screen we have this space called Revolution Slider. Let’s click on that. Now your screen should look something like this.

I’m creating this video in March 2015. If you’re viewing this a few months from now, or possibly a few years from now, it might look a little different, but overall the functionality should be pretty much the same. Now you want to click Create New Slider. It’s going to open up. You want to give it a title. You want to give it something pretty obvious of where you’re going to be placing it, or how you’re going to be using it.

The Slide Alias actually helps create the short code. As soon as you start typing something in it will create the short code. If you’re familiar at all with short codes, that’s how you actually would display this on a page somewhere. If you’re wanting to go build this slide show and then go put it somewhere on any page or any post for that matter you can do it. How cool is that?

You can create as many slide shows as you want and paste them throughout your website just using this unique short code. You would copy that on your clipboard and then go to the page or post that you want to display it on, paste it in there, and [hand clap] viola, your slide show is going to appear in that space. Amazing. Follow my cursor down the road here.

Do you want a different Source Type? You can have posts being pulled to create a slide show. You can have Specific Posts or a Gallery. We’re going to keep it as a Gallery. This is pretty standard of how you would create a slide show. Do you want the layout to be Auto Responsive? That’s typical if you have a responsive website. Scrolling down—all these [default] options can stay. We’ll just Create Slider. Slider was successfully created.

Now it gets me back to this screen, gives me that short code again, in case I need to access that again. And it tells me that I have zero slides. So, let’s go edit our slides. Clicking on the blue button [Edit Slides] takes you into Edit Slides: Home. No slides found. Let’s create something new. New Slide.

Right away when you click that you’re prompted to go get a picture. I’ve uploaded a pretty large picture that’s sitting in my media library. I’m going to add that. There we go. Now I’ve got a slide. I want to add some fun stuff to it. Let’s edit that slide. This is the environment where all the fun happens. You can give it a unique title for this unique slide. I’m going to call it Grunge Background. You can change the status of it if you want it to be unpublished in a specific slide show.

Another incredibly powerful feature is if you want this slider to only be visible between certain dates. How cool is that? That would give you the ability to automatically maybe have an event that you’re advertising be removed whenever that visible date until is reached. You can change the transition of the slide right here. You can change the duration of the slide right here. It gives you an example here. Keep scrolling down. If you want the whole slide to be linkable you can click enable and it will let you choose where you want it to go. I’m going to disable that just for now.

Scrolling down now we begin to see what we’re creating. This background source here is how I would have that big image sit here. I can change the image if I want to. Or I can have a transparent background and just add layers if I wanted to. Make a solid color. Just play around with all these options and get a feel for what we’re doing here.

What I want you to notice is this little outline that you’ve got here. We kind of want to stay within this space whenever we’re adding content. It’s giving you the parameters of an actual, good size to stay within for more screen sizes. What we want to do next is click Add Layer. Right away a little area down here is going to open up. You’re going to be able to edit the text. I’m going to say Code is poetry.

Even though this area says it, I actually want to change this and make that disappear and make my new font up here. In order to move this picture around I’m actually going to go back up here for a second and manipulate the Background Position. I’m going to change it to center. Let’s do center bottom. There we go. Now it’s completely gone away.

And if I scroll back down— Code is poetry—I get to see what it looks like here. Well, obviously, that’s not very visible. How can I change this/that font to be [cartoonish Texas accent] pretty? The way you do it is affecting the style here. We’ll just scroll over some of these and it will start to show you what that text could look like. Maybe we want it to be that.

Let’s scroll up. Oh, look at that. That’s pretty noticeable. Kind of cool. What if I want that background to be my orange that’s on our WebTegrity. Our specific orange. You can edit this style. This opens up and allows you to change the font family, the font color, the padding in this area that kind of extends the black color around it. And you can change the background color. I want to change that to our orange color. That’s ff9022. That’s the color I want now. I’m going to click Save Change.

Right away it’s going to ask me, Do you want to overwrite this class that’s been listed in your data base as “large bg black” or do you want to save it as a new class? I want to save it as a new class. And I want to name it large bg orange. Save as new.

Now, that’s the way it’s going to display on the screen. I basically created one slide that had this sitting here. Maybe I want it to slide in, or fly in. I can come down here to the animation layer and now play around with different ways that it can fly in. If I say I want it to ease in, I can set it to do that. You’re going to see an example of it right here of what it does. It kind of eases in.

Let’s say I want it to circle in. Okay. Do something different there. Why does it all look like it’s all doing the same thing? I don’t know. Let’s go down here and see if it’s doing something else. Ah! Start animation. Let’s do—there you go—Let’s do Short from Right. Have it fly in that way. And this is just the specific easing. I kind of like that.

Look at that. It fades in right here. That’s kind of cool. I want it to come from Long from Left. Phew. Fly in there. And, basically, how long do we want it to take? Let’s slow it down a little bit. Take it to 500 [Start Duration]. And that’ going to be the effect now. I’m going to Update Slide. That basically creates a whole new slide with this kind of effect flying in.

If I want to create another layer, you can just keep adding layers. You come back here and change this to whatever you want it to be. Woo hoo. Now that new area over here now says Woo hoo. You can change. You can just keep doing stuff. Add a picture if you want to. Add a video. All of these options. You just keep layering on different things into this one slide.

Now, let’s say I want it to transition out and go to a totally different slide and have something new. You would come up here to the top and say Add Slide. Now, that’s going to create a whole other option. You’ll give it a new name: New Slide. And you’ll go through that whole process again. You’re creating your entire slide show. How cool is that?

Let’s say that you wanted this new slide to be first. How do you change the order of your slides to appear? You literally just drag and drop it. Sometimes. That’s not very user friendly. You wouldn’t know that right away. I wanted to give you that tip in this video tutorial.

I know this is a little lengthy. But there’s a lot to Rev Slider. If I get a lot of views on this . And you guys tell me, Kori, I want to learn more. Comment in the box below and I’ll do another video next week, a little bit more in depth even more so into the Rev Slider.

I hope you’re having a great day. Catch us at your local Meetup group. If you’re here in San Antonio [Texas], please come by and check us out. I’ll put the link in the description box below.

See y’all next week. Bye.

[Kori Ashton, WebTegrity WordPress Wednesday]

Closed captioning subtitles and transcript provided by