# Como corrigir erros de compilacao de CSS com vários page builders no WordPress

O erro de CSS com vários page builders no WordPress ocorre quando Elementor e outro construtor (como o Astra Pro) geram folhas de estilo separadas que se sobrepoem ou ficam em cache desatualizado, fazendo o layout da página renderizar sem os estilos corretos.

## O que é erro de CSS com vários page builders?

O erro de CSS com vários page builders aparece quando mais de uma ferramenta de construcao monta o estilo da mesma página e os arquivos CSS que cada uma gera entram em conflito. O Elementor compila o CSS de cada página e o salva como arquivo externo na pasta wp-content/uploads/elementor/css, enquanto temas como o Astra Pro geram seu próprio CSS dinâmico e também o mantem em cache. Quando essas duas camadas não estão sincronizadas, o navegador carrega estilos parciais, antigos ou duplicados e a página quebra: margens somem, fontes mudam, blocos se desalinham.

O problema raramente e um bug de um plugin so. Ele costuma surgir depois de uma migração de domínio, da troca da forma como o Elementor imprime o CSS (External File contra Internal Embedding), ou quando dois construtores tentam estilizar a mesma área da página, como um cabeçalho do tema sobre uma seção do Elementor. Como o CSS dos page builders fica em cache em disco, ele não se atualiza sozinho: e preciso regenerar os arquivos para que o estilo correto volte a ser servido.

## Como identificar

- A página aparece sem estilo no frontend, mas dentro do editor do Elementor ela renderiza correta, sinal de que o CSS salvo em disco esta desatualizado.
- Depois de migrar o site para outro domínio ou servidor, o layout quebra e os estilos do Elementor somem porque os arquivos de CSS ainda apontam para a URL antiga.
- Fontes, cores ou margens do cabeçalho do tema Astra sobrescrevem o estilo de uma seção montada no Elementor, ou o contrario, deixando a área com aparencia inconsistente.
- No painel Rede (Network) do navegador, um arquivo de CSS em uploads/elementor/css retorna 404 ou carrega uma versão antiga em cache.
- Após atualizar o Elementor ou o tema, partes da página ficam sem espacamento ou com a fonte padrão do navegador até o cache de CSS ser limpo.

**Antes de começar:** Antes de fazer busca e substituicao no banco de dados ou trocar o CSS Print Method em producao, faça um backup completo do site (arquivos e banco) ou teste primeiro em um ambiente de staging, pois uma substituicao de URL mal configurada pode corromper dados serializados e quebrar o site inteiro.

## Como prevenir

- Defina uma so ferramenta como dona de cada área da página: deixe cabeçalho, rodape e tipografia global no Astra Pro e o corpo das páginas no Elementor, evitando que dois construtores estilizem a mesma regiao.
- Sempre que migrar de domínio ou servidor, rode a busca e substituicao de URLs e em seguida regenere o CSS e os dados do Elementor como parte do checklist de migração.
- Mantenha o CSS Print Method do Elementor numa configuração fixa e documentada, regenerando o CSS toda vez que essa opção for alterada para não deixar arquivos orfaos.
- Ao usar plugin de cache ou CDN, limpe o cache de CSS após cada edição de layout e valide o frontend numa janela anonima para garantir que o estilo novo esta sendo servido.

Erros relacionados

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

## Causa

- O arquivo de CSS que o Elementor salvou em wp-content/uploads/elementor/css esta desatualizado ou quebrado, entao o frontend carrega estilo antigo enquanto o editor mostra o conteúdo atual; e a situacao que a ferramenta Regenerate CSS & Data foi feita para resolver.
- O site foi migrado de domínio ou servidor e os arquivos de CSS gerados ainda carregam a URL antiga embutida, fazendo as folhas de estilo do Elementor não serem encontradas no novo endereco.
- O Astra Pro gera e mantem em cache seu próprio CSS dinâmico do tema (cabeçalho, rodape, tipografia global) e essas regras competem em especificidade com o CSS de uma seção montada no Elementor sobre a mesma área.
- A opção CSS Print Method do Elementor esta como External File e o cache de página ou de CDN serviu o arquivo antigo; ou foi trocada para Internal Embedding e os arquivos externos ficaram orfaos e desincronizados.
- Um plugin de cache ou minificacao de CSS combinou as folhas do Elementor e do Astra numa única versão em cache que ficou para tras após uma edição, servindo estilo defasado para os visitantes.

## Como resolver

1. Regenere o CSS e os dados do Elementor: Esta e a correção número um quando o estilo aparece certo no editor e errado no frontend. A ferramenta apaga os arquivos de CSS em cache e os recria a partir das configurações atuais, refazendo os arquivos da pasta uploads/elementor/css com a URL correta do site.

```
Painel WP -> Elementor -> Ferramentas -> aba Geral
Em 'Regenerar arquivos e dados' (Regenerate CSS & Data) clique em Regenerar Arquivos e Dados
```

2. Limpe o cache do tema Astra e dos plugins de cache: Depois de regenerar o CSS do Elementor, force o Astra a recriar o CSS dinâmico dele e limpe qualquer cache de página, objeto ou CDN, para que o navegador pare de servir a folha de estilo combinada antiga.

