Como Adicionar Barra de Rolagem Personalizada a Qualquer Elemento no WordPress

Pequenos toques de design podem fazer uma grande diferença na aparência profissional do seu site.

Barras de rolagem personalizadas são um desses detalhes que a maioria dos visitantes não notará conscientemente, mas certamente sentirão a consistência visual aprimorada ao navegar pelo seu conteúdo.

A boa notícia é que personalizar barras de rolagem no WordPress não requer habilidades avançadas de codificação, e os resultados podem realmente impulsionar a experiência geral do usuário do seu site.

Com base em nossa experiência na criação de sites WordPress, descobrimos que barras de rolagem personalizadas ajudam a criar aquela aparência polida e intencional que separa os sites iniciantes dos profissionais.

Mostraremos 2 maneiras diretas de adicionar barras de rolagem personalizadas a qualquer elemento do seu site WordPress. Cada método que abordaremos foi testado em cenários do mundo real, para que você possa escolher a abordagem que melhor se adapta ao seu nível de conforto.

Quando adicionar uma barra de rolagem a elementos específicos no WordPress?

Adicionar uma barra de rolagem para elementos do WordPress pode melhorar muito a experiência do usuário do seu site.

Mas quando você deve usar este recurso de design do WordPress?

Aqui estão alguns elementos comuns do WordPress que podem se beneficiar de barras de rolagem personalizadas:

• Menus de Navegação – Perfeito para blogs com mais de 20 categorias e subcategorias que, de outra forma, se estenderiam por toda a página.
• Widgets da Barra Lateral – Ideal para barras laterais ricas em conteúdo onde você deseja manter todos os widgets sem comprometer o espaço.
• Descrições de Produtos – Mantém detalhes extensos de produtos contidos, mantendo um layout limpo.
• Seções de Comentários – Exibe centenas de comentários de forma organizada, sem sobrecarregar a página.
• Galerias de Imagens – Apresenta várias imagens em uma galeria, mantendo a acessibilidade.

Com isso em mente, mostraremos duas opções para adicionar uma barra de rolagem personalizada a qualquer elemento do seu site WordPress.

Recomendamos a opção 1 se você está apenas começando com seu site e deseja usar um construtor de páginas com funcionalidade de barra de rolagem personalizada. Isso ocorre porque, se você já estiver usando um tema diferente, precisará mudar seu tema para este método.

Por outro lado, se você gosta do seu tema atual, pode optar pela opção 2 para adicionar uma barra de rolagem personalizada usando código CSS. Não se preocupe, detalharemos o processo passo a passo para que seja fácil para qualquer um seguir.

Você pode usar os links rápidos abaixo para pular para o seu método preferido:

• Opção 1: Use um Construtor de Páginas com Barras de Rolagem Personalizadas Específicas para Elementos (Sem Código)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Opção 1: Use um Construtor de Páginas com Barras de Rolagem Personalizadas Específicas para Elementos (Sem Código)

Uma maneira de adicionar uma barra de rolagem personalizada em um elemento específico é usar um construtor de páginas com um recurso de barra de rolagem. Dessa forma, você pode personalizar facilmente a barra de rolagem sem tocar em nenhum código.

Para este método, usaremos o Thrive Architect. Além de um recurso de barra de rolagem, o Thrive Architect possui mais de 300 modelos para criar rapidamente páginas com aparência profissional e recursos de conteúdo dinâmico para personalizar a experiência do seu visitante.

Além disso, descobrimos que a interface de arrastar e soltar é fácil de usar, tornando-a ideal para iniciantes no WordPress. Para uma análise mais detalhada desta ferramenta, confira nossa análise do Thrive Architect.

Embora o Thrive Architect não ofereça uma versão gratuita, você pode usar nosso código de desconto especial da Thrive Themes para economizar até 50% em sua compra inicial.

Passo 1: Configurar o Thrive Architect e o Thrive Themes

Para começar, precisamos instalar o plugin Thrive Architect. Você pode acessá-lo fazendo login em sua conta no site da Thrive Themes.

Em seguida, baixe e instale o plugin Thrive Product Manager. Se precisar de ajuda, consulte nosso guia sobre como instalar plugins do WordPress para iniciantes.

Após ativar o plugin, navegue até Product Manager no seu painel do WordPress.

Clique em ‘Log into my account’ para vincular seu site WordPress à sua conta Thrive Themes.

Agora você deverá ver uma lista de produtos Thrive Themes disponíveis em sua conta.

