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

## O que é Image Comparison do Essential Addons que não funciona?

O Image Comparison do Essential Addons é um widget criativo para Elementor que sobrepõe duas imagens, antes e depois, e exibe um controle deslizante que o visitante arrasta para revelar uma ou outra. Ele depende de três coisas para funcionar: o elemento estar habilitado no painel do Essential Addons, as duas imagens estarem definidas nas configurações do widget, e os arquivos de CSS e JavaScript que o plugin gera carregarem na página para o deslizador inicializar.

Quando algo dessa cadeia falha, o widget se comporta de duas maneiras. No editor do Elementor, ele pode nem aparecer na lista de widgets, porque o Essential Addons permite ligar e desligar cada elemento individualmente para reduzir requisições ao servidor, como a documentação oficial descreve. No frontend, a imagem aparece estática e a alça de arraste não responde, sinal de que o JavaScript do widget não carregou ou foi quebrado por outro plugin. Identificar em qual ponto a cadeia parou é o que define a correção.

## Como identificar

- O widget Image Comparison não aparece na busca de widgets do editor do Elementor, mesmo com o Essential Addons ativo.
- No frontend as duas imagens aparecem empilhadas ou só uma é exibida, sem a linha divisória com a alça de arraste.
- A alça do deslizador aparece, mas não se move ao arrastar nem ao passar o mouse, ficando travada no centro.
- O console do navegador (F12) mostra um erro de JavaScript como 'Uncaught TypeError' ou '$ is not a function' ao carregar a página com o widget.
- O widget funciona no editor do Elementor, mas perde o efeito de arraste depois que um plugin de cache ou de otimização é ativado.

**Antes de começar:** Antes de desativar plugins de cache, trocar o tema ou mexer nas configurações de otimização em produção, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso a página quebre.

## Como prevenir

- Mantenha habilitados no Essential Addons apenas os elementos que você usa, e confira a aba de elementos sempre que um widget sumir do editor.
- Mantenha o Essential Addons, o Elementor e o tema na versão estável mais recente, validando antes em staging para acompanhar mudanças que afetam a geração de assets.
- Sempre adicione os scripts do Essential Addons à lista de exclusão de delay e de combinação de JavaScript ao configurar um plugin de cache.
- Depois de atualizar o tema ou os plugins, regenere os arquivos de CSS e JS do Elementor para evitar assets defasados no frontend.

Erros relacionados

