- Hey hey, hi everybody,
welcome to another WordPress Wednesday.
My name is Kori Ashton,
here at WebTegrity in San Antonio, Texas.
And it is time for us to move into
Revolution Slider 5.0 and beyond.
I'm actually going to be looking at 5.1 today.
So this is October 2015.
Back in I believe around August of this year,
the ThemePunch guys who are the authors
of the Revolution Slider released the 5.0 version
and if you were used to Rev Slider prior to this,
you know it drastically changed the entire user interface.
The capabilities went through the roof.
We were already in love with this
amazing product as a slideshow.
But now it has given us means of displaying content
and just radically changing the look of any Theme
for that matter, inside of your
WordPress website in just a couple of clicks.
However, I know that it is kind of option overload.
There's a lot going on.
There are things kinda hidden and different layers going on
so I just kinda wanna step-by-step take us through
what it looks like to look at the basics
of the Revolution Slider 5.1 and hopefully
until these guys take us to the next level even.
So let's go ahead and just dive right into it.
Of course I'm talking about the Slider Revolution
a lot of us call it the Rev Slider.
It is a premium Plugin
that offers a slideshow for your website.
$19 would get you a regular license
to use it on one website.
If you wanted to extend the support,
it's just $5.70 more in US dollars
to go ahead and get access to the ThemePunch guys,
their support team.
And you would do that through the support tab here
and kind of walk through how they're asking you
to connect with them if you had questions
specifically about the Slider.
So you can leave your questions in the comment box below,
I'll try to answer them to the best of my ability
but I'm not the developer, I'm just a user of this product
who has fallen in love with the power behind it,
it's just incredible!
And now 5.1 and beyond is mind blowing.
So if you're running an older version than that
and as soon as you are watching this video
and you think mine doesn't look anything like this,
I'll put a link right here to the older versions
if you're running the older version.
But I will warn you
that you need to go ahead and update your version.
There were some security issues that took place
earlier on in some of the older versions
so I want you to be sure that you're running
the most recent up-to-date version of the Revolution Slider.
If you're not, or if you purchased a Theme
that had it inside of it and it's an older version,
you need to connect with that Theme's author
and ask them to get you access
to the most recent version of the Rev Slider
just for security purposes completely for your website.
Let's take a look really briefly about
what some of the capabilities are inside of the Rev Slider
and why we're completely in love with it.
I'm gonna do a refresh on this page
so you can see things begin to fly in,
fade in, slide up, look at all the movement there.
All of these things are simply in layers
and that's how the Revolution Slider
just packs an incredible punch
allowing you to easily get through content, see things and
I'm gonna show you this one right here.
This is a pretty standard slideshow,
it's got these cool little thumbnails down here happening
and I'll let it play through so you can get an idea
of how spectacular it is, did you see that transition?
Look at that kind of fade up
and then anything that moves over
you see this parallax with the text hovering over the image.
Then we begin to see this option
with the Ken Burns where things just kind of
move around smooth on the page
and it almost looks like we're flying
through the page it's pretty spectacular.
Then of course we all know that inside the Rev Slider
you can add video whether it's a YouTube video
or a short snippet of video that you might have
even on your server space, a Vimeo video
you can just easily and simply add in
the URL of the video and it'll make the video
appear back here and you can lay text over it!
These are just some of the very quick reasons
why I have fallen in love with the Rev Slider
and we use it consistently across the board
for students and for our clients.
So let's look at what it looks like
to actually use the Rev Slider.
I've already installed it so if you're unfamiliar
with that process I will put a link in the description box
below to documentation that walks you through
how to go purchase, you take that zipped file,
go to your Plugins area, say add new
and just install it and activate it.
Once you've done that, there'll be a tab here
on the left side of your navigation now
that says Slider Revolution.
Clicking on that gets you to this screen
and you might not even have a new Slider set here yet.
I've already been playing around with one.
But I'm gonna go ahead and click add new
to walk you through what the new
settings are for the Rev Slider.
Right away again, some things look familiar.
We had this panel on older versions
but all of these panels here are different options.
Your first option is your content source.
So where are we getting the content from?
A standard slideshow is just gonna be
your default option here.
But again some of the things that are just
incredible with this newer version
of the Slider Revolution is we had these two options
that you can actually pull different posts
which are from your blog area,
specific posts if you'd want to display them
dynamically in your slideshow,
but now the guys at ThemePunch have added in
a Flickr stream, a feed from your Instagram page,
WooCommerce is coming soon so you'll
be able to add products dynamically.
You've got your Twitter stream or your feed from Twitter.
Facebook, YouTube videos could be displayed here and Vimeo.
I'll walk through these options
as we go further on in this series
so be sure to subscribe to my channel
to get more details on those individual ones.
For now, for the sake of this video
I'm just gonna go ahead and use the default Slider settings
and we'll walk through what those look like.
Here is where we would actually start
to type in the name of our slideshow
and you'd wanna give it something unique
so you have an idea of maybe where
you're going to be placing this.
And for now we'll say home page.
And then you'll want to create an alias for it
and this could be the same thing if you'd like
or an abbreviated version of it.
This version right here is actually
what creates this short code.
This short code is what you would copy and paste
and you'd paste into the page or post
or sidebar or Widget box that you would
want this slideshow to appear.
You can just read that right here.
Place this short code where you want the Slider
to appear basically, where you want it to show up.
You'd copy that on your clipboard, right mouse click,
copy that and you would paste it
on any page or any post and dynamically
boom, your Slider would appear really beautifully.
Alright, so going down through here though
now we have three new options that can be a little confusing
and you wonder well, what do they actually mean?
A standard Slider is actually just a slideshow,
things that would rotate through,
you can put some text on there
but you want movement, you want transition
between topics or between slides.
A hero scene, this is something
that we're seeing trending right now
really beautifully done where we're having
just one large picture across your entire homepage
with some text laid on it with maybe a button
that people can click on and get inside your website.
A really nice option here that the hero scene
basically is going to be used,
this option here would be used
if you do not want transitioning slides.
If you just wanted one really beautiful picture
or perhaps one snippet of video playing
back there with some text laid over it
and you need no transition happening.
That would be your option that you would select here
and then go through the rest of the options to create it.
Or a carousel Slider would be used
if you want to actually transition
between different slides all on one screen.
You've seen things like maybe our affiliates
and you would have all of their logos on there
and you want them to be able to slide
and transition back and forth and you can
see that kinda in carousel setting.
This is kind of like a three-in-one deal
that you get for $19 right now.
That's the price over on CodeCanyon.
$19 U.S. dollars for you to purchase this.
What a powerful punch you get inside of your Theme!
This is compatible pretty much with any Theme
I've ever put it in.
It has never broken any Theme I have ever
put this inside of so it's pretty phenomenal.
Moving down the screen, we'll go ahead
and then be able to choose,
let me go back here to standard Slider,
we'll be able to choose then your slide layout
if you just want it to be automatic you can leave it there.
If you want to test around and play around
with what these options could be,
feel free to tinker with those
and play around with what those options could be.
The other thing that I really like about this
as we scroll down here, you have some options
to override the max height or the max width.
The max height is something that I use pretty regularly.
You can drop in here and maybe say that
the max height of the entire slideshow
needs to be maybe 400 or 500 pixels tall
so that no matter how large of an image you put in there
it's gonna constrain it a little bit
and allow you to have a nice area
on your homepage or whatever page for that matter
to be constrained.
And then just scrolling down the page
you can go ahead and click save settings.
These are just some advance settings here.
You can read through these to see if you wanna
really go way nerdy and get deeper
into customizing this particular slideshow.
You can click save settings here
or if you've noticed here on the right side
we also have this option to click save settings.
Once that's done, you can then go into your Slider,
individual slides and again to set them up
and create what they're going to look like.
This area here offers, again a lot of options.
What I'm gonna encourage you to do is don't be overwhelmed,
just begin to read down through each one.
Look at each one and see what the options are
that are offered.
Maybe you need to address them?
Maybe you don't need to address them, it's okay.
Kind of out of the box it works,
you just need to see how you might want to
customize it for your particular website.
One of the easiest things to do right away
is just go ahead and put in a background image.
So I'll go ahead and click change image here
which will allow us to access our media library.
Or if you don't have any pictures yet,
you'll just go here and upload
photos into your media library.
And we'll grab a larger image and click insert.
If we scroll down we begin to see the window
where we're starting to build our entire slideshow
and you can play around with adding layers.
That's what you're gonna do is you simply just add a layer.
So this would be your option here
if you wanted to add text, you would click text.
If you wanna put another image
inside of this Slider, you can do that.
If you wanna add a button they've got some presets
now here to add buttons in here.
So let's just simply add text.
(Kori typing)
We can add text.
Clicking out of the box allows you to move it around,
drag it around to wherever you'd like it to appear
and if you don't really like the black text
maybe you wanted to make it white or a different font even
you've got some options up here at the top
as long as you have selected the layer
that you wanna change, you can come up here
and play around with all these different options
that would affect that one particular layer.
I'll go through here, you've got some
standard fonts that are in here,
you also have something spectacular that again,
these guys just kinda went above and beyond
and gave you access to Google Fonts.
I really like the font Questrial
so we'll go down here to the Q's.
All the way down here of course toward the bottom.
Oops, I already passed it, go up.
Railway's nice too.
Questrial, there we go, click that.
It's gonna load it so a nice clean, simple font
and I'm gonna go ahead and change the color now to be white.
(Kori typing)
And so now you can see exactly
what that's gonna look like sitting here.
And of course you can add animation to any layer possible.
So you would click the animation tab
and begin to see what that looks like.
Here are your options here.
All sorts of options for animations on how it comes in
and how it leaves the scene of the website.
You can also manipulate the timing
so if you don't want it to fade in that quickly
you can set this to a higher number
and allow it to fade a little bit slowly.
Kinda fading in and out a little bit slowly,
staying on the screen longer, animation speed here,
fading out, what does that look like?
And you can play around with those options.
If you wanted to see what it would look like
in a preview setting, on the right side over here
you have a little tab that pops out for preview.
There it is!
And of course then all you would do is add the next slide
so clicking out of the preview mode,
if I went back up here to the top
I can click add a new slide and this again,
would just continue in adding in layers.
I'm gonna make a couple of quick best practices
when you're using a slideshow.
Best practices.
Please don't do more than four slides all the way around
because nobody's really gonna sit there
and look at slides five, six, seven and eight,
plus that's really gonna load down your speed
of your whole website loading up
and presenting to your viewers.
So be sure to keep it around two to three slides max
and then if you have other content,
just change it out consistently
and give something fresh for people to look at.
Be sure to subscribe to our channel
because now I'm gonna be doing a series on the Rev Slider.
I'll have a couple of videos even this week produced
and put out here to walk you through some things.
If you have questions specifically
about the Revolution Slider will you
put them in the description box below
and I'll do my best to answer them.
Or to connect you guys over with
the ThemePunch authors of this incredible Plugin.
Have a great day!
I hope this helped you.
Bye Y'all, see you next WordPress Wednesday, bye!