Deseja exibir conteúdo dinâmico, como postagens, produtos ou tipos de postagens personalizados em layouts totalmente personalizados - sem tocar em uma linha de código? O módulo Loop no Beaver Builder torna isso possível.

Introduzido no Beaver Themer 1.5 e Beaver Builder 2.9, o módulo de loop é uma ferramenta poderosa que permite projetar layouts repetíveis usando módulos padrão do Beaver Builder. Esteja você construindo um blog, portfólio, listagem de eventos ou loja WooCommerce, este módulo oferece controle de design completo com conteúdo dinâmico em seu núcleo.

Neste guia, quebraremos como usar o módulo Loop para criar layouts modernos e dinâmicos que aprimorem o design, o desempenho e a flexibilidade do seu site.

Qual é o módulo de loop?

O módulo de loop é um contêiner flexível que atravessa o conteúdo consultado e o exibe usando um layout que você cria. Em vez de confiar nos modelos padrão do WordPress, você pode criar seus próprios designs personalizados - completos com módulos, conexões de campo e lógica condicional.

O módulo Loop não se limita a postagens de blog ou tipos de postagens personalizados - pode lidar com uma ampla gama de conteúdo dinâmico. Aqui estão algumas maneiras poderosas de usá -lo para criar layouts personalizados e aprimorar seu site:

• Categorias ou tags de WooCommerce - Exiba categorias ou tags de produtos relacionados em páginas de produtos individuais usando a fonte de consulta de taxonomias.
• Grade de conteúdo personalizado - mostre conteúdo dinâmico como membros da equipe ou depoimentos usando a fonte de consulta do ACF Repeater em páginas como "Conheça a equipe" ou listagens de serviços.
• Postagens relacionadas - Recurso conteúdo relevante do blog em páginas de postagem única com a fonte de consulta de relacionamento com ACF, ajudando a aumentar o envolvimento e reduzir as taxas de rejeição.

Cada item no loop usa seu design personalizado e extrai dados dinâmicos, como o título da postagem, a imagem em destaque, o trecho e muito mais.

Principais recursos do módulo de loop

O módulo de loop está repleto de recursos que o tornam ideal para construir páginas flexíveis ricas em conteúdo:

• Conteúdo dinâmico de consulta de qualquer tipo de postagem (padrão ou personalizado)
• Use qualquer módulo de construtor de castores dentro do layout do loop
• Conecte os campos dinamicamente (por exemplo, título, imagem em destaque, meta post)
• Escolha entre vários tipos de layout, como grade, lista ou carrossel
• Adicione filtros e paginação para melhorar a experiência do usuário

Essa combinação de personalização e automação permite criar layouts avançados sem escrever HTML, PHP ou CSS.

Como construir um loop personalizado

Criar um layout de conteúdo personalizado com o módulo de loop é simples, flexível e não requer código. Se você deseja começar com um layout pronto ou construir o seu próprio a partir do zero, o módulo de loop fornece controle total sobre como seu conteúdo dinâmico é exibido.

Opções de layout predefinidas do módulo de loop

Quando você arrasta o módulo de loop pela primeira vez para a sua página, você será solicitado a escolher entre os seguintes layouts predefinidos: Lista, colunas, categorias e categorias de produtos.

Os layouts predefinidos oferecem uma vantagem, oferecendo módulos pré-organizados que você pode personalizar totalmente. Ajuste as configurações do loop para atender às suas necessidades, reorganizar ou remover os módulos existentes e adicione novos para ajustar o layout. Esses designs prontos ajudam você a criar um conteúdo polido e responsivo exibe mais rapidamente.

Construa do zero com um layout em branco

Prefere criar algo totalmente personalizado? Escolha a opção de layout em branco e siga estas etapas:

1. Adicione o módulo Loop à sua página ou postagem no editor do Beaver Builder.
   
2. Selecione o layout em branco para começar com um contêiner de loop vazio.
   
3. Definir as configurações do loop para definir qual o conteúdo que você deseja exibir - como postagens de blog, produtos de wooCommerce, campos de repetidores do ACF ou tipos de postagens personalizadas.
   
4. Arraste os módulos para o contêiner de loop para construir seu layout a partir do zero. Adicione todos os módulos de construtores de castores necessários, como títulos, fotos, ícones, botões e muito mais.
   
5. Use conexões de campo para obter conteúdo dinâmico, como títulos, imagens, preços ou campos personalizados para cada item de loop.
   
6. Organize e estilize seus módulos usando as ferramentas de arrastar e soltar o Beaver Builder.

Essa configuração funciona muito bem para usuários ou designers avançados que desejam controle total.
Use -o para criar layouts de blog personalizados, grades de produtos ou diretórios de equipe - não é necessário código.

Use o módulo da caixa para controle de layout

O módulo da caixa é um companheiro essencial para o módulo de loop quando se trata de precisão de layout e flexibilidade de estilo.