- [Como corrigir o erro do widget Advanced Accordion no Essential Addons](https://full.services/wp-fixer/corrigir-advanced-accordion-essential-addons/)
- [Como corrigir o widget Testimonials no Essential Addons](https://full.services/wp-fixer/corrigir-testimonials-essential-addons/)
- [Como corrigir o widget Post Grid que não exibe posts no Essential Addons](https://full.services/wp-fixer/corrigir-post-grid-essential-addons/)

## Causa

- O elemento Image Comparison está desativado na aba de elementos do painel do Essential Addons, recurso que o plugin oferece para ligar e desligar widgets individualmente e reduzir requisições, então ele não aparece no editor do Elementor.
- Uma das duas imagens, antes ou depois, não foi definida nas configurações do widget, e sem o par o deslizador não tem o que comparar e renderiza estático.
- Os arquivos de CSS e JS que o Elementor gera estão desatualizados após uma atualização do tema ou do Essential Addons, então o script que inicializa o controle deslizante não carrega na página.
- Um plugin de cache ou de otimização de assets concatenou, adiou ou minificou o JavaScript do Essential Addons, quebrando a inicialização do deslizador no frontend.
- Outro plugin ou o tema carrega uma versão conflitante de jQuery ou dispara um erro de JavaScript antes do script do widget rodar, interrompendo a inicialização da alça de arraste.
- A opção de método de carregamento de assets do Essential Addons está em modo que não enfileira o JS do widget na página específica, deixando o elemento sem o script de comportamento.

## Como resolver

1. Habilite o elemento Image Comparison no painel do Essential Addons: O Essential Addons permite ligar e desligar cada elemento para reduzir requisições, então um widget desligado some do editor. Abra o painel do plugin, vá à aba de elementos, ative o Image Comparison e salve. Essa é a causa número um de o widget não aparecer no Elementor.

```
Painel WP -> Essential Addons -> Elements
Localize 'Image Comparison' na seção Creative e ligue o botão
Clique em Save Settings (Salvar)
```

2. Confirme as imagens de antes e depois no widget: Abra a página no editor do Elementor, selecione o widget Image Comparison e confirme que as duas imagens, antes e depois, estão definidas. Sem o par o deslizador não compara nada e fica estático.

```
Edite a página no Elementor e clique no widget Image Comparison
Na aba Content, defina a imagem Before e a imagem After
Atualize a página e verifique a previa
```

3. Regenere os arquivos de CSS e JS do Elementor: Arquivos de estilo e script desatualizados deixam o deslizador sem o código que o inicializa. Regenere os arquivos pelo painel do Elementor para forçar a recriação dos assets do Essential Addons na próxima carga.

```
Painel WP -> Elementor -> Ferramentas -> aba Geral
Clique em 'Regenerar arquivos e dados' (Regenerate CSS & Data)
Recarregue a página do frontend com cache limpo
```

4. Limpe o cache e desative a otimização de JavaScript: Se o widget funciona no editor mas falha no frontend, um plugin de cache provavelmente adiou ou concatenou o JS do Essential Addons. Limpe o cache e exclua o script do plugin da minificação ou do defer para testar.

```
Limpe o cache do plugin de cache e do CDN, se houver
No plugin de otimização, desative 'Delay JavaScript' e 'Combine JavaScript' temporariamente
Adicione os scripts do Essential Addons à lista de exclusão da otimização
```

5. Isole conflito de plugin ou tema: Se a alça ainda não desliza, abra o console do navegador para ver o erro de JavaScript, desative os outros plugins um a um e troque para um tema padrão, recarregando a página a cada teste para achar o que interrompe o script do widget.

```
Abra o console do navegador (F12 -> Console) e leia o erro de JavaScript
Painel WP -> Plugins -> desative os demais plugins um a um
Painel WP -> Aparencia -> Temas -> ative um tema padrão (ex.: Twenty Twenty-Four) e recarregue a cada teste
```


## Código

```css
/* Garante que o overlay de comparacao fique sobre a imagem base e o cursor indique arraste */
.eael-image-comparison .eael-img-comp-handle {
    cursor: ew-resize;
    z-index: 10;
}

/* Evita que um container do tema corte a alca do deslizador */
.eael-image-comparison,
.eael-image-comparison .img-comp-overlay {
    overflow: visible;
    max-width: 100%;
}
```

## Perguntas frequentes

### Por que o widget Image Comparison não aparece no editor do Elementor

Na maioria dos casos o elemento está desativado no painel do Essential Addons. O plugin permite ligar e desligar cada widget para reduzir requisições, então abra Essential Addons, vá à aba de elementos, ative o Image Comparison e salve para ele voltar ao editor.

### O deslizador do Image Comparison não se move, o que fazer

Isso indica que o JavaScript do widget não inicializou. Regenere os arquivos do Elementor, limpe o cache e exclua os scripts do Essential Addons da minificação ou do delay de JavaScript. Confira também o console do navegador em busca de erros.

### Por que aparece só uma imagem em vez do efeito antes e depois

O widget precisa das duas imagens definidas para comparar. Abra o widget no Elementor e confirme que tanto a imagem Before quanto a After estão configuradas na aba de conteúdo. Sem o par o deslizador fica estático.

### Um plugin de cache pode quebrar o Image Comparison

Sim. Recursos como combinar ou adiar JavaScript podem impedir o script do Essential Addons de inicializar o deslizador no frontend. Limpe o cache e adicione os scripts do plugin à lista de exclusão da otimização para resolver.

### O Image Comparison funciona no editor mas falha no frontend, por quê

Quase sempre é otimização de assets. O editor não aplica cache nem minificação, mas o frontend sim. Limpe o cache, regenere os arquivos do Elementor e exclua o JavaScript do Essential Addons do delay e da combinação para o deslizador voltar.

### Como saber se o problema é do Essential Addons ou de outro plugin

Desative os demais plugins um a um e troque para um tema padrão, recarregando a página a cada teste. Se o widget voltar a funcionar, reative os itens até identificar qual deles interrompe o script do deslizador.

### Preciso editar código para corrigir o Image Comparison

Não na maioria dos casos. Habilitar o elemento, definir as imagens, regenerar os arquivos do Elementor e ajustar o cache resolvem a maioria das situações pelo painel, sem tocar em arquivos do tema.

**Fonte:** [Essential Addons for Elementor — Documentação oficial](https://essential-addons.com/docs/)