The ULTIMATE Slider Revolution 6 Tutorial - 2021

[Music] um [Music] [Music] uh [Music] it's that time again we're going to show you guys how to use the slide of revolution in this video tutorial if you guys don't know who i am my name is jameson from nyc tech club and in this video we're going to show you how to use the premium plugin called the slider revolution so if you want to build a website a portfolio a slider a multiple page slider with video backgrounds color backgrounds transparency whatever type of animation or anything like that this video tutorial is going to show you everything that you need to know about the slider revolution from getting the slider to setting it up to activating it to creating your first slider to creating very complicated sliders we're gonna show you how in this video tutorial so we're gonna be creating four four different sliders and by the end of this video you're gonna know how to use the slider revolution so let me show you guys what we're gonna be building in this video tutorial and then we're going to jump right into it and if you guys have any questions you guys already know leave a comment in the comment section below make sure to give this video a big thumbs up click that subscribe button and let's get started so the first type of slider that i'm going to make in this video tutorial is a youtube hero slider so that means we're going to have a video background but you can insert a color an image or whatever you guys want and we'll also add these different layers so you can see right here we have an icon we'll have some text and a button that you can link to to different parts of your website or your slider and we're also going to be adding animations you can see on the slider revolution builder right here that if i push this play button you can see these layers flow into the slider and we can create transitions animations and we can time them to show up whenever we want so we're gonna be showing you guys how to do this with the first slider in this video tutorial just to get your hands wrapped around how to use the slider revolution so the second slider that we're going to be creating in this video tutorial is using one of the add-on features that you get with the slider revolution so right here is a before and after slider using the before and after add-on and there are a bunch of different add-ons that you get with the slider revolution so we're going to show you how you can access those enable them and actually use them with your different sliders and just remember the goal of this video is to teach you how to use the slider revolution so whether or not you want a before and after slider it doesn't really matter what we're doing is making a bunch of different exercises for you to follow so that you can use all the tools and resources including the grid lines so you can position your items and also these animation features that you can time to make everything flow in however you want so the third type of slider that we're gonna learn how to make is the ken burns effect slider so if you don't know what the ken burns effect is is it takes an image like this and it zooms in on it so you can pinpoint wherever you wanna zoom i've zoomed into the center of these images and it just makes it look like a video so it's a cool little effect that the slider revolution has and that's the goal of this entire video like i said we want to show you all the features and show you how to use them so what we're going to do here is we're going to create a few different sliders so it is a multiple page slider so you can see i have these arrows right here that i can go in between and we have a bunch of different layers that we're going to add some transitions to so we're going to show you the ken burns effect in this video tutorial so let me know if you guys need any help with it in the comment section below so now let me just show you the final slider that we're going to be creating and i don't think you want to miss this one so the fourth slider that we're going to learn how to make is a portfolio slider and the great thing about the slider revolution is that it's actually evolved into more than just a slider plug-in but now you can make a website a portfolio or anything that you guys want so you can see right here that i can transition to different pages and i can click on these thumbnails to bring me to project pages and i can click back right here and then you can see the animations flow in and we can click on these other images and you can create global layers and really just make an entire website using the slider revolution for your wordpress website so again if you guys want to create something like this or know how to use all these features with the slider revolution keep watching this video tutorial because we're going to show you how step by step all right so the first thing that we have to do in this video tutorial is we need to get the slider revolution and there is a link to the text tutorial with all the steps in this video so make sure that you click on it and come to this page right here and on step number one where it says get the slider revolution there is a link right here to the slider revolution website and you're gonna come to this website right here and you can check out all the features on your own but i'm pretty sure you guys know how awesome the slider revolution is so all we're going to do is go to the buy now button so if you don't have the slider revolution already you want to come to this page right here and you want to check out these different plans so there's the annual subscription so if you want to use the plugin for one website then you have this plan right here and then if you have up to three websites or more than that then you can choose these two plans and there is a one-time payment option also so if you click on this it is a little bit more expensive but you pay a one-time fee instead of a yearly payment so it's really up to you guys so just select whatever plan that you guys want and then go through the checkout process and then once you're ready push play and i'll show you how to download the plugin and then install it and activate it onto your wordpress website and once you purchase the slider revolution you should be brought to this page right here and all you have to do is click on the download button and you're going to download a folder and you want to make sure it's a zip file so if you download the folder and it's not a zip file you can see right here that it's a folder with all your content what you want to do is you want to right click this and you want to compress this so we can just make it a zip file so you can see that it's a dot zip just like that and once you have that go back to the wordpress website and just go and install this so hover over plugins click on add new and on this page right here click on upload plugins and then we can go and get that file so let me just drag it in and once we do we can click on install and then click to activate so i already have this plug-in installed so go ahead and do that and then i'm going to show you guys how to activate this plug-in and put in the code so that you get updates so once the plugin is activated you should be brought to this page right here and you can see that we're running the slider revolution 6.4.8 and you might have a more updated version depending on when you watch this video but if you ever want to come to this page you just have to click on slider revolution on the left hand side and you'll come to this page right here and this is where we're going to go to create our modules and access everything but the first thing i want to do is i want to go and make sure our plugin is activated with the slider revolution so if you click on activation you're going to be brought to the registered license key section and what you want to do is paste in your license key over here so that you can access the premium features and also get automatic updates so to get the key you want to go back to the slider revolution page and over here you should see the license key go ahead and copy that and then just paste that into this section and activate the plugin and once you do that you are good to go and i want you to go back to the modules tab over here and now what we're going to do is create our first slider so if you guys are ready let's go to this section right here and we want to click on a new blank module and you're going to come to the start guide right here and i like to go through this just to set up my slider each time i create one so go ahead and click on start guide and then choose the type of module that you want to create so i usually go with a slider but you do have these different options so you can select the one that you want and then just click next right here and then over here you can choose the width that you want for your module so i'm going to go with the full screen option and then click next right here and then over here you can choose the size and formatting for the different devices and i like to go with the intelligent inheriting because this one automatically sets everything up to make the slider responsive so i'm just going to select that one and click on go to editor so once you see this page right here this is the slider revolution builder and this is where we're going to go to add our image our text all that stuff to create our first slider so what i want to do really quickly is just give you a little tour of the section but just remember we're going to go through a lot of this stuff so it's going to make more sense as we actually do exercises of creating new sliders so don't worry if everything is overwhelming right now let me just show you all or where everything kind of is right now just really quickly so if you click back right here you'll go back to the dashboard for the slider you can go back to the wordpress dashboard by clicking on this button and then over here is where you can add some additional sliders so you can see when you hover over this you can add a blank slider you can add bulk sliders you can import modules and templates and you have the global layer settings right here so if you ever have something like text or an icon that you want to show up on every slider then you want to go into the global layers and add that text or setting so that it shows up every slide that you have and then over here you're going to see a list of all the different slide images that you have so right now we only have one slider and that's what we want so we would come in here and select that slide so that we can edit it and you can delete it you can duplicate it you can go into the settings and then over here is where you can add your different modules so you have text image button shape all these different things that you can add to your slider so i'll show you how to use this in just a little bit over here you can see the dimensions for the slider and we're creating a slider for the desktop and that's going to be responsive because it's going to inherit everything and just transform how we want it to on its own because of our selection for creating the slider over here you can zoom in or zoom out for the slider by hovering over this and then dragging this around and then you have the pointer right here that you can select to do different things this is the undo and redo button we'll be making mistakes as we go through this tutorial so we'll probably come here a few different times and you can see right here that we are creating a desktop slider right now but you can turn on these other options to create sliders for these different modules but we don't need to because again the slider is going to be automatically responsive and this is a help button right here but we don't need to go through it so if you guys need to you can always click on this to get some help and then over here is the module general options so for this entire slider project that we're creating this is the general settings so we can change the name for our slider we can change the layout options the content details and then even the slide duration and a bunch of other stuff and over here is the navigation options so if you have more than one slider and you want to have arrows or buttons to let people go to the next slider you can select that over here and this is for the slider so we can add our background image we can add animations for how the slider transitions in and a bunch of other stuff so we'll go through this and then this is for your layers so whenever we add one of these layers we can come in here and customize it we can add content stylize it we can change the positioning and the size and we can even add animations and we can make it visible or invisible based on the different modules or devices okay so again if you're a little overwhelmed don't worry we're gonna do a bunch of hands-on exercises but we will try to go a little fast not too slow but if you ever need any help let me know in the comment section below over here you're going to see a list of all your different layers that you can customize and this is a timeline that shows you where you can add your animations and you can see right now that it goes up to nine seconds because that's how long our slider lasts for and these are just some additional buttons that you don't really need to use but you can always click on them if you want this is for a grid so if you want to place stuff in a certain spot you can turn on the grid just like that and you also have these other buttons and i don't really use them too much so i don't know if we're going to go over them you will be using this play button whenever you add animations and you want to preview what the slider looks like when it loads and all that so we'll make sure to show you how to use this and we'll also be going through the timeline as we create our slider you have the save button right here so you want to make sure that you click on save multiple times as you're creating your slider because you never know when something is going to crash or your battery is going to die and you just want to make sure that your work is saved you also have this preview button so whenever you click on this you'll get a pop-up just to see what the slider looks like and everything that you created okay so let's go ahead and get started with our first slider so we're going to click on this wheel right here to go back to the general module options and in the title section right here we want to name our slider so you can leave the default name right here if you want but i'm going to name mine demo number one and for my alias i'll just type in demo one you can type in a real name or project name whatever you want you'll have the short code right here that we're going to insert into our wordpress page or wherever we want to insert the slider so i'm going to click save right there just to remind you guys that clicking save is a great idea and if you want to change the layout so maybe you don't want a slider anymore maybe you want a carousel you can just select these options over here and you can also change the sizing so instead of full screen maybe you want full width or something like that so down here in the layer area size this is where you can put in the resolution or the screen size that you want to create your slider for so for my macbook i want to change this right here because i know my resolution is about 1440 so let me just show you really quickly if i come over here into system preferences and i open this up i'm going to go back right here into my displays and you can see right here that we have your resolution and if you look down here you'll see the resolution when i hover over the one that i selected it says 1440 by 900. so what i'm going to do is just type in 1400 right here and then for the height i'm going to type in 868 because i think that looks pretty good these ones should adjust automatically so right here this is what i typed in you can type in the same thing if you want you can put in your own resolution whatever works for you guys i'm going to click save right here and that's all we have to do there's nothing else to do over here so i'm going to scroll back up and in the content tab we don't need to do anything here for defaults i do want to mention this because you can see right here we have the slide duration so if you have more than one slide and we'll probably make a slider with two slides or something like that you can change the amount of time that you spend on one slide before it automatically moves to the next slide so right now it's 9 000 milliseconds that means it's nine seconds long if you want to make this first slider show up for maybe four seconds and then move on to the second slider after four seconds you want to change the slide duration right here so if we put in four right there you can see now that the line goes right here because the slider only lasts or shows up for four seconds before it moves on so i'm gonna move this back to nine right here because we're just gonna make it longer because this is only a single slider right now but if you ever want to speed up your sliders or move on to other images then you want to update that right here okay so that's all we have to do in this section right now we can go to the general tab nothing to really do over here you can loop the stuff all this stuff so we're going to talk about this stuff maybe later but right now we don't need to nothing to do on the scroll for the spinner though this is really up to you guys if you want a spinner to show up when the slider is loading you have these different options right here so you can just go through them and this only shows up when the slider is loading so just remember that you do have this option i like to just leave it as none because i don't want people to say oh this website is kind of slow or something's loading here but sometimes it might make sense because maybe you have a complicated slider and you just want people to know that something is coming and it's gonna just gonna take a few seconds to load or something so maybe they'll be looking at this for a few seconds and then your slider loads okay so you can also change the color and all that add-ons right here these are special effects that the slider revolution has and we are going to be using the before and after in this tutorial but you can see you have all these other ones like particle effects scroll video domain switch paint brush and we're going to be creating an updated video on the whiteboard effect so this is for a corporation or someone that has a tutorial or maybe you don't want to use your face and you want to walk people through something they have this hand with a pen that draws everything out so i'm going to make a new tutorial showing you how to use the white board so make sure you subscribe turn on your notifications especially if you want to learn how to do that with the slider revolution six okay so for the time being we don't need to do anything here but if you ever want to add any of these add-ons all you have to do is click on them and then it's going to enable them and you'll see it in the section over here with your sliders and your layouts and all that stuff so right now we can just move on to this tab right here we don't have any navigation options because we're only making one slider image so we don't need to add arrows or anything like that and we can go to the slide options and this is where we're gonna add our background image or video or color so this is for the entire slider and right here go ahead and click on this and the first thing that we're going to do is go into the background tab and you can see right here in this drop down you can add an image you can add an external image a color a youtube video or a vimeo video so first let's just try a color you can see that we select this and we can click on red and now we have this red color right here maybe we say i don't like that we can just undo that just like that and then it goes back to the white color and undo it again and now it's transparent you can also add an image so if i click on image and then click on object library the object library is the slider revolution library so there are a bunch of pre-made images or uploaded images that you can use and you can hover over them and you can see that they have different sizes right here so you can add the original size the large size whatever you want so if we added this large one now we have this image right here and we can click on preview and we can check it out so you can see that this is what it looks like on the desktop and you have these other icon views right here for the different modules and then what we can do is add our different layers and all that stuff so if you like something like that you can keep it but what i want to do is i want to add a video but first if you do want to upload your own images you can always click on media library and you guys already know how to do this just go to upload files upload your own file or what you can do if you want the demo content is i do have a text tutorial on how to use the slider revolution six and we have every step typed out that we're going to be going over in this video tutorial and i also have a link to the demo content that you can upload okay so just keep that in mind and you can see we have all the demo content right here so let's go and add a video just because i think that's more fun and kind of cool but you can always add your own image if you want instead of a video but right now we're just going to show you how to use a youtube video so if you have vimeo or html5 then you can add that but i'm going to click on youtube right here and all you have to do is add the youtube id right here so i have a youtube tab opened up right here for this time lapse video and you can see when i push play it's kind of cool it has a bunch of stuff going on here and i thought it'd be kind of fun just to add this just to show you guys so all you have to do is click on the share button right here and you'll get the url for the video and all you need is the end because this is the id for the video so i'm just going to highlight and copy that and then go back to the slider revolution and paste that in right over here so once we do that what we want to do is we want to add an image so that's going to be a placeholder image that we can add for this video so what i want to do is i want to upload a thumbnail so in the media library we do have some demo images and we have a few different images here i'm going to use this one because this one is going to work really well with where i'm going to start my video so if you guys want to use that go ahead and just upload the demo content and click insert and you'll see the image show up right here so this is the demo placeholder image and what we can do after we add the id and our image is come down to the youtube settings and you can see right here that there are a few different options so you can loop this video and that's what we're going to do and we're also going to rewind to the start but what i want to do is change the start time so instead of starting at the beginning of the video i want to start it where this clip starts so what i'm going to do is come in here because this is the start and this is the end time that you can add i'm going to type in 0 57 because i'm going to start this at 57 seconds for the video and i'm going to end it at a minute 44 so it loops between this time period and you can add volume here so i think you can change this from like 0 to 100 i like to just leave this as 0 and you can also speed up or slow down this video if you want also and you can also add an overlay for the video if you wanted to but we're going to leave it as transparent because i think it's just a beautiful video on its own and now what we're going to do is we have our background image right here so let's click save really quickly so you can see that that's saved and let's click on preview and we're going to let this load and you can see once it loads we have our video right here and it looks amazing well i don't know about amazing but it looks pretty good so again you can check it out on different devices if you want so you have all these different options and i'm going to click on the x right here so we can go to the thumbnail and we can add our own thumbnail for this image and that just shows up on the dashboard for the slider revolution so i'm going to click on select right here and just click the same image just to insert it so you can see we have it right there good to go and now what we can do is go to the animation tab and again we're on the slider options and what we can do is we can choose the animation that we want or the transition that we want for when the slider shows up so over here you have these presets and i'm going to click through them and i just want to show you the different ones but i am going to use the default one so if i click on column right here and i click on slide you can see when i hover over this that you have these different transitions and again you have all these different options so you can hover over this so it just depends how you want the slider to load up onto the web page for your visitors and you do have the base options so these ones are very simple ones so if i clicked on this you can see it's a lot more simple than some of those other ones so we have something like this but if you guys want we can just go with the fade option this is the default one so if you didn't change anything then you're good to go just like that okay so i'm going to close that and then down here in the timing this is where you can choose how long it's going to take for the transition or the animation to take effect so right now it takes one second and it's going to happen right at the beginning of the slider but if you want to move this around you can make it longer so let's make this five seconds just to show you how long it's going to take so if i click on the play button right here you can see how long it takes for the transition to occur because it's gonna take place over five seconds instead of one second so we're gonna change this back to one right here and just push enter so you can see right here that the animation occurs right at the beginning and it takes one second or 1000 milliseconds okay so that's just something for you guys and i think that's about it that we have to do here so i don't want to waste too much time showing you guys things that we don't need to do so we're gonna skip everything else here because there's nothing for us to go through but if we need to we can always come back to the section so this is the layer options and right now the only layer that we have is the slide bg animation so that says background image so what we want to do right now is we want to add our different layers and i can show you really quickly because i do have the demo builder right here that we have a bunch of different layers so you can see right here we have a film icon we have the headline sub headline and then a button so let's go ahead and add this stuff to our slider so let me just go back to the slider revolution right over here to add our first layer we're going to hover over layer and then you can add whatever you want what we're going to do is add a text layer so hover over text and let's click on headline and you should see it show up right here and you can click and drag it around you have these options right here to select the preset layout so this just gives you a little head start so we can select this one right here and click on the x and now in the layer options you can see that this layer is highlighted and we can go and customize this layer however we want so if we click on content right here we can change the text so i'll type in youtube hero and then we can go to the style tab and we can change the font size and spacing but first we want to change the font family so let's go in here and just type in railway if you guys want to use the same font and then over here this is the text size the height the boldness and then the spacing so what i'm going to do is just come in here and we're going to change this to 70 and then for the boldness we're going to come in here and make it super bold so just do 800 and then for the spacing we'll just go with negative one right there and you're probably wondering is this centered or where is this so again what you can do is click preview and you can see that it's a little high right there and we want to move it to the right spot so you can always eyeball it drag it to wherever you want and you can always turn on the grid options over here if you guys wanted to and then you can see that you can put it inside the grid but the easiest way is to go to the size and positioning button right over here and then you have the alignment you can center this in the center of the slider so wherever you position it like maybe i want to push this in on this line over here if i click center it's going to put in the center but if you want it in the center center the very center of the slider if you click on this now it's going to be in the super center so let me just show you again you can see it's right in the middle of the screen just like that so again you can move this around if you want to or leave it just like that so it's right here 0 0 is the x and y let's just leave it like that for now and what we can do is we can come down here everything looks pretty good so there's nothing else to do right here what we can do is also add an animation i think i'm going to talk about animations at the end after we add all of our different layers so let's just add our sub headline right now and then we'll talk about this other stuff after that so again hover over layer click on text or highlight it and then click on content right here and then we have our second layer we can just place it maybe right here and we can choose one of these options it doesn't matter which one we choose because we're going to come in and customize it we'll come into the content section and again you can see that now we're on the second layer so maybe what we can do is we can just double click on this text right here and we can delete this and we can type in headline just so that you guys understand that these are different layers and then i'll come into this one and type in sub headline so that you know that we're clicking on this one right here and what i'm going to do is just type in some text right here so i'm going to delete this and i'm going to type in the revolution is here and i just made that up so what we want to do is we can go to size and positioning we can center this and you can see it's right there maybe we want to eyeball it and move it around and then we can center it again just like that and if you want a little higher that's fine too it's really up to you guys and let's go to the style tab and the first thing you always want to do is change the font family so we'll change it to railway right there and then we can change the font size so we'll do 14 and we'll keep that at 20. we'll do 500 right here and we'll do 4 right here and if you're wondering how i came up with these numbers it's because of trial and error just figuring out what i liked what looked good and then just putting it in so i do have it written down so i'm not memorizing everything but to make these tutorials the right way and make them flow you kind of have to know what you're putting in so that we don't make this a really sloppy tutorial and over here you can see that you can change the text color if you wanted to so you can see we can make it red or you can change it to whatever color you can also just undo that by just clicking on that like that and again click on the save button just to save it and that's all we have to do right now let's go and add our next layer which is going to be a button so hover over button click on that you'll see it show up you have all these different options right here for different types of buttons so you can select whatever button that you want i'm going to go with this one right here so i'm going to click on the x so that we come into the layer options and we can just click and drag this to wherever we want to place it so maybe that looks pretty good and we can come into size and positioning and just center this just to make sure it's at the zero point on the x-axis and then we can come in here and we can type in over whatever we want so i'm going to type in continue to cite and i don't need to change any of that text i'm going to come into the style tab though and change this text to railway and then we can change the size right here so what we can do is we can change the font size right here to 14 and then just change the spacing to three right here and we can come down to the border section right here and we can change the border to a dash border so you can see we have these little dots right here instead and we can also change the border color to white if we want and then what we can do is we can go to the hover tab right here click on that so we can change the effect when we hover over this so if you want to do that we can come down to the style tab right here we can change the font color to black and then the background color maybe we'll change it to white and then the border color will change this to white also and we'll just make this either dashed or solid it's really up to you so maybe we'll leave it as solid right there and let me just show you what it looks like so we'll load this up and we have our slider right here and you can see when you hover over it that's what it looks like right now so we don't really have a border when you hover over it and it looks pretty good so we are going to be working with the animations a little bit later and we'll try to make it so that there isn't that black screen when we load the video and also we'll get all this other stuff to fade in a cool way when we load our slider okay so don't worry about that stuff right now let's just click save right here and the last thing that we're going to do is add a little icon so if you guys want to do that let's go and add another layer so we'll hover over the add layer and come down to icon click on that and you'll get this pop-up right here and you can choose whatever type of icon that you want or you can just come up here and just type in whatever you want to search for so we'll type in film right here and you can see that we have this one right here i'm going to click on the plus button and we have it right here and we can drag it to wherever we want to place it i'm not sure it's going to look good right here but we'll see so we're on this layer right here we're going to go to the style tab and i'm just going to decrease the font to 40 right here and then maybe we'll move it right over here and then we'll just center it so let's see what that looks like really quickly so that looks pretty good so i kind of like that and we'll just leave it just like that for now and i'm going to close that and one of the things that i didn't do and i think you should is always just make sure to re-label these so you can kind of know where everything is so i'm going to double click on this and just type an icon right here and then if you want to drag these around so that we have everything in order you can also do that so you can see we have icon headline sub headline and button right there okay so i'm going to click on the plus button or i mean the save button right there and we have everything set up and just know that you can also hide this right here but you can't see everything so you do have to go to the preview screen to see all that stuff if you want to make it the font larger you can and then if you want the section to pop up just put your mouse down here you can scroll or just hover over it so now what i want to do is i want to talk about the animations and you can see right here for the slide bg animation this is for when the entire slider loads and you can just drag this corner right here to make it longer so i'm going to drag it to about 3000 and that's just going to make it so that the slider loads in three seconds instead of just one second so you can see that everything kind of loads quickly because everything is at .3 seconds but the slider takes a little bit longer so let me just move this up so that you can actually see it so don't worry that i'm doing this right now but you can see when i push the play button right here the slider takes a little bit longer than before for everything to load because this is three seconds now for the animation to fade in instead of one second okay so i'm gonna drag this stuff back here because i do want to talk about all these other things so first let's talk about this headline so click on the headline and you can see that it has a box around it if we go into the layer options and in the animation tab right here you're gonna see this keyframe section and in the in section right here if you go into this drop down this is where you can select the animation for this layer to show up so what i mean is i can go into this stuff right here so you can see it's a slide transition and if we want this one where it says short slide from bottom you can see when i hover over it that it just slides in like that or one of these ones like this the one that i want is this pop-up one and i think i'm going to go with the smooth pop-up v2 so i'm going to select that and we want to change the duration so right here you can see it says 1000 i'm going to change this to 1500 if i can type that in correctly and we can change the start time so right now it's at zero if you guys want we can change it to maybe 400 or maybe 500 it really is up to you guys so once we add all the other animations we can figure out the right time to start this stuff and if we had another slider and we wanted to transition out of this page we can have this layer transition out by coming into the out tab and then choosing the animation that we want to transition out so maybe we'll just add one just for fun we can choose the slide to the left so if there was another slider then this would just slide out just like that okay so what i'm gonna do is just click on the play button just so that you can see that it shows up just like that that looks really good so we're gonna click save and we're gonna go through these other ones really quickly so you don't need to choose the same animations sometimes it's actually better to mix them up it looks more professional that things kind of come in at different levels or details so you can see that we selected the sub headline now and don't worry that you can see the background that's because we're in the animation tab and what we want to do is just again go into the in section and choose the animation that we want for when this layer shows up on the screen so if you guys want we can go with the slide transition and go from the bottom for this one and then we'll change the duration again i like 1500 so it's like 1.5 seconds and we'll just change this to maybe i don't know 550 right here so it's going to show up a little bit later than the headline so let's do the button next and again we can just choose whatever we want so maybe we'll choose i don't know maybe slide from top that one might actually clutter it a little bit so i'm gonna go with one of these ones let's see i think this one's pretty good pop-up smooth so i'm kind of just winging this right now so i don't really know which ones i want to use you can use pretty much any of them and this one will maybe do 550 also and then the last thing is the icon right here and i didn't do any out animations for these because again this is the only slider but i could have selected one if i wanted to for this one i'm gonna slide it down so from the top oh i'm still on the button so that's the wrong one i'm going to go to this one right here make sure i select that and then i want to go slide from top and then we'll do 1500 right here and also we'll start this one at 550. so you can see that this one's going to show up a little bit sooner than all these other ones let's go ahead and click on the preview button and i didn't see the button i don't know why i didn't see the button right there let's see if we click on the preview button right here and see what we're missing oh that looks pretty good i don't know if you guys saw the animation let's try that one again i don't know why the button's not showing up here it's a little weird but you can see i'm going to click save right here and then you have the preview right here look at those animations amazing and we can actually make them longer if we wanted to so it's really up to you guys it just slows it down and all that stuff and right here this button i don't know why you're not showing up button but there you are so that's pretty much it so again what you can do for these animations is if you click on the stuff go to the animation tab and again you can add the outro animation also so for the sub headline we come in here and maybe we can make everything just slide to the left so we'll make all these things slide to the left i'm going to go into the button one and then make this one slide to the left and even the icon right here and again the animation for the out only works if we're transiting to another slide but i'm just adding that just because i want to cover all my bases and i think that's pretty much it we're done with this first slider and you can see that the animations show up i think your visitors will be really impressed and if you want to insert this into the wordpress page let me show you how to do that so again click on the save button make sure everything is saved and we can go back and we can go and insert the slider onto a wordpress page so i'm going to click on the w right here and we're going to go to pages and once we're on this page right here i'm just going to add a new page so this is just going to be a demo page so demo number one and all we do is click on the plus button right here click on slider revolution and then choose the slider that we want to add so we're gonna add this demo one that we just created and on the pages tab right here you can go into the template and choose the slider revolution blank or whatever template that you want for your theme and then i'm going to click publish right here and once it's published let's go and check it out so click on view page and we should see the slider load just like that and then just remember i'm using a youtube video so it does have that title for the video at the top but this is our slider and you have the button right here i didn't show you guys how to link the button so let me just show you how to do that after we enjoy this little time lapse right here kind of cool right so let me know if you guys have any questions about this but let me show you how you can add an action to this button really quickly so i'm going to hover over slider revolution click back into the demo one right here to reload the slider that we just created if you want to add a link to any of this stuff all you have to do is click on the layer so you can see we're on the button layer right here and the layer options over here where it says action this is where you can choose what can happen if you click on this layer so if you click on actions right here you're going to get this pop-up right here and you can see that we have our button right here and then you have your link actions and slide actions so if we just want the button to go to another page then we can click on simple link right here and then you can type in the url for whatever that page is right here so i'm just gonna put in a hashtag but if you guys wanted to make it so that it goes to another slider then what you can do is you can delete this and then for the button you can make it jump to another slide or the next slide so if you had a bunch of other sliders you would come in here and then choose the slider that you wanted to jump to okay so you can always just remove that action by clicking on the trash button and then again all you have to do if you want to link it to another page is just click on simple link and then type in that url right over here and then you have options to open up in a new tab or the same tab and all that stuff so i'm going to close that click save right here and pretty much that's it so again this is the first slider that we just created using the slider revolution six let me know if you guys have any questions we added a video background but you can always add a color or an image super super easy and this is just a one-page slider so if you guys want let's move on to the next slide so the next type of slider that we're going to learn how to make is this one right here with this add-on effect so you can see right here we have a before and after all you have to do is just drag this button and you can see what the slider looks like so we can split it in half just like this and it's kind of like a parallax effect where you have layers for your slider and you have one thing on the side and then you have another thing on this side and you can see it just like this so if you want to create something like this or know how to do it with the slider revolution 6 let's go and create a new slider so back on the slider revolution dashboard right here what we want to do is create a new blank module so go ahead and click on that and once you come to the start guide just click start and we can select the slider option that we want i'm just going to go with the slider right there and then we'll come down here click next and let's go full screen again and then we'll just click go to editor and once we're back on the slider revolution six builder we're gonna change the title first so i'll just type in demo two and then right here we'll just type in demo two and you can see that it updates the shortcode and the layout option i want to change the width right here and this is personal preference just for my slider you don't need to do this it depends on the width of your website or your own desktop monitor and all that stuff so i'm going to put in 1400 and 868 you can do that if you guys want also and then for the default right here remember the slide duration is how long that this slider works until we go to the next screen if you have more than one slider so you can always change this to make it shorter if you want okay so the only other thing is i'm gonna go to add-ons over here and i already have the before and after installed so what you have to do is click on it and install it so if i clicked on particle effects you can see right here click on install and then once you do that click back into before and after and then you should see enable add-on go ahead and click on that and now what you should see is this before and after section and this is what we want so you can see we have our settings here we don't need to do anything but what we want to do is add our background image for the before and the after so if you want to do that all we have to do is go into the slide options right here in background we have before and after so go ahead and just come into the section and activate that and now if you go back into background you have before and after so we're going to change this to a color so go ahead and click on color right here and then go into the color pad and you can see that we have our color code right here but instead of a solid color i want to click on this icon to make it a gradient and then right here in the color code i'm going to remove this and replace it with zero five zero zero one nine and you can see that we have this gradient color so it's nice little fade and i can remove this or move this a little bit so you can see it so you can see it's darker at the top and then lighter at the bottom and i think you can change that around based on the settings right here but i kind of like this so we have this right here and then i want to add the after color so i'm going to click on this tab right here and again go into the color tab and then just go into the color pad and again go to the gradient and then right here just change this color so i'm going to paste in ce02c7 and once i push enter you can see it's this pink color just like that so we'll click ok and now we have the before and the after and everything looks great so i'm going to click on save really quickly and just remember to get the before and after section you need to come over here and enable this for the slide options okay so we have everything that we need and what we can do is if you guys want to change the animation you can do that over here and just remember that the animation for the slide options is for the slider loading alright so now what we're going to do is add our different layers so let's go and hover over add layer and what we want to do is add our computer image so hover over image and we can go to the wordpress library and just remember there are a bunch of demo content right over here so this is the after computer the one that i want is this before one so i'm gonna select that and you can see that it's really large you can't even really see the image so in the size and positioning for the image right here what i want to do is just come into the width and the height and i'm going to change this to 1000 for the width and the height just like that and now we can drag this around and place it wherever we want but the problem is i have the pink background which means that we are in the after slider and i want to switch this to the before slider so to do that in the layer options you can see we have the before and after click on that and then you can change your work environment right here so we want to change it to the before and now you can see that the background changes so this is a lot better and all we have to do is just put this in the right position so what i'm going to do is just center this so it'll go to 0px and then for the y-axis what i'm going to do is i'm going to move it up to negative 350 and just push enter and you should see it just like that so let's go and preview it so you can see it shows up we'll add an animation after we add everything so i like to do the animations at the end just so that i can see all the different layers and then figure out how i want everything to flow in so because this might get a little sloppy we want to make sure that we always re-label our layers so that we know which layer is which so i'm going to double-click this and just type in before macbook or before image or whatever you want to type in so we have this right here and you can see the environment is before right there you can also lock this stuff if you ever want to make it so no one can edit it just in case you don't want to mess it up or anything like that so we're going to leave it just like this though we don't need to lock anything because i think we'll be pretty safe but you never know so i'm going to click save right there and we have our first image right here and now what we want to do is insert the other things such as a keyboard right here so again let's hover over add layer click on image and go to the wordpress library and in the library let's scroll down and find the keyboard so we'll just insert this and once it's inserted again it's going to be super large so we want to change the size right here so again go to size and position and then in the width right here just remove this and type in 600 by 600 and you should see that it's going to be smaller and then you can drag it to wherever you want so for some of these you might want to center it sometimes you want to eyeball it so i'm going to eyeball this one because i think it actually looks better a little off-center so let's just preview this really quickly and you can see that it looks a little off-center but i actually like it because if it is moved too much over here because this is kind of slanted it looks a little weird so i might leave it just like that but i could also center this so if in case you guys want it to be centered i'll just center it just like that okay so now we have this right here and again we want to relabel this so we'll just do before keyboard and push enter right there and let's click on the save button and once that's saved now what we're going to do is add a text layer so let's just click to add a headline and it doesn't really matter which type we select because we can always go in and customize it let's drag it down here just so that we can see where we're going to place it and then we'll close out of this we'll go into the content tab right here and we'll just change this to before and then in the style tab what i want to do is change the font family to montserra i believe it's what it's called so m-o-n-t and then we can change the font size right here so let's type in 80 and then 120 and we'll do 400 right here and then for the letter spacing we're going to go with 50. so just type that in it spaces it out so you can see that we have our text right here and then we can come into the size and positioning and we can move this around if you wanted to center it you can but let me show you what it looks like when we do center it so it's a little off because the computer screen is angled so i'm going to move it more to the right hand side over here just to give it the illusion that it's centered so this is something that i'm going to do you don't need to i'm gonna change it to 20 right here and maybe we'll move this up a little bit so something like that so again i'm going to change this back to 20 and i think that looks pretty good now we'll just add a button at the bottom over here if we wanted to we can move everything up a little bit just so that we have more room at the bottom but i think we'll just leave it just because um this is just a demo so it doesn't need to be perfect but and if i was to make this for myself i'd probably ship this stuff up a little bit so maybe i will do that just because i don't like to leave things not really how i would want them especially when i'm creating these tutorials for you guys so we'll just keep that at zero for the x oops let me just make sure i have that and then we'll come into this one and we'll drag this one up also so we'll keep it at 20 something like that and we'll change the text right here so i'll double click on this and just type in before text and just push enter and then we'll click on the preview button just to see it now we'll add a button at the bottom over there okay so if you guys want to do that let's click on the save button because we want to make sure that we save everything and then let's go to our layers and click to add a new button and you can see that we have a bunch of different button options here i think the one that i'm going to choose is just going to be this one right here and we're going to make it transparent so i'm going to scroll down on my slider or i actually want to drag this down here we're going to place it around right over here and then we'll close out of this and let's go to the content section first and just add our text so highlight this so we're going to highlight this and i'm going to type in make a choice and i'm not going to really have a link to this but i'm just putting in some random text right here and then what we want to do is go to the style tab and let's change the font family to monstera and then we can put in the font size right here so we're going to go with 16 and then we'll do 60 700 for the boldness and 5 for the letter spacing and then what we can do is we can change the background color so if we come down here to the background color instead of black what i'm going to do is type in 5 four five four five four and it's this gray color that you see right here so i'm gonna click on the check mark and you can see it right there and the hover looks fine so i'll leave that just as is maybe we'll place it right over here and we can always check so let's go into the size and positioning right here let's just center this and let's take a look let's click on the preview button just to see if it looks pretty good and i think it looks fine we could always move this over a little bit if you guys think that we need to optically so i might do that because it does look a little bit off so maybe we'll move it i don't know 20 is that too much let's see that's a little too much so maybe we'll do something like ten or five it's just nothing too extreme so we're gonna go 10 here and let's just see and sometimes you have to do this you have to go back and forth and again that looks like it's too much so i'm gonna go with just two and perfect i think that looks pretty good you guys let me know maybe i'm a stickler for optical illusions but this looks pretty good to me so we're just going to leave it just like that so perfect i'm going to click save right here and now we have the before slider right here and what we want to do is we want to create the environment for the after slider so everything is going to look the same for my slider except for the text right here i believe so i can collapse this and you can see that this is my builder for the already made slider and if i click on the preview button you're going to see the differences so everything animates in which is what we want and then for the after the text is going to change and then the screen is going to change but everything else stays the same so let me show you a shortcut to create everything just like this so let's go back to our slider right here and what we can do is we can actually duplicate everything so first we have to change the label for this so let's just double click on this and put in before button and now we have the before mac that's this big image right here we can hover over this click on the layer and then we can duplicate this so hover over this and just click on duplicate and you'll see a copy of it i'm going to double click just so that you can see and we're going to type in after macbook and we're going to go into the environment right here and click on after so you can see that we have a different background and then what i want to do for this layer is i'm going to go to the content and we're going to change this image to the other image so all we have to do is just replace this go into the media library go and find the image that you want to use and replace it just like that and then i'm going to click save just to show you because we duplicated it we already have it in the same exact position that we have it for the other one and you don't need to have everything the same you can always move things around and have a different slider but for my transition and what i want i want to keep the monitor in the same position so now let's click the preview button and you'll see that we have this right here and when the after shows up now we have this screen right here that is the same exact location but we just changed the image pretty easy and we're going to do that with all these other layers so we have the keyboard right here let's click on that and again all we have to do is just duplicate it and then once we do that we can first just change the label so we'll just do after keyboard and again this is just to keep track of all your different layers and then what we can do is go into the before and after and in the environment right here just change it to the after and now this is set for what shows up on the after slide so again we can change the animations we can change whatever we want but we can also just leave it just like that so for the text we do want to change the text to say after but we're going to put it in the same location so instead of having to position it and reformat the text we can just highlight this layer go to duplicate and now we have two of the same i'm gonna change the layer first after text and i need that t right there so let me just come back in here and just type it in correctly and then in the before and after we're going to come here just put that to after change the content to say after right here and then we'll just put in our button and again we'll duplicate this and i'll change the label and you can see how easy this is now if you wanted to add some additional stuff on the after you could or maybe the before you don't even need to have everything in the same spot i just want to do that so we would need to change the environment here so let's say for example before i change this that we didn't change it let's see what happens let's go to the preview and you can see that we have the before and we didn't change this button that we have two of for the after so you can see that it's missing the button right there so what we want to do for this after layer is just make sure we come in here and click after just like that we'll click save to save it and then we can come into the preview again and now you should see everything just like that okay so pretty easy and that's about it so we can add different animations so we can make things flow in for both sides or we can just make it flow in for the before slider it's really up to you guys i think what i'm going to do is i'll show you some animations and then you can choose what you guys want to do if you guys want to lock any of these after you edit them you can so that nothing gets messed up but again it's up to you so we're going to click save and what i want to do is go into the text or the layers for the before stuff so let's go to the before keyboard right here or actually before macbook let's click on that and let's talk about the animation so let's click on animation right here okay so let's click on animation and let's just add whatever type of animations that we want so first we're doing the macbook right here so in the in section right here i'm gonna make it slide down i think so let's see we'll just do this one short slide from top and i'm gonna change the duration to two seconds so we'll put in 2000 right there and instead of putting in a time right here to start it i'm just going to drag it a little bit so maybe we'll start it at 300 right there and then what we can do is we can find the keyboard so we're doing the before keyboard i'm going to click on this one right here and then in the animations right here i'm going to go in to the rotations i think and let's see how we can rotate that one i kind of like that so this one kind of flips in so we'll select that one and again in the duration i'll do 2000 seconds and we'll start this one a little bit after the macbook shows up so maybe around right there i'm just kind of guessing right now and i could rearrange these to put these in order for all the before stuff but i think i'll just scroll up so we have the before text right here and what we're going to do with the before text down here is we're going to make it slide down so we'll go into the slide transitions and we'll do short slide from bottom or actually we're gonna do down so i'm gonna short slide it from the top so i'll select that and again two seconds so two thousand milliseconds and we'll start it maybe a little bit right here and then the last thing that we're going to do is the button so we have the before button right here and then i'm going to slide this one up because i think i did slide down on this one so we're going to go short slide short slide from bottom if i can say that correctly and then we'll just do 2000 seconds here and we'll make this one kind of slide right after so you can push the play button right here to kind of see but you can't see everything so what i'm going to do is click on your preview and see if you can see the animations so we have everything kind of voila pretty cool and you can change the timing if you want so again we can push the play button here and you can see that they show up just like that and if we wanted to we can make it a little quicker but i kind of like that and this is just a demo you don't have to do anything for the after but you always can if you wanted to and you can also do animations out if you are transiting to another slider so again we did that in the first demo so i'm not going to do it here i just want to add a different slider animation for the keyboard which is the one that kind of rotates a little bit so again you can see it just like that kind of cool and maybe it took a little too long so we can always just drag these over if you want something like this so again if you guys don't like what you see then you can always just rearrange it and edit it that's the power of the slider revolution and i'm going to keep it just like that so again this is the before and after so again just to summarize what you want to do is you want to go to the general options on the add-ons right here you can enable whatever you need to so just go and install it enable it and then you have the little button over here so you can always go into the effects and customize whatever you need to okay so what i think i'm going to do now is we're going to create another slider using the ken burns effect and we'll make it a two page slider so that we can add some arrows to go to the next slide and we can also use the duration to change the timing and everything like that and then we're gonna go into the main event which is the portfolio slider after that okay so let's move on to the next slider if you guys want to so i'm gonna close out of this and just remember if you want to insert the slider it's super super easy so again just save this and then you can hover over wordpress right here and then go to your pages and once you're on the pages list just click to add new and all we're going to do is just type in our page title and then we can come in here and click on the plus button and then click on the slider revolution click on the slider that we want to show up and then select the template that you want to use so i'm just going to use the blank template for the slider revolution just so that you can see the full slider but if you are using a different template then you want to take into consideration the header section so you can see right here that we have our before and after slider super easy and again if you guys have any questions about add-ons or anything like that we'll probably use another one in this video tutorial but let me know in the comment section below okay so now let's go and create our next slider so the next slider that we're gonna make is a two page slider with the ken burns effect so this is an effect that lets you zoom in so let me show you a preview of the slider that we're gonna make and so you can see right here this is the first slider image and you can see that just zooms in just like that and you can see with the second slider we transition into it and we also have the ken burns effect where you can make it zoom in to whatever location that you want on the image and we do have these navigation arrows right here to go back and forth between our slider images so if you want to learn how to use the ken burns effect and create a multiple page slider let's go back to the slider revolution so once we're back on the slider revolution dashboard let's go and create a new module right over here and we're going to go a little faster this time because i think with some of the other exercises that we've already done i don't want to repeat all the steps because you kind of already know how to do a lot of the basic stuff so we're going to create a slider and we're going to go with the full screen option because i think that's the best one and we'll just go with the inherent or intelligent inheriting so we'll click go to editor right here and the first thing we're gonna do is change the name so over here we'll just type in demo number three and i'll just put in the alias right there and i'll click save and then i'm gonna go to the layout and just make sure that everything looks good i'll change the width right here to 1400 and then this one to 868 and just push enter right there i'll click save again just to save everything and i'm going to leave the stuff over here all the same so i'm going to go to the default tab over here and if you want to change the slide duration we can do that right here so maybe we want to make it 6 seconds or 7.5 seconds instead of 9 seconds just to shorten it a little bit so i think i'll do that right there and we don't need to add an add-on this time because we're not using any of these but if you want to you can install them and enable them so what we're gonna do is we're just going to go to the slider layout over here and we're adding our first background image so over here in background i'm going to come in here select image and then go to the media library if i want to use one of these images i can i can always upload my own image what's really cool and i think i mentioned this earlier is there is an object library so this is the slider revolution library with a bunch of different images and everything so you do have to let it load and once it does you should see a bunch of different images here so what we can do is just click on show all to show all the different images and this is the first one i'm going to select so you can see riding bicycle and you have different sizes for different slider images so it's really up to you i usually use the original but since the image is inside the dimensions for the slider that i'm making i'm just going to select the large option so you can see that it shows up right here and what we can do if you want is change the animation over here so again remember the default one is the fade in but if you want any of these other ones you can select them on your own okay so let me just add the layers really quickly for this one and then we're going to talk about the ken burns effect right over here so first i'm going to add a headline layer so let me just hover over this again and click on headline and once this pops up i'll just select the headline that i want and then i'll drag it to wherever i want to place it and then we'll come into the layer option and we'll just type in our text so we have our new layer right here so we can come in here and we can change this text so i'm going to type in fit for fit exercises and you can see that it's already capitalized because of the template that i choose for this section and what we can do is we can go into the style tab right here and we can change the font size so first let's change the font style let's come in here and let's change this to robot to a mono and now let's go and change the font size so we're going to type in 85 and we'll leave that at 70. we'll leave this at 500 and this at negative 1. so what i want to do is i want to place this in the correct position so let me just center this really quickly and let's click preview i think i need to lower it quite a bit so we're going to move it down here by the handlebars so let's just drag this down and we can close this if we need to so we'll put it around right over here and we'll just center this again so let me click save really quickly and just preview it and that looks pretty good maybe i'll move it up because you can see that little line right there and then we'll go and add our next headline so i'm going to just move it right over here and just center that and now what we can do is add our next text headline or sub headline so we'll go with the content option and again just remember i'm going a little faster because i want to get to the ken burn stuff because i know that's important for everyone so we're going to close this and we're going to format this text so don't worry about how this looks we'll come over here and we'll just type in your goals are required and once we do that we can go to the style tab and again change the font family we want to be consistent so we'll go with roboto mono and then what we're going to do is format the text so for the font size we're going to go with 25 and then the height we'll do 25 we'll do 400 right here and then we'll do four for the spacing and if you guys want we can go to the positioning and just center this just like that so it's really up to you where you want to put it it might look a little messy right there because of that line but it's okay we'll just leave it just like that and you can see pretty good so now let's add a button really quickly and just remember this is just all stuff that we've done before and that's why i'm going a little faster because i'm repeating the same steps and i don't want to waste too much time showing you guys how to do something you already know we want to get to the fun stuff which is learning how to edit the ken burns effect so we're going to come into the content section for the button section we'll relabel these in just a moment and over here we'll just delete this and once we do that we can go to the size and positioning maybe center this and then we'll go into styling change the font size so again robot to mono and then we're going to change the font size to 18 we'll do 40 and then for the boldness we'll keep this at 500 and we'll change the line height or spacing to 5px so you can see we have our button right here well maybe we'll move it a little bit lower and i want to add some formatting for the border so over here you can see that we have a solid border if you want to change it to a dashboard you can just like that and when you hover over it i don't know if it makes any changes but let's go and check it out so you can see right here that list looks pretty good so if you guys want we can add some animations really quickly so let's just change this stuff really quickly let's highlight this double click it and put in sub headline and then this one is going to be the headline and it's always good to do this just to keep everything organized and then we'll put in button right here and if you guys want we can drag these around i think it'll make more sense to do that when we add our different animations so now we have our different layers and we're going to go into animation right here what should we add for the first layer let's go with a transition from the top and we'll just change this to i don't know 2 000 and then we'll come to the sub headline and we'll add another animation we'll go from the left and again we'll go with 2000 and then for the button let's go with something that slides up from the bottom right here and again we'll go 2000 okay so we have all of our different layers now and we can cascade these if we want so maybe we'll do something like this and then we'll drag this one out so it comes a little bit later and then this one like this so you can see that we have a cascade so when we press play you can see that it loads like that pretty cool and this is all stuff that we already know how to do so now what we want to do is add the ken burns effect which allows us to zoom in on any point on the image so we're going to try to zoom in over here a little bit so if you want to use the ken burns effect so maybe you don't have a video but you have an image that you want to add a cool effect to then all you have to do is in the slide options right here you have the ken burns effect go ahead and click on that and then you want to enable the pan zoom settings so click on right here and then you can see right here that this is where you're going to zoom into so right now it's in the center but if you wanted to zoom into something else like the top over here then you can do that and then you can zoom in from just 100 which is the original image into a more detailed section so maybe we want to do like 200 or 400 and then this is the x and y axis so i think this is the x and this is the y if i remember my math correctly so what we can do is just change this right here to another number and you can put in positives or negatives so we're just going to do some different numbers really quickly so i have 400 or 40 and 300 so let's see what happens when we push the play button now with our zoom you can see now that we have that zoom just like that let's preview that one more time pretty cool you can see how long it zooms for two and the reason why it zooms that long is because we have our duration right here and normally it should be the duration of the slider time so right now it's 10 seconds which is fine it if it runs longer that's okay because the slider only lasts a certain number of seconds but you can always shorten it so it will stop too if you wanted to if you made the six seconds and then the slider ran for seven seconds before it switches to the next slider does that make sense so you can also rotate this if you have degrees this looks a little weird though but i'm gonna put this in for you guys just in case you want to do this you can see that it rotates just like that and i think i have to leave my mouse over it or under it so you can see how it rotates i think that's a little weird because you do lose the whole slider since that area kind of gets removed so i'm not going to do that i'm going to undo that just to change it back to zero but you do have that option okay so this is our first slider we're going to do the ken burns effect by creating a second slider but first what i want to do is i want to talk about the navigation options so over here what we can do is add some arrows for the slider so we can switch in between the different sliders once we add another slider so if you want to do that come into navigation options click on arrows right here and then you want to turn this on and you have all these different options right here and you can see on the left hand side over here that you can see a preview of these different options so you can see you can pick any one that you want you can scroll down there's a bunch of different ones so if we wanted something like this we can select that and then you can align it wherever you want to put it so if you want to put it in the center you can you can put it at the bottom it's really up to you guys and you can also change the coordinates for where this stuff is also so let me just show you when we preview this now i don't think we have another slider so you won't see the arrows they only show up when we add another slider so we're gonna do that right now so again it doesn't matter what arrow style you select but if you want one so that people can rotate between the sliders go ahead and add that so what we're gonna do is add another slider so hover over slides right here to add a second slider onto the slider we're going to hover over this and just click on blank slide and you can see right here that we have a new template and you can go in and customize it however you want so i'm going to save some time and you guys might not be super happy about this but what i'm going to do is i'm not going to add another slider i'm going to delete this and i'm going to add one that i've already saved because i want to show you guys how to do that so for example if you guys created a bunch of different sliders and you want to group them together i'm going to show you how to do that so we have one slider already and if you want to add some additional sliders that you created in another project you can do that by clicking on import from modules so if i click on this it's going to go into my library for all the different projects or sliders that i've created in the past and so you can see over here that i have two sliders and i want to add one of these so what i'm gonna do is i can just click on one of these i think i'm gonna click on this one so click on the button right here and then you can see it you can hover over it and click on the plus button and then you'll see get inserted right here so now if i go to the preview you can see that we have our first slider and we have our arrows right here and then i can click on the second one and it shows up just like this and what i'm going to do is format this a little bit and then i'm also going to add the ken burns effect so it's super easy to add another slider if you guys want to do that on your own go ahead and pause the video and do that and again you can always remove these sliders and you can rename them i don't think we talked about naming our sliders up here yet but if you want to do that just click on the little wheel right here and then you can change the slide name so we can do something like bike for the first one and then for the second one we can do something like weights so now when you see them in here they're more organized like that okay so what i'm going to do really quickly is just move this stuff around because i want to just show you the ken burns effect again so i imported the slider that's already pre-made and we already have some animations now the best animations but that doesn't really matter what i want to do again is talk about the ken burns effect so if you want to run through the exercise again go ahead and pause video to create another slider and then add your different layers and then once you're ready click on the slide options and again you'll see the ken burns tab right here just turn on the pan zooming and then you can select where you want the zooming to go so this time around we're going to do the center and maybe we'll do 250 right here that we're gonna zoom into and then we can start from zero and we can zoom in a little bit to i don't know let's do 30 right there and then this one we're gonna go with let's go with or and let's not do negative this time let's just do 200 and if you guys don't know what these numbers are or you don't know what numbers to type in just type in some random numbers and then go and preview it and you can see the first slider load right here and then we can just click on the next one and you can see that everything loads just like that so i think i'm going to move this stuff up because this looks a little bit off center and i want to center everything so it kind of looks good together so what we can do is we can zoom out so that we can see everything and then i'm going to scroll up a little bit and maybe what i'll do is i'll go back to the layer options and then in this tab right here i will center this and then i'll move this up and then center that and then i'll move this up and center that and maybe this font is just too large also so we can come in here and change this font to 80. it'll look a little less intimidating i think so we'll move that right there and now let's preview so we have our navigation buttons right here we have our ken burns effect we have our layers with animations and we're just going to let it do it on its own because again remember after 7.5 seconds it automatically switches to the next slider and then it'll switch again so you loop this over and over again or you can use the navigation buttons right here okay so this one was super easy and hopefully i didn't confuse you guys by recreating or making new sliders but all you really have to do for a multiple slider is you can turn on the navigation options so the arrows or you can have bullets or tabs and then if you want to use the ken burns effect just come to these slide options and on each slider you want to turn this on and then select the position that you want to zoom to and then see how much you want to zoom in and where you want to zoom to that or whatever that point is that you want to zoom to so all you have to do is just choose the position that you want to zoom into and then you can put in the magnification so you can zoom in over 100 and then choose the x and y axis of where you want to start and where you want to finish the zooming and then you can also change the duration down here okay make sure that you click on the save button right here and this time around i don't think i'm going to go and show you how to post this on a wordpress website because you already know how to do that so if you guys have any questions let me know and just remember to always rename your labels because it organizes things and then also you can add your animations and change the timing and all that stuff so let me know if you have any questions with the ken burns effect and the multiple sliders and the navigation arrows otherwise let's move on to the last exercise which is creating a portfolio slider so the next type of slider that we're gonna learn how to make is a portfolio slider so if you're a photographer a designer or anyone that wants a portfolio you can use the slider revolution six to make a portfolio and you can even make a website so i'll probably make another tutorial showing you how to make websites using the slider revolution six so make sure you subscribe turn on the notifications and let me know in the comment section if that's something you want to see so this is the home slider right here and you can see that we have a button that says my portfolio if we click on that it's going to transition to this page right here with a bunch of different portfolio projects and we can actually turn these into links so if we click on this one right here it'll transition to another slider and we have some details about our slider we can add buttons we can add links we can add details or even more photos or whatever you guys want so you can see right here i can click back to portfolio and then we'll come back to this page right here i can click on this next one and you can see that we can just add some additional stuff and so forth and so forth so again if you wanted to add a contact page an about page or whatever you want to your slider you're able to do that using the slider revolution 6. this is just going to give you a good idea of how to create all those elements so if you want to learn how to create a slider with a portfolio keep watching this section and let's get started alright so once we're back on the slider revolution dashboard let's go and create one more module so we'll click on blank module and we're going to come to the startup guide right here click start let's go with the slider and we'll go full screen and we'll inherit everything so turn on the editor and once we're on the slider revolution builder right here let's go through the general options first so let's title our slider so i'll type in demo number four and you can type in whatever you guys want and then we'll go through these other tabs right here i'm going to change the browser width right here to 1400 and 868 and again that's personal preference you guys can add whatever you guys want and we want to leave the layout type as this because we are going to have a slider and it's going to be full screen i don't think we need to do anything with the content for the default settings you don't really need to do anything with the duration because what we're gonna do is disable the automatic slide so we're gonna stay on the slider screens until someone clicks on those buttons to go to the next page so we don't need to do anything there and then in the general tab this is where we turn off the auto rotate so this is the automatic changing to the different sliders so we're going to turn that off and then we should be good to go and i don't think there's anything else that we need to do here we don't need to go through the add-ons or anything like that so let's go to the slide options right here and let's add our first background image so what we're going to do is go into the source and select image and you can use one of the slider revolution photos if you want i'm going to use the media library so i'm going to come in here and i do have this demo image so i'm going to select that and click insert and we should see it show up right over here so if you guys want to add a thumbnail right here go ahead and do that so maybe we'll just come in here we'll add the same image just to let people know on the module page or the dashboard for the slider revolution that this is the slider and then if you guys want to change the animations for the slider when it enters you can do that over here on the slide options okay so now what we're gonna do is we're gonna go through our layers so let's go and add a headline layer so we're gonna hover over text and click on headline and once that shows up right over here let's just select one of these headlines it doesn't really matter which one so we can just drag it over here we're going to reposition it in just a few seconds so i'm going to close this and what we can do is type in our text so i'm going to type in design and then the amber stand right there and then what we want to do is we want to go into the style tab right here and change the font family and the font sizes so the first thing that we're going to do is come in here and we're going to change this to railway and then once we do that we can change the font size to 80 70 500 and then we're going to put in 5 for the letter spacing just to spread it out and actually i'm going to change this to 100 i want to make it super thin just because i think it looks better so we're going to position this after we add our different layers so let's add another headline layer and we can just select the same template so we'll just choose that one and then we'll just place it down here we're going to close this let's type in photography this time and then we're going to go again to the style tab and do the same stuff because we want to be consistent so we'll just type in railway right here and then we'll do 80 70 and 100 and then we'll put in five right here and so now what we can do is we can put the stuff in the right position so if you want to do that we can actually just turn on the grid lines i don't think we've done this yet for this tutorial so if you guys want you can see that we have everything here let's go to the preview screen really quickly just to see where we want to position it so we might want to move it up a little bit so maybe around the camera level so what we can do is just drag this and then place it wherever we want something like that and then move this one up maybe that's a little too high so now we can check this out and don't worry about the font formatting this is going to look perfect once we put it onto the wordpress website but right here on the preview screen it might have a different font just like that so that looks pretty good we can also move it up if you guys want but i think i'm going to leave it just like this and what i do want to do is re-label these layers so we're going to go with headline one and then we'll do headline two so once we do that i'm gonna click the save button really quickly let's add a sub headline at the top so we're gonna hover over add layer and then we'll add a content layer and we're going to place it around over here somewhere so it doesn't matter which one we select we'll just choose this one and what i want to do is i want to go to the text tutorial because i do have some html right here and this is going to change the color of some of the fonts so if you guys want go to the text tutorial on how to use the slider revolution 6 and then on whatever step we're on or whatever slider we're doing right now there should be some html right here and let me show you what happens when we paste it in so we're going to paste it right there you can see that there is some html right here and i'm going to go to the style tab and if i change the font color to a gray color so i'm going to come in here and change this to 7777 then you can see that there is that gray color and now we have some white right there because that's the html that changes the text to white okay so now let's go and just change the font style so again we'll go with railway and then what we're going to do is change the font size so we'll do 20 30 and then 300 and then three right here and then if you guys want to position this we can just move it wherever we want so maybe something like that let's go and preview it just to see how it looks and that looks pretty good and we're going to add a button down here so we'll close this and once we're back on the revolution slider builder is that right sometimes i might get the words messed up revolution slider slider revolution what we want to do is add a button right here so we're going to hover over add layer click a button and then you can choose the type of button that you want the one that i'm going to choose might be something like this but i don't want the icon so i'm just going to choose this one and format it so once we select that i'm going to move it down a little bit and i'll probably position it a little bit better in just a few seconds but first let's just type in my portfolio or whatever you guys want to type in and then we'll go to the style tab we'll change this to railway and then we're going to come in here and change this to 15 and 15 and i think we'll leave this as 500 but we'll change this to one right here or actually i'm going to make it a little bit bolder so i'm going to change this to 600 right there and then we're going to add some margin or padding so down here in the spacing what i want to do is i'm going to add in 13 right here and then 35 and then 13 and 35 and just so you guys know i don't know if i've told you this enough times but we have an entire text tutorial with all the steps so right now we're on this step right here so if ever i go too fast or you need to pause you can always print this out or reference this because it has every step and everything that we type in okay so keep that in mind there is a link in the video description to the text tutorial so what i want to do is i want to move this button down a little bit so maybe we'll move right there and then we'll go and preview it just to see what it looks like so this looks pretty good but maybe we'll add a border right here for this button just so that you can see it a little bit better so in the border section right here i'm gonna make it solid and then i'll change this to white maybe and then we'll just put a small little thin line so we're going to do one all the way across just like that so now this is what it's going to look like that looks a lot better and again you can always go to the hover button over here and customize that and we're not going to add an action for the button yet because we don't have our other slider setup so when we do we'll come back here and we'll link this button to the next slider page where we have our portfolio so what i'm going to do really quickly is just come in here and change the text so i'm going to change this to sub headline and then this one we can keep as button but i'm going to get rid of that 3 right there so i'm just going to type in button right there and then i'm going to rearrange this stuff and then i'm going to add an animation and then we're going to move on to the next slider so first let's click on the save button so for these animations let's go through layer by layer and we're going to add intros and outros for each of these since we are transitioning to other sliders so first for the sub headline right here let's click on animation and let's go in here and select the animation that we want so i think what i'm gonna do is i'm gonna go with one of these ones so maybe for this one i'll do the short slide from top and once i select that we'll just do 1500 right here and we also want to have an outro so maybe we'll do a slide transition to the left or right side so let's do the right side right here and i think i'm going to select that one for all of them and i will be cascading these after i add the other animations so let's click on the headline and let's come in here and let's add another one let's do we did slide from top for the other one so we're going to do slide from bottom just to change it up a little bit so let's come in here do 1500 and then right here we'll do the slide to right to exit everything so again i'm clicking on the second headline now and again for the animation we're going to go slide from bottom and then the outro is going to be slide to the right and we'll just change this to 1500 also and then the last thing is going to be the button i'm going to make this one slide in from the top similar to the sub headline so we'll just do this right here and then we'll change this to 1500 and then we'll slide this one to the right also and i will show you how this all works so we have all of our different animations all set up and now what we can do is we can add the transition so maybe we'll do something like maybe 170 right there and then we'll just change this one a little bit later so this one is at 220 so i think i'll also make this one at 220 if i can drag the whole thing so right there and then this one will do at once let's say 190. okay so let's see what it looks like i'm going to click save right here and we can preview it and check out the animations kind of cool everything kind of just comes in on its own it flows in it looks really really professional and if you guys wanted to we can also just make this one a little bit delayed so let's try that so play around with this stuff and really the animations are the best part about the slider revolution i think it just makes your slider so much more professional so i'm going to save this and remember there's no right or wrong for any of these animations but what we're going to do now is go and add our second slider so we're going to hover over slides right here we're going to click on add slides and we want to add a blank slide so click on that and once you see the slider right here what we want to do is i guess first we should actually rename all of our sliders so you can see when i hover over this we have slide 1 and slide 2. let's go back to slide one and click on this wheel right here and over here once we do that we can click into this and we can change this to another name so i'm gonna change it to main and then once we do that i'm gonna go to slide 2 right here and i should have actually clicked on the wheel right here and what i'm going to do is just again come in here and i'll type in portfolio and this is just to keep track of everything it's going to make things a lot easier so once we do that now what we can do is go into the background over here and select image and i'm going to go into the media library and select the image that i want so i'll just click this one and you can see that we have our image right here so let's go and add our first layer which is going to be a text layer so i'm going to choose the content tab right there and we have the grid line turned on which is fine and we can select one of these if you want and what we're going to do is go into the content tab right here and change the content so on the text tutorial again i do have some html so let me just scroll down to it so we're on number six right here and you can see right here that the html is right here so i'm gonna just copy this so just ctrl c and then we'll go back and we're gonna paste it in right here so delete that and then you can see that it says some of my best work and there's some html here right for the color so what i want to do is i'm going to scroll down and the color is actually in the style tab so we'll go over there and over here you can see if i click on this i'm going to change the color to 7777 and just push enter and you can see it's a gray color so there we go and then what we want to do is go into the font family right here so we'll change the font to railway and then once we do that we can change the font sizes over here so we're going to come in here and delete this and let's type in 20 for the font size and then 30 for the height and we'll do 300 for the boldness and let's put in three for the letter spacing and then what we can do is we can drag this around if we want so this looks pretty good let me just go to the size and positioning you can see that for the x we have 600 right here and for the demo website it's actually 590 so i think i'm gonna go with 590 just because that's what the demo has and then for the y-axis this is about 280 or 281 so we'll just do 280 right there and that looks pretty good so i'm going to click save right here and we're going to add our other thumbnails right here but before we do that what i want to do is since we created the second slider i'm going to go back to the first slider and link that button so if you guys want to do that go back to the main one right here and then we can click on the button layer right here and now in the actions tab let's click on that and you can see that we have a button right here let's look at some of these actions and what we can do is jump to slide that's going to let us choose the slide that we want to jump to so when someone clicks on the button you can see the interaction right here then what we can do is make it jump to the portfolio so if we close that and click save right here now when we click preview it'll load the first slider and when we click on this button right here it's going to load the second slider so that's all you have to do to make a button go to another slider so that's awesome and now what we can do is we can go back to the portfolio right here and i want to add the other thumbnails so you can see on the demo right here we have six thumbnails so we're gonna insert these and also link them to a new slider so what we're going to do is we're going to add a new layer so hover over this and let's click on the image and once we have our image right here we're going to make this smaller but first let's go and add the image so let's go to content right here and then we can go to the media library and we can select the thumbnail that we want to use so let me just make sure this is the larger one so we want to use the smaller one you can see the pixels right here so i'm going to select this and click insert and you can see that the image shows up right here and we're going to resize this really quickly so if you want to do that let's go to size and positioning and right over here you can see that we have the width and the height so what we can do is just come into the width right here and let's change this to 250 so just type that in and you should see the height change to 167 and that's what we want so we don't need to do anything with the height right there so you can see right here we have our image and we want to line this up so if you want to do that we want to come into the x-axis right here in the size and positioning and let's change this to 590 and now you can see that lines up just like that and we want to add our other thumbnails so you have two different options you can go through the add layer and you can click on wordpress library and find the next image right here click insert and then we can change the size right here to 250 by 167 and then we can just drag it over here to where we want to place it or what you can do is hover over the layer and then hover over the duplicate button right here and then click on that and you'll see a copy of the image and then you can just move it out of the way because it's going to be on top of it and then you can come in here go to the content tab and then click on media library and then choose the thumbnail that you want to choose but we do need to position the stuff correctly so if you want to do that right now we can go into size and position for this one and we want to move the x coordinate so what we can do is change this to 11 30 right here so this one you can see it's 860 by 340 and then this is 11 30 by 340 and this one is 590 by 340. okay so let me just add these other ones i'm going to duplicate this stuff because it's going to be a little faster so i'm going to duplicate a copy there and just drag this down maybe like right here and i'll just change the coordinates to 590 and then we can go into the content and what we can do is click on media library and then select the image that we want to use and you can see it right there and then what we can do is hover over this one and again click duplicate and then we can just move this one down and then we can go into the content section right here and click on media library and just find the image again click insert and then we'll just take this one right here duplicate it one more time and then drag it down and we might need to change the coordinates because i move that around but that's okay we'll just come in here and click this and then i'm going to go into size and position for this one and change this to 11 30. so what i can do really quickly because i have all my images right here is i can click on each of these just to show you the dimensions so you can see that that's 590 by 340 860 by 340. 11 30 by 340 and then we have 590 by 340 or 590 by 520 860 by 520 and then 11 30 by 5 20 also and you can always group these closer if you want so i'm going to click save right here and let's go and preview it really quickly so we don't have any animations for the second page right here so what we want to do is we want to add some but you can see everything shows up and we're going to be able to make these so we can click on these thumbnails to go to the project page so let me close this and now what we want to do is add the animations for all these different layers and you can see right here that for my different layers i renamed everything just to organize it so if you guys want go ahead and pause the video really quickly to change your layers so this one says headline image one two three four five and six and then i just drag them around to organize them so that everything is in order because we're gonna make everything flow in so it'll look really really cool and you'll see after we do the animation so let me just show you guys first we're going to click on the text layer right here and we have the animation selected in the layer options and we can go in here and let's select the slide from bottom for all of these and then for the out we'll do the slide to the right and then we can change the duration right now for this first layer so we're going to do 1500 and we can change the start time if you guys want so we'll just do 750 right there and then let's click on the image one and again use the same animation so i'll do slide from bottom and then slide from right and then we'll do 1500 right here and i'm going to wait 100 milliseconds before the second image shows up so the first one was 750 we're going to do 850 right here and you can see that i'm creating a cascade like that so now we'll go to image 2 and we'll do the same thing so slide from bottom and then slide from right and then we'll change this to 1500 and this will be 950 and you can see the times over here also so let me just push play really quickly so you can see that it's just going to fade in or have the animation for all of these so let me push pause right there let's go to image number three and then we can click on slide transitions from bottom and then we'll go to the out and we'll do the right and we'll change this again to 1500 and the last one was 950 so this one should be 1050 and then we'll go to image 4 and let's do the same thing and this is a little repetitive but these are the things that you have to do sometimes to really make your slider stand out so it's going to be totally worth it oops this is supposed to say 1500 and then this is the 1150 right here so we have two more we're gonna click on number five and learning something like this is just really going to add so much to your sliders and really just give you a lot more tools with the slider revolution so i'm really excited if you guys are watching this part of the tutorial because this to a lot of people is really complicated but you guys can see how easy it really is so this one's going to be 1250 and our last one right here we're gonna select the same transitions so slide to right on this bottom one and then 1500 one more time and then i believe this one is going to be 1350 let's make sure i believe so so we can hover over this one 1250 and 1350. let's click save right here and once it's saved let's click out of this so we can see everything and what you can do is click on the play button right here just to preview everything or what you can do is you can click on the preview button right here just to get this pop-up and then we have our main screen right here and then we can click on this one and you can see that everything flows in because we have a little delay before this stuff comes in and then it all flows in really really beautifully so if you guys have any questions about the animations for this layer let me know but what we're going to do now is we're going to create some project sliders for all of these so when people click on these they'll be able to go and expand the stuff so again i'm going to click save just to make sure everything is saved and now what we can do is we can go to the slides tab up here hover over it and hover over add slides and let's create a new blank slide and once the slide is created let's go over here hover over it click on the wheel so that we can come into the new slide section right here and we can just type in project one right here and then push enter and now we can go and add our background so right here in the slide options let's go to image select that click on media library and then find the image this is the thumbnail one you can see by the size so we want to select this one right here it's a lot larger and then click insert right here and you can see the image show up so this is great so let's click save really quickly and once it's saved let me show you what we're going to be adding so i have this page right here this is the builder with my demo slider we're going to put in a headline sub headline and then some text right here so maybe i'll just come back and forth i'm not too sure yet but i'm going to take this text just in case and then i'm going to go back to the slider right here let's go and add our first layer so we're going to do a headline layer and once it gets added we can just select one of these options we can close this go into the content and you can type in whatever you want this is what i'm going to type in and then what we can do is we can go to the style tab right here and then we can change the font family if you guys want to and we can change the font size right here so let's go with 60 and then we'll leave this at 50. we'll change this to 100 and we'll leave that at zero so i'm gonna click save really quickly and then what we can do is we can drag this to wherever we want to place it so you can place it wherever you want or you can go to size and position and what i'm going to do is just type in the x and y axis so i'm going to type in 27 right here and 218 right here so we have our headline and now what we're going to do is add a sub headline and then a body paragraph so let's go ahead and add another layer we're going to hover over text and click on content and once we have our new layer we're just going to select one of these options and then we'll close this we'll go to the content section and let's type in photography if i can spell that correctly and then we can go to the style tab and change the font so i'll type in railway and then we can type in the font size right here so we're going to go 20 30 and then we'll do 300 and three right here and once we do that we can change the text color so i'm gonna put in a color code right here so it's gonna be eight three eight three or eight e eight e a e let me make sure i say that correctly i'll click on the check mark and then we can drag it down here if you want and what we should do is make sure that we place it in the right position so what i'm going to do is just go to size and position and we want to type in 27 right here and then for the y-axis we can type in 279 if you want okay so i'm going to click on the save button right there and once this is saved now what we're going to do is we're going to add our body paragraph down here so let's hover over layer and click on the content tab and once it shows up right here we can select one of these so let's just go with i don't know this one right here and let's close this and then go to the content tab and we want to put in our text right here so we can delete this and i'm just going to paste in some demo text from the demo slider and you can see right here that the text box goes all the way across and what we want to do is we want to actually make this a lot smaller so if you want to do that you can drag this corner or what you can do is go to size and position and then right here where it says width and height you can put in the size that you want so we can do 440 and 167 and you can see that the box just changes to the size that you want and we're going to format the text in just a few seconds but first let's put in the x coordinate so it's going to be 27 and then the y is going to be 351 and once we do that we can go to the style tab and we can come in here we can change the font to railway so go ahead and do that and then for the font size it's going to be 17 30 and then 300 and we'll leave this one as two right over here but we can change the text color if you want so we can just come in here and you can type in whatever you want so maybe we'll go with 8 e 8 8 just to make it a little bit more gray but if you don't want to do that you can leave it as white so maybe we'll just do that also because it kind of looks good with the white gray and white just like that so i'm going to click save really quickly and the last thing that we're going to do is we're going to add a button to go back to the portfolio page so go ahead and click on that and then you can add any button that you want i'm gonna go with this transparent one right here so select that and then i'm gonna place the button over here and i'm gonna close this go to the content tab and i want it to say back to portfolio and once we type that in let's go to the style tab and what we can do here is we can go into the font and type in railway and select that and then we're going to go with 15 15 and then this is going to be 600 and this will be 3 right here or actually i'm going to make this one i think that'll be better it just condenses it or groups it together a little bit and if you guys want to change the spacing for the button you can come down here to the padding and we can come in and type in 13 and 35 and then 13 and 35 and you can see it just adds some spacing right there and over here you can change the border color if you want to i think it looks pretty good so i'm going to click save and once it's saved now what we can do is we can actually add an action so click on the button right here and just go to action and then we're going to make it jump to a slide so we're going to come in here and then just make it go back to the portfolio slide just like that and we'll close this click save once again and now the last thing that we have to do is just add our animations because right now there is no animation so what we can do is just rename these layers really quickly so i'm going to type in headline and then sub headline and then we'll do body font or body text and then we'll type in button for this last one and then i'm going to rearrange these because it's better to have these organized so you can see them when you are changing the animations so let's click on the first layer right here go to animations and then let's go into this drop down and select the animation that we want so maybe we'll go with slide from top right here and then for the out we're gonna go slide to the right and then we'll change this to 1500 right here and we'll change the start time after we do all these animations so i'm going to click on sub headline right here and this one is going to also slide from the top and then we'll make it slide from the right when it leaves and we'll also add 1500 right here and then for the body font i think i'm going to do something a little different for this one i'm going to make this one slide in from the left like that and then we'll make it slide out from the right and we'll also put in 1500 right here and then the button i'm gonna make it slide up from the bottom so this one will come over here and i think it's going to be this one i can't really see it so we might have to change that but we'll just choose the slide from bottom and then this one's going to slide out and we'll just do 1500 here and then i'm gonna click out of this and what we can do is just drag this over a little bit so maybe we'll start this one at 200 this one will be at let's say 270. this one will also be at 280 and this one will be at 270. so i just played around with these i just added whatever i wanted to and now we can click on the play button right here and you can see that everything kind of adds so let's try that again we have all those layers right there and that looks pretty cool so i'm going to click save right here and then we can go to actually before we go to the preview we want to go back to the other slider so that we can link this portfolio to that button so let's go to the portfolio page and once we're back on this slider right here what we want to do is we want to link these thumbnails to our project sliders so we can click on this one right here and then click on action and we want to make this jump to another slide so we want to click on jump to slide and then we can come in here and select the project to link it to and now this is going to be linked to the project slider and we can also go to the hover and change the cursor so it turns into that little finger for a link right here so select pointer click save and then now if we preview this we should see everything so we have the home page right here and then we'll go to the project page or the portfolio page right here and then you can see that this one's linked so we can click on this and then it'll go to the portfolio or project page right here and then we can click back to go back to this page okay so you can see how professional and how awesome this looks when you can create something with a bunch of different animations and images and text and all that stuff so what i want to do now is i'm going to create one more project slider with you guys and then you can go in and create the other ones yourself because these are the same steps but what i want to do is i'm going to add some text on this side just on the right hand side since we did the left hand side before okay so we're going to close this and we're going to go and create a new slider for this image right here so we're going to hover over slides and click to add a new blank slide and once it shows up we'll just come in here and i'm going to try to go a little bit faster but we'll see we're going to click on media library and then choose this image right here i believe so 19 yep this is the one that we want we'll click insert and you should see it get inserted right here and then we can add our different layers over here so first we're going to add a headline layer so click on this and once you see the new slide here the first thing that we can do is type in the name right here so we'll just type in project five since that's the thumbnail number and then we can go and add our background image so we'll come in here and click on media library and just select this image so again this is for thumbnail number five we can go in and add our first layer which is going to be a headline layer so we'll just click on that and then we'll choose one of these options and we'll place it over here and then we'll come into the content and what we're going to do is just change this to scooter life and then we can go into the style tab and we can change the font size so i think we're going to keep this at 60. we're going to change this to 50 and then this is going to be 100 and this is gonna be zero so once we have that oh we actually have to change the font family first so we might have to redo that so everything looks good so we're good to go right there and then this i want to move a little bit so maybe right over here so i don't have the exact coordinates but you can see right here it says 940 and 220 so go ahead and type that in if you want we might change that after we preview this but for now let's just leave it like that so now we're going to add our second headline or sub headline so we'll just go with the content option and then we'll select this one right here and we'll drag it down and i do have the grid line turned on i don't know if you noticed that so if you guys want to just come over here and then turn it on you can also turn it off so maybe we'll just turn it off and you can't see everything here so you might actually want to change the font color but i'm going to leave it just like that so again we're working on the sub headline right here i'm going to come into the content and just change it to photography and then we'll go into the style and we'll choose railway to be consistent and then the font size is going to be 20 right here and then we're going to go with 30 and 300 and then this is gonna be three so we'll just change it just like that and then we can change the font color also so we'll remove this and type in 8e8e and just push enter and then click on the check mark and then we can drag this to wherever we want to place it so maybe we'll place it right there we should probably line this stuff up though so what i'm going to do is i'm going to come into this one and i'm going to look at these coordinates and i'm actually going to write them down so i have 940 and 220. so let me click on this one right here and i think i want to put in 220 here and see what happens if that moves it up then that is the wrong one we're going to go and undo that so we want to change this one right here to i think 940 but it might actually move it to the left so that's not what i want i want to move it over on this side so i guess we're gonna have to turn on the grid lines the good old grid lines and we'll line this stuff up really well so we'll put that right there and then we're going to put this one right here and maybe we'll scoot it up a little bit and if we need to move this then we can so we can i think it's this one actually we can move this to maybe 1197 just to scoot it in and if it looks like it lines up then we're good if it doesn't then we can also scoot it a little bit more so i think 1195 looks pretty good just like that so i'll leave it and then we'll go and add another layer for the body paragraph so again we're going to place this down here somewhere we'll choose this font and then we'll go into the content and then we'll just paste in some demo text so you can see the text right here and then we'll go to the style tab and we'll change the font to railway so i am going a little fast if you guys didn't notice just because we've done this a few different times now so if you guys ever need to slow down you can always slow down the video or you can just rewatch this section so we're going to go with 17 and then this is going to be 30 and then 300 right here and then leaves us at two so once we have that i think we can also move this font to the right hand side so we can go back to content right here and if you guys want to if i can hover over this we can just click on the right alignment like that so i don't know if you guys heard that but there's some honking outside good old new york city at 11 45 on a tuesday night so what we got to do is we need to drag this because we want to make sure that this is in the right spot so i forgot that we need to resize this entire content box so let's do that really quickly down in the size and position we can change this to 440 and 163 or 167 it's up to you guys and then once we have that we can move it to the right spot so maybe we'll move it right here and we can look at the alignment you can see that it's at 9 40 or so so if it looks like it lines up then i think it's fine but you can always change it so i think that looks pretty good and what we're going to do now is just add a button to bring us back to the portfolio page so we'll click on this one right here and then this is just going to say back to portfolio so we'll put it right over here for now and we'll adjust it if we need to and we'll come in here back to portfolio and then we'll go into the style tab and we'll just change our font family and then we'll come in here and we'll change the font size so i think it's going to be 15 15 and then 600 and 1 right here if i'm being consistent with all the other ones and then what we can do is we can come down to the spacing area and we'll type in 13 35 13 and 35 and we might need to move this out a little bit so that you can actually see the whole thing so i think i can place it right there and it might actually be pretty good so we can lower if we want to but i'm going to leave right here and i'm going to click on this layer and click on action to bring us back to the portfolio page so i'm going to click on jump to slide and then we'll go back to the portfolio page and then also for the hover if you want i think it defaults to the mouse pointer but if you ever want to change it you can change it right here in the cursor to the pointer okay so i'm going to click on save right here and all we have to do is add our animation so maybe we'll just rename these so again i'll type in headline and then sub headline and we'll do body text and then button right here gotta spell it correctly though and then we'll move these around so that we have everything in order and if you guys want to use the same animations then we can just click on them so we'll click on the first layer go to animations right here i think we did slide from top if i'm correct and then we'll slide out from the right hand side so we'll click on that and we'll change this to 1500 right here and we'll move the start time after we do all these other layers so we'll do the photography line right here we'll do this one slide from bottom and we'll slide it to the right and again you can choose any ones that you guys want you don't have to choose the same animations that i have so let me click on this right here and then we'll slide from bottom and slide to the right so this is one of the last things that we're going to be doing in this video tutorial so if there are things that you still want to learn that you haven't learned in this video leave a comment in the comment section below and oops before i say all that stuff let me go to the right layer and put in the right stuff so we're going to go slight transitions and we're going to slide this one do we want to slide from the bottom or do we want to slide from top i think we'll do slide from top even though i think bottom would be better but it's okay so we'll just put in 15 there and we'll just transition this stuff maybe 200 here and we'll do 250 and 250 and then this one's going to be 200 also so let's see what it looks like maybe if we come over here we can kind of see it let's just click here oh that looks pretty cool actually i don't know exactly what animations i use but i kind of like them so i'm going to click on the save button right here and we need to link the thumbnail to come to this page so again as i was saying this is one of the last things that we're going to be doing in this video tutorial so if i did miss anything or you want to see some other stuff let me know in the comment section and i'll be sure to make you a video using the slider revolution six because i can't cover everything i mean this video is probably going to be a little bit longer than i wanted it to but hopefully it gives you a really good idea of how to use the slider revolution and then if you need any more help just let me know but you should be able to see how easy it is so you can just play around with it and figure out things on your own so i want to link this thumbnail right here to that page that we just created so i'm gonna click on action and then go to jump to slide and we're using project five now i'm gonna close that and then i'm gonna come to hover and turn on the pointer right here so i'm gonna save that and then we'll click on preview right here and we'll click on portfolio and you can see that these ones don't click anywhere but we have this one now we can click on it and we have our new slider and we can go back just like this and then we can click on this one and we can go to this one so what you guys can do if you want is pause the video to create these other sliders or these projects and then link them but we're going to move on to the last thing which is talking about the global layers so when you hover over slides over here you can see global layers so again i'm going to give you guys the opportunity to pause the video to create the other project thumbnails or project sliders and link them here if you guys want to make sure that you click on the save button you can also do this later or maybe you don't even need to watch the rest of this tutorial and you have learned everything you need if you have then you guys are good to go also but if you guys want to learn about global layers which means adding settings or layers like text modules or images or icons to every slider then you want to use the global layers so let's just talk about this really quickly before we wrap up this video tutorial so i'm going to click on global layers so once you're on the global layers this is where you can add a layer that will show up on all the different sliders that you create so for example let's just show you really quickly let's say we want to add an icon and i don't have a specific icon but we can choose something like a camera so we have cameras here and maybe we'll just select this one and you can see it right here so not the coolest thing but good for this example so we're not going to color it or change it or anything like that we're just going to put it right here this is the position that we want we're going to click save right here and remember this is for the global layers because we came in here and we edited the global layers you can also add an animation or anything like that whatever you guys want so maybe we'll do that just to show you guys so we're going to click here let's go with rotations and what's a cool rotation this one this one's kind of cool i guess we'll use that one and we'll rotate it in maybe one second after the slider loads or maybe even more let's just do something like that let's click save right here and then click preview first the home slider you can see that the slider shows up and then we have our global layer right here and just keep your eye over here because when i click on this next one you can see that it shows up right there and then it shows up over here because it's a global layer so it shows up on every screen so again if there is anything that you want to show up on all of your different sliders you want to use the global layers so i'm going to remove this because i don't want that and i'm going to click save right here so that's pretty much all i wanted to cover in this video tutorial showing you all the different types of sliders and effects and everything that you can do but i do want to give you kind of a teaser of some additional stuff that you can do and i want you guys to know or let me know if you guys want me to cover it so i'm going to minimize this so what i'm doing right now is i'm loading a portfolio slider but it's not just a portfolio slider it's actually a website using the slider revolution six so this is something that we can show you how to make using the slider revolution six and you can make a bunch of different websites and there are a bunch of different templates that the slider revolution actually offers but you can see on this slider right here we have a home button some social media icons over here and then a menu that actually toggles and you have some additional sliders for different pages like the about me page that you can go to and also a contact us button over here to bring you to a contact page so your visitors or clients can contact you so if you want to learn how to make a website using the slider revolution let me know in the comment section below but i really hope that you learned a lot in this video tutorial on learning how to use the slider revolution 6 and you create some beautiful and professional sliders what i want to do right now is just give you some final words of encouragement and then wrap up this video tutorial oh yeah so we just completed four different sliders using the slider revolution hopefully you guys got everything that you guys needed out of this video tutorial and just remember make sure that you click on that subscribe button turn on your notifications because there's a lot more that we're going to learn we're going to create more tutorials we're going to show you how to use the whiteboard effect and create a website and anything else you guys need so leave a comment in the comment section below and ask questions ask for suggestions whatever it is let me know what you guys want to watch next but we are done here we have just learned how to use the slider revolution six and i don't have anything else for you guys other than a round of applause for completing this video tutorial so hopefully i see you guys in the next video thanks again for watching and i'll see you soon

Channel: NYC TECH CLUB

Views: 22,436

Keywords: slider revolution 6, slider revolution plugin, how to use slider revolution, slider revolution tutorial, wordpress plugin, wordpress

Id: 43XhQROLQ2k

Length: 136min 29sec (8189 seconds)

Published: Sun Apr 25 2021