Montar grades e carrosseis no Elementor é organizar posts, produtos ou cards em colunas alinhadas ou em slides que rolam na horizontal sem escrever código. O Loop Grid e o Loop Carousel do Elementor PRO 3.x já fazem isso de forma nativa, com controle de colunas e ligação a qualquer tipo de conteúdo. Os addons de terceiros, como Essential Addons e Happy Addons, agregam filtros, masonry e estilos prontos que o nativo não traz. Este guia mostra quando o nativo basta, quais cinco plugins valem a instalação e como configurar tudo sem pesar a página. A escolha errada infla o JavaScript e derruba o desempenho no celular.

Visão geral: Grades e carrosseis no Elementor lado a lado

As grades e carrosseis no Elementor já têm base nativa desde a versão 3.11 do PRO: o Loop Grid monta colunas e o Loop Carousel monta slides a partir da mesma fonte de dados. Isso cobre a maioria dos casos de blog, portfólio e produtos sem nenhum plugin extra antes de você cogitar um addon.

Segundo a documentação oficial do Elementor, o Loop Grid define o número de colunas por uma caixa de texto e oferece um toggle de Masonry para equilibrar cards de alturas diferentes. O Loop Carousel é, na prática, o mesmo Loop Grid com rolagem lateral em vez de paginação vertical. A tabela abaixo resume o que cada abordagem de grades e carrosseis no Elementor entrega antes da instalação de qualquer plugin.

Para aprofundar a lógica por trás dessas grades dinâmicas, vale ler o guia da FULL sobre o Loop Builder do Elementor, que explica como o template de item alimenta tanto a grade quanto o carrossel.

Por que addons de grade e carrossel existem se o Elementor já tem nativo

Os addons existem porque o Loop Grid nativo cobre só estrutura e colunas: ele não traz filtro AJAX por categoria, layout masonry refinado nem presets de carrossel de logos prontos. Para esses três casos, um dos 5 addons deste guia justifica o peso extra; fora deles, o nativo do Elementor PRO 3.x basta e poupa JavaScript.

Em artigos de Elementor da FULL, a gente vê no suporte que a maioria dos tickets de grade não é bug do Elementor, e sim addon empilhado sem necessidade. O widget nativo já resolve o caso simples; o addon entra quando o projeto pede interação. A regra prática: instale o addon pela função que falta, nunca pelo pacote inteiro. Cada addon carrega scripts próprios que somam peso à página, e dois sliders concorrentes na mesma tela são a causa raiz mais comum de conflito de inicialização.

Loop grid nativo: A grade dinâmica do Elementor PRO

O Loop Grid do Elementor PRO 3.x conecta um template de item a qualquer consulta de conteúdo e renderiza tudo em colunas configuráveis, geralmente de 1 a 6 por linha. Você desenha o card uma vez, define o número de colunas na caixa de texto e o Loop Grid replica esse card para todos os posts ou produtos da consulta, sem repetir nada à mão.

O toggle de Masonry, descrito na documentação do Elementor, reorganiza os itens para que alturas diferentes fiquem visualmente equilibradas. Na maioria dos cenários de blog e portfólio, essa grade dinâmica do Elementor já entrega o resultado sem plugin extra. O ponto de atenção é o mobile: acima de três colunas em telas abaixo de 768 px, os cards apertam e o texto quebra. Defina colunas responsivas por breakpoint antes de publicar para manter as grades e carrosseis no Elementor alinhados.

Loop carousel nativo: Quando os slides resolvem melhor que a grade

O Loop Carousel do Elementor PRO 3.x usa a mesma fonte de dados do Loop Grid, mas exibe os itens em slides que rolam na horizontal em vez de paginar na vertical. Use o carrossel quando o espaço vertical é curto e você precisa mostrar muitos itens em pouca altura, como produtos em destaque, marcas ou depoimentos de clientes.

Segundo a documentação oficial do Loop Carousel, os controles de navegação, setas e autoplay diferem da grade justamente porque o movimento é lateral. O risco técnico mora no autoplay: intervalos abaixo de 3 segundos com lazy-loading desativado tendem a empurrar o LCP para cima e travar o scroll no celular. Mantenha o autoplay em 4 a 5 segundos e ative o lazy-loading dos slides fora da viewport para o carrossel não pesar.

Os 5 plugins essenciais de grade e carrossel para o Elementor

Para grades e carrosseis no Elementor que vão além do nativo, cinco addons cobrem 90% das necessidades, e nenhum deles precisa coexistir com outro slider na mesma página. A escolha depende do recurso que falta, não da quantidade de widgets que o pacote anuncia no marketing.

Os candidatos reais são Essential Addons, Happy Addons, Ultimate Addons, Crocoblock JetEngine e o ElementsKit, cada um com um carrossel ou grade que se destaca por motivo diferente. A tabela e os parágrafos a seguir mostram o diferencial de cada um para você instalar só o que agrega ao projeto.

Entre os addons gratuitos e pagos, o Essential Addons lidera em filtro de grade e o Ultimate Addons em carrossel de depoimentos. Veja os detalhes de cada um nos guias da FULL sobre Essential Addons para Elementor e Happy Addons para Elementor.

Essential Addons e Happy Addons: Grade com filtro sem código

O Post Grid do Essential Addons adiciona filtro AJAX por categoria à grade do Elementor, algo que o Loop Grid nativo não faz sozinho. Você arrasta o widget, escolhe a fonte de posts e ativa as abas de filtro, tudo sem tocar em JavaScript, em menos de cinco minutos por listagem.

