Como corrigir a barra lateral abaixo do conteúdo no WordPress
O que é a barra lateral que cai abaixo do conteúdo?
Barra lateral abaixo do conteúdo é o defeito de layout em que a sidebar, que deveria ficar ao lado do texto, aparece empurrada para baixo da última linha do conteúdo, ocupando a largura toda. No WordPress isso é quase sempre um problema de CSS: o container do conteúdo e o da sidebar usam float ou colunas, mas a soma das larguras estoura os 100% disponíveis, ou um elemento não recebeu clear, e o navegador joga a coluna que não cabe para a linha de baixo.
Como identificar
- A barra lateral aparece embaixo de todo o conteúdo do post, ocupando a largura inteira, em vez de ficar à direita.
- O problema só acontece em algumas páginas (geralmente posts longos ou com tabelas e imagens largas) e não em outras.
- Ao inspecionar o elemento (F12), o container do conteúdo mostra um width somado com a sidebar maior que 100%.
- No editor, uma tag como uma div ou figure aparece sem o fechamento correspondente, deixando o HTML aberto.
Como prevenir
- Use sempre box-sizing border-box no tema para que padding e borda não estourem a largura das colunas
- Aplique max-width 100% em imagens e tabelas do conteúdo para nenhum elemento ultrapassar a coluna
- Edite CSS apenas em tema filho ou no Personalizar, para que atualizações do tema não revertam o ajuste
Causa
- Uma imagem ou tabela mais larga que a coluna de conteúdo estoura o container e empurra a sidebar para baixo por falta de overflow controlado.
- A soma das larguras em porcentagem do conteúdo e da sidebar passa de 100%, geralmente após editar o CSS do tema ou adicionar padding sem box-sizing border-box.
- Uma tag HTML aberta e não fechada dentro do post (div, figure, table) engole o markup seguinte e desmonta a estrutura de colunas.
- O elemento que vem depois de blocos com float não recebeu a propriedade clear, então o navegador não reinicia a linha e a sidebar desce.
- Um plugin de page builder inseriu um container com largura fixa em pixels que, somada à sidebar, não cabe na largura do tema.
Como resolver
- Identifique se é conteúdo ou tema: abra uma página onde o layout quebra e outra onde funciona. Se quebra só em posts específicos, a causa está no conteúdo (HTML aberto ou imagem larga). Se quebra no site todo, a causa está no CSS do tema.
- Procure tags HTML não fechadas: no post que quebra, alterne para o editor de código e procure por uma div, figure ou table sem o fechamento correspondente. Feche a tag que ficou aberta para o WordPress remontar a estrutura de colunas.
- Confira as larguras das colunas: inspecione o elemento (F12) sobre o container do conteúdo e sobre a sidebar. Se a soma dos width passar de 100%, reduza a largura do conteúdo no CSS do tema filho até as duas colunas caberem lado a lado.
- Controle imagens e tabelas largas: aplique max-width: 100% nas imagens e tabelas do conteúdo via CSS do tema filho, para que nenhum elemento estoure a coluna e force a sidebar a descer.
- Limpe o cache e teste: depois de salvar o CSS, limpe o cache do plugin de cache e do navegador (Ctrl+F5) e confira a página. A sidebar deve voltar ao lado do conteúdo.
/* CSS adicional (Personalizar) ou style.css do tema filho */
/* 1. impede que conteudo e sidebar somem mais de 100% */
.content-area,
.site-main {
box-sizing: border-box;
}
/* 2. impede imagens e tabelas largas de estourar a coluna */
.entry-content img,
.entry-content table {
max-width: 100%;
height: auto;
}
/* 3. clear: reinicia a linha apos blocos com float, evitando a sidebar descer */
.site-content:after {
content: "";
display: block;
clear: both;
}Perguntas frequentes
Por que a barra lateral do meu WordPress foi parar embaixo do conteúdo?
Por que o layout quebra só em alguns posts?
O que a propriedade clear do CSS resolve aqui?
Como descubro qual elemento está estourando a largura?
Editei o CSS e não mudou nada. Por quê?
Trocar de tema resolve o problema da sidebar?
Como corrigir a integração com Zoho/Salesforce no WPForms
A integração Zoho/Salesforce no WPForms falha quando o addon exige a licença Elite, o site não roda em HTTPS, o app conectado (Connected App) do CRM está mal configurado ou o mapeamento de campos do formulário não casa com os campos do objeto no CRM, fazendo o envio não criar o registro.
Como corrigir o Course Builder que não carrega no Tutor LMS
Quando o Course Builder não carrega no Tutor LMS, o editor de curso fica preso no spinner, abre em branco ou retorna nonce inválido. A causa quase sempre é minificação agressiva de JavaScript por plugin de cache ou conflito de plugin SEO que quebra o painel.
Como corrigir o spam no WPForms mesmo com reCAPTCHA ativo
WPForms continuar recebendo spam mesmo com reCAPTCHA ativo costuma indicar que a Proteção Antispam Moderna esta desligada no formulário antigo, que ha um único CAPTCHA por site ou que faltam camadas como tempo mínimo de envio e filtro de palavras.
Como corrigir o course archive que não exibe todos os cursos no Tutor LMS
O Tutor LMS course archive não mostra todos os cursos quando há cursos fora do status Publicado, paginação limitando a quantidade exibida, cache servindo uma versão antiga da página ou um filtro de categoria ativo escondendo parte da lista.
Como corrigir upload de arquivos em tarefas no Tutor LMS
O Tutor LMS assignment não aceita upload quando o addon Assignments tem o File Upload Limit em zero, quando o tamanho do arquivo passa do Maximum File Size Limit configurado, ou quando limites de PHP do servidor barram o envio antes de o Tutor LMS processar a tarefa.
Como corrigir avaliações de curso que não funcionam no Tutor LMS
A avaliação de curso no Tutor LMS deixa de funcionar quando a opção de aprovação manual segura os reviews como pendentes, quando o addon de relatórios está desativado ou quando o aluno não concluiu o curso e por isso não recebe o convite para avaliar.
