Como corrigir o layout quebrado entre Astra Pro e Crocoblock JetEngine no WordPress
O que é layout quebrado do Astra com JetEngine?
O Astra Pro controla a aparencia da página por meio de três camadas: a largura de conteúdo (Container) definida em Aparencia e Personalizar, a configuração de sidebar e o painel de layout por página que aparece no editor. O Crocoblock JetEngine, por sua vez, gera conteúdo dinâmico através de Listing Grids, templates de single e do Profile Builder, que esperam um contexto de largura próprio para distribuir colunas e cards. Quando esses dois sistemas definem larguras diferentes para a mesma área, o resultado e o layout quebrado: o grid do JetEngine estoura para fora do container do Astra, encolhe para uma coluna so, ou aparece com o sidebar empurrando o conteúdo.
O problema raramente e um bug de qualquer um dos plugins isolados. Ele nasce da combinacao: o Astra aplica regras de CSS no container .ast-container e na área .site-content, enquanto o JetEngine injeta o seu HTML dentro dessa área sem saber qual largura o tema reservou. Em templates do JetEngine que assumem o corpo inteiro da página, a configuração Full Width do Astra precisa estar ativa, senao o tema mantem o container estreito e o grid fica espremido. Resolver o layout quebrado e, na prática, alinhar a largura e o sidebar do Astra com o que o template do JetEngine espera.
Como identificar
- O Listing Grid do JetEngine estoura para fora do container e gera barra de rolagem horizontal na página.
- Os cards do grid aparecem todos em uma única coluna, mesmo com o Listing configurado para múltiplas colunas no JetEngine.
- A página renderizada por um template do JetEngine continua com o sidebar do Astra visivel e o conteúdo espremido em meia largura.
- O conteúdo dinâmico do JetEngine fica centralizado e estreito enquanto o cabeçalho e o rodape do Astra ocupam a largura total, criando um descompasso visual.
- O estilo definido no Listing Item do JetEngine (espacamento, cor de fundo, bordas) e sobrescrito pelo CSS do Astra no front-end.
Como prevenir
- Defina a largura de conteúdo e o sidebar do Astra já na criação da página ou do template, antes de montar o Listing Grid, para o grid nascer no contexto de largura correto.
- Use sempre No Sidebar e Full Width nos templates do JetEngine que renderizam grids ou single dinâmico, deixando o conteúdo livre para ocupar o corpo da página.
- Padronize o número de colunas e o gap dos Listing Grids de acordo com a largura real disponível no layout do Astra, validando em desktop, tablet e mobile.
- Mantenha Astra Pro e Crocoblock JetEngine sempre atualizados e teste mudancas de layout em staging antes de publicar, acompanhando ajustes de CSS de cada plugin.
Causa
- A largura de conteúdo do Astra esta em Contained (largura fixa) na página que renderiza o Listing Grid, enquanto o grid do JetEngine foi desenhado para a largura total, fazendo o conteúdo estourar ou encolher dentro do container estreito.
- O painel de layout por página do Astra mantem o sidebar ativo na página ou no template do JetEngine, reduzindo a área útil do grid para meia largura em vez do corpo inteiro.
- O template de single ou o Theme Builder do JetEngine assume todo o corpo da página, mas a opção Disable Sections ou Full Width do Astra não foi ativada nesse template, entao o tema continua aplicando seu container padrão por cima.
- A configuração de colunas e gap do Listing Grid no JetEngine usa larguras em porcentagem que não cabem no container reduzido do Astra, colapsando o grid para uma coluna nos breakpoints internos.
- Regras de CSS do Astra em .ast-container e .site-content tem especificidade maior que o CSS do Listing Item do JetEngine e sobrescrevem espacamento, padding e cor definidos no Crocoblock.
Como resolver
- Ajuste a largura de conteúdo do Astra na página do grid: No editor da página ou do post que renderiza o Listing Grid, use o painel de configurações do Astra e troque a largura de conteúdo de Default ou Contained para Full Width. Isso libera o container estreito do tema para o grid do JetEngine ocupar o corpo da página.
Painel WP -> abra a página no editor -> painel lateral Astra Settings Content Layout -> selecione Full Width / Contained ou Full Width / Stretched Atualize a página e recarregue o front-end para conferir - Desative o sidebar na página ou no template do JetEngine: Ainda no painel Astra Settings da página, defina o Sidebar como No Sidebar. Com o sidebar ativo o Astra reserva metade da largura para a barra lateral e o grid do JetEngine fica espremido na metade restante.
Painel WP -> editor da página -> Astra Settings -> Sidebar Selecione No Sidebar Repita o ajuste em Aparencia -> Personalizar -> Sidebar para o tipo de conteúdo correspondente - Defina Full Width no template do JetEngine pelo Astra: Se o conteúdo e gerado por um template de single ou pelo Theme Builder do JetEngine, abra esse template e confirme que ele esta marcado como Full Width sem sidebar pelo Astra. Sem isso o tema reaplica o container padrão por cima do template do Crocoblock.
Crocoblock -> JetEngine -> abra o template de single ou de listagem No painel Astra do template, defina Content Layout como Full Width e Sidebar como No Sidebar Salve o template e visualize uma entrada real - Revise colunas e gap do Listing Grid no JetEngine: Abra o Listing Grid no editor da página e confira o número de colunas e o gap. Em containers ainda estreitos, reduza as colunas ou ajuste o gap para o grid não colapsar em uma coluna so nos breakpoints internos do Crocoblock.
Editor da página -> selecione o widget Listing Grid do JetEngine Ajuste Columns e Column Gap para valores compativeis com a largura disponível Teste em desktop, tablet e mobile usando a previa responsiva - Force a largura com CSS de override quando o conflito persistir: Se mesmo com Full Width o Astra continuar sobrescrevendo o estilo do JetEngine, adicione um CSS adicional pelo Personalizar com especificidade maior, mirando o container do Astra na página do grid. Use uma classe da página para não afetar o site inteiro.
Aparencia -> Personalizar -> CSS Adicional Cole a regra de override que mira .ast-container apenas na página alvo Publique e limpe o cache do site e do navegador para validar
/* Forca largura total apenas na pagina do Listing Grid do JetEngine.
Troque 123 pelo ID real da pagina (body.page-id-123). */
body.page-id-123 .ast-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* Garante que o grid do JetEngine ocupe o corpo inteiro sem o estreitamento do tema. */
body.page-id-123 .site-content .jet-listing-grid {
width: 100%;
margin-left: 0;
margin-right: 0;
}Perguntas frequentes
Por que o Listing Grid do JetEngine estoura para fora da página no Astra
Como deixar o template do JetEngine em largura total no Astra
O grid colapsou para uma coluna so, como volto para várias colunas
O sidebar do Astra esta empurrando o conteúdo do JetEngine, o que fazer
O Astra esta sobrescrevendo o estilo que defini no Listing Item
Preciso desativar o Astra para usar o JetEngine sem conflito
O ajuste de largura no Astra vale para o site inteiro ou so para a página
Como corrigir os Custom Post Types do JetEngine que não aparecem no frontend
CPT JetEngine que não aparece no frontend quase sempre vem de Public ou Has archive desligados no Post Type, ou de regras de reescrita desatualizadas. Marcar essas opções e regravar os permalinks resolve.
Como corrigir o layout quebrado de páginas de curso do Tutor LMS com Astra Pro no WordPress
O layout quebrado de páginas de curso do Tutor LMS com Astra Pro acontece quando a página de curso herda o container, a sidebar ou os elementos globais do Astra em vez de usar uma largura total sem barra lateral, deixando o conteúdo do curso estreito, espremido ou desalinhado.
Como corrigir o Lightbox da Image Gallery no Ultimate Addons
O Lightbox da Image Gallery do Ultimate Addons para de abrir quando o Click Action do widget não está configurado como Lightbox, quando outro lightbox concorrente ou a otimização de JavaScript de um plugin de cache bloqueiam o script que monta o popup.
Como corrigir a Conditional Logic que não funciona no ACF PRO
A Conditional Logic do ACF PRO que não funciona quase sempre vem do campo de gatilho que não guarda um valor comparável (Repeater, Group, Mensagem) ou do JavaScript do ACF que não carregou na tela. A lógica condicional só controla a exibição no editor, não impede que o valor oculto seja salvo ou exibido no frontend.
Como corrigir a navegação do slider que não funciona no Happy Addons
O Happy Addons slider não funciona quando a opção de navegação está definida como None, quando o Swiper do Elementor não inicializa por conflito de JavaScript ou cache, ou quando o slider tem um único slide, fazendo as setas e os dots de navegação sumirem ou não avançarem.
Como corrigir Custom Fields que não aparecem no frontend no ACF PRO
Custom fields do ACF PRO que não aparecem no frontend acontecem quando get_field() ou the_field() retorna vazio porque o field group não cobre o post atual, o post_id passado está errado ou o return format não bate com o que o template tenta imprimir.
Saúde e Bem-Estar
Restaurantes & Alimentação
Hotelaria & Turismo
Imobiliárias & Construção
Negócios Locais & Franquias
E-commerce & Lojas Virtuais
Educação & Cursos
Profissionais Liberais & Serviços
Agências Digitais & Freelancers
MEIs e Autônomos
Agências e Freelancers
Pequenas Empresas
Startups
Franquias
Elementor PRO
Rank Math
SEOPress
Happy Addons
Tutor LMS
WP Optimize
Crocoblock
WP Rocket
Ultimate Addons
Perfmatter
Funnel Kit
AIOS
Astra PRO
ACF
Essential Addons
WP Forms
UpdraftPlus
Ver mais
FULL CRM 
FULL Widget
FULL Woo
FULL Pop-up
FULL Security
FULL NPS
FULL Update
FULL Social Proof
FULL Analytics
FULL Templates
FULL Creator AI
FULL Backup
FULL Safe Login
FULL SMTP
FULL Monitor
FULL Speed
FULL Cache
FULL Whitelabel