O Happy Addons entra com cards estilizados e um carrossel de imagens mais leve, ideal quando o projeto precisa de visual sem o peso de um pacote grande. A combinação dos dois cobre blog, portfólio e galeria com fluidez, e ambos já vêm incluídos no plano PRO da FULL sem licença extra. O cuidado técnico é não rodar o filtro do Essential Addons junto com um segundo plugin de filtro: dois scripts de AJAX na mesma listagem tendem a duplicar requisições e atrasar a renderização em conexões móveis lentas, principalmente em redes 4G fora dos grandes centros.

Crocoblock JetEngine e Ultimate Addons: Grades dinâmicas avançadas

O Crocoblock JetEngine constrói grades a partir de consultas personalizadas (query custom), o que permite filtrar produtos por meta-campos, taxonomias e relações que o Loop Grid padrão não alcança. É a escolha para diretórios, imobiliárias e catálogos com mais de 500 itens e lógica de dados complexa.

O Ultimate Addons, por sua vez, brilha no carrossel de depoimentos e na grade de portfólio responsiva, com presets que economizam horas de estilização. Ambos vivem dentro do Elementor sem substituir o nativo: o JetEngine alimenta a consulta, o Loop Grid renderiza. O ponto de atenção com o JetEngine é o cache de consulta. Em catálogos grandes, a query sem cache de objeto ativo reprocessa a cada visita e sobrecarrega o banco de dados em horário de pico. Ative o object cache antes de escalar as grades e carrosseis no Elementor, e teste a listagem com a quantidade real de itens, não com três cards de exemplo.

Passo a passo: Montar uma grade e um carrossel no Elementor

Montar grades e carrosseis no Elementor de forma funcional leva cinco passos e menos de quinze minutos no Elementor PRO 3.x. O fluxo é sempre o mesmo: criar o template de item, conectar a consulta, escolher entre grade ou carrossel e ajustar colunas e responsividade. Os passos abaixo valem para montar grades e carrosseis no Elementor tanto no Loop Grid nativo quanto nos addons, porque todos partem do mesmo template de item. Siga na ordem para evitar o erro mais comum, que é definir colunas antes de revisar o card no mobile.

Passo 1: Crie o template de item no loop builder

Abra o Loop Builder do Elementor PRO e desenhe o card que vai se repetir na grade. Inclua imagem, título e botão com altura mínima fixa para evitar desalinhamento. Esse template alimenta tanto o Loop Grid quanto o Loop Carousel, então capriche uma vez só.

Passo 2: Conecte a consulta de conteúdo

Arraste o widget Loop Grid para a página e selecione a fonte de dados: posts, produtos WooCommerce ou um tipo de conteúdo personalizado. A consulta define quais itens entram na grade e carrossel sem você listar nada manualmente.

Passo 3: Defina o número de colunas

Na aba de layout, informe o número de colunas na caixa de texto, de 1 a 6. Configure valores diferentes por breakpoint: três colunas no desktop, duas no tablet e uma no celular mantêm o alinhamento em telas abaixo de 768 px.

Passo 4: Converta em carrossel se precisar de slides

Para transformar a grade em carrossel, troque o widget Loop Grid pelo Loop Carousel e ajuste setas, pontos e autoplay. Mantenha o autoplay entre 4 e 5 segundos e ative o lazy-loading dos slides fora da viewport.

Passo 5: Valide o Core Web Vitals no mobile

Antes de publicar, teste a página no PageSpeed Insights e confira o Core Web Vitals. Cards sem dimensão fixa empurram o CLS para fora da faixa boa durante o carregamento.

Como acelerar a entrega de uma loja com a FULL

O plano PRO da FULL custa R$849 e reúne Elementor PRO, Essential Addons, Happy Addons, Ultimate Addons e Crocoblock em uma única ativação, sem licenças avulsas para gerenciar. Distribuído pelos sites que uma agência mantém, isso sai por cerca de R$85 por site no bundle FULL, contra dezenas de assinaturas separadas.

A gente vê no suporte da FULL que boa parte dos conflitos de grade e carrossel vem de versões desencontradas de addons comprados em fontes diferentes; com tudo na mesma origem e atualizado junto, o conflito de inicialização some. Para comparar os planos e o que cada um inclui, veja os planos da FULL.

Perguntas frequentes sobre grades e carrosseis no Elementor

Próximos passos para dominar grades e carrosseis no Elementor

Grades e carrosseis no Elementor começam pelo nativo: o Loop Grid e o Loop Carousel do PRO 3.x resolvem a maioria dos layouts dinâmicos sem nenhum plugin extra. Dominar grades e carrosseis no Elementor é, antes de tudo, saber quando parar de instalar addon. Os addons como Essential Addons, Happy Addons, Ultimate Addons e Crocoblock JetEngine entram pela função que falta, nunca pelo pacote inteiro, e jamais devem coexistir com um segundo slider na mesma página. Ajuste colunas por breakpoint, controle o autoplay e valide o Core Web Vitals no mobile antes de publicar as grades e carrosseis no Elementor. Para continuar aprendendo, o FULL Academy reúne tutoriais, guias e reviews de Elementor em um só lugar, e o guia Elementor PRO da FULL aprofunda cada widget de grade e carrossel.

Legenda: o Loop Grid nativo monta a grade em colunas responsivas sem nenhum addon instalado.