[ELEMENTOR] SEXY ScrollBar in JUST 2 MINUTES

[ELEMENTOR] SEXY ScrollBar in JUST 2 MINUTES

🇬🇧 ENG

Today we’re going to Edit the default browser scrollbar with a customized one that enable us to give our end users, a better user-experience.

As said in some comments into Elementor Groups and YouTube Comments, it’s a best pratice to insert custom code into Customize settings into Apparearance, o into the Main CSS files of our Child Theme.

In every case, if you know where you put che code, I think there’s no problem about that.

The important part is related to the position into you put it. If you’re using Elementor Theme Builder fetaures, you can put it in Footer instead of Header, and get the same result.

🇮🇹 ITA

Oggi andremo a Modificare la Scrollbar di Default del nostro sito, con una Personalizzata che ci permetterà di fornire una migliore user-experience.

Come detto in alcuni commenti sui Gruppi di Elementor o sul Canale Youtube, è buona norma piazzare questo codice nelle impostazioni dell’Aspetto, quindi Personalizza. Tuttavia se sai dove piazzi eventuali porzioni di codice custom, non vedo dove sia il problema.

Infatti puoi inserirlo nel file CSS del tuo tema child, piuttosto che nell’Header o Footer se utilizzi le funzioni messe a disposizione dal Elementor PRO Theme Builder. Addirittura, il theme builder ci da la possibilità di poter aggiungere liberamente codice Custom CSS che avrà effetto su tutto il sito web ( laddove i template sono gestiti da Elementor stesso )

CSS CODE

::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-button{
width: 8px;
height: 5px;
}
::-webkit-scrollbar-track{
background: #eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
background: #888;
border: thin solid gray;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
background: #eee;
}

🇬🇧 If you put it into Custom CSS, you don’t need to add <style> tag.it

🇮🇹 Se inserisci il codice nel CSS Personalizzato, non dovrai aggiungere i tag <style>.

Subscribe Now!

Subcribe to my newsletter and revice a lot of tips, tricks and other **** like this. 🤍

© 2020 | Alessandro De Cristofaro

🤏 Ehi, It's Me... Alessandro!
main-qimg-2a04eb0564e6d70ee4eeb60b807200ef

Iscriviti alla mia Newsletter e ricevi Tutti i Tutorial più tanti (forse troppi) CONTENUTI SPECIALI

Subscribe to my Newsletter and Recive Now a an HUGE amount of Tips and Trick!