📩 Fique por dentro das novidades com a nossa newsletter

Loop builder do Elementor: Listas dinâmicas em 5 passos

Conheça a loja da FULL Services

Plugins premium, suporte de verdade e tudo o que seu site WordPress precisa em um só lugar.

Pergunte a uma IA sobre este artigo

Obtenha um resumo ou tire dúvidas com seu assistente favorito

O Loop Builder do Elementor PRO monta listas dinâmicas a partir de um único template de item. Segundo o W3Techs (2024), o WordPress roda cerca de 43% dos sites da web. Paginação mal configurada acima de 2.000 posts dispara timeout de PHP. Use quando a lista repete a mesma estrutura visual.

O Loop Builder é o recurso do Elementor PRO que transforma um card desenhado uma vez em uma lista dinâmica inteira, puxada do banco do WordPress por uma query. Você edita o design de um item, define a consulta e o Elementor replica esse layout para cada post, produto ou registro retornado. Antes dele, montar um blog ou um catálogo exigia widgets fechados de “Posts” com pouca liberdade de design. Com o Loop Builder, cada célula da lista é um template completo que você controla pixel a pixel. Este tutorial mostra a lógica da ferramenta, os passos de configuração e onde ela cobra o preço em performance. Para o contexto geral da plataforma, veja todos os artigos de Elementor da FULL.


Primeiros passos: Como o loop builder funciona

O Loop Builder separa o trabalho em 2 partes: um template de item (o card) e uma query (o que buscar). Lançado no Elementor PRO 3.8 em , ele substituiu a lógica de widgets fechados de “Posts” por um loop totalmente editável no editor visual.

Você desenha um único card com título, imagem destacada e botão usando tags dinâmicas, e o Loop Grid repete esse card para cada item retornado pela consulta. A tabela abaixo resume os 3 blocos que sustentam qualquer Loop Builder na prática.

Loop Builder do Elementor: componentes e função de cada um
Componente O que faz Configuração crítica
Loop item template Card desenhado uma vez com tags dinâmicas Definir fonte do conteúdo antes de salvar
Loop Grid Repete o card em grade com colunas e paginação Limitar itens por página para não estourar a query
Query control Filtra por tipo, taxonomia, ordem e exclusão Filtro de taxonomia evita varrer o arquivo inteiro

Essa separação é o que torna o Loop Builder mais flexível que os widgets antigos: o design e a consulta viram peças independentes e reutilizáveis.

Loop grid contra loop carousel: Qual usar

O Loop Builder entrega 2 widgets de exibição, e a escolha entre eles muda o comportamento da lista em telas abaixo de 768 px de largura. O Loop Grid organiza os itens em uma grade fixa de colunas com paginação numérica, ideal para arquivos de blog e catálogos WooCommerce com dezenas de produtos por página.

O Loop Carousel coloca os mesmos cards em um slider horizontal com navegação por setas, melhor para destaques e seções de “relacionados” onde o espaço vertical é curto. Em , nos tickets de suporte da FULL, boa parte dos casos de “lista quebrada no celular” vem de Loop Carousel com itens demais por slide, que esmagam o card em telas pequenas. A regra prática: grade para navegar listas longas, carrossel para destacar 3 a 5 itens rotativos. Os dois widgets reaproveitam o mesmo loop item template, então você troca de um para o outro sem redesenhar o card.

Tags dinâmicas: O motor do loop builder

As tags dinâmicas são a camada que conecta cada um dos 6 ou mais elementos do card ao dado real de cada post, e sem elas o Loop Builder seria só uma grade estática repetida. Elas alimentam título, imagem destacada, resumo, autor, preço do produto WooCommerce ou um campo personalizado do ACF.

Você arrasta um widget de imagem para o card, clica no ícone de dinâmica e escolhe “Featured Image”, e o Elementor preenche aquele espaço com a imagem própria de cada item retornado pela query. A documentação oficial detalha como o Elementor expõe essas fontes no editor (Elementor Developers, Dynamic Tags). Sem essa camada, você voltaria a duplicar cards manualmente, que é exatamente o trabalho que o Loop Builder existe para eliminar. Toda tag dinâmica aceita um valor de fallback, útil para posts sem imagem destacada que, de outro modo, abririam um buraco no layout.

Passo a passo: Como montar um loop builder em 5 passos

Montar um Loop Builder em 5 passos leva cerca de 20 minutos no primeiro card e menos de 5 nos seguintes, porque o template vira reutilizável. O fluxo abaixo cobre desde a criação do item até a publicação da grade na página. Antes de começar, confirme que o Elementor PRO está ativo; o recurso não existe na versão gratuita. Quem ainda não instalou pode seguir o tutorial de instalação do Elementor PRO.

