...
✅ Notícias, temas e plug-ins da WEB e do WordPress. Aqui compartilhamos dicas e as melhores soluções para sites.

Como adicionar uma barra de rolagem personalizada no WordPress

13

A barra de rolagem pode ser um pequeno detalhe em seu site, mas só porque é pequena, não significa que você precisa manter a aparência padrão. Se balançar uma identidade visual única é uma das suas prioridades, aqui está a boa notícia – em sites WordPress, sempre há a possibilidade de alterar a barra de rolagem e ajustá-la ao seu tema, estilo e esquema de cores.

Como adicionar uma barra de rolagem personalizada no WordPress

duas maneiras de personalizar a barra de rolagem. O mais fácil é instalar o plugin, que não requer nenhuma habilidade de codificação. A outra maneira é inserir CSS adicional nas configurações do WordPress.

Usando o plug-in da barra de rolagem avançada

A barra de rolagem avançada é um plugin gratuito, então você pode encontrá-lo na biblioteca de plugins do WordPress. Navegue até o painel de administração e clique em Plugins > Adicionar novo para abrir a biblioteca. Na barra de pesquisa, digite "Barra de rolagem avançada" e clique no resultado.

Instale o plugin e não se esqueça de ativá-lo usando o link de ativação. Os plugins não funcionam se não estiverem ativados.

Como adicionar uma barra de rolagem personalizada no WordPress

Depois de ativar o plug-in, você poderá alterar suas configurações. Navegando para as Configurações no menu principal do painel. Clique em Configurações da barra de rolagem de cores personalizadas.

Como adicionar uma barra de rolagem personalizada no WordPress

Essas são as configurações padrão.

Como adicionar uma barra de rolagem personalizada no WordPress

É assim que a barra de rolagem se parece com as configurações padrão.

Como adicionar uma barra de rolagem personalizada no WordPress

Se você deseja alterar as configurações básicas, pode ajustar a barra de rolagem e a cor de fundo do trilho.

Como adicionar uma barra de rolagem personalizada no WordPress

Além disso, você pode definir a velocidade de rolagem do mouse, a velocidade da barra de rolagem e a opção de ocultar a barra de rolagem automaticamente. Você também pode escolher se a barra de rolagem terá um alinhamento à esquerda ou à direita. Há também uma opção para habilitar a exibição da barra de rolagem em dispositivos de toque, como telefones celulares e tablets.

Como adicionar uma barra de rolagem personalizada no WordPress

As configurações adicionais para alterar o estilo da barra de rolagem estão na segunda guia, Configurações de estilo personalizado da barra de rolagem. Aqui você pode alterar a largura da barra de rolagem, o CSS da borda e o raio da borda.

Como adicionar uma barra de rolagem personalizada no WordPress

Este é o resultado final de nossas mudanças.

Como adicionar uma barra de rolagem personalizada no WordPress

Usando o CSS Adicional

A segunda solução para adicionar uma barra de rolagem personalizada ao seu site WordPress requer um pouco de conhecimento de codificação. Se você não tem experiência com programação, mas ainda deseja adicionar uma barra de rolagem personalizada dessa forma, siga as instruções cuidadosamente.

Para adicionar um CSS personalizado em todo o site, navegue até o menu principal no painel e clique em Aparência > Personalizar.

Como adicionar uma barra de rolagem personalizada no WordPress

Clique no campo CSS Adicional.

Como adicionar uma barra de rolagem personalizada no WordPress

Cole o código a seguir na caixa CSS adicional.

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f8c1c0; 
border:1px solid #fff;
} 
::-webkit-scrollbar-thumb {
background: #bededa; 
border:1px solid #fff;
height:300px;
border-radius:4px;
}

Como adicionar uma barra de rolagem personalizada no WordPress

Ao adicionar CSS, clique no botão Publicar e verifique o resultado. Tenha em mente que este código funcionará em todos os navegadores da Internet, exceto no Firefox e Edge.

Estas são duas maneiras simples de adicionar uma barra de rolagem personalizada no WordPress. Ambos são uma escolha viável para usuários com pouca ou nenhuma experiência em codificação.

Quer saber mais sobre maneiras rápidas e fáceis de melhorar o design e o desempenho do seu site? Confira esta lista de plugins WordPress obrigatórios para iniciar um novo site!

Fonte de gravação: wpklik.com

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação