CREATE ELEMENTOR SLIDER WITH CUSTOM CSS | Elementor Tutorial

Hey everyone! In this quick tutorial, I will show you how I made this custom slider design using the slides widget in Elementor PRO and some custom CSS.

What’s cool is that this slider remains completely responsive and adjusts perfectly to any screen size and any page scale. It can easily change the color and size of the arrows, move them around and modify this code in the way you want.

The standard Elementor PROslides widget doesn’t give you many options to have fun with, so you can create a slider like this one, which, by the way, was the source of inspiration for this particular design. So, whether you’re using Elementor PRO or even some third-party Elementor add-on, you’ll modify any slider with this simple trick.

You can find the code snippet in the comment section down below, but before you copy and paste it on your page, let’s have a closer look at how it works and what it does so you can customize it and change it to match your page design.

I started by dropping the slides widget on the new section, and in this tutorial, I’ll show you how to set up a full-page slider, and if you want to have it in a two-column layout like over here, we’ll get back to it at the end of the video.

After adding the slides widget, I deleted all the content from the slides so we can focus solely on the navigation. Let’s dive right in! So, now we’ll be looking at how we can change the way these arrows look and apply some styles to them using custom CSS and, as you know, to target aspecific elements in your widget, you have to go and grab the class of this element.

So I published this page and want to preview. So here in the preview, I can press f12, or right-click and click “Inspect,” so I can see the source code of this page I want to grab the “Inspect” tool and hover over this arrow over here, so here it automatically chooses the:: before – the pseudo-element, but we need the pointer itself and if we go down here to the Styles tab, we can copy this entire thing here, and these are the classes of both of these arrows.

As you can see, they are selected here on the left, which means that we have selected both of these at the same time. So, I’ll just copy this line of code and get back to my Elementor editor and simply dropthe copied code over here and open the curly brackets and here I can finallystart writing some code, some cells for our arrows.

I’m gonna go with white forthis tutorial, but you can change it to any other color. So, now I would also givethe height and the width for our arrows. This will be the width and the height ofthe container itself. It doesn’t affect the size of the arrows, you can changethe size of the arrows back there in the Styles tab. Now, we’re only changing thesize of the container – I’m using percents over here, because now we’re writing thestyles for the desktop and, as you know, monitors can be of different size andalso the users can have a different scale in their browser.

This is what’simportant to make sure that the size of this entire slider and each elementinside the slider is going to adjust to the size of the page and to the size ofthe window opening the browser, etc. This is why we’re doing that. Now let’smove it down a little bit since we want our arrows – both of them – to sit in theright hand bottom corner since our arrows here have the position:absolute.

It’s written inside that source code for these arrows, and you can see it if youuse it the “Inspector.” And now we’ll just move these arrows down and 96% seemspretty good. You can go for 93% – also fine. By the way, there might be a tiny problemand let’s address it right away. When using percents when moving your elements with absolute position this is what you might get.

This might turn into a problemif the arrows background or maybe the section background in which the slidersits is of a different color. You will clearly see that these elements overlap. It’s not looking really good unless you want to make them overlap that way. This is why I need to fine-tune this percentage so be careful with that. So now I’ll switch it back to white andwe’re pretty much done.

These Styles applied to both of these arrows becauseyou see here we have both of these arrows targeted, separated by a comma and if we jump down a little bit and we pick only one of these two arrows. Let’sstart with the, well, here will be the right arrow, the next arrow, and over herefirst there will be the previous arrow and it will start with the previousarrow. So what we need to do is to move it to the right. Okay, let’s first move the second arrow.

What we need to do here is to move it to the right edge, so it sticks right tothe edge of our slider. This is what we need to do remembering that this arrowalso has the position:absolute and we can move this element by using right,left, top, and bottom properties.

And you know, if we simply write that on theright, this element is going to have zero percent of pixels or of anything, zeropercent of extra space, so it’s gonna stick to our right edge.

So now we haveto move the second arrow, so it is kind of attached to the first arrow orto the next arrow. All right, what we’re gonna do here is we’re going to use the leftproperty and say 90% and we cannot see it for now because it’s sortabehind the other arrow and to move it to the edge of the first arrow to kind ofmake them sit together next to each other.