Passo 1: Crie o loop item template

Abra o Theme Builder do Elementor e adicione um novo template do tipo “Loop Item”. O editor abre com um card em branco e um seletor de fonte de pré-visualização. Escolha “Posts” para blog ou “Produtos” para WooCommerce; essa escolha só afeta o preview, não a query final. Salve o template antes de desenhar para o Elementor reconhecer o tipo de conteúdo.

Passo 2: Desenhe o card com tags dinâmicas

Use um container flexbox como base e adicione widgets de imagem, título e botão. Em cada widget, ative a tag dinâmica correspondente (Featured Image, Post Title, Post Excerpt). Estilize uma vez: esse layout vale para todos os itens.

Passo 3: Configure a query control

Adicione o widget Loop Grid na página de destino e selecione o template de item criado. No painel de Query, defina a fonte, o filtro de taxonomia e a ordenação. Limite os itens por página entre 6 e 9 para evitar consultas pesadas em arquivos grandes.

Passo 4: Defina colunas e paginação

Ajuste o número de colunas por dispositivo (3 no desktop, 1 no mobile é comum) e ative a paginação numérica. Sem paginação, o Loop Grid tenta carregar todos os itens da query de uma vez.

Passo 5: Visualize, teste e publique

Verifique a renderização no preview responsivo, confira se as imagens dinâmicas aparecem e publique. Teste a paginação com um clique real antes de fechar.

Custo do loop builder no bundle FULL

O Loop Builder exige o Elementor PRO, e o licenciamento avulso de US$59 por ano por site é onde o custo começa a doer. Esse valor sobe rápido para quem mantém vários projetos: 5 sites já passam de US$295 por ano só em uma licença avulsa do builder.

No plano PRO da FULL, por R$849,90, o Elementor PRO entra junto com outros 16 plugins premium, e o cálculo muda: distribuído pelos sites do plano, fica em torno de R$85 por site. A gente vê no suporte da FULL que esse é o ponto de virada para agências que paravam de pagar licenças soltas por cliente e migravam tudo para o bundle. O mesmo plano cobre Rank Math PRO e WP Rocket, então o Loop Builder não chega sozinho. Conheça os planos da FULL para comparar o avulso com o bundle.

Quando o loop builder nativo não basta

O Loop Builder nativo cobre a maior parte dos casos de lista, mas trava em 2 cenários relacionais complexos. O primeiro é listar posts filtrados por um campo personalizado com relação entre dois tipos de conteúdo; o segundo é construir filtros AJAX dinâmicos na frente da grade, que atualizam a lista sem recarregar a página.

Nesses dois casos o Loop Builder nativo fica curto e você precisa do Crocoblock JetEngine, que adiciona meta queries avançadas e relacionamentos que o nativo não expõe. Em , montar um diretório com filtros cruzados exigia JetEngine; em , o nativo melhorou as taxonomias, mas relações complexas ainda pedem o Crocoblock. Para cabeçalhos e rodapés dinâmicos no mesmo ecossistema, veja como o JetThemeCore monta cabeçalhos personalizados.

Erro comum: Loop grid lento em sites grandes

O maior gargalo do Loop Builder em produção é a query sem limite em arquivos grandes, acima de 2.000 posts. Loop Grid com Query por Post Type, sem filtro de taxonomia e sem paginação, gera uma consulta pesada que estoura o tempo de geração da página e retorna erro 504 só na primeira visita do dia.

Esse é o sintoma mais comum: a página carrega em branco quando o cache ainda não foi gerado. Outro caso silencioso é um loop item template com tag dinâmica de um campo ACF inexistente, somado a cache de página ativo, que serve por horas um card renderizado vazio sem erro visível para o administrador. A correção na maioria dos casos é limitar a query a 6-9 itens por página, ativar a paginação e confirmar que toda tag dinâmica aponta para um campo que existe.

Acelere o loop builder no plano PRO da FULL

O Loop Builder rende mais quando o ambiente acompanha a query, e por R$849,90 o plano PRO da FULL entrega os 3 plugins que sustentam esse cenário. A gente vê no suporte da FULL que listas dinâmicas pesadas combinam melhor com cache de página e otimização de banco, recursos que já vivem no mesmo bundle do Elementor PRO.

Nesse plano você ativa o Elementor PRO, o WP Rocket e o WP-Optimize juntos, o que distribui o custo em cerca de R$85 por site quando o plano cobre vários projetos. O WP Rocket guarda em cache o HTML do Loop Grid já montado, e o WP-Optimize enxuga o banco que a query consulta. Para quem decide entre licença avulsa e bundle, vale ver se o Elementor PRO vale a pena no seu cenário antes de fechar. Compare nos planos da FULL.

