Conflito Astra Pro e Elementor Pro: como corrigir

Tipo Page Builders

Nome do erro Incompatibilidade entre Astra Pro e Elementor Pro EN: Astra Pro and Elementor Pro incompatibility

Severidade Grave

Descrição O conflito entre Astra Pro e Elementor Pro acontece quando os dois constroem a mesma área da página ao mesmo tempo: o título aparece duplicado, o header e o rodape do Theme Builder se somam aos do Astra, ou a largura total não se aplica. A causa quase sempre e o Astra renderizar elementos que o Elementor Pro já monta.

O que é o conflito entre Astra Pro e Elementor Pro?

O conflito entre Astra Pro e Elementor Pro ocorre quando os dois disputam o controle da mesma área visual da página. O Astra Pro controla título, sidebar, largura do conteúdo, header e rodape pelo Customizer e pelos Custom Layouts; o Elementor Pro reconstrucao essas mesmas regioes pelo Theme Builder e pelos templates de página. Quando os dois renderizam ao mesmo tempo, o resultado e elemento duplicado ou layout quebrado. Os plugins funcionam isolados; o problema nasce da sobreposicao de responsabilidades, e a correção consiste em decidir quem controla cada regiao e desligar a outra camada para aquela página ou condicao.

Como identificar

O título da página aparece duas vezes: o título do Astra no topo e o cabeçalho montado dentro do template do Elementor Pro.
O header ou o rodape aparecem duplicados quando ha um Header/Footer no Astra Pro e também um template de Header ou Footer no Theme Builder do Elementor Pro.
A página ignora a largura total: o conteúdo do Elementor fica preso numa coluna estreita com a sidebar do Astra ainda visivel.
O frontend renderiza diferente do editor do Elementor porque o CSS do Astra Pro sobrescreve estilos de botão, título e espacamento.
Após atualizar o Astra Pro ou o Elementor Pro, layouts que funcionavam passam a quebrar por divergencia de versão entre o tema Astra e o complemento Astra Pro.

Antes de começar: Antes de desligar header, rodape ou Custom Layouts em producao, faca backup e teste em staging: condicoes de exibicao do Astra Pro e do Theme Builder podem afetar várias páginas de uma vez, e desativar a fonte errada deixa o site sem cabeçalho ou sem menu temporariamente.

Como prevenir

Defina desde o inicio uma única camada responsável por cada regiao: header e rodape no Astra Pro ou no Theme Builder do Elementor Pro, nunca nos dois para a mesma condicao
Em páginas construidas no Elementor, padronize Astra Settings com Largura Total Estendida, Sem Sidebar e título desabilitado
Atualize o tema Astra, o complemento Astra Pro e o Elementor Pro juntos e teste em staging antes de aplicar em producao
Evite acumular CSS personalizado no Customizer do Astra e no Elementor ao mesmo tempo para não criar disputa de especificidade

Causa

Astra renderiza o título da página enquanto o template do Elementor Pro também inclui um cabeçalho, gerando título duplicado porque a opção Desabilitar Título não foi marcada no painel Astra Settings da página.
Header ou Footer do Astra Pro ativo na mesma condicao de exibicao de um template de Header ou Footer publicado no Theme Builder do Elementor Pro, fazendo as duas barras coexistirem.
Layout de Conteúdo do Astra definido como Largura Total Contida ou Caixa com sidebar ativa, impedindo o template Elementor Largura Total ou Tela Cheia de ocupar a largura inteira.
CSS do Astra Pro com maior especificidade sobrescrevendo classes do Elementor como elementor-button e elementor-heading-title no frontend.
Versão do complemento Astra Pro desencontrada da versão do tema Astra, ou Elementor Pro defasado em relacao ao Elementor base, quebrando hooks compartilhados de header e rodape.

Como resolver

Desabilite o título e a sidebar do Astra na página do Elementor: abra a página, localize o painel Astra Settings na lateral do editor e desligue o que o Elementor já monta. Defina o Layout de Conteúdo como Largura Total Estendida e a Sidebar como Sem Sidebar; marque a opção de desabilitar o título para o Elementor assumir o cabeçalho.
```
Astra Settings -> Content Layout -> Full Width / Stretched
Astra Settings -> Sidebar -> No Sidebar
Astra Settings -> Disable Sections -> Disable Title (marcar)
```
Defina quem controla header e rodape e desligue a outra camada: escolha uma única fonte para header e rodape. Se for usar o Theme Builder do Elementor Pro, desligue o Header e o Footer do Astra Pro no Customizer; se for manter o Astra, não publique templates de Header ou Footer no Theme Builder para a mesma condicao.
```
Aparencia -> Personalizar -> Header Builder (Astra) -> remover itens ou desativar
Elementor -> Templates -> Theme Builder -> conferir Header/Footer e suas Conditions
Manter apenas UMA das duas fontes ativa por condicao de exibicao
```
Force a largura total quando a coluna continuar estreita: se mesmo com Largura Total Estendida o conteúdo continuar espremido, aplique o template de página do próprio Elementor, que ignora a estrutura do tema.
```
Editor Elementor -> Configurações da página -> Page Layout -> Elementor Full Width
Para remover totalmente cabeçalho e rodape do tema: Page Layout -> Elementor Canvas
```

Regenere o CSS e sincronize as versões: limpe o CSS antigo do Elementor e alinhe as versões para eliminar conflito de hooks e de estilo entre tema, complemento e construtor.

Elementor -> Ferramentas -> Regenerar Arquivos e Dados
Plugins -> atualizar Astra Pro (complemento) e Elementor Pro para a versão mais recente
Aparencia -> Temas -> atualizar o tema Astra para a mesma geração do complemento

CSS

