Come aggiungere una barra di scorrimento personalizzata in WordPress

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 barra di scorrimento del tuo 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.

Considerazioni chiave per le barre di scorrimento personalizzate:

• Compatibilità con i browser: Mentre i browser moderni come Chrome, Safari ed Edge (browser basati su WebKit per CSS) supportano bene le barre di scorrimento personalizzate, altri potrebbero offrire una personalizzazione limitata o nessuna. Testa sempre le tue modifiche su diversi browser per garantire un'esperienza coerente.
• Limitazioni dei dispositivi mobili: Sui dispositivi mobili, le barre di scorrimento tradizionali sono spesso sostituite da gesti tattili intuitivi (scorrimento). Ciò significa che le barre di scorrimento personalizzate in genere non verranno visualizzate su smartphone o tablet.
• Esperienza Utente e Accessibilità: La tua barra di scorrimento dovrebbe migliorare, non distrarre, il tuo contenuto. Design eccessivamente appariscenti o difficili da vedere possono influire negativamente sulla navigazione dell'utente. Punta a modifiche sottili che corrispondano ai colori del tuo brand e migliorino il flusso generale del tuo sito.
• Impatto sulle prestazioni: Sebbene generalmente minimo, l'aggiunta di plugin o CSS esteso può influire leggermente sulla velocità di caricamento del sito Web. Scegli soluzioni ottimizzate e mantieni il tuo codice pulito per mantenere buone prestazioni.
• Testare è Fondamentale: Indipendentemente dal metodo scelto, testa a fondo la tua barra di scorrimento personalizzata su vari browser, dispositivi e dimensioni dello schermo per assicurarti che funzioni efficacemente.

Se fatto correttamente, questo elemento di design di WordPress può dare al tuo sito quel tocco professionale in più mantenendo un'eccellente usabilità.

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)

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 da 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 modificare 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.

Creare una barra di scorrimento personalizzata con CSS utilizzando le pseudo-classi ::-webkit-scrollbar (come nell'esempio seguente) ti consente di personalizzare molte parti dell'elemento.

Tuttavia, queste regole CSS specifiche funzionano principalmente sui browser desktop basati su WebKit come Chrome, Safari e il nuovo Microsoft Edge.

Ciò significa che la tua barra di scorrimento personalizzata potrebbe non apparire o apparire diversamente su altri browser (come Firefox) o sulla maggior parte dei dispositivi mobili.

Per personalizzare la tua barra di scorrimento utilizzando i CSS, vai su Aspetto » Personalizza.

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 inserire qualsiasi codice desideri. Per maggiori informazioni sul CSS, consulta la nostra guida completa su come aggiungere CSS personalizzato 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 sul tuo sito WordPress. Questo può essere molto 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 uno scorrimento fluido verso l'alto in WordPress.

Domande Frequenti sull'Aggiunta di una Barra di Scorrimento Personalizzata in WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente sull'aggiunta di una barra di scorrimento personalizzata in WordPress:

Come si aggiunge una barra di scorrimento in WordPress?

Puoi aggiungere una barra di scorrimento utilizzando CSS personalizzato o un plugin come Advanced Scrollbar che abilita aree di contenuto scorrevoli all'interno di post, pagine o widget in WordPress.

Come inserisco uno slider in WordPress?

Puoi inserire uno slider utilizzando un plugin per slider come Soliloquy, creando il tuo slider e poi aggiungendolo a una pagina usando un blocco. Per maggiori informazioni, consulta il nostro tutorial su come creare uno slider responsive in WordPress.

Qual è il miglior plugin slider per WordPress?

Soliloquy è il miglior plugin per slider WordPress perché è facile da usare per i principianti, flessibile e funziona bene con la maggior parte dei temi e dei page builder.

Come creo un banner personalizzato?

Puoi usare OptinMonster per creare un banner personalizzato con i suoi modelli predefiniti. Il plugin ti consente anche di personalizzare completamente il contenuto, aggiungere CTA e utilizzare colori diversi secondo le tue preferenze. Per istruzioni dettagliate, consulta il nostro tutorial su come creare un banner 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 di WordPress e la nostra guida definitiva su come modificare un sito web WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.