Revolution Slider – Basic Slide Editing

so if your site is using the revolution

slider back in the WordPress dashboard

you’ll have an admin menu item that says

slider revolution and when you click

that that will take you to your list of

the sliders that are being used by your

site currently you can work on you can

go into one that’s already been you know

your that you’re currently using or you

can create a brand new slider that you

want to use somewhere on the site you

can also add a slider from some template

items that they have or you can just

kind of set up you know like a template

and then you can adjust it the way you

want it most of these are premium

templates so you can go to the free ones

and then you’re able to import them you

can check them out like this you can

kind of preview them before you put them

in so that was pretty cool

that’s unlike image image gallery kind

of thing I just put in this one this

nude this hero it’s called a hero where

it’s like a large image and some like

large text they got like a sports on

here that you can just and these you can

just import them right into your

revolution slider and then you can

adjust you know the text the images and

all that kind of stuff and so what I did

was I did that for here for this one

it’s called YouTube hero so to edit that

we want to click on the image we’ll go

into there and the number one versus

number one intro that’s the first slide

and if we scroll down we can see that

they’re using a YouTube video as the

background so like of this like it where

it says YouTube video ID and that’s the

ID of the YouTube video and if we

preview this we can kind of see how they

have it set up see what where’s the

preview here it is we’ll preview this

see how they do it

yeah that’s pretty cool stuff kind of

pops in there got the video going okay

so you kind of see that with that

template you can see how it works you

can come down here and see like here’s

an icon that they have in there some

text if you click on any of these there

should be different information that

pops up here at the top and this is how

you can edit this stuff so for like the

title come up here click the little

pencil there’s the text for the title

you can put any note a new title or if

we want to all capture it you get new

title down here there’s a little bit

more text we can edit that checking this

out and then here’s like a button that

they’re using so we can click on the

button and we can say where we want this

button to go we can change the text in

the button right there here’s some more

information like the the font style

using railway the color of the font size

of the the line height font size just

all of this different styling if you

want a little bit of extra styling

there’s this little arrow next to the

style tab that if you expand it it gives

you some more options like this one

looks like it has a like a 1 pixel

border around it that’s white that when

you hover you can choose this little

option right here hover and say what it

does you know there’s background now

it’s got a white background change that

kind of you know the text color and all

that so that’s kind of just some options

there when you include a button and so

yeah so using a templates really quick

you can go right in and just kind of

swap things out that you want let’s go

back to all sliders and we’ll show you

know how to set up a fresh new slider so

we find the option that says new slider

we’ll click on the plus icon we can

actually choose like a Content source we

can say I want my facebook pictures to

show in there my Twitter stream

Instagram you can say you like maybe you

have like blog posts

have like a you you do blogging and you

have a lot of blog posts you can do you

know a a post based slider which rotates

in your blog posts like probably showing

you know like the featured image title

of the blog maybe a little bit of the

the like the content text that’s in

there stuff like that or you just start

with a default slider just do that give

our slider a name so we can do a new

slider enter slider alias here this

would just be like something like this

your slider and then they give you this

shortcode that you can put into your

site so then the shortcode you would put

it into a page any actually any spot you

want so you could just have like a nice

little image gallery maybe you know on

the upon your about page in some kind of

column somewhere just have like a

revolution slider that you know just has

nice images sliding in and out fading in

and out stuff like that so you wherever

you put the shortcode you can put that

slider and select the slider type

standard slider lets you do more than

one slide so you can see how it’s got

the dots the arrows that kind of

indicates that you can swap between

slides the hero scene is only mainly for

one slide it will only use the the first

slide so if you have a slider that has

you know maybe five or six slides but

it’s the hero scene slider type it’ll

only show the first slide that’s just

that that’s just what that’s called the

it’s just called like a hero slide

carousel is more of a it’s kind of what

that was showing with that that iPhone

slider it’s just the carousel slider

like that you can just it’s like a kind

of like a normal image slider where it

just swaps between images and stuff like

that there are other options that you

can choose from stuff like this slide

