Image Comparison Essential Addons: corrigir widget que não f

Tipo Page Builders

Nome do erro Widget Image Comparison do Essential Addons não funciona EN: Essential Addons Image Comparison widget not working

Severidade Informativo

Descrição 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.

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

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)
```
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
```
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
```
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
```
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
```

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.

Atenção

Como corrigir o Mega Menu que não exibe submenus no Astra Pro

O Mega Menu do Astra Pro deixa de exibir submenus quando o módulo Nav Menu está inativo, quando o toggle Enable Mega Menu não foi ligado no item pai ou quando os itens de submenu não estão aninhados sob o pai em Aparência -> Menus. Sem submenu aninhado, o Astra não monta as colunas e o menu abre vazio.

Informativo

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Quando o estilo do WPForms não aplica com o Astra Pro, o formulário aparece sem CSS porque a opção Include Form Styling esta em No styling, o CSS do tema vence por especificidade, ou o cache combinou e removeu a folha de estilo do WPForms.

Grave

Como corrigir o erro de Header/Footer no Astra Pro após atualização

O Astra header footer quebrado após atualização ocorre quando o cabeçalho ou rodape do Astra Pro some, perde estilo ou troca de posicao depois de um update do tema ou do Astra Pro Addon. A causa quase sempre e CSS dinamico em arquivo defasado, módulo Custom Layouts desligado, ou regra de exibicao do layout perdida.

Atenção

Como corrigir o layout quebrado de páginas de curso entre Tutor LMS e Astra Pro no WordPress

O layout quebrado entre Tutor LMS e Astra na página de curso ocorre quando o template de single course do Tutor entra em conflito com o container, a sidebar ou a largura de conteúdo definidos pelo tema Astra, deixando a página desalinhada, com sidebar indevida ou sobreposta ao cabeçalho.

Atenção

Como corrigir o Image Field no ACF PRO

O Image Field do ACF PRO não retorna a URL quando o Return Format do campo está como Image Array ou Image ID, mas o template usa o valor como se fosse a string da URL. O ACF devolve um array ou um número de anexo, então o atributo src da imagem sai quebrado ou vazio.

Grave

Como corrigir widgets do Happy Addons que não carregam no editor Elementor

Quando os widgets do Happy Addons não carregam no editor Elementor, o painel de elementos abre sem a seção Happy, em geral porque o recurso foi desligado no Feature Controller, porque o Elementor esta abaixo da versão 3.7.0 exigida, ou porque um erro de JavaScript no editor interrompe o registro dos widgets.

Setores

Extensões

Integrações

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

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

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Mega Menu que não exibe submenus no Astra Pro

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Como corrigir o erro de Header/Footer no Astra Pro após atualização

Como corrigir o layout quebrado de páginas de curso entre Tutor LMS e Astra Pro no WordPress

Como corrigir o Image Field no ACF PRO

Como corrigir widgets do Happy Addons que não carregam no editor Elementor

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