Elementor e WP Rocket conflito: como corrigir

Tipo Page Builders

Nome do erro Conflito entre Elementor e WP Rocket EN: Elementor and WP Rocket conflict

Severidade Grave

Descrição O conflito entre Elementor e WP Rocket aparece quando a otimização de JavaScript e CSS do cache atinge os arquivos do construtor: o editor do Elementor não abre, o layout quebra no frontend ou widgets e icones somem ao limpar o cache. A causa não e bug de nenhum dos dois, e otimização agressiva sobre o que o Elementor precisa.

O que é o conflito entre Elementor e WP Rocket?

O Elementor monta cada página em tempo de carregamento usando JavaScript próprio (elementor-frontend), folhas de estilo geradas dinamicamente na pasta uploads/elementor/css e dependencias como jQuery, Swiper e os icones eicons. O WP Rocket, para acelerar o site, adia e combina esse JavaScript (Delay JavaScript Execution, Load JavaScript deferred) e remove o CSS que considera não usado em cada página (Remove Unused CSS, Load CSS Asynchronously).

O conflito surge quando essas otimizacoes atingem exatamente os arquivos de que o Elementor depende para renderizar e para abrir o editor. O Delay JavaScript Execution segura o script do Elementor até o usuário interagir, e o editor depende desse script para carregar. O Remove Unused CSS apaga regras que o construtor usa em popups, menus e animacoes porque elas não aparecem na primeira renderizacao. Nenhum dos plugins esta quebrado: eles disputam o controle dos mesmos arquivos. Por isso a FULL trata Elementor e WP Rocket como um par a ser configurado junto, não como dois plugins isolados.

Como identificar

O editor do Elementor não abre depois de ativar o WP Rocket: a tela fica travada em “Carregando” ou em branco.
O layout aparece correto dentro do editor mas quebra no frontend depois que o cache e gerado.
Widgets, popups do Elementor PRO ou o indicador de submenu do menu de navegação somem ou perdem o estilo.
Icones do Elementor (eicons) e fontes desaparecem ou viram quadrados depois de limpar o cache.
Efeito sticky (cabeçalho ou coluna fixa) para de funcionar quando a página rola.
Alterações feitas no editor não aparecem no site até limpar o cache do WP Rocket manualmente.

Como prevenir

Ative o Elementor nas One-click exclusions do Delay JavaScript Execution antes de ligar a otimização agressiva em producao
Sempre que adicionar um plugin ou template do Elementor, limpe o Used CSS do WP Rocket para o cache não servir um CSS incompleto
Teste cada nova opção de otimização do WP Rocket no frontend com ?nowprocket para comparar a página com e sem cache antes de confiar nela
Mantenha Elementor, Elementor PRO e WP Rocket atualizados: o WP Rocket distribui listas de compatibilidade (dynamic-lists.json) que já excluem arquivos do Elementor automaticamente

Causa

Delay JavaScript Execution adia o carregamento do elementor-frontend e das dependencias (jQuery, Swiper), e o editor e os widgets dependem desse JavaScript para inicializar.
Remove Unused CSS apaga regras que o Elementor usa em popups, menus e animacoes porque elas não aparecem na primeira renderizacao da página (Used CSS incompleto).
Load CSS Asynchronously / Optimize CSS Delivery adia o CSS dinâmico do Elementor gerado em uploads/elementor/css, deixando a página sem estilo no primeiro paint.
Load JavaScript deferred quebra o efeito sticky do Elementor PRO ao adiar o jquery.sticky.min.js que mantem o elemento fixo na rolagem.
Minify/Combine CSS muda a ordem das folhas e o post CSS do Elementor entra fora de sequencia (o WP Rocket já exclui o post CSS do Minify por padrão para evitar isso).
Cache de página servindo o HTML antigo: o WP Rocket entrega a versão em cache enquanto o Elementor já gerou um novo CSS, e a página renderiza com o estilo desatualizado.

Como resolver