Encontre ‘Thrive Architect’ e marque a caixa ‘Install Product’.

Role para baixo para encontrar o 'Thrive Theme Builder' e selecione a opção ‘Install Theme’.

Em seguida, clique em ‘Install selected products.’ Esta etapa é necessária, pois o Thrive Architect funciona em conjunto com o Thrive Theme Builder.

A próxima tela mostrará o Thrive Product Manager instalando e ativando o Thrive Theme Builder.

Assim que concluído, selecione ‘Go to the Theme Builder Dashboard.’

Agora, é hora de selecionar um design base para seu site usando a biblioteca de temas da Thrive.

Se você não tiver certeza de qual escolher, use o botão ‘Preview’ para ver como cada tema fica. Assim que decidir, clique em ‘Choose.’

Agora você entrará no assistente do Theme Builder.

Este assistente o guiará pelo upload do seu logotipo, seleção das cores da marca para seu tema e configuração de várias estruturas e modelos de tema.

Certifique-se de completar o assistente de configuração antes de passar para a próxima etapa.

Etapa 2: Adicionar um Elemento de Caixa de Conteúdo ao Seu Tema

Vamos agora adicionar um elemento de caixa de conteúdo ao seu tema WordPress, que possui o recurso de barra de rolagem por padrão.

No Thrive Themes, uma caixa de conteúdo é um bloco que você pode usar como contêiner para agrupar vários blocos. Isso pode ser útil se você precisar que um conjunto de elementos seja estilizado da mesma forma ou gerenciado como um grupo.

Para este exemplo, adicionaremos uma caixa de conteúdo que contém uma longa lista de categorias de posts do blog. Neste cenário, queremos ser capazes de exibir todas as categorias na barra lateral sem torná-la excessivamente longa.

Primeiro, visite qualquer página ou postagem em seu blog WordPress onde você deseja que a barra de rolagem apareça.

Em seguida, na barra de ferramentas superior do administrador, clique em 'Editar Modelo de Tema [nome]' ou 'Editar com Thrive'.

Agora você deve chegar à interface de edição do Thrive Architect. Para adicionar o bloco de caixa de conteúdo, clique no sinal '+' no lado direito da página e selecione o elemento 'Caixa de Conteúdo'.

Em seguida, arraste e solte-o onde você deseja que o elemento com a barra de rolagem seja colocado.

Agora você pode adicionar mais elementos de conteúdo à caixa de conteúdo. Por exemplo, você pode clicar no sinal '+' novamente e adicionar o bloco 'Texto' a ela. Em seguida, você pode digitar qualquer texto que desejar.

O Thrive Themes oferece toneladas de elementos visuais, desde os básicos como texto e imagens até formulários e tabelas de preços.

Como queremos adicionar uma lista de categorias à barra lateral, também adicionaremos o elemento 'Lista Estilizada Dinâmica' à caixa de conteúdo.

Este bloco basicamente extrai dados do seu site para exibir dinamicamente uma lista, como categorias, tags ou autores. O bloco se atualizará automaticamente à medida que você constrói seu site.

Assim que você arrastar e soltar a lista de estilos dinâmicos na caixa de conteúdo, clique no botão ‘Selecionar Tipo de Lista’.

Em seguida, clique em ‘Lista de Categorias’.

Agora, sua lista de categorias, seu bloco de texto e quaisquer outros elementos que você adicionar à caixa de conteúdo estão no mesmo contêiner.

E como você pode ver, a lista é bem longa, e é por isso que queremos adicionar uma barra de rolagem a ela.

Etapa 3: Habilitar a Barra de Rolagem na Caixa de Conteúdo

Se você selecionar esse contêiner e clicar na seta azul à esquerda, verá muitas opções para personalizar sua caixa de conteúdo.

As configurações para adicionar uma barra de rolagem estão na aba ‘Layout & Posição’. É aqui que você pode ajustar o preenchimento, margem, largura, altura, alinhamento da caixa e assim por diante.

A primeira coisa que fizemos foi clicar na seta branca dentro da área de preenchimento azul, logo abaixo da seção ‘Margens & Preenchimento’. Fizemos isso apenas para garantir que a caixa de conteúdo se alinhe com o restante dos elementos na barra lateral.

Sinta-se à vontade para explorar outras opções aqui para garantir que sua caixa fique bem proporcionada.

Em seguida, vamos rolar para baixo até a seção Altura. Vá em frente e clique no botão ‘Máx’ e altere a altura em pixels para um número muito menor. Neste caso, passamos de 617px para 300px.