Perguntas frequentes sobre o loop builder do Elementor

O que é o Loop Builder do Elementor e para que serve?

O Loop Builder é o recurso do Elementor PRO que cria listas dinâmicas a partir de um único card de design. Você desenha um item com tags dinâmicas e o Loop Grid replica esse layout para cada post ou produto retornado pela query. Serve para montar blogs, catálogos WooCommerce e diretórios sem repetir o layout manualmente em cada entrada.

É possível usar o Loop Builder sem instalar o Crocoblock?

Sim, o Loop Builder é nativo do Elementor PRO 3.8 ou superior e funciona sem nenhum plugin extra. O Crocoblock JetEngine só entra quando você precisa de meta queries avançadas, relações entre tipos de conteúdo ou filtros AJAX dinâmicos. Para listas simples de posts, produtos e taxonomias, o Loop Builder nativo resolve sozinho.

Por que o Loop Grid fica lento em sites com muitos posts?

O Loop Grid fica lento porque uma query sem filtro de taxonomia e sem paginação tenta carregar todos os itens do arquivo de uma vez. Em arquivos acima de 2.000 posts, isso dispara timeout de PHP na primeira carga, antes do cache existir. Limitar a query a 6-9 itens por página e ativar a paginação numérica resolve a maioria dos casos.

Qual a diferença entre Loop Grid e Loop Carousel?

O Loop Grid organiza os itens em uma grade fixa de colunas com paginação, ideal para navegar arquivos de blog e catálogos com muitos produtos. O Loop Carousel coloca os mesmos cards em um slider horizontal com setas, melhor para destacar poucos itens em pouco espaço vertical. A grade serve para varrer listas longas; o carrossel, para destaques rotativos.

Quanto custa o Elementor PRO com Loop Builder no bundle da FULL?

A licença avulsa do Elementor PRO parte de US$59 por ano por site. No plano PRO da FULL, por R$849,90, o Elementor PRO entra junto com outros 16 plugins premium, o que reduz o custo para cerca de R$85 por site quando o plano cobre vários projetos. Para quem mantém mais de um site, o bundle costuma sair mais barato que somar licenças avulsas.

Próximos passos para dominar listas dinâmicas

O Loop Builder é a ponte entre desenhar uma vez e publicar listas inteiras sem retrabalho, e ele recompensa quem domina a query antes do design. Comece por um arquivo de blog simples, depois evolua para catálogos WooCommerce e só então para campos personalizados. Quem está partindo do zero no editor ganha tempo lendo primeiro o tutorial de Elementor para iniciantes antes de mexer no Loop Builder. Para continuar aprendendo, o FULL Academy reúne os tutoriais, guias e reviews de WordPress em um só lugar, e o guia Domine o Elementor organiza o caminho do básico ao avançado.

Legenda: o loop item template é desenhado uma única vez e replicado pelo Loop Grid em cada post da query.

Compartilhe este conteúdo

Equipe Full Services

A FULL. é especialista em WordPress e oferece plugins premium com licenças originais, suporte técnico e instalação facilitada. Já ajudou mais de 25 mil clientes a impulsionar seus sites com performance, segurança e praticidade.

AI Shopping no Brasil: Como a IA decide quem vende

O AI shopping no Brasil já redesenha como o consumidor

A shortlist da IA: Como 3-5 marcas são escolhidas antes do clique

Entender a shortlist da ia como marcas são escolhidas é

Como fazer um AI visibility audit passo a passo

Se você não sabe se o ChatGPT recomenda a sua
Componentes

Hero Sections

30 componentes

Seções de CTA

14 componentes

Login

14 componentes

Blog

14 componentes

Cabeçalhos

24 componentes

Seções de FAQ

53 componentes

Cadastro

53 componentes

Blog individual

53 componentes

Rodapés

28 componentes

Seções de contato

27 componentes

Seções de preços

27 componentes

Faixas

27 componentes

Portfólio

16 componentes

Seções de equipe

12 componentes

Números

12 componentes

Logotipos

12 componentes

Uma nova era para o WordPress.

A FULL Services redefine o CMS com uma arquitetura modular que transforma o WordPress em um motor de crescimento digital. 

Painéis personalizados

Um novo nível de controle para o WordPress. Acompanhe métricas, automações e evolução do seu site em um único painel visual.

A força por trás de grandes marcas

Para agências, estúdios e profissionais independentes que desejam oferecer soluções de alto nível com sua própria marca.