layout we can make sure that it it will

auto expand within the content that it’s

in or if we wanted to you know do full

width you can see right here there’s an

example

full screen we can have the slider be

the entire screen of whatever person

what are the reviewing it on like this

you can see the examples down here or we

can just do auto let’s do full width the

layer grid size you don’t usually have

to mess with this because it’ll just

automatically set up a grid that’ll work

on all devices but you can also change

that if you want so maybe we don’t want

the slider to be this tall we can then

maybe reduce the height maybe let’s do

600 like that you can see it kind of

reduced that it reduced all the others

to kind of make it consistent down here

is just more of some advanced settings

like you can add some custom CSS to the

slider just go further with the styling

that you wanted to do and then the more

options that we have are over here we

have some general settings so all of

these you can kind of are really

self-explanatory especially when you

hover over them there’s a little

description that shows right there that

says what it does you know you can stop

the slide when somebody hovers over it

it’ll stop it from you know continuing

stop slider after you know so many times

of going through the slider shuffle

random mode you can you know random

slides pop in loop single slide stops

out of viewport so out of viewport is

when somebody would scroll down past the

slider and it’s no longer in their

viewport of their device or their

desktop or whatever you’re using on and

it will it’ll stop the slider from just

continuing on and actually that helps

with site speed because then you know if

somebody’s looking at stuff down further

on the site they’re you know their

browser is still not trying to keep the

revolution slider going the faults

probably don’t have to mess with these

too much these are just some basic you

know transitions animation duration

default slide duration this is what you

might want to adjust maybe you know this

would equal nine seconds for each slide

it goes by milliseconds so nine thousand

milliseconds would be nine seconds for

each slide progress bar you can have the

progress bar which is that little bar at

the top of the slider that you know

slowly grows across as you know the

slider the slides going it’s kind of

showing you you know how how much time

that slide has left first slide don’t

mess with that too much lay out in

visual you can change the layout of the

slider so like you can give it a shadow

underneath slider background I don’t

have to mess with that too much the

spinner I usually turn this off actually

it’s just kind of distracting it’s not

really needed

I mean if like you know the images or

anything aren’t showing up it’s obvious

that it’s loading but you can always

just have a you know default little

thing that’s kind of a nice one to use

too it’s not too distracting so you can

choose different spinners while it’s

loading mobile gives you a little

options position don’t have to mess with

that too much navigation there this is

where you can change the looks of like

the arrows and the buttons and stuff

like that shows you know the different

like navigation Styles arrow style so

you can change you know there’s

different styles that you can choose

from that shows the example there on the

left so there’s a lot to choose from

[Music]

that one’s pretty nice it’s just default

you know arrows visibility always show

you could say maybe no but then when

people hover over the slider then the

arrows pop up so yeah this is these are

just a lot of different customizations

that you can do there’s your bullets

change the bullet style right there like

that

oh that shows like a little thumbnail of

the next slide that’s pretty cool that

shows them in the square form so yep

that’s for the bullets there’s some tabs

you can enable tabs on there like that

that might look nice with like a blog

slider and it shows like an example of

the next one coming up stuff like that

thumbnails you can have thumbnails there

basically what the tabs thing is instead

of the buttons at the instead of the

little circle buttons at the bottom it’d

be like like a thumbnail image of the

next slide or previous slides touch you

can enable touch or you know people on

mobile if they just want to you know

swipe the slides this stuff down here

probably don’t need to mess with too

much this is extra you know extra stuff

to do with it

and then once we have our slider set up

like that we can save the settings it’ll

save the slider and then we can go into

the slide editor and create our first

slide so we’ll let that save okay so

automatically went in here’s our slide

number one and so right off the bat we

can choose a background here’s our main

background we can just have maybe a

color you know we can just have like a

black background for now or we can

choose like a background image go to our

media library put that in there there’s

our background image the stuff source

settings is kind of how if you want to

adjust the the background image

background fit basically you know it

should be cover center centered so

that’ll just put the image right in the

middle and you know fit nice within the