/* CSS adicional no Customizer do Astra (Aparencia > Personalizar > CSS adicional) */
/* Vence a especificidade do Astra Pro sem editar arquivos do tema */
body .elementor-button {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* Oculta o titulo do tema Astra quando o Elementor monta o cabecalho */
.elementor-page .ast-single-post-title,
.elementor-page .entry-title {
  display: none;
}

/* Restaura a largura total quando o Astra ainda espreme o conteudo */
.elementor-page .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

Perguntas frequentes

Por que o título aparece duplicado com Astra Pro e Elementor Pro?

Porque o Astra renderiza o título da página pelo tema e o template do Elementor Pro também inclui um cabeçalho próprio. Os dois títulos somam na mesma página. A correção e marcar a opção Disable Title no painel Astra Settings da página, deixando o Elementor controlar o cabeçalho.

Como resolver header e rodape duplicados entre Astra e Elementor?

Escolha uma única fonte. Se usar o Theme Builder do Elementor Pro, desligue o Header e o Footer do Astra Pro no Customizer. Se manter o Astra, não publique templates de Header ou Footer no Theme Builder para a mesma condicao de exibicao. Manter as duas camadas ativas ao mesmo tempo e o que gera a duplicacao.

A largura total do Elementor não funciona no Astra. O que fazer?

Defina o Layout de Conteúdo como Full Width / Stretched e a Sidebar como No Sidebar no painel Astra Settings da página. Se ainda assim a coluna ficar estreita, troque o Page Layout da página para Elementor Full Width ou Elementor Canvas, que ignoram a estrutura de conteúdo imposta pelo tema.

Preciso desinstalar o Astra Pro para usar o Elementor Pro?

Não. Os dois convivem bem quando cada um controla áreas diferentes. O conflito surge da sobreposicao, não da coexistencia. Basta desligar no Astra as regioes que o Elementor Pro vai montar, como título, header e rodape, e manter o Astra responsável pelo restante do tema.

Por que a página fica diferente no editor e no frontend?

Porque o editor do Elementor carrega o CSS dele isolado, enquanto o frontend carrega também o CSS do Astra Pro. Quando o Astra tem regras de maior especificidade, elas sobrescrevem botões, títulos e espacamentos so na página pública. Regenerar o CSS do Elementor e aumentar a especificidade do seletor resolve a diferenca.

Atualizar o Astra Pro ou o Elementor Pro pode causar o conflito?

Pode, quando as versões ficam desencontradas. O Astra Pro e um complemento que depende da mesma geração do tema Astra, e o Elementor Pro depende do Elementor base. Atualizar so um dos lados quebra hooks compartilhados de header e rodape. Mantenha tema, complemento e construtor atualizados juntos e teste em staging.

Qual ferramenta deve controlar o header: Astra Pro ou Elementor Pro?

Qualquer uma das duas resolve, desde que seja apenas uma por condicao de exibicao. O Theme Builder do Elementor Pro oferece mais liberdade de design dentro do construtor; o Header Builder do Astra Pro e mais leve e rápido. O importante e não deixar as duas montando o mesmo header ao mesmo tempo.

Atenção

Como corrigir o Sticky Header que não funciona no Safari no Astra Pro

O Astra sticky header não funciona no Safari quando o módulo Sticky Header do Astra Pro não está ativo para o dispositivo, quando um ancestral do cabeçalho usa overflow ou transform que invalida o position sticky no WebKit, ou quando CSS e cache antigos do tema continuam sendo servidos ao navegador da Apple.

Grave

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

O Theme Builder não aplica em todas as páginas quando o template foi salvo como rascunho, ficou sem condicao de exibicao, ou perde para outro template do mesmo tipo com condicao mais específica. O ajuste e definir Include corretamente e revisar a especificidade entre templates concorrentes.

Informativo

Como corrigir o widget Image Comparison no Essential Addons que não funciona no WordPress

O widget Image Comparison do Essential Addons não funciona quando o elemento está desativado no painel do plugin, quando faltam as imagens de antes e depois, ou quando o CSS e JS gerados estão desatualizados e o controle deslizante não inicializa no Elementor.

Atenção

Como corrigir o Gallery Field com imagens que não carregam no ACF PRO

O ACF Gallery Field não carrega imagem quando o código do template trata o retorno da galeria de forma diferente do Return Format configurado no campo, ou quando o grupo de campos não casa com o post editado, fazendo a galeria voltar vazia no frontend.

Atenção

Como corrigir o layout quebrado do Blog Pro no Astra Pro no WordPress

O layout quebrado do Blog Pro no Astra Pro acontece quando o módulo Blog Pro não esta ativado nas Astra Options, quando o cache serve um CSS antigo, ou quando um layout personalizado sobrepoe o arquivo do blog, fazendo o grid e as colunas não aplicarem no frontend.

Grave

Como corrigir conflitos entre o Elementor e plugins de cache

O conflito entre Elementor e cache acontece quando um plugin de cache serve CSS, HTML ou JavaScript antigos, deixando o layout quebrado no frontend ou travando o editor. A correção envolve regenerar o CSS do Elementor, excluir o editor da otimização e limpar o cache na ordem certa.

Setores

Extensões

Integrações

Como corrigir a incompatibilidade entre Astra Pro e Elementor Pro

O que é o conflito entre Astra Pro e Elementor Pro?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Sticky Header que não funciona no Safari no Astra Pro

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

Como corrigir o widget Image Comparison no Essential Addons que não funciona no WordPress

Como corrigir o Gallery Field com imagens que não carregam no ACF PRO

Como corrigir o layout quebrado do Blog Pro no Astra Pro no WordPress

Como corrigir conflitos entre o Elementor e plugins de cache

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos