Como adicionar uma barra de rolagem personalizada no WordPress

Aprimorar o apelo visual do seu site WordPress pode melhorar significativamente a experiência do usuário, e um elemento frequentemente negligenciado é a barra de rolagem.

A personalização da barra de rolagem pode dar um toque exclusivo ao seu site, tornando-o mais atraente visualmente e alinhando-o à estética geral do design.

Na WPBeginner, escrevemos centenas de artigos sobre o design do WordPress e também usamos diferentes recursos de personalização para aumentar o engajamento em nosso site.

Uma barra de rolagem personalizada pode melhorar a aparência do seu site e tornar a navegação mais suave e intuitiva para os visitantes.

Neste artigo, mostraremos como adicionar facilmente uma barra de rolagem personalizada no WordPress.

Por que adicionar uma barra de rolagem personalizada no WordPress?

Em 2018, o WC3 elaborou uma proposta que permitia que os proprietários de sites personalizassem a aparência da barra de rolagem usando CSS.

Atualmente, muitos navegadores modernos suportam barras de rolagem personalizadas.

Com isso em mente, talvez você queira alterar a barra de rolagem para se adequar melhor ao esquema de cores ou à marca do seu site. Muitos sites também usam uma barra de rolagem personalizada para chamar a atenção do visitante, o que pode aumentar as visualizações de página e reduzir as taxas de rejeição.

No entanto, lembre-se de que cada navegador trata as barras de rolagem personalizadas de forma diferente. Muitos navegadores suportam a personalização apenas parcialmente, enquanto alguns não exibem seu estilo personalizado de forma alguma.

Isso significa que é importante testar seu site com diferentes navegadores e dispositivos para ver como a barra de rolagem fica no maior número possível de navegadores.

Dito isso, vamos dar uma olhada em como adicionar uma barra de rolagem personalizada no WordPress. Basta usar os links rápidos abaixo para ir para o método que você deseja usar:

Método 1: Adicionar uma barra de rolagem personalizada no WordPress com um plug-in (fácil)

A maneira mais fácil de personalizar a barra de rolagem é usar o Advanced Scrollbar. Esse plug-in gratuito permite que você altere a largura, a cor, a 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 plug-in Advanced Scrollbar. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Configurações ” Configurações avançadas da barra de rolagem.

Aqui, você pode alterar o esquema de cores da barra de rolagem e a cor de fundo do trilho.

Na imagem a seguir, criamos uma barra de rolagem azul.

Também é possível alterar a etapa de rolagem do mouse digitando um novo número no campo “Mouse Scroll Step” (Etapa de rolagem do mouse).

Um número menor fará com que o site role mais lentamente, e um número maior fará com que role mais rapidamente.

Você também pode selecionar se deseja ocultar automaticamente a barra de rolagem para que ela apareça somente quando o visitante estiver rolando.

Isso pode ser útil se você tiver criado uma barra de rolagem mais colorida e estiver preocupado que ela possa distrair o restante do 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 “Alinhamento de trilhos”, se preferir.

Quando estiver satisfeito com a configuração da barra de rolagem, lembre-se de clicar em “Save Changes” (Salvar alterações) para salvar suas configurações.

Agora você pode visitar seu site do WordPress para ver a barra de rolagem personalizada em ação.

Método 2: Adicionar cores de barra de rolagem personalizadas no WordPress usando CSS

Se você quiser fazer alterações mais avançadas na barra de rolagem, outra opção é usar CSS.

Esse método permite que você personalize cada parte da barra de rolagem, mas só funciona em navegadores de desktop que usam o WebKit. Isso significa que suas alterações não serão exibidas em todos os navegadores, inclusive nos navegadores móveis.

Para personalizar sua barra de rolagem usando CSS, vá para Appearance ” Customize.

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 obter mais informações sobre CSS, consulte nosso guia completo sobre como adicionar CSS personalizado ao seu tema do WordPress.

Quando estiver satisfeito com seu código, basta clicar no botão “Publish” (Publicar). Agora você pode visitar seu blog do WordPress em um navegador WebKit para ver suas alterações em ação.

Bônus: Adicione um efeito de rolagem para o topo no WordPress

Além de criar uma barra de rolagem personalizada, talvez você também queira adicionar um efeito de rolagem para o topo em seu site do WordPress. Isso pode ser muito ú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 esse recurso, você deve instalar e ativar o plug-in WPFront Scroll Top. Para obter instruções detalhadas, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Configurações ” Rolar para o topo 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 esmaecimento, a duração da rolagem e muito mais a partir daqui.

Quando terminar, não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

Agora você adicionou com êxito um efeito de rolagem para cima ao seu site. Para obter instruções mais detalhadas, consulte nosso tutorial sobre como adicionar um efeito de rolagem suave até o topo no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de rolagem personalizada no WordPress. Talvez você também queira ver nosso guia sobre como criar uma página de destino no WordPress ou ver nossas escolhas de especialistas para os melhores construtores de páginas de arrastar e soltar.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.