[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 [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 Themeforest.net 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 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 [video]. 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 bye.