5 Slider Designs For Your Elementor Website | Free Elementor Slider

what's up guys i'm muriel soto and in this video i'm going to be showing you how to create different sliders using elementor now we're going to be creating about five different um slide styles this is the first one that we're going to be creating here and this is the second one here and this is the third one now we're going to be able to do this by using a plug-in that recently came out for elementor um and it actually has some pretty cool features especially this one because you are able to do a slider to scroll which i thought was pretty cool so um if you guys haven't already make sure to like the video and subscribe it definitely helps out a lot when you guys like the video so then more people can find this video and youtube can overall suggest it now if you guys want to learn how to create this slider go ahead and stick around so let's begin now the first thing that we need to do is download a plugin called prime slider so head over to your dashboard go to plugins click on add new and then just go ahead and type in prime slider and go ahead and install the first one here that's called prime slider and then click activate i'm just going to click skip and we're going to be now we're just going to go to the page that we want to add our slider to so i'm going to go to my pages and i'm going to add my slider to my home page so i'm going to go ahead and click edit with elementor on my home page right at the top here go ahead and just create a new section or wherever you're going to add your slider and just make sure you add a section and make it one column and then go ahead and click on your section here and then make sure that it's full width and you have no gap now go to your elements and go ahead and type in slider now we have a few to choose from here we do have some blog sliders but i do have a video going over those already so i'm going to go ahead and skip these two right here and then i'm just going to go over the other ones so i'm going to go over the first one which is called dragon now you can't completely customize it just like how we use elementor um we just have to go through their their options here so let me go ahead and just show you guys how this looks let me click update and then view it on the website here now it's actually looking pretty nice of course it doesn't go with my website but that's fine so first thing i'm going to do is maybe adjust my height here because i think it's way too long let's see if i could do that here now this plug-in does have i had a feeling that i might have that issue with this one here with the minimum height so right now there's a currently a bug where you can't adjust the minimum height at least on this slider on some of the other element sliders you can adjust the height but for this one i guess it's a bug right now that's fine um so so we do have some options here to remove some of these things on here so we want to be able to show our title of course we want to show our subtitle which is the one above it i believe and then we want to show our button which is this button here that says details it's actually a pretty unique button kind of like how that looks but we could we can also remove that as well we can show our excerpt which is just our description there we can remove our social links as well here at the bottom um i'm going to leave those on there i'm going to leave we can also remove these dots here that we have but i think they're pretty nice so i'm going to go ahead and just leave them there and then we have our slides um and right here we can go ahead and add our own our own background image of course i mean you know i mean most of these images by default won't go with your website so you'll have to add your own custom images what you can do instead if you can't create any custom images and i would just remove the images and just make the background black and i'll show you guys how to do that here so we can go up here and you will have to do that in uh in in the in the style settings here let me go up here and click click and click okay so we can go ahead and adjust our title here if we wanted to so i know that the the subtitle says um add-ons for elementor um we can't currently see it right now um but let me just go ahead and go to my style here and add a background just so that we can see it because i feel like it's a little bit annoying there um so let's go to background and let's just do a black background here just so that we can see that there we go and let's go back to our sliders now go over that in a bit here so here's our first slider now um we can go ahead and change that title if that's something that we wanted to do as you can tell now we remove the subtitle here we can adjust our title if we wanted to add our some more text or title or just remove our title art together and add a new one you can even add a link for your um for your title um you can adjust the button as well so you can maybe do a book call or something whatever that may be i'm just giving you guys an example there and then we can have a button link you can link that out to pretty much any page or anything like that and then here we just have our um our description and basically the same goes for the the rest of the slides it's the same options you can like i said you can just add your own image or you can just remove it all together um that's completely optional up to you i'm going to leave it as is my even let's see if i still have those images in my nope i don't um so i'm just gonna leave that one as is i'm gonna probably move this one to the back here just so then we have that first nice slide there in the front okay and then we have our social um share links at the bottom here if you can also add more if that's something that you wanted to do you can choose text the title of your social link and then add a link to that i'm going to leave these as is for now i think that's fine and then we can also adjust the animation so we can have an auto play and then we can do an um auto play uh interval and we can just change how fast we want on the slide the slide to go let's say we want it delayed for like you know 7 000 milliseconds this is what we can do here we can do eight thousand milliseconds or whatever that may be that you may want maybe this is too too fast or too slow you can just go and adjust this uh and then we can pause on hover which i think is i think which i'm gonna actually turn on because it's pretty helpful whenever we're working on one of the slides here so whenever someone hovers over this it won't move which is a good feature there to have and then we can go ahead and go over here to our our style so this is where we're going to stylize our um our slide here now from from the title here this is where we would add style to our title now we can adjust the width now what this is going to do is move is move it over to the right here or sorry to the left um and that's how you can adjust that i'm going to leave it at full width i think that's fine or you can just leave it to default which is a full width you can adjust the color of this text as well maybe you want to do red or something else whatever that may be i know that for my website maybe since it's black i would maybe do do uh this color but that's just completely up to you i might actually just leave it like that i think that looks pretty nice and it does make it the same color for the rest of the titles which is a little bit of a bummer i wish you could have your own color for each each slide but that's fine that works anyway um and then you can also adjust the typography here we can change the font we cannot change the size over our title here so but i think default is fine and you know i mean if you use dom elementor you know how that typography works i'm not going to go over that too much we can add some title spacing as well we can basically space it out from the bottom but i'm going to leave this to default and we can adjust our social links as well down here we can adjust the color of our text if that's something that we wanted to do we can have a circular color as well you can add some spacing to that i'm gonna leave that at default and then the typography which i'm sure you know how that works if you've been using elementor and then here we have our navigation now our navigation is basically this area here we have our numbers um if we did have maybe some arrows we would adjust our navigation on here as well so we can adjust that as well we can change those around to whatever color we want i'm going to leave those at white just because i feel like that looks the best but we can have a hover if that's something that we wanted to do as well but i'm going to leave that to default and then we can have an we can have an active color let's say we wanted to do wanted to make it this color here i feel like it's a lot better so then we know that that one's the one that's active even though we have this like line here but i feel like that looks a lot cooler i'm gonna leave it at that and then we have our sizing i'm going to leave the sizing as is and i'm going to go back to my sliders here because i didn't go over the subtitle it's pretty much the same um the same options that we did with the title here you can adjust that you can adjust your um your typography for your description here and the part that i actually did want to show you guys is a bun here so we can adjust our button and i'm going to go over let's see here so we can do our icon color we want to probably choose the color that we've been using around for our website we could adjust the text color i'm going to leave that wide circular that you see here i'm going to leave it the same i'm going to leave it the same color i think y is fine and the hover we can add a hover effect if we wanted to but i'm going to leave it as is i think these options are pretty simple here so i'm going to go to click update and let's see how that looks there we go now this is looking a lot better and a lot more clean i mean those pictures were uh were actually pretty nice so they're not really that bad so i'm gonna leave this as is for now so now we're gonna go ahead and just mobile optimize this so go to your tablet version and let's see how this looks this looks fine but of course it's it's literally the same exact way that we that we were doing earlier to adjust our style so we can go ahead and and as you can tell this is already set to tablet so we can go ahead and adjust our typography maybe make the text smaller if we need to so that it fits properly on tablet but i'm going to go ahead and just leave it to how it was by default i think that's fine and i'm gonna go to mobile and let's go and see how that looks now on mobile it is a little scrunched up together but to be honest it all fits um i might actually just remove my social like my uh my social icons but that's entirely up to you but that's probably what i would do is just remove my social icons so and i'm just going to remove those because those are kind of in my way okay so now that we're done with this slider i'm going to go ahead and actually um remove i'm going to actually uh remove this one here and then i'm going to go ahead and add one of the other ones so there are a few the other ones will go a little bit quicker i just wanted to show you how to edit some of those uh some of those slides and how to adjust the style of those so um this one is a blog here so i'm not gonna go through that one and then i'm just gonna go through the general one okay now this one's pretty nice so what i would do on this one is uh let me just show you guys how that looks so this one is definitely a lot more cleaner so let's go with i'm gonna remove the logo remove the menu remove the canvas which is just their um their hamburger icon there i'm gonna remove social links um social buttons there i think they were over here so this is uh sorry the drop down and the social or the ones that i want to remove but uh you know what they kind of add some style to it so i'm going to leave it as out as well we have all these other options here that we went earlier we do have our header options if you did want to adjust that header and have a transparent transparency header you guys can go through these options i'm not really going to go through those as much and then here same options as before um except i think i didn't go over this part here so we can have a background or we can use an image instead you can even do a nice video which is pretty cool which i think you guys will actually like that and that's kind of awesome because you can have that per slide right you can have your own youtube video per slide i think that's pretty cool on that part and then here just some of the other settings that we went through earlier um then we have our style here and this this off canvas is only for a header these are like our header um options here if you if you guys were using their header and we have our slider options which we went through this earlier as well over social links and our navigation so so this is the other slider that i wanted to show you guys and basically the rest of this video is just going to be going over the sliders i might adjust them a bit but if you guys already got a good understanding of how to edit these slides you guys can just go ahead and activate this or sorry install this uh plug-in and just start um tinkering with it but i'm just going to go through each one because there are some really unique ones that i do like here and i think it is yeah this one's a really nice one too then i think we also have let's go through because there is one that um that is on scroll there's a slider on scroll which is this one here the multi scroll let me show you guys how that one works so this one's pretty cool i know there's a few websites that are like this you've probably seen this before right so whenever someone scrolls it automatically slides down but it does get stuck so it's like basically you have to add all of your sections in here which is kind of weird how that would work um and some of these options are a little bit um they're a little bit similar but they're some of them can be a little bit different and we do have our same style or same uh these are a little bit i mean these are pretty self-explanatory as well description title you can adjust those as well but uh this one is a little bit a little bit uh i feel like there's some um glitches on this one because we can't really scroll down from here um i think the best one so then you can have a um make a multi-scroll there let me go to the slider there we think would be the next one over this one here i think this one's a nice one i actually did i actually really like this one so this one you can just um you can definitely slide a little bit and then it also scrolls down um this one you are able to adjust the height of this one so i know that i was going that earlier where you weren't able to adjust the height so on this one we can like i was telling you earlier this um those other slides were kind of buggy but i'm sure they're going to fix those issues hopefully by the time you watch this video it'll be fixed i did want to show you that because i thought that was pretty cool then you can go through your slides you can add a video and all that sort of stuff that you may want to add here um i'm going to remove this one here and then i'm going to go ahead and go through probably this one here this will be the last one i go through here um i will have a video on the woocommerce one i might um it's not really the best right now i think they need to fix a few things before i even make that video because that one definitely is a little bit glitchy um but this one's a pretty nice one as well it's very clean and this one you have these little arrows right here some of them might have different skins but uh for this one doesn't but you can just go ahead and adjust these i feel like you'll definitely be able to find a slider that goes to your website and you can customize it however you would like but this one is a pretty nice one as well but i will let me just um yeah so the the woocommerce one here let me just go show you guys that one i don't have any products so i probably won't have anything to pop up but yeah so nothing nothing pops up anyway but i did test it out and it just it wasn't the best but you guys can try it out maybe have it work out for your website but you will notice that there are a few bugs in that one um that's pretty much it for this video i did want to show you guys those slides just because i feel like they'll definitely help you out whenever you're creating a slide um i know that these slides tend to be pretty popular so i'm hoping you guys do like them if you guys do have any questions on them just feel free to comment down below and i'll definitely try to help you guys out and if you guys haven't already make sure to like the video and subscribe it definitely helps out the channel out a lot especially when you like the video because it um youtube will end up suggesting it to more people and therefore uh we can definitely grow this channel and um and everyone can learn more about building websites so that's basically it for this video um and i'll catch you guys in the next one

Channel: Uriel Soto

Views: 33,141

Keywords: elementor slider, elementor slider tutorial, elementor slider plugin, elementor slider free, slider elementor free, slider elementor wordpress, slider elementor plugin, how to make a slider in elementor, how to make a slider using elementor, Elementor Slide Show, elementor slider design, prime slider Elementor

Id: 3vR2zk_2LXc

Length: 17min 54sec (1074 seconds)

Published: Tue Nov 10 2020