How to Create a Slider in WordPress | EASY!

what's going on guys so in this video I'm gonna show you how to create a slider in WordPress I'm gonna show you how to make a slider like this and how to change the images the text the buttons and so on and I'm gonna show you how to display this on your website with both the WordPress editor and the element or page builder and I'm gonna walk you through it step-by-step so whenever you're ready let's get started so step number one is to install the slider plug-in and we're gonna be using a free plugin called smart slider 3 it's super easy to use so in order to get it just go over to the plugins tab over here and then go to add new now from here we're just going to go up to the search bar and type in slider and then you'll see smart slider 3 right here so now just click on install now and then click activate ok so step number 2 is to create a new slider so to do this just go over to these tabs on the left and scroll down until you see smart slider and then just click on that now it's gonna ask you if you want to walk through it I'm just gonna click close because I'm going to show you how to do it right now so it's gonna ask you if you want to create a new slider from scratch or use a template so if you want to create a new one you can do that but honestly I'm a template guy because it's always nice to have foundation laid for you and it takes away all the hard work so I'm just going to click on template library and in order to just see the free ones all you have to do is click on the free tab which is this green one and now you can see we've got a few free templates to choose from so if you want you can just click on one and it'll show you what it looks like and then you can just kind of scroll through so I kind of like that one so all I'm gonna do is exit out of this and then if you want to import it all you have to do is hover over it and then click on import cool so now that's been imported and you can now see that we've got our three slides right here and this all makes up one slider now if you want to edit these slides to put on your own text and images and so forth all you have to do is hover over one of the slide and then just click on the edit button cool so if you scroll down you can now see we're inside of our visual editor so if you want to change the text it's just as simple as clicking on the text and you can change it right here and if you want you can provide a link so that if somebody clicks on it it'll take them to that link and if you want to edit how that text looks just click on this Paint Bucket button and you can change the font family right here you can change the text color by clicking on this and you can change the size the font weight and so on now you can change all the text on here and even this button so if you just click on this button we're still in the Paint Bucket so you can edit how the button looks in here and you can do how the button is normally and then also if you click on the hover button you can edit what it looks like once you hover your mouse over it and if you click on the pencil button up here you can change the button text and also provide a link that the button will take them to and I can even edit this entire box so if I just click on this box what I can do is just go down and I can even change the color so if I go over to background color and then I click on that I can even bring the opacity down and make it a little bit transparent so that you can see kind of the ship behind it so the customization here is kind of endless so now I'll show you how to change the background image for this slide so I'm just gonna exit out on this and if you scroll up a little bit you can just go over to background and click on that and then you'll see that the image button is already selected so all you have to do is scroll down and you'll see background and then you'll see the image right here so just exit out of this image with this little X button and then just add a new one by clicking on the green button and then just go over to upload files and then select files now just select the image and then click on open cool now just click on select and now our new image is now in here pretty easy so now all you have to do is just go up and click on the Save button and then just go back to the slider button to get back to the main dashboard and I'll also show you one other helpful tip so if you scroll down and you click on general you've got a few other customization options in here for how your slider looks so if you scroll down a little bit you can change how the animation works so right now we've got a horizontal slide if I wanted I could try a fade so that whenever I click on each of the arrows it fades from one image to another but I'm gonna keep it as horizontal which is just the images sliding from right to left as you click on the arrows so once again just click on save okay so step number three is to display your slider on your website so like I said I'm going to show you how to do this with the basic WordPress editor as well as the element or page builder so first let's do the basic WordPress editor so all you have to do is simply go to the page that you want to put it on and edit that so I'm just going to go over to pages and I'm just gonna add a new one but you might want to use your home page so let's just pretend that this is my home page so to add this slider at the top of this page all you want to do is just click on this little plus button and this will add a block and then we're just gonna type in smart slider and then all you have to do is click on this little widget down here and then just simply select a slider so here's mine cool and there is my slider so now all I have to do is just click on publish and then publish again and then just simply click on View page to see what it looks like awesome so there is my slider and it is working perfectly so now I'll show you how to display your slider using the element or page builder so from your WordPress dashboard just go to the page that you want to put the slider on in this case it's my home page so I'm just gonna go up to my name and go to visit site and then from here I'm just gonna simply click on the edit with Elementor button awesome now if I want to add a new action so that I can put the slider in it all I have to do is just click on the little plus button underneath where I want to add the section in this case I want to put it at the very top so I'm just gonna click on that button and then I'm just gonna go over to Search Widget and type in smart slider and you'll see - but we're gonna grab the one that has the little slider icon on it on the right so just simply drag that widget into the dragged widget here section and then just select your slider so in this case this one's mine cool and there is our slider which you can test out right here in the editor now if you're like me you might have these little white bars up at the top and the bottom of this slider so if you'd like to get rid of those just simply click on the Advanced tab over here and then underneath margin all you have to do is just give it a value of negative 10 and those white bars are completely gone now just simply click on update and then if you want to view your changes just click on the preview changes eyeball button on the left and there is our slider pretty freakin cool okay so that was how to make a slider in WordPress so if you like this video please hit that like button or if you want more website design tips tricks tutorials guides please smash that subscribe button you won't be sorry I'm posting new content weekly and rumor has it for every new subscriber that I get a good dog lands a partnership at his firm and can bring home his own bacon for once these are getting stranger every time ok guys I will see you on the next video [Music] you

Channel: Create a Pro Website

Views: 111,067

Keywords: how to create a slider in wordpress, how to create a slider for website, how to create a slider, create a slider for wordpress, slider for wordpress, wordpress slider, make a slider for wordpress website, wordpress website slider, smart slider, smart slider 3, slider plugin for wordpress, create a slider, wordpress slider tutorial

Id: OLVulpE3UUA

Length: 8min 27sec (507 seconds)

Published: Fri Feb 22 2019