Se houver uma palavra que você associe ao WordPress, será “personalização”. É para isso que servem todos os principais recursos, plug-ins e temas – para moldar a aparência e o comportamento do seu site e torná-lo adequado aos seus desejos e necessidades. É por isso que você faz coisas incríveis, como personalizar as cores do site, adicionar diferentes elementos, como listas de preços, e geralmente usar apenas o que precisa para fazer o site parecer e desempenhar o papel que você tem em mente para ele.
Existem, é claro, alguns elementos personalizáveis que as pessoas tendem a ignorar. A barra de rolagem, aquela barra em seu navegador que se move conforme você rola uma página e permite que você navegue por páginas longas com mais rapidez, é uma delas. Se você deseja que as pessoas que visitam seu site sejam tratadas com uma barra de rolagem que pelo menos corresponda ao esquema de cores do seu site, você pode fazer isso acontecer.
Neste artigo, mostraremos a você:
Se você está pensando em adicionar uma barra de rolagem personalizada ao seu site WordPress, as duas opções principais que você terá são escolher um plugin ou personalizar a barra de rolagem usando CSS. Ambas as opções têm seus prós e contras que podem influenciar sua escolha.
Se usar o plug-in para adicionar uma barra de rolagem personalizada, você criará uma mudança duradoura – desde que o plug-in esteja instalado. É tão simples quanto instalar um plugin e brincar com as configurações até encontrar o que funciona melhor para você.
A desvantagem de usar o plug-in é que ele pode tornar o seu site mais lento. Mesmo que seja apenas milissegundos, eles tendem a somar quando você usa o suficiente desses plug-ins pequenos e aparentemente inconseqüentes.
Você não terá problemas de velocidade ao usar CSS, no entanto. Você não terá que instalar nada – você poderá fazer todas as alterações através da aparência do cliente em Aparência> Personalizar> CSS adicional. O código também não é muito difícil de aprender. O personalizador mostrará as mudanças em tempo real, o que é um bônus bacana.
O problema com esse método é, no entanto, que você corre o risco de perder suas personalizações com uma atualização de tema. É por isso que geralmente é recomendado usar um tema filho ao fazer esses tipos de alterações.
Existem alguns plug-ins gratuitos que você pode usar para adicionar uma barra de rolagem personalizada ao seu site WordPress. Vamos usar o Scroll Styler plugin, pois permite que você defina até quatro cores em sua barra de rolagem. Vá para Plugins> Adicionar Novo, pesquise “estilizador de rolagem” e, em seguida, instale e ative-o em seu site.
Depois de instalar o plugin, vá para Configurações> Scroll Styler para acessar as opções do plugin. Os dois primeiros são a largura da barra de rolagem e o preenchimento da trilha da barra de rolagem. O primeiro dos dois mudará a largura da barra de rolagem, em pixels. O segundo mudará o preenchimento ao redor da miniatura da barra de rolagem.
As próximas quatro opções permitirão que você defina as cores diferentes para a barra de rolagem. A cor de fundo da trilha da barra de rolagem é a cor da trilha da barra de rolagem e não muda. A cor do polegar sim. “Cor de fundo” é a cor do polegar quando não está ativo. Quando você passa o mouse sobre o polegar com o cursor, ele muda sua cor para “cor de fundo ao passar o mouse”. Quando você pressiona o polegar para rolar a página, sua cor muda para “cor de fundo ativa”.
A opção final permite definir o raio da borda do polegar da barra de rolagem. Efetivamente, isso permite arredondar os cantos do polegar.
Depois de escolher as opções, não se esqueça de salvar as configurações e você verá a alteração em seu site.
Embora a gama de opções oferecida pelo plug-in possa ser um pouco modesta, pode ser mais do que suficiente para criar uma barra de rolagem que se ajuste ao esquema de cores do seu site.
Sua segunda opção seria usar CSS personalizado para alterar a aparência da barra de rolagem. Como mencionamos antes, você precisará navegar até Aparência> Personalizar> CSS adicional para fazer quaisquer alterações.
A maneira de usar CSS personalizado para alterar a barra de rolagem é usando pseudoelementos para personalizar certas partes da barra de rolagem. Você pode personalizar:
Então, quando você deseja criar uma barra de rolagem personalizada, pode usar estes pseudoelementos como este:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Isso transformará a barra de rolagem cinza padrão em algo que corresponda melhor a este tema específico.
Lembre-se de que você pode adicionar sombras, alterar o raio dos elementos e fazer coisas adicionais para tornar sua barra de rolagem personalizada verdadeiramente especial. Você precisará de um conhecimento mais avançado de CSS para aproveitar ao máximo esse método de personalização da barra de rolagem. Então, novamente, se você tiver tempo suficiente em suas mãos e estiver disposto a aprender por tentativa e erro – você certamente encontrará algumas combinações interessantes.
Vamos encerrar!
A barra de rolagem – um elemento útil que geralmente é esquecido quando se trata de personalizar a aparência do seu site. Se isso é um erro que você pretende corrigir, você tem duas maneiras de fazer isso – com um plugin ou adicionando algum CSS personalizado. Cada um dos dois tem seus prós e contras, portanto, verificar quais navegadores seu público mais usa pode ser prudente antes de fazer a escolha. Depois disso, é só mexer nas opções ou no código até obter resultados satisfatórios.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
