Personalizar a barra de rolagem é um detalhe visual simples que reforça identidade de marca e dá acabamento profissional à sua landing page. Abaixo está um passo a passo objetivo para aplicar o CSS no Elementor, com código pronto (incluindo compatibilidade com Chrome/Edge/Safari e Firefox) e, ao final, um bônus para travar a rolagem horizontal.
O que você vai implementar
- Barra de rolagem com largura definida, trilha branca e polegar (thumb) em verde claro.
- Bordas arredondadas e contorno branco para dar contraste.
- Compatibilidade: WebKit/Blink (Chrome, Edge, Safari) e Firefox.
Onde colar o CSS (escolha 1 opção)
- Elementor Pro (Site Settings) – recomendado para o site todo
- Acesse Elementor > Ferramentas do site > CSS personalizado.
- Cole o CSS e Atualize.
- WordPress (sem Pro) – para o site todo
- Vá em Aparência > Personalizar > CSS adicional.
- Cole o CSS e Publicar.
- No widget/ página específica (Elementor Pro)
- Se quiser que valha só para uma página, abra a página no Elementor.
- No painel lateral > Avançado > CSS personalizado, cole o CSS.
- Observação: o prefixo selector é usado apenas quando você deseja estilizar o próprio widget. Para regras globais como body::-webkit-scrollbar, não use selector.
Código pronto (copiar e colar)
1) Apenas a barra de rolagem (WebKit/Blink + Firefox)
/* Chrome, Edge, Safari */
body::-webkit-scrollbar {
width: 9px; /* largura da barra */
}
body::-webkit-scrollbar-track {
background: #ffffff; /* cor do trilho */
}
body::-webkit-scrollbar-thumb {
background-image: linear-gradient(to bottom, #8BC34A 0%, #8BC34A 100%); /* verde claro */
border-radius: 10px;
border: 1px solid #ffffff; /* contorno branco para contraste */
}
/* efeito ao passar o mouse (opcional) */
body::-webkit-scrollbar-thumb:hover {
background-image: linear-gradient(to bottom, #7CB342 0%, #7CB342 100%);
}
/* Firefox */
html {
scrollbar-width: thin; /* thin | auto */
scrollbar-color: #8BC34A #ffffff; /* thumb | track */
}2) (Opcional) Ajustes finos no Elementor (do seu exemplo)
Se quiser, mantenha estes ajustes típicos de lista/espacamento.
/* Use APENAS se estiver no CSS de um widget: troque 'selector' pelo próprio escopo do Elementor */
selector .elementor-icon-list-item {
align-items: baseline;
}
selector .elementor-icon-list-item i {
padding-top: 5px;
}
.elementor-widget-text-editor p:last-child {
margin-bottom: 0;
}Como alterar a cor rapidamente
- Substitua #8BC34A pelo tom de verde da sua paleta (ex.: #7ED957 para um verde mais vibrante).
- Para um gradiente real, troque uma das extremidades:
background-image: linear-gradient(to bottom, #8BC34A 0%, #56AB2F 100%);Testes e resolução de problemas
- Cache: limpe o cache do navegador, do plugin de cache e do Cloudflare (se houver).
- Elementor: em Elementor > Ferramentas, clique em Regenerar arquivos CSS.
- Conflitos: se um tema/plug-in sobrescrever a cor, mantenha as regras ao final do bloco ou use !important com parcimônia.
Boas práticas de usabilidade
- Evite barras muito finas em páginas com muito conteúdo (acessibilidade).
- Preserve contraste: thumb verde com trilho branco funciona bem em fundos claros.
Bônus: travar a rolagem horizontal
Use este bloco para impedir aquele “arrasto lateral” causado por elementos que estouram a largura da viewport.
/* Bloqueia a rolagem horizontal no site todo */
html, body {
overflow-x: hidden;
}
/* (Opcional) garante que seções não ultrapassem a largura da tela */
.elementor-section, .elementor-container, .elementor-column, .site, .page, #page {
max-width: 100vw;
overflow-x: hidden;
}
/* (Opcional) imagens e iframes responsivos */
img, iframe, .wp-block-image, .elementor-widget-video iframe {
max-width: 100%;
height: auto;
}
Quando usar o bônus
- Apareceu uma barra de rolagem horizontal inesperada.
- Elementos com width fixo acima de 100vw ou margens negativas estão “vazando”.
Conclusão
Com o CSS acima, você padroniza a barra de rolagem com a cor da sua identidade e elimina a rolagem lateral indesejada – tudo de forma limpa e reversível. Caso queira, posso adaptar os códigos aos exatos tons da sua paleta e publicar um bloco pronto para colar no CSS adicional do seu tema.
