Como usar o módulo de construtor de loops e paginação do Divi 5 juntos

As listas estáticas de conteúdo de postagem são boas se você estiver mostrando um conjunto selecionado e limitado dessas postagens. Mas, muitas vezes, você deseja que os usuários acessem mais conteúdo do que o seu loop original mostra. Você deseja decidir quanto conteúdo é carregado inicialmente e oferecer aos leitores uma maneira clara de se mover entre lotes. É aí que o construtor de loops e o módulo de paginação do Divi 5 fazem um par perfeito.

Esta postagem o levará como cada um funciona e depois mostrará como conectá -los. No final, você saberá como criar layouts em loop com a paginação adequada.

Conheça o construtor de loops do Divi 5

O construtor de loops é uma das maiores atualizações do Divi 5. Dá -lhe liberdade que o antigo módulo de blog nunca poderia. Qualquer elemento pode se tornar um contêiner "loop". Isso significa que o Divi o repetirá automaticamente para cada tipo de postagem, produto ou postagem personalizado que corresponde à sua consulta.

Em vez de ficar preso a uma lista pré-projetada de postagens, você cria um item de "modelo" como o loop. O Divi usa isso para cada resultado, trocando em conteúdo dinâmico da consulta do loop. Isso pode ser:

• Títulos retirados dos dados de postagem
• Imagens em destaque
• Campos personalizados
• Links para postagens ou produtos completos

Você pode usar qualquer módulo para exibir esses dados, não apenas um blog específico. Deseja um módulo Blurb sofisticado mostrando suas últimas listagens de cursos? Feito. Precisa de um layout de cartão de produto personalizado para itens de WooCommerce? Também feito.

É flexível porque você está construindo o design e a estrutura de conteúdo. Divi lida com a repetição.

Mudar do módulo do blog para o Loop Builder significa passar de um modelo padrão para um sistema de layout totalmente personalizável. Eu realmente gostei de construir com ele e sei que você também!

Conhecer o módulo de paginação

A paginação é uma maneira chique de dizer "divida os resultados em páginas". Em vez de despejar todos os itens em uma única página, você os divide em conjuntos menores. Isso ajuda com:

• Tempos de carregamento da página
• Legibilidade
• Varredibilidade

O módulo de paginação no Divi 5 faz exatamente isso, mas com alguma integração inteligente. Não está ligado apenas às postagens do blog. Em vez disso, ele pode se conectar a qualquer loop que você tenha criado na página.

Funciona adicionando dois elementos de navegação - presos e próximos links - cujas etiquetas você pode personalizar. Se houver itens mais antigos após o conjunto atual, "mais antigo" (ou o texto escolhido) estará ativo. Se houver itens mais novos, "mais recente" estará ativo.

Construindo um layout de loop + paginação

Vamos percorrer a configuração completa. Este exemplo assume que você deseja um loop personalizado com a paginação sob ele. Aqui está o layout flexível que criei que exibirá nosso loop. Você pode baixar o layout totalmente construído abaixo.

Observe que o cartão está definido como ~ 50% de largura e crescimento flexível; portanto, quando uma placa loop está em uma linha flexível por si só, ela se tornará largura total dentro de seu contêiner.

Etapa 1: Crie o contêiner de loop

Adicione uma seção à sua página. Dentro dele, adicione o (s) módulo (s) que você deseja repetir. Este pode ser um único módulo (como uma sinopse) ou um layout mais complexo de vários módulos em uma coluna ou grupo.

Com o seu contêiner selecionado, abra suas configurações e ative a opção Loop .

Escolha sua fonte de dados. Esta é a "consulta" que o loop será executado.

Primeiro, escolha o tipo de consulta. Dependendo da configuração do seu site, você pode ver estas opções:

• Tipo de posta
• Termos (categorias e taxonomias)
• Usuários (retorne uma lista de usuários do site, como autores)
• Campo de repetidor (um campo personalizado criado por um plug -in para criar um loop dentro de um loop)

Em seguida, dependendo do tipo de consulta que você escolheu acima, você terá a chance de ser mais específico. Selecionar "Tipo de postagem" pode permitir que você use os tipos de postagem como:

• Postagens do blog
• Projetos
• Produtos
• Qualquer que seja o CPT que você tenha feito sob medida para si mesmo

