Custom CSS Scrollbar For Elementor Pro | Custom CSS Scrollbar For WordPress

Hi guys in this Tutorials I’m going to show you how to change your grey drab scrollbar into something sexy that you can be proud of on your website. It only takes a couple of minutes to do so let’s get into the Tutorials don’t forget to like and subscribe.

Hi guys so as you can see on the right hand side is our boring grey scrollbar it’s pretty depressing. So I’m going to take you into Elementor and show you how to customize your own personal scrollbar. You will need Elementor Pro for this feature. As we are going to be using some CSS coding if you haven’t got Elementor Pro there is a link in the bottom of the post.

The first thing you’re going to need to do once Elementor has loaded is add a new section to your page. You’re then going to have to click on the advanced tab for the section and click on the custom CSS code at the bottom. Now you’re going to have to copy and paste the CSS code that’s located in the description of this Tutorial into the box on the left hand side.

Now if we click preview at the bottom of the screen our grey scrollbar will turn blue. It already looks so much better. So how can we change the colouring and size of our scroll bar. Head back over to Elementor into the CSS code and we can start changing the size of our scroll bar where it says width 0.7.

alt="Custom CSS Scrollbar" — **Custom CSS Scrollbar for Elementor**

We’re going to change this to 1.7 and if we go back and preview our page by clicking on the preview button at the bottom we’ll see that the width of our scroll bar has increased. Now we’re going to go back into Elementor and change the colour and the first colour. We’re going to change is the background to our scrollbar under where it says width is our background colour.

We’re going to change this hashtag colour to green. The area that I’m talking about changing is the bit between the scroll bar and the bottom of the page. Now if you know exactly the colour you want. You can add it in here for the purpose of the Tutorial. I am just simply going to type in green I am going to click on the preview button.

So you can see what we’ve changed once the preview screen has loaded. You’ll notice that our background has turned from black to green and the tail of our scroll bar has faded into the green as well. Now if we want to change the colour of our scroll bar itself we can highlight this little bit of code.

Here and we can type in red if I click on the preview button again and wait for Elementor to update. You’ll see that our scroll bar has turned from blue to red. Now what if we don’t want a rounded bottom scroll bar. Then we head back over to Elementor and the last line of code. Here we’re going to change from 50 to zero.

Now I’m going to click on the preview button again and show you what it looks like with no rounded bottom. Once the page is updated you can see we’ve lost our rounded bottom on our scroll bar. Once you’ve finished making all your changes don’t forget to update or publish your page

The great thing about using this coding on Elementor Pro is that if your website has different sections. Then you can customize each section to have their own coloured scroll bar.

So what do we do if we want to keep the same custom scroll bar across the whole of our site. If we go back into our WordPress dashboard click on appearance and click on customize at the bottom of the page on the left hand side. You can see we’ve got additional CSS in here we can paste in our CSS coding for our scroll bar. As you can see on the right hand side our scroll bar has been updated. To change all the colours and sizes all you need to do is repeat the steps that i showed at the beginning of the Tutorial.

Once you have finished making all the changes to your colours and sizes. All you need to do is click on publish this will add your custom scroll bar to all your pages and blogs on your website.

That’s it for this Tutorial guys don’t forget to like and subscribe. You can pick up your copy of Elementor Pro in the top of the description below. It is an affiliate link it doesn’t cost you any more to use if you should buy from Elementor but it does give me a very small percentage of their profits.

Thanks for reading guys.

See you in the next Tutorial.