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
