```
Painel WP -> Aparencia -> Personalizar -> Publicar (forca o Astra a regravar o CSS dinâmico)
Limpe o cache do plugin de cache instalado (ex.: WP Rocket, LiteSpeed Cache)
Purgue o cache da CDN se houver Cloudflare ou similar na frente do site
```

3. Padronize o CSS Print Method do Elementor: Defina como o Elementor imprime o CSS e mantenha a escolha. External File guarda o estilo em arquivos servidos com cache; Internal Embedding injeta o CSS direto no HTML e ajuda a isolar se o problema e de cache de arquivo. Ao trocar a opção, regenere o CSS de novo para não deixar arquivos orfaos.

```
Painel WP -> Elementor -> Configurações -> aba Performance (Desempenho)
Em 'CSS Print Method' escolha 'External File' (padrão) ou 'Internal Embedding' para teste
Volte ao passo 1 e regenere o CSS após mudar a opção
```

4. Isole o conflito de especificidade entre o tema e o construtor: Quando o cabeçalho ou a tipografia do Astra sobrescreve uma seção do Elementor, decida qual ferramenta controla cada área. Evite montar no Elementor uma regiao que o Astra Pro já estiliza globalmente, ou use o Theme Builder de um so dos dois para aquela área.

```
Inspecione o elemento no navegador (F12 -> aba Elements) e veja qual regra CSS vence
Painel WP -> Aparencia -> Personalizar: ajuste a tipografia/cor global do Astra OU remova-a da área do Elementor
Mantenha cabeçalho e rodape em uma única ferramenta (so Astra ou so Elementor Theme Builder)
```

5. Atualize as URLs após uma migração: Se o layout quebrou após mudar de domínio, os arquivos de CSS gerados guardam a URL antiga. Faca uma busca e substituicao no banco trocando a URL antiga pela nova e regenere o CSS para os arquivos voltarem a apontar para o endereco certo.

```
Use um plugin de search-replace (ex.: Better Search Replace) e troque http://domínio-antigo por https://domínio-novo
Marque para tratar dados serializados na busca e substituicao
Volte ao passo 1 e regenere o CSS e os dados do Elementor após a troca
```


## Código

```php
<?php
/**
 * Forca o Elementor a regerar o CSS no proximo carregamento da pagina,
 * limpando os arquivos em cache de wp-content/uploads/elementor/css.
 * Util apos migracao ou quando o estilo do frontend fica desatualizado.
 */
add_action( 'admin_init', 'full_flush_elementor_css_once' );
function full_flush_elementor_css_once() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    if ( get_option( 'full_elementor_css_flushed' ) ) {
        return;
    }
    if ( class_exists( 'ElementorPlugin' ) ) {
        // Apaga os arquivos de CSS gerados; o Elementor os recria sob demanda.
        ElementorPlugin::instance()->files_manager->clear_cache();
        update_option( 'full_elementor_css_flushed', 1 );
    }
}
```

## Perguntas frequentes

### Por que a página aparece certa no editor do Elementor mas quebrada no frontend

Porque o editor monta o estilo na hora, enquanto o frontend serve o arquivo de CSS salvo em wp-content/uploads/elementor/css, que pode estar desatualizado ou em cache. Va em Elementor, Ferramentas, aba Geral e clique em Regenerar Arquivos e Dados para recriar esse CSS.

### Posso usar o Elementor e o Astra Pro no mesmo site sem conflito de CSS

Sim, eles são compativeis e muito usados juntos. O conflito surge quando os dois estilizam a mesma área, como um cabeçalho. A boa prática e deixar cada ferramenta dona de regioes diferentes: o Astra cuida do tema global e o Elementor do corpo das páginas.

### O que a ferramenta Regenerate CSS & Data do Elementor faz

Ela apaga os arquivos de CSS em cache que o Elementor gerou e os recria a partir das configurações atuais do site. Isso corrige estilos desatualizados, layout quebrado após atualizações e arquivos de CSS que ficaram apontando para uma URL antiga depois de uma migração.

### O layout quebrou depois que migrei o site de domínio, o que fazer

Os arquivos de CSS do Elementor guardam a URL antiga embutida. Faca uma busca e substituicao no banco trocando o domínio antigo pelo novo, com tratamento de dados serializados, e depois regenere o CSS e os dados do Elementor para os arquivos voltarem a carregar.

### Devo deixar o CSS Print Method como External File ou Internal Embedding

External File e o padrão e costuma ser melhor para desempenho, pois o navegador guarda o arquivo em cache. Internal Embedding injeta o CSS no HTML e ajuda a diagnosticar quando o problema e cache de arquivo. Ao trocar a opção, regenere o CSS para evitar arquivos orfaos.

### Por que um arquivo de CSS do Elementor retorna 404 no navegador

Geralmente o arquivo na pasta uploads/elementor/css foi apagado, nunca foi gerado ou aponta para uma URL antiga após migração. Regenerar o CSS e os dados pela aba Ferramentas do Elementor recria esses arquivos no caminho correto do site atual.

### Um plugin de cache pode causar erro de CSS com vários page builders

Sim. Plugins de cache e CDN combinam e guardam as folhas de estilo do Elementor e do tema. Se o cache não for limpo após uma edição, eles servem a versão antiga. Limpe o cache do plugin e da CDN sempre que mudar o layout e valide numa janela anonima.

**Fonte:** [Elementor — Regenerate CSS & Data (Elementor Help Center)](https://elementor.com/help/regenerate-css/)