slider filters you can actually add a

filter to your image which is pretty

cool

revolution slider has a lot of different

ones I know a lot of filters are being

used nowadays it kind of looks pretty

cool general settings slide delay which

is that how long it takes that slide to

go to the next one so you would go by

milliseconds so maybe you want we went

this side to be you know six seconds

long so we’d go 6,000 milliseconds and

that would be six seconds for the slide

pause slider you can pause the slider on

that slide and make people you know

manually go to the next one let’s see

yep visible from visible until this is

like uh you can set an expiration date

for the slider there’s actually another

tutorial just mainly for that so that’s

a

feature to use you can have like a ones

that are just you know timed maybe

during like a certain sale you’re having

a sale and you want it to start on a

certain day and you know on a day maybe

it’s going for just the weekend slide

animation you can you know choose what

animation the slide will do on entry and

on the exit fade is usually a pretty

nice little transition to use but there

are a lot of different ones you can

choose as you can see you can always do

random just choose a new like a random

animation for each slide and so that’s

about it for just setting up the slide

and then go down down here and this is

where you can add your different layers

or different like objects we can you

know just plop some text right in there

here is our it let’s put a title alright

and so now we have our page title text

and we want to align it right to the

very middle so let’s do a layer align

center layer align the middle and that

puts a right in the middle of the slider

and from here we can change font size

let’s maybe make this pretty big give it

text size line hype of that actually we

could probably go a little bit higher

for this and what the revolution slider

will do is when you have text or you

have images it’s gonna automatically

reduce the size of them depend on what

device or like how how wide the slider

is or like if you’re on a mobile it’s

going to reduce the text a lot or you

know tablet it’s gonna reduce it down a

little bit compared to desktop and it

just does that to keep everything

consistent and you know looking good

alright so we’ve got page title there

let’s maybe add add a little image just

put like a little heart icon there let’s

align it to the center like this one but

then we want to move it up just a little

bit so let’s change the Y the vertical

the Y alignment which is up-and-down

let’s put 150 okay so that put it that

way just put it above so let’s put it at

nay

150 there we go let’s change it to 50

okay so that work okay

so we’ve got our little icon on there

add a new layer we could do a button we

could add a little video clip just

different shapes so yeah there’s just a

lot of different a lot of different

customizations you can do we’ll align

that there and then this one let’s move

it down maybe 100 pixels okay so we’ve

got our button we can go in edit our

button click me and then we can say

where we want this button to go after

somebody clicks it so when when we click

the button go up to attributes or

actually sorry about the actions do this

little plus icon where it says click

will tell it to you know either go to

like the next slide jump to the next

slide jump to a certain slide there are

a simple link right there simple link

maybe we can go to the about page though

here’s the URL of the about page after

calm after calm it’s this same window or

we can open in a new window it works

best to do the AE tag link jQuery I’ve

noticed that it it can mess up quite a

lot and the link sometimes doesn’t work

so I would always do the a tag and so

then now when somebody clicks on that

button they’ll take them to the about

page and that’s kind of the basics of

the slider there’s a lot of stuff that

you can just kind of mess with and try

it out you know add some shapes maybe

you want actually a shape is good to add

because then you can put that right

behind the text like let’s say something

like this maybe where you can’t really

see the text too well on the background

image so you can add maybe like a shape

like this to the back of it we just want

to make sure that this shape is put

right in the middle there we go

and we want to make sure that the button

is

and the text so where’s our shape here’s

our shape let’s move it up there there

it is

so we got our shape behind our title

make a look you know pops out a little

bit better so yeah that’s basically the

revolution slider I know it’s a long

video but there is quite a lot to the

revolution slider and that was really

just about the basics of it so it’s it’s

kind of a learning curve using it

because there’s just so much to do with

it but like the more that you play with

it and the more that you edit it try out

different slides different you know

objects different transition stuff like

that you you get used to it really quick

Categories
Get Website Results
to our Youtube Channel

Follow Us

Stay in the Know Via Email

Request Free Consultation