# Como corrigir conflito entre Elementor e tema WordPress

O conflito entre Elementor e o tema do WordPress aparece quando o tema sobrescreve estilos do Elementor, não declara os hooks de conteúdo ou limita a largura, deixando o layout quebrado, botões invisiveis ou o cabeçalho e rodape duplicados. A causa quase sempre e um tema que não foi feito para construtores de página.

## O que é o conflito entre Elementor e tema WordPress?

Um conflito entre Elementor e tema acontece quando o tema ativo interfere na forma como o Elementor monta a página. O tema controla o cabeçalho, o rodape e a área de conteúdo; quando ele aplica CSS agressivo, restringe a largura do conteúdo ou não implementa os hooks que o Elementor usa, o resultado renderiza errado. O construtor funciona, mas o tema disputa o controle do mesmo espaco visual.

## Como identificar

- O layout fica quebrado no frontend mas aparece correto dentro do editor do Elementor.
- Os botões ficam sem estilo ou invisiveis porque o CSS do tema sobrescreve o do Elementor.
- O conteúdo aparece estreito, espremido numa coluna central, com a opção de largura total ignorada.
- O cabeçalho ou o rodape do tema aparecem duplicados quando se usa um template de Elementor PRO.

**Antes de começar:** Antes de trocar o tema em producao, faca backup e teste em staging: alguns temas guardam configurações de cabeçalho e menu que não migram para o tema neutro e somem temporariamente do site.

## Como prevenir

- Use um tema feito para construtores de página (Hello Elementor, Astra, GeneratePress) que cede o controle de layout ao Elementor
- Teste qualquer troca ou atualização de tema em staging antes de aplicar em producao
- Evite acumular CSS personalizado no tema e no Elementor ao mesmo tempo para não criar disputa de especificidade

Erros relacionados

- [Como corrigir Elementor com tela cinza ou carregando infinito](https://full.services/wp-fixer/corrigir-elementor-tela-cinza/)
- [Como corrigir erro 500 ao editar com Elementor](https://full.services/wp-fixer/corrigir-erro-500-elementor/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)

## Causa

- Tema com CSS de alta especificidade sobrescrevendo as classes do Elementor no botão, no título e no espacamento.
- Tema sem suporte ao template de largura total (Elementor Full Width / Canvas), forcando a coluna estreita do conteúdo.
- Tema que não declara os hooks de conteúdo esperados pelo Elementor, impedindo o Theme Builder de substituir cabeçalho e rodape.
- Versão do tema incompativel com a versão instalada do Elementor ou do Elementor PRO.
- Tema que enfileira uma versão antiga de jQuery ou de fontes, conflitando com os scripts do editor.

## Como resolver

1. Troque para um tema neutro para testar: ative temporariamente o tema Hello Elementor ou um tema padrão do WordPress. Se o layout corrige, o conflito esta no tema anterior, e não no Elementor.
2. Use o template Elementor Full Width ou Canvas: na página, abra Configurações e em Layout escolha Elementor Largura Total ou Elementor Tela Cheia para o tema parar de impor a coluna estreita.
3. Regenere o CSS do Elementor: em Elementor > Ferramentas > Regenerar arquivos e dados, para recriar o CSS e a ordem de carregamento que o tema pode ter corrompido.
4. Aumente a especificidade do CSS do Elementor: se so um elemento quebra (botão, título), adicione CSS personalizado no Elementor com seletor mais específico para vencer a regra do tema sem editar o tema.
5. Atualize o tema e o Elementor: garanta que tema e Elementor estão na versão mais recente; versões desencontradas são causa frequente do conflito de hooks e de CSS.

## Código

```css
/* CSS personalizado no Elementor (Aparencia > Personalizar > CSS adicional) */
/* Vence a regra do tema sem editar o tema: aumenta a especificidade */
body .elementor-button {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
/* Forca a largura total quando o tema espreme o conteudo */
body .elementor-section.elementor-section-stretched {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
```

## Perguntas frequentes

### Como sei se o problema e do tema ou do Elementor?

Ative um tema neutro como o Hello Elementor. Se o layout volta ao normal, o conflito esta no tema anterior. Se continua quebrado mesmo no tema neutro, o problema e do Elementor ou de outro plugin, e a investigacao muda de direcao.

### Por que o layout aparece certo no editor e quebra no frontend?

Porque o editor carrega o CSS do Elementor isolado, enquanto o frontend carrega também o CSS do tema. Quando o tema tem regras de maior especificidade, elas sobrescrevem o Elementor so na página pública, gerando a diferenca entre editor e site.

### Qual o melhor tema para usar com o Elementor?

Temas leves feitos para construtores, como Hello Elementor, Astra e GeneratePress. Eles cedem o controle de cabeçalho, rodape e largura ao Elementor, evitam CSS agressivo e reduzem drasticamente os conflitos de layout e de hooks.

### O cabeçalho aparece duplicado. Como resolver?

Isso ocorre quando você monta o cabeçalho no Theme Builder do Elementor PRO, mas o tema ainda renderiza o próprio. Use um tema compativel com Theme Builder ou defina o layout da página como Tela Cheia (Canvas) para o tema não injetar o cabeçalho.

### Preciso editar arquivos do tema para corrigir?

Na maioria dos casos, não. CSS personalizado com seletor mais específico no Elementor ou no Personalizar resolve botões e títulos sobrescritos. Editar arquivos do tema so se justifica em conflitos de hook profundos, e sempre via tema filho.

### Atualizar o Elementor pode causar o conflito?

Pode, quando o tema esta defasado. Uma atualização do Elementor muda classes ou a ordem de carregamento que um tema antigo não acompanha. Mantenha tema e Elementor atualizados juntos e teste em staging para evitar a quebra.

**Fonte:** [Elementor — Theme Compatibility](https://elementor.com/help/elementor-theme-compatibility/)