We’re going to use the negativemargin – we’re gonna, say, margin left in, say, -10% and this is gonna makethis arrow jump on the left side of our first arrow. So, this is what it lookslike so far and we can update the page and go and check it out on the preview.So this is what it looks like and if we open the “Inspector” again and if you want to move – trying to kind of resize this page – this is what is gonnalook like.

So this is kind of how this would look on a tablet and I don’treally like how these arrows shrink down. It’s very easy to fix – if you go back andwrite some styles for the tablet device. But on mobile it’s gonna look somethinglike this. Of course we’re gonna change the height of the slider and it’s goingto look better but anyways remembering that the minimum touch target isactually 40 pixels on mobile devices it’s not going to be very usable and,well, it’s gonna take up a lot of space over here and some users might even miss these arrows or maybe interpret them in a wrong way.

This is why it is safer tosimply place these arrows on the sides. How are we going to approach adaptingthis design to tablet devices and mobile devices? Let’s have a look. So, since wehave this piece of code written here, I’m gonna use the media query to say thatthis code written over here is going to only work for the screen size biggerthan 996 pixels. There we go.

And now we need to open a new curly bracket and goto the very end of our code snippet, and then close the bracket. As you see, itturned green – it means that all the code that is inside these two curly bracketsis only gonna work when the width of your window – in which this page with theslider is open – is more than 996 pixels. This is how it works. Alright, let’s quickly see if it actually worked. Once the width of the page is smaller than – well then sad 996 pixels – the arrows turn back to normal.

Now, what we need to do – we need to retain that backgroundcolor of our arrows and, well, slightly tweak the position of these arrows. Nowlet’s see what we need to change. Well, as you remember the only value that is notgoing to change across all of the devices will be the background color. It’sstill gotta be white. In my case, well, of course you can use different colors,you remember, so I’m gonna copy it over here. Don’t forget to close the curlybracket! Now, I’m writing the styles for the tablet device.

So, I want to make thesize of these arrows – I mean the container of the arrow – fixed. I don’t want the value to be in percents, I would rather use pixels because for mobile devices and tabletdevices, it is important that you retain the size of your elements around theminimum to average touch target size, which is on mobile devices – not less than 40 pixels.

It’s important to remember and I want their size to be70 pixels. All right and just to make sure I want to use the top property andsave 50% to move them to the middle of our slider. All right we cannot reallysee the result over here. And to disable this portion of code written here we could use two slashes and now we have only this portion of code working. Now, let’s keep writing the styles for our arrows separately, so we will targetboth of these – one by one – so start with this arrow. What we need to do is to moveit to the edge, because I want it to be really close to the edge.

I’m going tostick it right to the edge right here. And I’m gonna, say, left 0%. Here I’m gonna do the same but move it to the right edge and I’m gonna, say, right also 0%. Okay, it is done. Now what we’re going to do is to write the styles for the mobiledevice. Finally and lastly, this will be the lastthing we need to change. And I’m gonna use the media query againand, say, media. But this time I’m going to use not minimum width, but maximumwidth which will be 480 pixels. Again, open the green curly brackets and I’mgoing to copy these classes, separated by a comma.

We’re going to target both ofthese arrows again, and the only thing we’re going to change is the size of ourarrow containers, because, as you remember, the touch targets on the mobile devicehas to be 40 pixels minimum, but we shouldn’t make them too large, so theydon’t take up too much space covering some other elements and just ruining thedesign on the slider and ruining the look of the page. This is why we’re gonnasimply, say, with 50 pixels and height 50 pixels as well. Now, let’s remove thesetwo slashes over here and while we’re pretty much done, let’s update the pageand jump to the preview to see the result.

There it is. Here we have ourarrows, so after you’ve done setting up the code part, we can adjust the sliderto your layout design. Change the slider heights for tablet and mobile devices, ormove it over to a two column layout, which will only require some minorchanges of the button with parameters, and that was it for this quick tip forElementor PRO slides widget.

If you like this video and want to see more tutorials like this one, let us know in the comment section down below! Besides that feel free to leave your requests and suggestions for the following videos! We have tutorials and all sorts of educational and inspirational videos posted every week, so we would be excited to hear your thoughts and ideas! On that note, thank you for watching and I’ll see you soon! Stay safe and take care!

Leave a Comment