Limpe o cache e regenere o CSS dos dois lados: limpe o cache do WP Rocket e regenere os arquivos do Elementor para descartar HTML e CSS desatualizados antes de qualquer ajuste fino. Esse passo sozinho resolve o sintoma de "alteração não aparece".
```
WP Rocket > Painel > Limpar cache
WP Rocket > Painel > Remover CSS usado (Clear Used CSS)
Elementor > Ferramentas > Regenerar arquivos e dados
```
Confirme se o editor do Elementor esta excluido do cache: abra uma página com ?nowprocket no fim da URL para carregar sem o WP Rocket. Se o editor abre e o layout volta ao normal, esta confirmado que a otimização do cache e a causa, e não um bug do Elementor.
```
https://seusite.com/qualquer-página/?nowprocket
```
Resolva o editor que não abre: ajuste o Delay JavaScript Execution: no WP Rocket, em Otimização de arquivos, marque as caixas de One-click exclusions (Exclusoes em um clique) referentes ao Elementor. Se o editor ou os widgets continuarem quebrados, adicione os handles do Elementor na caixa Excluded JavaScript files.
```
WP Rocket > Otimização de arquivos > Delay JavaScript Execution > One-click exclusions > marcar Elementor
```

Excluded JavaScript files:

/elementor/assets/js/frontend(.min)?.js
/elementor-pro/assets/js/frontend(.min)?.js
/elementor/assets/lib/swiper/
eicons

Resolva o layout quebrado: use o CSS Safelist do Remove Unused CSS: mantenha o Remove Unused CSS ligado pela performance, mas devolva ao Used CSS as classes que o Elementor precisa em popups, menus e animacoes. Adicione os padroes do Elementor no CSS Safelist e depois limpe o Used CSS para a mudanca valer.

WP Rocket > Otimização de arquivos > Remove Unused CSS > CSS Safelist:

/wp-content/uploads/elementor/css/
.elementor(.*)
.e-(.*)
.swiper(.*)
WP Rocket > Painel > Remover CSS usado (Clear Used CSS)

Resolva o sticky e o CSS assincrono: se o efeito sticky do Elementor PRO parou, exclua o jquery.sticky do Load JavaScript deferred e do Delay JavaScript. Se a página pisca sem estilo no carregamento, exclua o CSS dinâmico do Elementor do Load CSS Asynchronously.

Excluded files (Load JavaScript deferred e Delay JS):

/elementor-pro/assets/lib/sticky/jquery.sticky.min.js
Excluir do CSS assincrono: /wp-content/uploads/elementor/css/

Limpe o cache de novo e valide no frontend: depois de cada exclusão, limpe o cache do WP Rocket e o Used CSS, recarregue a página pública (não o editor) e confira no código-fonte se o bloco wpr-usedcss aparece. Safelisting não e instantaneo: so vale depois que o Used CSS e regenerado.
```
WP Rocket > Painel > Limpar cache
WP Rocket > Painel > Remover CSS usado (Clear Used CSS)
```

HTML

# === Excluded JavaScript files (Delay JS + Load JS deferred) ===
# Carrega o JS do Elementor sem adiar, para o editor abrir e os widgets renderizarem
/elementor/assets/js/frontend(.min)?.js
/elementor-pro/assets/js/frontend(.min)?.js
/elementor/assets/lib/swiper/
eicons
# Mantem o efeito sticky do Elementor PRO funcionando
/elementor-pro/assets/lib/sticky/jquery.sticky.min.js

# === CSS Safelist (Remove Unused CSS) ===
# Devolve ao Used CSS o que o Elementor usa em popups, menus e animacoes
/wp-content/uploads/elementor/css/
.elementor(.*)
.e-(.*)
.swiper(.*)

# === Excluir do Load CSS Asynchronously / Optimize CSS Delivery ===
/wp-content/uploads/elementor/css/

Perguntas frequentes

Preciso desativar o WP Rocket para usar o Elementor?

Não. Os dois funcionam juntos quando você exclui os arquivos do Elementor das otimizacoes agressivas. Desligar o WP Rocket so serve como teste rápido: use ?nowprocket no fim da URL para confirmar que o cache e a causa, e depois ajuste as exclusoes em vez de abrir mao da performance.

Qual opção do WP Rocket mais quebra o Elementor?

Duas se destacam. O Delay JavaScript Execution adia o elementor-frontend e impede o editor de abrir e os widgets de inicializar. O Remove Unused CSS apaga classes que o Elementor usa em popups, menus e animacoes. Comece desligando essas duas, confirme qual causa o problema e reative com as exclusoes corretas.

Por que o editor do Elementor não abre depois de instalar o WP Rocket?

Porque o Delay JavaScript Execution segura o JavaScript do Elementor até o usuário interagir com a página, e o editor depende desse script para carregar. Marque a exclusão do Elementor nas One-click exclusions do Delay JS, ou adicione /elementor/assets/js/frontend(.min)?.js na caixa Excluded JavaScript files.

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

