# Como corrigir o erro do Image Grid no Happy Addons

O erro do Image Grid no Happy Addons acontece quando o widget está desativado no Feature Controller, o Elementor está desatualizado ou um cache antigo serve o CSS e o JavaScript errados, fazendo o widget sumir do editor, as imagens não aparecerem ou o layout masonry quebrar.

## O que é erro do Image Grid no Happy Addons?

O Image Grid é um widget gratuito do Happy Addons para Elementor que monta galerias de imagens filtráveis, com colunas de 2 a 6 e três estilos de layout: Even, Fit Rows e Masonry, além de animações de hover. Como ele é um addon do Elementor, depende do Elementor ativo e dos assets de CSS e JavaScript do Happy Addons carregados corretamente para renderizar a grade e os efeitos. Quando essa cadeia se rompe, o widget falha de formas visíveis no editor ou no frontend.

Na prática, o erro do Image Grid no Happy Addons aparece de três jeitos principais. O widget some da lista de blocos do Elementor porque está desligado no Feature Controller, painel onde o Happy Addons permite ativar e desativar cada recurso e que, quando desativa um item, faz ele deixar de aparecer no editor. As imagens não carregam ou ficam sem estilo porque um cache antigo entrega CSS e JS defasados. E o layout masonry colapsa em uma coluna porque o script que calcula as alturas não rodou. Identificar qual dos três está em jogo é o primeiro passo para corrigir.

## Como identificar

- O widget Image Grid não aparece na busca de widgets do painel do Elementor, mesmo com o Happy Addons ativo.
- A galeria renderiza sem estilo: as imagens aparecem empilhadas uma embaixo da outra, sem colunas, margens ou espaçamento.
- No layout Masonry as imagens colapsam em uma única coluna ou se sobrepõem, em vez de se encaixarem na grade.
- As miniaturas ficam quebradas ou esticadas, com a imagem original em tamanho cheio no lugar do recorte da grade.
- No console do navegador (F12) surgem erros de JavaScript ou requisições de arquivos .js e .css do Happy Addons com status 404.

**Antes de começar:** Antes de regenerar arquivos do Elementor, mexer na otimização de JavaScript ou desativar plugins 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

- Atualize Elementor e Happy Addons juntos e sempre regenere o CSS do Elementor após cada atualização, validando antes em staging.
- Após editar ou criar uma galeria, limpe o cache de página e de CDN para que o novo CSS e JavaScript do Image Grid sejam servidos aos visitantes.
- Ao usar plugin de otimização, exclua os scripts do Happy Addons e do Elementor das opções de combinar e adiar JavaScript, evitando quebra do layout Masonry.
- Não apague da Biblioteca de Mídia imagens que estejam em uso em galerias publicadas, para não deixar miniaturas quebradas na grade.

Erros relacionados