• Enrole o módulo de loop dentro de um módulo de caixa para gerenciar a largura, preenchimento, margem e estilo de fundo do contêiner externo. Isso oferece controle total sobre como o conteúdo em loop fica dentro do layout da página geral.
• Aninhe um módulo de caixa dentro do loop para agrupar o conteúdo interno de cada item de loop. Essa configuração permite que você aproveite as técnicas avançadas de layout, como Grid CSS ou Flexbox . Por exemplo, você pode criar um layout de duas colunas dentro de cada item de loop. Coloque uma imagem à esquerda e o texto à direita - com controle completo sobre o espaçamento e o alinhamento.

O uso do módulo de caixa estrategicamente ajuda a manter designs limpos e responsivos, enquanto aprimora a estrutura visual do seu conteúdo dinâmico.

Configurações de consulta: Qual conteúdo será exibido?

A guia Conteúdo no módulo Loop permite controlar como o conteúdo do loop é consultado e exibido como:

• Escolha o tipo de postagem (postagens, páginas, CPTs, produtos, etc.)
• Filtrar por taxonomia, categoria, tags ou autor
• Exibir conteúdo com base no status da postagem ou data
• Set Offsets, classificação de classificação e limites de postagem

Isso inclui fonte de consulta, número de itens a serem exibidos, pedidos e opções avançadas de filtro.

Paginação

A guia Paginação permite controlar como o conteúdo é dividido e exibido em várias páginas - ideal para melhorar a navegação e a experiência do usuário.

• Números : exibe links numerados abaixo de suas postagens. Clicar em um número carrega uma nova página com o conjunto correspondente de postagens.
• Scroll : carrega automaticamente postagens adicionais à medida que o usuário rola, mantendo o conteúdo em uma única página.
• Nenhum : desativa a paginação. Use esta opção para exibir um número limitado de postagens - como os três mais recentes - sem controles de navegação.
• Postagens por página : define quantos itens aparecem por página. O padrão é 10.

Essas opções ajudam a adaptar a entrega do conteúdo às metas de layout e interação do usuário.

Dados dinâmicos com conexões de campo

Dentro do layout do seu loop, você pode usar conexões de campo para puxar dinamicamente os dados postais, como:

• Título de postagem
• Imagem em destaque
• Trecho ou conteúdo completo
• Campos personalizados
• Autor, data, categoria, tags

Qualquer módulo que suporta conteúdo dinâmico (como cabeçalho, foto, botão, html etc.) pode ser conectado aos dados de postagem.

Estilo avançado e lógica condicional

Deseja estilizar diferentes tipos de postagens de maneira diferente ou mostrar/ocultar elementos com base nas condições? O módulo Loop suporta classes de lógica condicional e CSS personalizadas .

Por exemplo, você pode:

• Ocultar botões se um campo personalizado estiver vazio
• Adicione crachás para postagens em destaque
• Aplique cores ou estilos diferentes com base na categoria de postagem

Isso permite que você ajuste a experiência do usuário e mantenha uma marca consistente em seu conteúdo.

Casos de uso do módulo de loop do mundo real

O módulo Loop no Beaver Builder é incrivelmente versátil, permitindo exibir conteúdo dinâmico em layouts que correspondem às suas necessidades de design. Aqui estão algumas maneiras poderosas de usá -lo:

• Arquivos do blog: Crie uma grade ou lista visualmente envolvente de suas postagens mais recentes com imagens e trechos em destaque.
• Produtos WooCommerce: mostre produtos WooCommerce em uma grade personalizável com preços dinâmicos, imagens e botões adicionais.
• Mostra de portfólio: destaque seus projetos ou estudos de caso com layouts flexíveis que refletem o estilo da sua marca.
• Depoimentos: Exiba os depoimentos do cliente de um tipo de postagem personalizado e estilize -os para corresponder ao design do seu site.
• Listagens de eventos: liste os próximos eventos ou webinars cronologicamente, com datas, locais e descrições de eventos.
• Membros da equipe: Apresente sua equipe com fotos, nomes, títulos e BIOS - prenda cada item para uma página de perfil detalhada.
• Listagens imobiliárias: Apresentar listagens imobiliárias com imagens de propriedades, preços e detalhes importantes usando um tipo de postagem personalizado.
• Catálogo do curso: Exiba um catálogo de cursos ou workshops on -line, completo com títulos, descrições e links de inscrição.
• Listagens de empregos: Crie um quadro de empregos personalizado com listagens dinâmicas que incluem títulos, locais e resumos breves de função.
• Índice de receitas: apresenta uma coleção de receitas com imagens, títulos e descrições - ideal para blogueiros de alimentos.

Esses casos de uso demonstram a versatilidade do módulo de loop no Beaver Builder. Ele pode ser usado em vários setores e sites, ajudando você a criar layouts de conteúdo dinâmico, envolvente e personalizado.

Pensamentos finais: Por que usar o módulo Loop?

O módulo Loop no Beaver Builder fornece o poder de criar layouts dinâmicos totalmente personalizados com facilidade. Esteja você construindo um blog, uma loja ou um diretório de conteúdo complexo, este módulo permite controlar como seus dados são exibidos-enquanto mantém o seu fluxo de trabalho visual e sem código.

Se você está falando sério sobre a criação de sites modernos e personalizados do WordPress com o Beaver Builder, o módulo de loop é essencial no seu kit de ferramentas. Explore a documentação do módulo de loop completo aqui.