Maneiras rápidas de criar uma barra de rolagem personalizada no WordPress

É seguro dizer que, por qualquer motivo, você deseja que seu site se destaque. Ter essa plataforma garantirá que o que você está colocando permaneça por mais tempo na mente do visitante, e isso é quase exclusivamente uma coisa boa. Além do conteúdo do seu site, outra forma de chamar a atenção para o seu produto é o aspecto visual. Isso não é de forma alguma um pedaço de conhecimento novo. Há uma razão pela qual o McDonald's é vermelho e amarelo e o Facebook azul. No entanto, aqui, falaremos sobre uma pequena parte da experiência que seu site oferece. É uma parte que pode não parecer muito importante, mas acreditamos que ainda tem seu valor – a barra de rolagem. Nas próximas linhas, você aprenderá algumas maneiras rápidas de criar uma barra de rolagem personalizada no WordPress.

Maneiras simples de criar uma barra de rolagem personalizada no WordPress

Criar uma barra de rolagem personalizada é uma etapa essencial para criar um tema personalizado para o seu site. Portanto, se você estiver interessado em fazer seu site se destacar em todos os aspectos , deixe-nos apresentar o primeiro método de tornar essa barra de rolagem única.

Adicione uma barra de rolagem personalizada no WordPress com um plug-in

Como acontece com a maioria das coisas que você deseja fazer no WordPress, usar um plug-in como meio de criar uma barra de rolagem elegante é um bom caminho a seguir. A razão pela qual este método é altamente recomendado para a maioria dos usuários é sua simplicidade. Com alguns cliques simples, você verá uma barra de rolagem que combina com seu estilo. Ainda assim, vale a pena mencionar uma pequena falha que vem com esse método. Ou seja, este plugin não suporta navegadores móveis. No entanto, se isso não parecer uma grande perda, continue com a leitura.

Antes de tudo, você precisará instalar e ativar o plug-in Advanced Scrollbar . Esta ação é bastante simples:

1. Visite os Plugins e vá para Adicionar nova página dentro da sua área de administração do WordPress. Digite o nome do referido plugin na barra de pesquisa e pressione Enter.
2. Depois de localizar o plugin, clique no botão 'Instalar agora'. O WordPress então baixará e instalará o plugin para você. Depois disso, você poderá notar que o botão 'Instalar agora' mudou para o botão 'Ativar'.
3. Clique no botão 'Ativar' e você está pronto para ir.

Agora que você instalou e ativou o plugin necessário, você terá que configurá-lo. Embora essa palavra possa parecer intimidadora, o processo é super fácil. Basta ir para Configurações> Configurações da barra de rolagem de cores personalizadas. Uma vez lá, você poderá alterar a cor da sua barra de rolagem, bem como as cores de fundo do trilho. Você pode então selecionar a etapa de rolagem do mouse, que seria a velocidade de rolagem da roda do mouse. O que também é ótimo sobre este plugin é que ele permite que você selecione se deseja ocultar automaticamente a barra de rolagem ou sempre exibi-la.

Você também tem a opção de escolher a opção 'Somente cursor', que exibiria o trilho da barra de rolagem sem o botão. Abaixo disso, você poderá encontrar opções para definir a velocidade de rolagem, alterar o alinhamento do trilho (esquerda ou direita) e ativar o comportamento do toque.

Depois de ter passado por todas as opções, jogado com as cores e encontrado a combinação que melhor se adequa ao seu estilo e preferência, não se esqueça de clicar no botão 'salvar alterações', para guardar todo esse trabalho. Ao fazer isso, você pode visitar seu site para ver essas lindas cores personalizadas da barra de rolagem em ação.

Adicione cores personalizadas da barra de rolagem no WordPress usando CSS

Como você pode deduzir da legenda, esse método usa CSS para estilizar sua barra de rolagem. Este método provou ser mais rápido do que aquele em que você usa jQuery. No entanto, é importante mencionar que ele só funciona em navegadores de desktop usando mecanismos de renderização WebKit, como Google Chrome, Safari e Opera. Infelizmente, não terá qualquer efeito em navegadores móveis ou Firefox e Edge em computadores desktop. Com isso dito, se esta é a opção pela qual você deseja optar, aqui está o caminho a seguir.

Comece indo para Temas > página Personalizada. Esta ação iniciará a interface do personalizador de temas do WordPress. Você poderá ver a visualização ao vivo do seu site com várias opções no plano esquerdo da tela . Prossiga clicando na guia CSS Adicional no painel esquerdo. A aba irá mostrar uma caixa simples onde você poderá adicionar seu CSS personalizado. Assim que você adicionar uma regra CSS válida, você a verá aplicada ao painel de visualização ao vivo do seu site. Quanto a essa regra CSS válida, aqui está o que você deve adicionar para que sua barra de rolagem seja suscetível a alterações:

::-webkit-barra de rolagem {

-webkit-aparência: nenhum;

}

::-webkit-barra de rolagem {

largura: 10px;

}

::-webkit-scrollbar-track {

fundo: #ffb400 ;

borger : 1px sólido #ccc ;

}

::-webkit-barra de rolagem-thumb {

fundo: #cc00ff ;

borger : 1px sólido #eee ;

altura: 100px;

raio da borda: 5px ;

}

::-webkit-barra de rolagem-thumb:hover {

fundo: azul;

Lembre-se de que qualquer CSS personalizado que você adicionar usando o personalizador de tema estará disponível apenas com esse tema específico. Se acontecer de você alterar um tema, mas quiser manter essa barra de rolagem personalizada, você terá que copiar e colar essa regra CSS em seu novo tema usando o mesmo método.

Embora este seja um ótimo meio de destacar seu site, temos que mencionar uma desvantagem de criar uma barra de rolagem personalizada no WordPress. Ou seja, por padrão, o CSS não vem com um conjunto de regras que permite alterar as propriedades da barra de rolagem. Existem algumas propostas para adicionar esta opção, mas elas não são suportadas pela maioria dos navegadores no momento. Para superar esse problema, designers e desenvolvedores usam pseudoelementos específicos do navegador ou JavaScrip para substituir a aparência padrão da barra de rolagem. Essas são as técnicas que descrevemos para você. Ainda assim, você deve ter em mente que deve testar seu site com diferentes navegadores e dispositivos para garantir que funcione como você imaginou em todos os navegadores. Depois de ter coberto isso, é seguro dizer que você sabe como criar uma barra de rolagem personalizada no WordPress.