Custom CSS Scrollbar For Elementor Pro | Custom CSS Scrollbar For WordPress
Custom CSS Scrollbar For Elementor Pro | Custom CSS Scrollbar For WordPress
Hi guys, in this Tutorial, 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.
Setting Up Elementor Pro for Custom Scrollbar
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.
Adding a New Section and Custom CSS
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.
Previewing the Initial Scrollbar Changes
Now if we click preview at the bottom of the screen, our grey scrollbar will turn blue. It already looks so much better.
Adjusting Scrollbar Width
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. 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.
Changing the Scrollbar Background Colour
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.
Updating the Scrollbar Thumb Colour
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.
Modifying Scrollbar Border Radius
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.
Saving Changes to the Page
Once you’ve finished making all your changes, don’t forget to update or publish your page.
Customizing Scrollbars for Different Sections
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.
Applying Custom Scrollbar Site-Wide
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.
Publishing Site-Wide Scrollbar Changes
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.
Elementor Pro Details
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.
Custom CSS Scrollbar in Elementor and WordPress