# Como corrigir o layout quebrado entre Astra Pro e Crocoblock JetEngine no WordPress

O layout quebrado entre Astra Pro e Crocoblock JetEngine ocorre quando a largura de conteúdo e o sidebar definidos pelo Astra entram em conflito com a estrutura que o JetEngine usa para renderizar Listing Grids e templates dinâmicos, fazendo o conteúdo estourar ou encolher na página.

## 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.

**Antes de começar:** Antes de alterar templates do JetEngine ou adicionar CSS no Personalizar de um site em producao, faça um backup completo do site (arquivos e banco de dados) ou aplique as mudancas primeiro em um ambiente de staging, para reverter sem risco caso o layout quebre de outra forma.

## 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.

Erros relacionados

- [Como corrigir conflito entre Elementor e tema WordPress](https://full.services/wp-fixer/corrigir-conflito-elementor-tema/)
- [Como corrigir Elementor com widgets que não aparecem](https://full.services/wp-fixer/corrigir-elementor-widgets-nao-aparecem/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```css
/* 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

Quase sempre a largura de conteúdo do Astra esta em Contained, com container estreito, enquanto o grid foi desenhado para a largura total. Troque o Content Layout da página para Full Width no painel Astra e o grid passa a caber no corpo da página sem barra de rolagem horizontal.

### Como deixar o template do JetEngine em largura total no Astra

Abra o template no JetEngine e, no painel de configurações do Astra desse template, defina o Content Layout como Full Width e o Sidebar como No Sidebar. Sem isso o Astra reaplica o container padrão por cima do template do Crocoblock e o conteúdo fica estreito.

### O grid colapsou para uma coluna so, como volto para várias colunas

Verifique o número de colunas e o gap no próprio Listing Grid do JetEngine. Em containers estreitos os breakpoints internos colapsam o grid; depois de liberar a largura no Astra, reajuste colunas e gap e teste na previa responsiva em desktop, tablet e mobile.

### O sidebar do Astra esta empurrando o conteúdo do JetEngine, o que fazer

Defina o Sidebar como No Sidebar no painel Astra da página ou do template. Com o sidebar ativo o tema reserva parte da largura para a barra lateral e o grid fica espremido na metade restante da página.

### O Astra esta sobrescrevendo o estilo que defini no Listing Item

O CSS do Astra em .ast-container e .site-content pode ter especificidade maior que o do JetEngine. Adicione uma regra de CSS adicional no Personalizar com especificidade maior, mirando a página alvo por uma classe, para o estilo do Listing Item prevalecer.

### Preciso desativar o Astra para usar o JetEngine sem conflito

Não. O Astra e o JetEngine são compativeis quando a largura de conteúdo e o sidebar estão alinhados. Configure Full Width e No Sidebar nas páginas e templates que usam grids dinâmicos e os dois funcionam juntos sem quebrar o layout.

### O ajuste de largura no Astra vale para o site inteiro ou so para a página

O Content Layout definido no painel Astra do editor vale apenas para aquela página ou template e sobrescreve o padrão global do Personalizar. Para mudar todas as páginas de um tipo, ajuste no Aparencia e Personalizar; para casos pontuais, use o painel por página.

**Fonte:** [Astra Theme — Documentacao oficial (wpastra.com/docs)](https://wpastra.com/docs/)