Você já notou como alguns sites têm aquelas barras de rolagem personalizadas e elegantes que combinam perfeitamente com as cores da marca deles? 🤩
Nós também notamos esse recurso. E muitos dos nossos usuários nos perguntaram como criar essas barras de rolagem personalizadas que chamam a atenção em seus próprios sites WordPress.
A boa notícia? Personalizar sua barra de rolagem do WordPress é muito mais fácil do que você imagina. Se você deseja combinar com as cores da sua marca, melhorar a navegação ou adicionar um toque profissional ao seu site, mostraremos exatamente como fazer isso. Nenhuma experiência em codificação é necessária!
O que você deve saber antes de adicionar uma barra de rolagem personalizada 💡
Então, você está interessado em personalizar sua barra de rolagem do WordPress. Mas antes de mergulhar, há algumas coisas importantes que você deve saber para garantir que está tomando a decisão certa para o seu site WordPress.
Primeiro, embora as barras de rolagem personalizadas possam parecer incríveis, nem todos os navegadores as exibem da mesma forma. Navegadores modernos como o Chrome as suportam bem, mas outros podem mostrar personalização limitada ou nenhuma – especialmente em dispositivos móveis.
O segredo é começar sutilmente. Sempre recomendamos começar com pequenos ajustes que combinem com o esquema de cores da sua marca, em vez de criar designs chamativos que possam distrair do seu conteúdo. Lembre-se: sua barra de rolagem deve aprimorar a experiência do usuário, não roubar a cena.
Quando feito corretamente, este elemento de design do WordPress pode dar ao seu site aquele toque profissional extra. Apenas certifique-se de testar suas alterações em diferentes navegadores para garantir uma experiência consistente para todos os seus visitantes.
Agora que você entende o que esperar, vamos ver como adicionar uma barra de rolagem personalizada ao seu site WordPress. Simplesmente use os links rápidos abaixo para pular para o método que você deseja usar:
- Opção 1: Use o Plugin Advanced Scrollbar (Grátis + Fácil)
- Opção 2: Crie uma Barra de Rolagem CSS (Avançado)
- Dica Bônus: Adicione um Efeito de Rolagem para o Topo no WordPress
🔎 Quer adicionar barras de rolagem personalizadas a elementos específicos como caixas de conteúdo ou barras laterais? Confira nosso guia sobre como adicionar barras de rolagem personalizadas a qualquer elemento no WordPress.
Opção 1: Use o Plugin Advanced Scrollbar (Grátis + Fácil)
A maneira mais fácil de personalizar a barra de rolagem no WordPress é usando o Advanced Scrollbar. Este plugin gratuito permite que você altere a largura, cor, velocidade de rolagem da barra de rolagem e muito mais, sem precisar escrever uma única linha de código.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Advanced Scrollbar. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para Configurações » Configurações do Advanced Scrollbar.
Aqui, você pode alterar o design da barra de rolagem, como o esquema de cores e a cor de fundo do trilho.
Na imagem a seguir, criamos uma barra de rolagem azul.
Você também pode alterar o passo de rolagem do mouse digitando um novo número no campo ‘Mouse Scroll Step’.
Um número menor fará com que seu site role mais lentamente, e um número maior fará com que ele role mais rapidamente.
Você também pode selecionar se deseja ocultar automaticamente a barra de rolagem para que ela apareça apenas quando o visitante estiver rolando.
Isso pode ser útil se você criou uma barra de rolagem mais colorida e está preocupado que ela possa distrair o restante do seu conteúdo.
Por padrão, a barra de rolagem aparece no lado direito da janela do navegador. No entanto, você pode movê-la para o lado esquerdo usando as configurações de ‘Rail Align’, se preferir.
Quando estiver satisfeito com a configuração da barra de rolagem, lembre-se de clicar em ‘Save Changes’ para salvar suas configurações.
Agora você pode visitar seu blog WordPress para ver a barra de rolagem personalizada em ação.
Opção 2: Crie uma Barra de Rolagem CSS (Avançado)
Se você quiser fazer alterações mais avançadas na sua barra de rolagem, outra opção é usar CSS.
Criar uma barra de rolagem personalizada com CSS permite que você personalize todas as partes do elemento, mas funciona apenas em navegadores desktop que usam WebKit. Isso significa que suas alterações não aparecerão em todos os navegadores, incluindo navegadores móveis.
Para personalizar sua barra de rolagem usando CSS, vá para Aparência » Personalizar.
Observação: Se você estiver usando um tema de bloco, essa opção não estará disponível para você. Nesse caso, você pode abrir o personalizador digitando o URL https://example.com/wp-admin/customize.php. Lembre-se de substituir example.com pelo nome de domínio do seu próprio site.
Para mais informações, confira nosso guia sobre como corrigir o personalizador de tema ausente no admin do WordPress.
No personalizador do WordPress, clique em ‘CSS Adicional’.
Agora você pode adicionar seu código ao pequeno editor que aparece.
Aqui está um exemplo de código que altera a aparência da barra de rolagem:
::-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;
}
Você pode adicionar qualquer código que desejar. Para mais informações sobre CSS, consulte nosso guia completo sobre como adicionar CSS personalizado ao seu tema WordPress.
Quando estiver satisfeito com seu código, basta clicar no botão ‘Publicar’. Agora você pode visitar seu site WordPress em um navegador WebKit para ver suas alterações em ação.
Dica Bônus: Adicione um Efeito de Rolagem para o Topo no WordPress
Além de criar uma barra de rolagem personalizada, você também pode querer adicionar um efeito de rolagem para o topo em seu site WordPress. Isso pode ser super útil se você tiver publicações de blog mais longas e quiser oferecer aos usuários uma maneira rápida de voltar ao topo.
Para adicionar este recurso, você deve instalar e ativar o plugin WPFront Scroll Top. Para instruções detalhadas, veja nosso tutorial sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Configurações » Scroll Top no painel do WordPress e marque a caixa ‘Ativado’ para ativar o efeito de rolagem para o topo.
Depois disso, você pode editar o deslocamento da rolagem, o tamanho do botão, a opacidade, a duração do fade, a duração da rolagem e muito mais a partir daqui.
Quando terminar, não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.
Agora você adicionou com sucesso um efeito de rolagem para o topo ao seu site. Para instruções mais detalhadas, veja nosso tutorial sobre como adicionar um efeito de rolagem suave para o topo no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de rolagem personalizada no WordPress. Você também pode querer ver nossas melhores escolhas para os melhores construtores de página arrastar e soltar para WordPress e nosso guia definitivo sobre como editar um site WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Uma coisa que eu gostaria de acrescentar é a importância de considerar a acessibilidade ao personalizar barras de rolagem.
Embora a estética seja importante, devemos garantir que a barra de rolagem personalizada permaneça facilmente visível e utilizável para todos os visitantes, incluindo aqueles com deficiências visuais.
Talvez usar cores de alto contraste ou garantir que a largura da barra de rolagem seja suficiente possa ajudar nesse sentido.
Marcos
Obrigado! O CSS é plug&play.
WPBeginner Support
Que bom saber que nosso guia foi útil!
Admin
Luqman Essam
Obrigado! Me ajudou!
WPBeginner Support
Glad our guide was helpful!
Admin
Victor
Existe algum plugin para WP que exibirá arte sequencial como em uma tira de quadrinhos, onde as parcelas podem ser postadas semanalmente?
WPBeginner Support
Você pode querer dar uma olhada em nosso guia sobre como gerenciar uma série de posts: https://www.wpbeginner.com/plugins/how-to-effeciently-manage-post-series-in-wordpress/
Admin
cinzas
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
Excellent…The cleanest solution.
It would be nice to post the code for Firefox…if there is such option.
Obrigado por compartilhar.
Equipe WPBeginner
Pode haver alguma maneira de substituí-lo através de um CSS personalizado. Por favor, entre em contato com o suporte do plugin.
Karen
Que plugin divertido. Acabei de instalá-lo. Existe alguma maneira de controlar a opacidade – da cor da barra de rolagem quando você não está com o mouse sobre ela? Obrigado por este post!
Equipe WPBeginner
Obrigado por nos notificar. Corrigido.
Vernon Trent
please correct your link to the plugin.
there is a missing S in the url “pluginS”
Convidado
Hi the link in the post seems broken may affect your site rank.
Please place correct link for “Dewdrop Custom Scrollbar” plugin.