Como desativar o estouro no WordPress (remover a rolagem horizontal)

Uma barra de rolagem horizontal aparece quando um elemento da página é muito largo para ser exibido e ultrapassa a tela. A maioria dos temas do WordPress não usa a rolagem horizontal porque ela pode quebrar o layout do site e confundir os usuários.

Isso é frustrante para você como proprietário do site e, acredite, é ainda mais frustrante para os visitantes que tentam navegar pelo seu conteúdo.

Felizmente, de acordo com nossa experiência, desativar o estouro e livrar-se da barra de rolagem geralmente é simples e faz uma grande diferença na aparência do seu site e na facilidade de uso.

Neste artigo, mostraremos como desativar facilmente o estouro no WordPress e remover a barra de rolagem horizontal. Nossas instruções diretas são fáceis de usar e de seguir, mesmo que você não seja um especialista em codificação.

O que causa a barra de rolagem horizontal ou o estouro no WordPress?

Ao configurar seu site WordPress, é importante torná-lo fácil de usar e acessível a todos.

O WordPress mostrará uma barra de rolagem horizontal se um elemento for mais largo do que o layout do seu site, o que é chamado de “overflow”. Ter uma barra de rolagem horizontal pode prejudicar o design e tornar o site menos amigável.

Uma página da Web com barras de rolagem horizontais e verticais também pode ser desorientadora para o visitante e se tornar difícil de navegar. Isso pode fazer com que as pessoas abandonem seu site, causando menos conversões e vendas.

A desativação do estouro tornará seu site mais fácil de usar, criará um layout de largura fixa e melhorará a capacidade de resposta geral do site.

Com isso em mente, vamos dar uma olhada em como desativar facilmente a barra de rolagem horizontal de estouro no WordPress:

Método 1: Adicionar o snippet CSS usando o personalizador de temas

Você pode desativar o estouro no WordPress simplesmente adicionando código CSS na opção “CSS adicional” do personalizador de temas.

Tudo o que você precisa fazer é acessar a página Appearance ” Customize (Aparência ” Personalizar ) no painel do WordPress.

Quando estiver na página Personalizar, clique na guia “CSS adicional”.

Em seguida, basta copiar e colar o código a seguir:

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

Depois disso, qualquer excesso será removido, e você poderá vê-lo aplicado no painel de visualização ao vivo do seu site.

Não se esqueça de clicar no botão “Publicar” na parte superior da página quando terminar!

Método 2: Adicionar o snippet CSS usando o WPCode

Você também pode adicionar o código CSS por meio de um trecho de código usando o plug-in WPCode.

O WPCode é o melhor plug-in de snippet de código para WordPress do mercado, usado por mais de 1 milhão de sites.

Recomendamos esse método, pois esse plug-in facilita a adição de código personalizado ao WordPress sem a necessidade de editar nenhum arquivo do tema.

Primeiro, instale e ative o plug-in WPCode em seu site. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, acesse a página Code Snippets ” + Add Snippets no painel do WordPress.

Aqui, clique no botão “+ Add Custom Snippet” na opção “Add Your Custom Code (New Snippet)”.

Em seguida, selecione “CSS Snippet” como o tipo de código na lista de opções que aparece na tela.

Agora, você será levado à página “Create Custom Snippet” (Criar snippet personalizado), onde poderá começar inserindo um título para o snippet de código.

Esse nome não será exibido para os usuários e serve apenas para sua identificação.

Depois disso, copie e cole o seguinte trecho de código CSS na caixa “Code Preview” (Visualização de código):

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

Depois de fazer isso, role para baixo até a seção “Insertion” (Inserção), onde você encontrará duas opções: “Auto Insert” (Inserção automática) e “Shortcode” (Código curto).

A partir daqui, selecione o modo “Auto Insert” (Inserção automática) para executar automaticamente seu código após a ativação.

No entanto, se você quiser apenas desativar a barra de rolagem horizontal em algumas páginas específicas, poderá selecionar o modo “Shortcode”.

Ao fazer isso, o WPCode fornecerá um shortcode após a ativação do snippet que você poderá colar em uma área ou página específica do site para remover o excesso.

Depois de escolher sua opção, vá para a parte superior da página e alterne o botão de “Inativo” para “Ativo” no canto superior direito.

Em seguida, basta clicar no botão “Save Snippet”.

É isso aí! Você acabou de remover todas as barras de rolagem de transbordamento horizontal do seu site.

Bônus: Adicionar uma barra de rolagem personalizada no WordPress

Depois de desativar a barra de rolagem horizontal, você também pode adicionar uma barra de rolagem personalizada.

Por exemplo, se o seu site usa um esquema de cores específico de acordo com as cores da sua marca, você pode usar essa mesma cor para a barra de rolagem. Isso será visualmente atraente e incentivará os usuários a explorar seu site.

Para criar uma barra de rolagem personalizada, instale e ative o plug-in Advanced Scrollbar. Para obter detalhes, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Configurações ” Configurações avançadas da barra de rolagem no painel do WordPress. A partir daí, você poderá alterar a cor da barra de rolagem de acordo com sua preferência.

Quando terminar, clique no botão “Salvar alterações” para armazenar suas configurações. Para obter mais informações, consulte nosso tutorial sobre como adicionar uma barra de rolagem personalizada no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como desativar o estouro no seu site WordPress. Talvez você também queira ver nossas escolhas de especialistas para os melhores trechos de código a serem usados em seu site WordPress e nosso guia para iniciantes sobre como remover CSS não utilizado no WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.