- [Como corrigir o erro do Advanced Heading no Happy Addons](https://full.services/wp-fixer/corrigir-advanced-heading-happy-addons/)
- [Como corrigir a navegação do slider que não funciona no Happy Addons](https://full.services/wp-fixer/corrigir-slider-navegacao-happy-addons/)
- [Como corrigir o conflito de lazy load entre Happy Addons e WP Rocket](https://full.services/wp-fixer/corrigir-conflito-lazy-load-happy-addons-wp-rocket/)

## Causa

- O recurso Image Grid está desativado no Feature Controller do Happy Addons; segundo a documentação oficial, quando um recurso é desligado nesse painel ele deixa de aparecer no editor do Elementor, por isso o widget some da lista.
- Um cache de página ou de objeto (no plugin de cache, no servidor ou no CDN) está servindo uma versão antiga do CSS e do JavaScript do Happy Addons, gerada antes da galeria existir, então a grade renderiza sem estilo.
- O Elementor ou o Happy Addons foi atualizado recentemente e o CSS do Elementor não foi regenerado, deixando a página sem as classes e regras que o widget Image Grid precisa para montar as colunas.
- O JavaScript do Happy Addons que calcula o layout Masonry não executou (por erro de outro plugin no console ou por ter sido adiado/combinado pelo plugin de otimização), e sem ele as imagens colapsam em uma coluna.
- As imagens da galeria foram apagadas da Biblioteca de Mídia ou tiveram a URL alterada após a inserção no widget, deixando os itens com miniaturas quebradas (404) dentro da grade.

## Como resolver

1. Ative o Image Grid no Feature Controller: Se o widget não aparece no editor, abra o menu do Happy Addons no painel do WordPress, vá em Features e confirme que o recurso Image Grid está ligado. Pela documentação oficial, um recurso desligado nesse painel não aparece no Elementor. Salve as alterações e recarregue o editor.

```
Painel WP -> Happy Addons -> Features
Localize 'Image Grid' na lista e marque o toggle como ativo
Clique em Save Changes e recarregue o editor do Elementor
```

2. Limpe todos os caches: Se a galeria renderiza sem estilo, limpe o cache de página, de objeto e do CDN para que o navegador receba o CSS e o JavaScript atuais do Happy Addons. Um cache antigo, gerado antes da galeria, é a causa mais comum de imagens empilhadas sem layout.

```
Painel WP -> menu do seu plugin de cache -> Limpar Cache (Clear Cache)
Se usar CDN (ex.: Cloudflare), faça o Purge Everything no painel do CDN
Recarregue a página com Ctrl + F5 para ignorar o cache do navegador
```

3. Regenere o CSS do Elementor: Após atualizar o Elementor ou o Happy Addons, regenere os arquivos de CSS e os dados do Elementor. Isso reconstrói as folhas de estilo que o Image Grid usa para montar as colunas e os espaçamentos, corrigindo a grade sem estilo.

```
Painel WP -> Elementor -> Ferramentas (Tools)
Na aba Geral, clique em 'Regenerar Arquivos & Dados' (Regenerate Files & Data)
Limpe o cache do site novamente e recarregue a página
```

4. Desligue a otimização de JS para o Masonry: Se o layout Masonry colapsa em uma coluna, o script que calcula as alturas pode ter sido adiado ou combinado pelo plugin de otimização. Desative temporariamente a combinação e o defer de JavaScript e recarregue a página para confirmar se o layout volta.

```
Painel WP -> menu do plugin de otimização (ex.: WP Rocket) -> aba File Optimization
Desmarque 'Load JavaScript deferred' e 'Combine JavaScript files'
Salve, limpe o cache e recarregue a página para testar o Masonry
```

5. Isole conflito de plugin e revise as imagens: Se ainda falhar, abra o console do navegador para ver erros de JavaScript ou arquivos 404, desative os demais plugins um a um e confirme que as imagens da galeria ainda existem na Biblioteca de Mídia. Imagens apagadas após a inserção deixam miniaturas quebradas na grade.

```
Abra o console do navegador (F12 -> aba Console e aba Network) e recarregue a página
Painel WP -> Plugins -> desative os demais plugins um a um, testando a galeria a cada passo
Painel WP -> Mídia -> confirme que as imagens da galeria continuam na biblioteca
```


## Código

```php
<?php
// functions.php do tema filho: garante o CSS e o JS do Happy Addons na pagina.
add_action( 'wp_enqueue_scripts', 'full_force_happy_addons_assets', 99 );
function full_force_happy_addons_assets() {
    if ( ! defined( 'HAPPY_ADDONS_VERSION' ) ) {
        return; // Happy Addons inativo: nao faz nada.
    }
    foreach ( array( 'hello-addons', 'happy-addons-style' ) as $handle ) {
        if ( wp_style_is( $handle, 'registered' ) ) {
            wp_enqueue_style( $handle );
        }
    }
}
```

## Perguntas frequentes

### Por que o widget Image Grid não aparece no Elementor

Quase sempre o recurso está desligado no Feature Controller do Happy Addons. Segundo a documentação oficial, um recurso desativado nesse painel deixa de aparecer no editor do Elementor. Vá em Happy Addons, Features, ative o Image Grid, salve e recarregue o editor.

### O Image Grid do Happy Addons é gratuito

Sim. A documentação oficial do Happy Addons lista o Image Grid como widget gratuito, com layouts Even, Fit Rows e Masonry e colunas de 2 a 6. Ele depende do Elementor e do Happy Addons ativos para renderizar a galeria.

### Por que a galeria do Image Grid aparece sem estilo

Costuma ser cache: o site serve um CSS antigo, gerado antes da galeria existir. Limpe o cache de página, de objeto e do CDN, regenere os arquivos do Elementor em Elementor, Ferramentas e recarregue a página com Ctrl mais F5.

### Por que o layout Masonry do Image Grid colapsa em uma coluna

O JavaScript que calcula as alturas das imagens não rodou, normalmente porque o plugin de otimização adiou ou combinou os scripts. Desative o defer e a combinação de JavaScript, exclua os scripts do Happy Addons da otimização e recarregue a página.

### As miniaturas do Image Grid aparecem quebradas, o que fazer

Verifique se as imagens ainda existem na Biblioteca de Mídia, pois apagar ou renomear o arquivo após inseri-lo deixa a URL com erro 404. Reenvie a imagem ou selecione-a de novo no widget e regenere as miniaturas se necessário.

### Preciso do Happy Addons Pro para usar o Image Grid

Não. O Image Grid é um widget da versão gratuita do Happy Addons. O Pro adiciona outros widgets e recursos, mas o Image Grid em si funciona na versão free, desde que o Elementor e o Happy Addons estejam ativos e atualizados.

### Atualizei o Elementor e o Image Grid quebrou, como resolver

Depois de atualizar o Elementor ou o Happy Addons, regenere o CSS em Elementor, Ferramentas, Regenerar Arquivos e Dados, e limpe o cache do site. Isso reconstrói as folhas de estilo que o widget usa para montar as colunas.

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

Abra o console do navegador com F12 e veja erros de JavaScript ou arquivos com status 404. Depois desative os demais plugins um a um, testando a galeria a cada passo, até identificar o que interrompe os scripts do widget.

**Fonte:** [Happy Addons — Image Grid Widget (documentação oficial)](https://happyaddons.com/docs/happy-addons-for-elementor/widgets/image-grid/)