A partir daí, você pode ficar ainda mais específico com o que deve aparecer em seu loop. Você pode:

• Inclua itens com uma categoria ou tag específica
• Exclua itens com uma categoria ou tag específica
• Inclua itens específicos (por ID post)
• Excluir itens específicos (por ID post)
• Crie sua própria meta consulta (útil para criar inclusões/exclusões com base em dados de campo personalizados)
• Defina a ordem das consultas correspondentes (como alfabético e descendente)
• Itens por valor da página controla quantos aparecem no loop
• Offset post, caso você queira iniciar seu loop mais tarde no ciclo
• Ignore posts pegajosos

É assim que nosso exemplo olha para este ponto. Criamos o loop e o designamos ao nosso tipo de postagem no blog. Eu defino o limite de exibição para 3.

Agora, devemos atribuir os vários campos de texto e itens que queremos hiperlink com o conteúdo de loop dinâmico.

Etapa 2: Adicione conteúdo dinâmico dentro do loop

Nossa próxima tarefa é clicar em cada um dos módulos do loop e substituir texto estático ou imagens por campos de conteúdo dinâmico. Por exemplo:

• Em um módulo de texto, escolha "Post Title" no seletor de conteúdo dinâmico
• Em um módulo de imagem, você pode escolher “Imagem em destaque”
• Em um módulo de botão, defina o link para "Post URL"
• Em todo o contêiner em loop, defina também o link para "Post URL"

Isso diz ao Divi para puxar o conteúdo certo para cada item em loop.

Lembre -se - tudo dentro do loop é repetido para cada resultado. Mantenha o conteúdo não loop (como títulos, anúncios ou CTAs) fora dele. Se você tiver um conteúdo no loop que não estiver conectado com dados dinâmicos, todos os itens do loop exibirão isso como é (como o texto "Leia →" no canto inferior direito do cartão de exemplo).

Etapa 3: adicione o módulo de paginação

Abaixo da seção de loop, adicione uma nova linha. Insira o módulo de paginação . Nas configurações do módulo, localize o campo de destino . Use -o para selecionar seu loop em uma lista suspensa de loops na página. Isso vincula os controles de paginação a esse loop específico. Dica profissional: se você usar etiquetas de administrador, é mais fácil selecionar o destino certo. Isso vale para as interações também.

Personalize os rótulos para "anterior" e "próximo". Você pode usar "postagens mais antigas / postagens mais recentes", "traseiro / avanço" ou até "← / →" para um estilo mínimo.

A chave é que o módulo de paginação deve ficar fora do loop que controla. Isso e certificando -se de que ele seja atribuído ao destino certo (se você tiver vários loops na mesma página/modelo).

Etapa 4: teste a interação

Salve sua página e visualize -a. Clique em "mais antigo" para ir para o próximo conjunto de itens de loop.

Observe como o URL muda com um parâmetro de consulta que identifica a página do loop. Observe também que apenas o teor de loop abreteu/muda - cabeçalhos, rodapés e barras laterais devem permanecer iguais.

Obtenha este layout de loop

Deseja dissecar este layout e ver como as coisas são construídas para si mesmo? Baixe aqui!

Depois de descompactar sua pasta, navegue até a biblioteca Divi para fazer o upload do arquivo. Depois de enviar, você poderá adicionar a seção a qualquer página em que estiver trabalhando.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Desfrute de um divi mais dinâmico

O construtor de loops e o módulo de paginação do Divi 5 são um grande salto para a frente em flexibilidade. O Loop Builder libera você dos projetos rígidos de módulos mais antigos, permitindo que você construa seus próprios layouts repetidos com conteúdo dinâmico. O módulo de paginação mantém esses layouts rápidos e gerenciáveis, dividindo-os em pedaços fáceis de usar.

O construtor de loops e o módulo de paginação, emparelhado com outros novos recursos do Divi 5 (Flexbox, interações, controles de cores HSL), é mais poderoso do que nunca. Você pode fazer alguns designs de páginas incríveis com tudo isso.

Depois de criar seu primeiro loop paginado, você verá como é fácil reutilizar a abordagem em blogs, grades de produtos, portfólios ou qualquer tipo de conteúdo que você precise organizar.