Isso tornará a caixa de conteúdo muito mais curta, fazendo com que os nomes das categorias na seção inferior desapareçam.

Com isso feito, mova o painel para baixo novamente e abra a aba ‘Avançado’. Em seguida, selecione ‘Rolagem’ nas configurações de Overflow e ative a opção ‘Estilo da barra de rolagem’.

Uma barra de rolagem deve ser adicionada automaticamente ao seu bloco de caixa de conteúdo.

E é tudo para adicionar uma barra de rolagem personalizada com o Thrive Architect. Você pode continuar editando seu tema WordPress, página ou post, ou clicar em ‘Salvar Trabalho’ na parte inferior para publicar suas alterações.

Veja como nossa barra de rolagem se parece no site de demonstração:

Opção 2: Use Código CSS para Adicionar uma Barra de Rolagem Personalizada a um Elemento Específico

Se mudar seu tema do WordPress e usar um construtor de páginas para criar uma barra de rolagem personalizada parecer muito, você pode usar código CSS em vez disso. Este método permite que você personalize a barra de rolagem diretamente em sua página do WordPress.

Não se preocupe se você for novo em trabalhar com trechos de código. Nós o guiaremos pelo processo passo a passo, facilitando a ativação desse recurso em seu site WordPress.

Primeiro, vamos entender como o CSS funciona. CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É uma linguagem que diz aos navegadores da web como exibir elementos em uma página da web. No nosso caso, usaremos CSS para adicionar e estilizar uma barra de rolagem personalizada.

Para usar CSS personalizado, precisamos de duas coisas:

1. Uma classe CSS: É como uma etiqueta de nome para um elemento em sua página. Adicionamos isso ao elemento que queremos mudar.
2. Código CSS: Este é o conjunto de instruções que diz ao navegador como estilizar o elemento com a classe CSS.

Então, para adicionar uma barra de rolagem personalizada, primeiro daremos uma classe CSS ao elemento que queremos alterar. Em seguida, adicionaremos código CSS que cria a barra de rolagem para elementos com essa classe. 

Você adicionará a classe CSS scroll-bar ao seu elemento. Mostraremos como fazer isso abaixo. E este é o trecho completo de código CSS que adicionará a barra de rolagem:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Etapa 1: Adicione a Classe CSS ao Seu Elemento

Existem várias maneiras de adicionar uma classe CSS a um elemento no seu site WordPress.

Se você estiver no editor de blocos ou editor de site completo, você pode simplesmente clicar em qualquer bloco na sua página, postagem ou modelo de tema de bloco. Em seguida, na barra lateral de configurações do bloco, abra a aba 'Avançado' e insira sua classe CSS no campo 'Classe(s) CSS Adicional(is)'.

Quando terminar, basta clicar em Atualizar, Publicar ou Salvar.

Se você usa um tema clássico, este processo também funciona com o editor de widgets baseado em blocos. Vá para Aparência » Widgets e clique em qualquer bloco ao qual você deseja adicionar a classe CSS.

Depois disso, você verá a mesma aba Avançado na barra lateral de configurações do bloco. Basta inserir a classe CSS no campo ‘Classes CSS Adicionais’ como antes.

Etapa 2: Adicionar o Código CSS ao Seu Tema

Agora, vamos adicionar nosso código CSS personalizado. Mostraremos 3 maneiras de fazer isso: usando o personalizador de temas, o editor de site completo e o WPCode.

A primeira opção é para usuários de temas clássicos. Além disso, é um recurso integrado, então você não precisa de um plugin para inserir o código ou mesmo abrir os arquivos do seu tema.

Para fazer isso, você pode abrir o personalizador de temas do WordPress indo para Aparência » Personalizar.

Observação: Se você não estiver vendo esta configuração no seu WordPress, provavelmente está usando um tema de blocos e pode usar o próximo método. Para mais informações, confira nosso guia sobre como corrigir a falta do personalizador de temas no WordPress.

Método 1: Adicionando CSS a Temas Clássicos

Dentro do personalizador, encontre e clique em ‘CSS Adicional’.

Aqui, simplesmente cole o código que mostramos anteriormente.

Você verá automaticamente as alterações no seu tema assim que adicionar o código.

Como você pode ver, o elemento ao qual você adicionou a classe CSS agora tem uma barra de rolagem. Em seguida, você pode simplesmente clicar em ‘Publicar’.

Método 2: Adicionando CSS Usando o Editor de Site Completo