Porque o editor carrega o CSS do Elementor inteiro, enquanto o frontend recebe o Used CSS gerado pelo Remove Unused CSS, que descarta regras não vistas na primeira renderizacao. Popups, menus e estados ocultos perdem o estilo. Adicione .elementor(.*) e a pasta uploads/elementor/css ao CSS Safelist e limpe o Used CSS.

Os icones do Elementor sumiram depois de limpar o cache. O que faz isso?

A otimização de JavaScript e de CSS pode atingir a fonte de icones eicons e o CSS que a carrega. Adicione eicons a caixa Excluded JavaScript files do Delay JS e inclua os padroes do Elementor no CSS Safelist. Em seguida limpe o cache e o Used CSS para regenerar os arquivos.

O efeito sticky do Elementor PRO parou de funcionar. Como volto?

O Load JavaScript deferred adia o jquery.sticky.min.js que mantem o elemento fixo na rolagem. Exclua /elementor-pro/assets/lib/sticky/jquery.sticky.min.js da caixa de exclusoes do Load JavaScript deferred e, se o Delay JavaScript Execution estiver ativo, adicione a mesma exclusão também nele.

Minhas alterações no Elementor não aparecem no site. E o cache?

Sim. O WP Rocket serve o HTML em cache enquanto o Elementor já gerou conteúdo novo. Limpe o cache do WP Rocket no painel e, se ainda houver diferenca de estilo, use Remover CSS usado para regenerar o Used CSS. Salvar a página no Elementor nem sempre invalida o cache sozinho.

Por que o CSS Safelist não corrigiu na hora?

Porque o safelisting não e instantaneo: ele so passa a valer quando o WP Rocket regenera o Used CSS daquela página. Depois de adicionar as classes do Elementor ao Safelist, clique em Remover CSS usado, recarregue a página pública e confirme no código-fonte se o bloco wpr-usedcss foi atualizado.

Atenção

Como corrigir o WYSIWYG Editor que não carrega no ACF PRO

O ACF WYSIWYG não carrega quando o TinyMCE não é inicializado no campo: o editor aparece em branco ou sem barra de ferramentas, geralmente em campos adicionados dinamicamente dentro de Repeater e Flexible Content ou com a opção Delay initialization ativa.

Grave

Como corrigir o erro “Preview Could Not Be Loaded” no Elementor

O erro "Preview Could Not Be Loaded" aparece quando o editor do Elementor não consegue carregar a página dentro do iframe de preview. O próprio aviso costuma apontar a causa: tema ausente, .htaccess corrompido, código HTTP de erro ou a página de posts definida como página estática.

Atenção

Como corrigir o erro da Pricing Table no Ultimate Addons

O erro da Pricing Table no Ultimate Addons acontece quando o widget Price Box (UAE) esta desativado nas configurações do plugin, o CSS gerado pelo Elementor ficou desatualizado ou outro plugin interrompe o JavaScript do editor, fazendo a tabela de precos sumir da lista de widgets ou renderizar sem estilo.

Atenção

Como corrigir o erro de estilo do JetMenu com o tema Astra Pro no WordPress

O erro de estilo do JetMenu com o tema Astra Pro acontece quando o CSS do tema sobrescreve o do menu, quando o cache serve uma folha de estilo antiga ou quando o menu do Astra não foi desativado, fazendo o JetMenu renderizar sem o visual configurado.

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.

Atenção

Como corrigir o Transparent Header que não funciona no mobile no Astra Pro

O Astra Transparent Header não funciona no mobile quando a opção Ativar Em está limitada ao desktop, quando uma configuração por página desativa o recurso, ou quando o ponto de quebra do menu foi aumentado e o cabeçalho perde a cor entre 768px e esse valor. A correção é alinhar a opção de dispositivo e o ponto de quebra.

Setores

Extensões

Integrações

Como corrigir o conflito entre Elementor e WP Rocket no WordPress

O que é o conflito entre Elementor e WP Rocket?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o WYSIWYG Editor que não carrega no ACF PRO

Como corrigir o erro “Preview Could Not Be Loaded” no Elementor

Como corrigir o erro da Pricing Table no Ultimate Addons

Como corrigir o erro de estilo do JetMenu com o tema Astra Pro no WordPress

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

Como corrigir o Transparent Header que não funciona no mobile no Astra Pro

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