Modi rapidi per creare una barra di scorrimento personalizzata in WordPress

È sicuro dire che, per qualsiasi motivo, vuoi che il tuo sito web si distingua. Avere una tale piattaforma assicurerà che la cosa che stai mettendo fuori resti più a lungo nella mente del visitatore, e questa è quasi esclusivamente una buona cosa. Oltre al contenuto del tuo sito web, un altro modo per attirare l'attenzione sul tuo prodotto è l'aspetto visivo. Questo non è affatto un pezzo di nuova conoscenza. C'è una ragione per cui McDonald's è rosso e giallo e Facebook blu. Tuttavia, qui parleremo di una piccola parte dell'esperienza che offre il tuo sito web. È una parte che potrebbe non sembrare troppo importante, ma riteniamo che abbia ancora il suo valore: la barra di scorrimento. Nelle righe seguenti imparerai alcuni modi rapidi per creare una barra di scorrimento personalizzata in WordPress.

Semplici modi per creare una barra di scorrimento personalizzata in WordPress

La creazione di una barra di scorrimento personalizzata è un passaggio essenziale nella creazione di un tema personalizzato per il tuo sito web. Quindi, se sei interessato a far risaltare il tuo sito Web in ogni singolo modo , lascia che ti presentiamo il primo metodo per rendere unica quella barra di scorrimento.

Aggiungi una barra di scorrimento personalizzata in WordPress con un plug-in

Come con la maggior parte delle cose che vuoi fare in WordPress, l'utilizzo di un plug-in come mezzo per creare una barra di scorrimento liscia è una buona strada da intraprendere. Il motivo per cui questo metodo è altamente raccomandato per la maggior parte degli utenti è la sua semplicità. Con pochi semplici clic, ti ritroverai a guardare una barra di scorrimento che corrisponde al tuo stile. Tuttavia, vale la pena menzionare un piccolo difetto che viene fornito con questo metodo. Vale a dire, questo plugin non supporta i browser mobili. Tuttavia, se questo non sembra una grande perdita, continua con la lettura.

Prima di tutto, dovrai installare e attivare il plugin Advanced Scrollbar . Questa azione è abbastanza semplice:

1. Visita i Plugin, quindi vai alla pagina Aggiungi nuovo all'interno dell'area di amministrazione di WordPress. Digita il nome di detto plugin nella barra di ricerca e premi Invio.
2. Una volta individuato il plug-in, fare clic sul pulsante "Installa ora". WordPress scaricherà e installerà il plugin per te. Dopo questo, sarai in grado di notare che il pulsante "Installa ora" è cambiato nel pulsante "Attiva".
3. Fai clic sul pulsante "Attiva" e sei pronto per partire.

Ora che hai installato e attivato il plugin necessario, dovrai configurarlo. Sebbene quella parola possa sembrare intimidatoria, il processo è semplicissimo. Basta andare su Impostazioni > Impostazioni barra di scorrimento colore personalizzato. Una volta lì, sarai in grado di cambiare il colore della tua barra di scorrimento, così come i suoi colori di sfondo del binario. È quindi possibile selezionare il passaggio di scorrimento del mouse, che sarebbe la velocità di scorrimento della rotellina del mouse. La cosa fantastica di questo plugin è che ti consente di selezionare se vuoi nascondere automaticamente la barra di scorrimento o visualizzarla sempre.

Hai anche la possibilità di scegliere l'opzione "Solo cursore", che visualizzerebbe la barra di scorrimento senza il pulsante. Di seguito, potrai trovare le opzioni per impostare la velocità di scorrimento, modificare l'allineamento della rotaia (sinistra o destra) e abilitare il comportamento al tocco.

Dopo aver esaminato tutte le opzioni, giocato con i colori e trovato la combinazione più adatta al tuo stile e alle tue preferenze, non dimenticare di fare clic sul pulsante "salva modifiche" per memorizzare tutto il lavoro. Dopo averlo fatto, puoi visitare il tuo sito Web per vedere in azione quegli splendidi colori personalizzati della barra di scorrimento.

Aggiungi colori personalizzati della barra di scorrimento in WordPress usando CSS

Come puoi dedurre dal sottotitolo, questo metodo utilizza i CSS per definire lo stile della barra di scorrimento. Questo metodo si è dimostrato più veloce di quello in cui usi jQuery. Tuttavia, è importante ricordare che funziona solo su browser desktop che utilizzano motori di rendering WebKit come Google Chrome, Safari e Opera. Sfortunatamente, non avrà alcun effetto sui browser mobili o su Firefox ed Edge sui computer desktop. Detto questo, se questa è l'opzione per cui desideri optare, ecco come procedere.

Inizia andando su Temi > Pagina personalizzata. Questa azione avvierà l'interfaccia di personalizzazione del tema di WordPress. Sarai in grado di vedere l'anteprima dal vivo del tuo sito con una serie di opzioni sul piano sinistro dello schermo . Procedi facendo clic sulla scheda CSS aggiuntivo dal riquadro di sinistra. La scheda ti mostrerà una semplice casella in cui potrai aggiungere il tuo CSS personalizzato. Non appena aggiungi una regola CSS valida, la vedrai applicata al riquadro di anteprima live del tuo sito web. Per quanto riguarda quella regola CSS valida, ecco cosa dovresti aggiungere affinché la tua barra di scorrimento sia suscettibile di modifiche:

::-webkit-barra di scorrimento {

-aspetto-webkit: nessuno ;

}

::-webkit-barra di scorrimento {

larghezza: 10px;

}

::-webkit-barra di scorrimento-traccia {

sfondo: #ffb400 ;

borger: 1px solido #ccc;

}

::-webkit-barra di scorrimento-pollice {

sfondo: #cc00ff ;

borger: 1px solido #eee;

altezza: 100px;

raggio di confine: 5px ;

}

::-webkit-scrollbar-thumb:hover {

sfondo: blu;

Ricorda che qualsiasi CSS personalizzato che aggiungi utilizzando la personalizzazione del tema è disponibile solo con quel particolare tema. Se ti capita di cambiare un tema ma desideri mantenere quella barra di scorrimento personalizzata, dovrai copiare e incollare quella regola CSS sul tuo nuovo tema usando lo stesso metodo.

Sebbene questo sia un ottimo mezzo per far risaltare il tuo sito Web, dobbiamo menzionare uno svantaggio della creazione di una barra di scorrimento personalizzata in WordPress. Vale a dire, per impostazione predefinita, CSS non viene fornito con un set di regole che ti consente di modificare le proprietà della barra di scorrimento. Ci sono alcune proposte per aggiungere questa opzione, ma al momento non sono supportate dalla maggior parte dei browser. Per ovviare a questo problema, designer e sviluppatori utilizzano pseudo-elementi specifici del browser o JavaScript per sovrascrivere l'aspetto predefinito della barra di scorrimento. Queste sono le tecniche che vi abbiamo descritto. Tuttavia, devi tenere a mente che devi testare il tuo sito con diversi browser e dispositivi per assicurarti che funzioni come immaginavi su tutti i browser. Una volta che hai coperto, è sicuro dire che sai come creare una barra di scorrimento personalizzata in WordPress.