Se você tem um tema de blocos, precisará adicionar código CSS usando o editor de site completo e, em seguida, vá para Aparência » Editor.

Você encontrará algumas opções de menu para personalizar seu tema de blocos.

Aqui, clique em ‘Estilos’.

Nesta página, deve haver alguns designs de temas de blocos para você escolher.

Vamos apenas ignorar isso e clicar no botão ‘Editar’. Ele tem o formato de um lápis.

Agora você está dentro da interface de edição.

No painel do lado direito, clique no menu de três pontos ao lado do ícone de revisões e selecione ‘CSS adicional’.

Agora, basta colar o snippet de código de antes. Você deverá ver suas alterações automaticamente.

Quando terminar, clique em 'Salvar'.

Uma desvantagem de usar o personalizador de temas e o editor de site completo para inserir seu CSS é que, se você decidir atualizar ou alterar seu tema, poderá correr o risco de perder sua personalização de CSS.

É por isso que recomendamos o uso do WPCode para editar o CSS do seu site, especialmente se você estiver usando o editor de site completo e um tema baseado em blocos. Você pode seguir esse método abaixo, e ele funcionará com temas clássicos também.

Método 3: Adicionando CSS usando WPCode

Se você tem medo de personalizar seu site usando código, então WPCode é a solução perfeita para você. Este plugin de snippets de código torna seguro inserir código personalizado, pois você não precisará interagir diretamente com os arquivos do seu tema.

Se ocorrer um erro, o WPCode detectará e desativará automaticamente o código que causa o problema. Dessa forma, há uma chance mínima de você quebrar seu site.

Primeiro, instale o plugin WPCode em seu site. Você pode ler nosso guia para iniciantes em como instalar um plugin do WordPress para mais informações.

Em seguida, vá para Snippets de Código » + Adicionar Snippet no seu painel do WordPress. Escolha ‘Adicionar seu código personalizado (Novo Snippet)’ e clique em ‘+ Adicionar Snippet Personalizado’.

Agora, dê um nome ao seu novo snippet de código personalizado. Pode ser algo simples como ‘Barra de Rolagem CSS’.

Depois disso, altere o Tipo de Código para ‘Trecho de CSS’.

Na caixa de Visualização do Código, cole o trecho que mostramos anteriormente.

Concluído, role a página para baixo até a seção ‘Inserção’. Lá, certifique-se de que o Método de Inserção seja ‘Inserir Automaticamente’ e a Localização seja ‘Cabeçalho do Site Inteiro’.

Com isso feito, basta alternar o botão no canto superior direito para que ele diga ‘Ativo’ e clicar em ‘Salvar Trecho’.

Agora você deve ver uma barra de rolagem no elemento ao qual você adicionou a classe CSS.

Aqui está um exemplo de como adicionamos uma barra de rolagem a uma lista de posts recentes:

Como Adicionar uma Barra de Rolagem Personalizada a um Item de Menu com Múltiplos Submenus

Uma das coisas sobre as quais os leitores ficam curiosos é como adicionar a barra de rolagem ao seu item de menu de navegação que tem uma longa lista de submenus.

O processo é, na verdade, bem semelhante ao que acabamos de mostrar. Mas há alguns pequenos ajustes aqui e ali, dependendo do tema que você está usando.

Se você usar um tema clássico, então você só deve adicionar a classe scroll-bar ao seu item de menu principal. Você não precisa adicioná-la aos seus itens de submenu.

Para adicionar uma classe CSS ao seu menu, você pode abrir o personalizador de temas.

Em seguida, clique no botão ‘Menus’.

Em seguida, clique no ícone de engrenagem ‘Configurações’ e depois selecione ‘Classes CSS’.

Isso permite que você adicione uma classe CSS a cada item de menu.

Agora, desça o painel lateral.

Em seguida, abra seu menu principal.

Nesta etapa, você pode selecionar o item de menu ao qual deseja adicionar a classe CSS e clicar para expandi-lo.

Deve haver um campo chamado ‘Classes CSS’, e você pode adicionar a classe lá.

Além disso, você quer ter certeza de adicionar a classe sub-menu após cada menção da classe scroll-bar em seu código CSS, assim:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Veja como o menu de navegação deve ficar:

O mesmo princípio se aplica aos temas de blocos.

Você só precisa adicionar a classe scroll-bar ao seu item de menu principal, não aos submenus.

Agora, é aqui que as coisas diferem. Você precisa visitar seu site WordPress e abrir a ferramenta de inspeção do seu navegador.

