Como Adicionar uma Barra de Rolagem Personalizada no WordPress

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.

Principais Considerações para Barras de Rolagem Personalizadas:

• Compatibilidade com Navegadores: Enquanto navegadores modernos como Chrome, Safari e Edge (navegadores baseados em WebKit para CSS) suportam bem barras de rolagem personalizadas, outros podem oferecer personalização limitada ou nenhuma. Sempre teste suas alterações em diferentes navegadores para garantir uma experiência consistente.
• Limitações de Dispositivos Móveis: Em dispositivos móveis, as barras de rolagem tradicionais são frequentemente substituídas por gestos de toque intuitivos (deslizar). Isso significa que barras de rolagem personalizadas geralmente não serão exibidas em smartphones ou tablets.
• Experiência do Usuário e Acessibilidade: Sua barra de rolagem deve melhorar, não distrair, seu conteúdo. Designs excessivamente chamativos ou difíceis de ver podem impactar negativamente a navegação do usuário. Procure por ajustes sutis que combinem com as cores da sua marca e melhorem o fluxo geral do seu site.
• Impacto no Desempenho: Embora geralmente mínimo, adicionar plugins ou CSS extensivo pode afetar ligeiramente a velocidade de carregamento do site. Escolha soluções otimizadas e mantenha seu código limpo para manter um bom desempenho.
• Testes são Cruciais: Independentemente do método escolhido, teste completamente sua barra de rolagem personalizada em vários navegadores, dispositivos e tamanhos de tela para garantir que ela funcione de forma eficaz.

Quando feito corretamente, este elemento de design do WordPress pode dar ao seu site aquele toque profissional extra, mantendo uma excelente usabilidade.

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)

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 usando os pseudo-elementos ::-webkit-scrollbar (como no exemplo abaixo) permite personalizar muitas partes do elemento.

No entanto, essas regras CSS específicas funcionam principalmente em navegadores desktop baseados em WebKit, como Chrome, Safari e o novo Microsoft Edge.

Isso significa que sua barra de rolagem personalizada pode não aparecer ou aparecerá de forma diferente em outros navegadores (como Firefox) ou na maioria dos dispositivos móveis.

Para personalizar sua barra de rolagem usando CSS, vá para Aparência » Personalizar.

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 inserir qualquer código que desejar. Para mais informações sobre CSS, por favor, veja 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 rolar para o topo em seu site WordPress. Isso pode ser super útil se você tiver posts de blog mais longos 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 rolar para o topo ao seu site. Para instruções mais detalhadas, veja nosso tutorial sobre como adicionar uma rolagem suave para o topo no WordPress.

Perguntas Frequentes Sobre a Adição de uma Barra de Rolagem Personalizada no WordPress

Aqui estão algumas perguntas que nossos leitores frequentemente fizeram sobre a adição de uma barra de rolagem personalizada no WordPress:

Como adiciono uma barra de rolagem no WordPress?

Você pode adicionar uma barra de rolagem usando CSS personalizado ou um plugin como o Advanced Scrollbar, que permite áreas de conteúdo com rolagem dentro de posts, páginas ou widgets no WordPress.

Como insiro um slider no WordPress?

Você pode inserir um slider usando um plugin de slider como o Soliloquy, criar seu slider e, em seguida, adicioná-lo a uma página usando um bloco. Para mais informações, confira nosso tutorial sobre como criar um slider responsivo no WordPress.

Qual é o melhor plugin de slider para WordPress?

Soliloquy é o melhor plugin de slider para WordPress porque é fácil para iniciantes, flexível e funciona bem com a maioria dos temas e construtores de páginas.

Como crio um banner personalizado?

Você pode usar o OptinMonster para criar um banner personalizado com seus modelos pré-fabricados. O plugin também permite que você personalize totalmente o conteúdo, adicione CTAs e use cores diferentes de acordo com seu gosto. Para instruções detalhadas, por favor, veja nosso tutorial sobre como fazer um banner 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 principais escolhas para os melhores construtores de páginas de arrastar e soltar do 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.