Hai notato come alcuni siti web abbiano quelle barre di scorrimento personalizzate ed eleganti che si abbinano perfettamente ai colori del loro brand? 🤩
Abbiamo notato anche noi questa funzionalità. E molti dei nostri utenti ci hanno chiesto come creare queste barre di scorrimento personalizzate che catturano l'attenzione sui propri siti WordPress.
La buona notizia? Personalizzare la barra di scorrimento di WordPress è molto più facile di quanto pensi. Sia che tu voglia abbinarla ai colori del tuo brand, migliorare la navigazione o aggiungere un tocco professionale al tuo sito web, ti mostreremo esattamente come fare. Nessuna esperienza di codifica richiesta!
Cosa dovresti sapere prima di aggiungere una barra di scorrimento personalizzata 💡
Quindi, sei interessato a personalizzare la tua barra di scorrimento di WordPress. Ma prima di iniziare, ci sono alcune cose importanti che dovresti sapere per assicurarti di prendere la decisione giusta per il tuo sito web WordPress.
Innanzitutto, sebbene le barre di scorrimento personalizzate possano sembrare fantastiche, non tutti i browser le visualizzano allo stesso modo. I browser moderni come Chrome le supportano bene, ma altri potrebbero mostrare personalizzazioni limitate o nessuna, specialmente sui dispositivi mobili.
La chiave è iniziare in modo discreto. Raccomandiamo sempre di iniziare con piccole modifiche che si abbinino allo schema di colori del tuo brand, piuttosto che creare design appariscenti che potrebbero distogliere l'attenzione dal tuo contenuto. Ricorda: la tua barra di scorrimento dovrebbe migliorare l'esperienza utente, non rubare la scena.
Se fatto correttamente, questo elemento di design di WordPress può dare al tuo sito quel tocco professionale in più. Assicurati solo di testare le tue modifiche su diversi browser per garantire un'esperienza coerente per tutti i tuoi visitatori.
Ora che hai capito cosa aspettarti, vediamo come aggiungere una barra di scorrimento personalizzata al tuo sito WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare al metodo che desideri utilizzare:
- Opzione 1: Usa il plugin Advanced Scrollbar (Gratuito + Facile)
- Opzione 2: Crea una barra di scorrimento CSS (Avanzato)
- Suggerimento bonus: aggiungi un effetto Scorri in alto in WordPress
🔎 Vuoi aggiungere barre di scorrimento personalizzate a elementi specifici come caselle di contenuto o barre laterali? Dai un'occhiata alla nostra guida su come aggiungere barre di scorrimento personalizzate a qualsiasi elemento in WordPress.
Opzione 1: Usa il plugin Advanced Scrollbar (Gratuito + Facile)
Il modo più semplice per personalizzare la barra di scorrimento in WordPress è utilizzare Advanced Scrollbar. Questo plugin gratuito ti consente di modificare la larghezza, il colore, la velocità di scorrimento della barra di scorrimento e altro ancora senza dover scrivere una sola riga di codice.
La prima cosa che devi fare è installare e attivare il plugin Advanced Scrollbar. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, vai su Impostazioni » Impostazioni Advanced Scrollbar.
Qui, puoi cambiare il design della barra di scorrimento, come lo schema di colori e il colore di sfondo della guida.
Nell'immagine seguente, abbiamo creato una barra di scorrimento blu.
Puoi anche cambiare il passo di scorrimento del mouse digitando un nuovo numero nel campo 'Passo di scorrimento del mouse'.
Un numero inferiore farà scorrere il tuo sito più lentamente, e un numero superiore lo farà scorrere più velocemente.
Puoi anche selezionare se vuoi nascondere automaticamente la barra di scorrimento in modo che appaia solo quando il visitatore sta scorrendo.
Questo può essere utile se hai creato una barra di scorrimento più colorata e temi che possa distrarre dal resto dei tuoi contenuti.
Per impostazione predefinita, la barra di scorrimento appare sul lato destro della finestra del browser. Tuttavia, puoi spostarla sul lato sinistro utilizzando le impostazioni 'Allineamento guida' se preferisci.
Quando sei soddisfatto della configurazione della barra di scorrimento, ricorda di fare clic su 'Salva modifiche' per salvare le tue impostazioni.
Ora puoi visitare il tuo blog WordPress per vedere la barra di scorrimento personalizzata in azione.
Opzione 2: Crea una barra di scorrimento CSS (Avanzato)
Se desideri apportare modifiche più avanzate alla tua barra di scorrimento, un'altra opzione è utilizzare i CSS.
La creazione di una barra di scorrimento personalizzata con i CSS ti consente di personalizzare ogni parte dell'elemento, ma funziona solo sui browser desktop che utilizzano WebKit. Ciò significa che le tue modifiche non verranno visualizzate su tutti i browser, inclusi i browser mobili.
Per personalizzare la tua barra di scorrimento utilizzando i CSS, vai su Aspetto » Personalizza.
Nota: Se stai utilizzando un tema a blocchi, questa opzione non sarà disponibile per te. In tal caso, puoi aprire il personalizzatore digitando l'URL https://example.com/wp-admin/customize.php. Ricorda di sostituire example.com con il nome di dominio del tuo sito.
Per maggiori informazioni, consulta la nostra guida su come correggere la mancanza del personalizzatore del tema nell'amministrazione di WordPress.
Nel personalizzatore di WordPress, fai clic su 'CSS aggiuntivo'.
Ora puoi aggiungere il tuo codice al piccolo editor che appare.
Ecco un esempio di codice che modifica l'aspetto della barra di scorrimento:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
Puoi aggiungere qualsiasi codice desideri. Per maggiori informazioni sui CSS, consulta la nostra guida completa su come aggiungere CSS personalizzati al tuo tema WordPress.
Quando sei soddisfatto del tuo codice, fai semplicemente clic sul pulsante 'Pubblica'. Ora puoi visitare il tuo sito WordPress in un browser WebKit per vedere le tue modifiche in azione.
Suggerimento bonus: aggiungi un effetto Scorri in alto in WordPress
Oltre a creare una barra di scorrimento personalizzata, potresti anche voler aggiungere un effetto di scorrimento verso l'alto al tuo sito WordPress. Questo può essere super utile se hai post del blog più lunghi e vuoi offrire agli utenti un modo rapido per tornare in cima.
Per aggiungere questa funzionalità, devi installare e attivare il plugin WPFront Scroll Top. Per istruzioni dettagliate, consulta il nostro tutorial su come installare un plugin WordPress.
Dopo l'attivazione, visita la pagina Impostazioni » Scroll Top dalla dashboard di WordPress e seleziona la casella 'Abilitato' per attivare l'effetto di scorrimento verso l'alto.
Dopodiché, puoi modificare l'offset di scorrimento, la dimensione del pulsante, l'opacità, la durata dello svanimento, la durata dello scorrimento e altro ancora da qui.
Una volta terminato, non dimenticare di fare clic sul pulsante 'Salva modifiche' per memorizzare le tue impostazioni.
Ora hai aggiunto con successo un effetto di scorrimento verso l'alto al tuo sito web. Per istruzioni più dettagliate, consulta il nostro tutorial su come aggiungere un effetto di scorrimento fluido verso l'alto in WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere una barra di scorrimento personalizzata in WordPress. Potresti anche voler consultare le nostre scelte esperte per i migliori page builder drag-and-drop per WordPress e la nostra guida definitiva su come modificare un sito WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Una cosa che vorrei aggiungere è l'importanza di considerare l'accessibilità quando si personalizzano le barre di scorrimento.
Sebbene l'estetica sia importante, dovremmo assicurarci che la barra di scorrimento personalizzata rimanga facilmente visibile e utilizzabile per tutti i visitatori, compresi quelli con disabilità visive.
Forse l'uso di colori ad alto contrasto o la garanzia che la larghezza della barra di scorrimento sia sufficiente potrebbero aiutare a questo riguardo.
Marcos
Grazie! Il CSS è plug&play.
Supporto WPBeginner
Lieti di sapere che la nostra guida è stata utile!
Amministratore
Luqman Essam
Grazie! Mi ha aiutato!
Supporto WPBeginner
Glad our guide was helpful!
Amministratore
Victor
Esiste un plugin per WP che visualizzi arte sequenziale come in una striscia a fumetti, dove le puntate possono essere pubblicate settimanalmente?
Supporto WPBeginner
Potresti voler dare un'occhiata alla nostra guida su come gestire una serie di post: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Amministratore
ash
it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own
===
::-webkit-scrollbar { width: 14px; background-color: silver; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: silver; }
::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #0099cc; }
Vas
Eccellente… la soluzione più pulita. Sarebbe bello pubblicare il codice per Firefox… se esiste un'opzione del genere.
Grazie per aver condiviso.
Staff di WPBeginner
Potrebbe esserci un modo per sovrascriverlo tramite un CSS personalizzato. Si prega di contattare il supporto del plugin.
Karen
Che plugin divertente. L'ho appena installato. C'è un modo per controllare l'opacità – del colore della barra di scorrimento quando non ci passi sopra con il mouse? Grazie per questo post!
Staff di WPBeginner
Grazie per avercelo segnalato. Corretto.
Vernon Trent
per favore correggi il tuo link al plugin. c'è una S mancante nell'URL “pluginS”
Ospite
Ciao, il link nel post sembra rotto e potrebbe influire sul posizionamento del tuo sito. Per favore, inserisci il link corretto per il plugin “Dewdrop Custom Scrollbar”.