Para usuários do Chrome, basta clicar com o botão direito no seu item de menu com submenus e selecionar 'Inspecionar'.

No seu teclado, pressione CTRL/Command + F para ativar o recurso Localizar. Em seguida, localize o código HTML <ul></ul> que contém a classe scroll-bar.

O código exato será diferente de tema para tema, mas veja como o nosso fica:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Você saberá que está selecionando a linha de código correta se todos os itens do submenu forem destacados.

Agora, você quer copiar todas essas classes CSS entre class=" e ">.

No código CSS, substitua a classe scroll-bar por todas essas classes e um ponto (.) antes delas para indicar que é uma classe. Também é bom adicionar !important em todas as linhas que personalizam a barra de rolagem para garantir que o tema não substitua essas configurações.

Aqui está um exemplo:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Depois de adicionar este código, seu menu de navegação deve ficar assim:

Como Personalizar o Design da Barra de Rolagem Personalizada

Agora que você adicionou uma barra de rolagem personalizada, talvez queira que ela combine com o design do seu site. Você pode alterar facilmente a aparência da barra de rolagem usando CSS. Vamos ver como personalizar seu tamanho, cor e formato.

Digamos que você queira alterar a altura máxima do elemento ao qual está adicionando uma barra de rolagem. Nesse caso, você pode alterar o número em max-height: no topo para qualquer número que desejar, desde que esteja em pixels.

Você também pode ajustar o número em width: para tornar a largura do elemento com a barra de rolagem mais larga ou mais estreita.

Para ajustar o tamanho da barra de rolagem, encontre a linha width: 10px; sob o seletor .scroll-bar::-webkit-scrollbar.

Aumente este número para tornar a barra de rolagem mais larga ou diminua-o para torná-la mais estreita. Por exemplo, width: 15px; criará uma barra de rolagem mais larga, enquanto width: 5px; a tornará mais fina.

Para alterar a cor da barra de rolagem, encontre a linha que diz background: grey; sob o seletor .scroll-bar::-webkit-scrollbar-thumb.

Substitua 'grey' por qualquer cor que você goste, como 'blue' ou qualquer cor usando o código hexadecimal da cor (por exemplo, #0000FF).

Se você quiser tornar a barra de rolagem mais arredondada, procure pela propriedade border-radius.

Quanto maior o número, mais arredondados serão os cantos. Tente alterar border-radius: 15px; para border-radius: 20px; para um visual mais arredondado, ou border-radius: 0px; para cantos retos.

Observe que as alterações acima afetarão apenas navegadores baseados em Webkit, como Chrome e Safari.

Para o Firefox, você precisará ajustar a propriedade scrollbar-color. A primeira cor é para o polegar (a parte que você arrasta) e a segunda é para a trilha (o fundo). Por exemplo, scrollbar-color: blue #eaeaea criará uma barra de rolagem azul em uma trilha cinza claro no Firefox.

Após fazer essas alterações, salve seu CSS e atualize sua página do WordPress para ver a nova barra de rolagem personalizada em ação. Sinta-se à vontade para experimentar diferentes cores e tamanhos até encontrar o visual perfeito para o seu site.

Saiba Mais Maneiras de Melhorar o Design do Seu Site WordPress

Agora que você aprendeu como adicionar barras de rolagem personalizadas ao seu site WordPress, por que não explorar outras maneiras de melhorar o design e a funcionalidade do seu site? Aqui estão alguns guias úteis para levar suas habilidades em WordPress para o próximo nível:

• Se você está procurando exibir suas páginas de uma forma visualmente atraente, confira nosso tutorial sobre como mostrar facilmente uma lista de páginas com miniaturas no WordPress.
• Para blogs com muito conteúdo, a rolagem infinita pode melhorar muito a experiência do usuário. Aprenda como adicionar esse recurso passo a passo.
• Para adicionar um toque visual, experimente adicionar um efeito parallax ao seu tema WordPress. É mais fácil do que você imagina.
• Para melhorar a acessibilidade, considere adicionar um redimensionador de fonte ao seu site. Temos um guia simples para ajudá-lo a fazer exatamente isso.
• Se você não está satisfeito com a posição atual da sua barra lateral, podemos mostrar como mudar o lado da barra lateral no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma barra de rolagem personalizada a qualquer elemento em seu site WordPress. Você também pode querer conferir nossas seleções de especialistas dos melhores construtores de temas WordPress e nosso guia sobre como adicionar uma barra de progresso de leitura no 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.