Como criar um loop de postagem de blog personalizado com o Divi 5's Loop Builder

Sua marca não deve ser restringida por um layout estático; portanto, pretendemos fornecer total flexibilidade à medida que o Divi 5 continua a se desenvolver. O novo construtor de loops do Divi 5 é um grande passo nessa direção; Ele permite projetar um item uma vez e lop -o em grades ou listas dinâmicas.

Neste tutorial, mostraremos como configurar um loop de postagem de blog personalizado. Vamos projetar a listagem, conectar campos dinâmicos, definir a consulta e refinar o layout para uma grade ou lista limpa. Vamos lá!

O que é o construtor de loops do Divi 5

Com o Loop Builder da Divi 5, você cria um único layout de "cartão" no Visual Builder usando quantos módulos Divi quiser e, em seguida, o Divi o loop para cada item que você escolhe exibir.

Inscreva -se no nosso canal do YouTube

Ative o elemento loop em uma coluna, defina uma consulta (postagens, tipos de postagens personalizados, como projetos, termos ou usuários) e mapear campos dinâmicos, como títulos, imagens em destaque, categorias, campos personalizados e botões. Você pode reordenar elementos, controlar o espaçamento e deixar tudo herdar seus estilos globais.

O resultado é uma listagem responsiva e reutilizável que corresponde ao seu sistema sem a necessidade de plugins extras ou código personalizado.

Como funciona o construtor de loops

Você pode ativar o modo Loop em qualquer seção, linha, coluna ou módulo, abrindo sua guia Conteúdo e ativando o loop.

A partir desse ponto, o Divi repete automaticamente o elemento para cada postagem que corresponde às suas configurações.

Aqui é onde entra o controle real. Nas configurações de loop, você pode:

• Tipo de consulta: Escolha entre uma consulta básica ou uma meta, filtrando por categorias, tags, campos personalizados ou outros metadados.
• Tipo de postagem: Escolha o tipo de conteúdo para exibir, de postagens do blog a produtos e qualquer tipo de postagem personalizado.
• Inclua apenas postagens com termos específicos: mostre apenas postagens que correspondem a determinadas categorias, tags ou outros termos de taxonomia.
• Exclua postagens com termos específicos: remova as postagens que correspondem a categorias, tags ou termos selecionados.
• Inclua apenas postagens específicas: selecione Postagens individuais a serem incluídas.
• Exclua postagens específicas: ocultar postagens individuais que você não deseja no loop.
• Meta consulta: adicione condições de campo personalizadas para controlar o que aparece.
• Ordem por: Escolha se os resultados são classificados por data, título, pedido de menu ou valor de campo personalizado.
• Ordem: mostre resultados em ordem ascendente ou descendente.
• Postagens por página: Decida quantas postagens são exibidas antes da paginação.
• Post Offset: pule um certo número de postagens desde o início, útil para evitar duplicatas com seções em destaque.
• Ignore Postagens pegajosas: Escolha se as postagens pegajosas têm prioridade ou são tratadas como postagens normais.

Depois de definir sua consulta, o Divi preenche automaticamente cada cartão postal com o conteúdo certo, mantendo o layout e o estilo idêntico. Você se concentra inteiramente na aparência do cartão, e Divi lida com a população e a repetição. Com tudo controlado a partir de um único painel, são necessárias algumas configurações para manter o seu blog listado atualizado sem edições manuais.

Aprenda tudo sobre o construtor de loops do Divi 5

Criando uma postagem de blog personalizada com Divi 5

Construir um loop de postagem de blog personalizado com o Loop Builder tem duas partes. Primeiro, você cria o layout do cartão postal, escolhendo exatamente qual o conteúdo aparece e como ele parece. Em seguida, você coloca esse design dentro de um loop para que o Divi o repete automaticamente para cada postagem que deseja mostrar.

Vamos passar por isso passo a passo, começando com o layout do cartão e configurando o loop.

Antes de começar

Se você está passando do módulo do blog para o Loop Builder e já possui uma página de listagem de blogs, pode pular para criar o layout do seu loop. Caso contrário, aqui está a configuração rápida:

1. Adicione uma página do blog

No seu painel WordPress, vá para páginas> Adicionar novo , nomeie -o como "blog" e publique -o.

Esta página será o principal hub para suas postagens.

2. Defina a página do seu blog nas configurações do WordPress

Em Configurações> Reading , escolha uma página estática . Atribua sua página inicial à casa e sua nova página do blog para postagens.

Isso só é necessário se você usar uma página de listagem de blogs separada e blog.

3. Crie um modelo de construtor de temas

Em seguida, você criará um novo modelo para sua página de listagem de blogs. Se você já possui um, pode personalizar isso. Verifique se você está usando a versão mais recente do Divi 5 para acessar o Loop Builder.

No Divi> Theme Builder , clique em Adicionar novo modelo> Construir um novo modelo.

Atribua -o à página do seu blog e clique em Criar modelo.

Para projetar sua página de listagem de postagem do blog, clique em Adicionar corpo personalizado> Construir corpo personalizado.

Agora você entrará no Divi Builder, onde começaremos a criar o layout do loop.

1. Importar um layout

Começar com um layout pode economizar muito tempo e ajudá -lo a manter um design consistente desde o início. Para este tutorial, estou usando o layout da página do blog da agência de marketing para marca.

Você pode escolher o mesmo ou importar qualquer layout que lhe dê uma boa base para trabalhar. Quando estiver no seu modelo, você terá uma estrutura pronta que poderá se adaptar às suas necessidades, em vez de construir tudo a partir do zero.

2. Projete um cartão de postagem de blog

É aqui que a flexibilidade do Loop Builder realmente aparece. Em vez de estar preso no layout fixo do módulo do blog, você decide exatamente o que acontece no seu cartão postal e como ele é organizado.

Adicione uma nova seção ao seu modelo. Você pode escolher entre as estruturas pré-projetadas ou criar o seu próprio usando a opção de uma coluna.

Para este exemplo, vamos escolher uma seção de estrutura de três colunas .

Na primeira coluna, criaremos nosso cartão postal. Usaremos um grupo de módulos para manter todos os elementos.

Em seguida, adicione um módulo de imagem para a imagem em destaque, um módulo de título para o título da postagem e um módulo de texto para o trecho. Também adicionamos meta informações e um botão de leitura mais para que os visitantes possam clicar na postagem completa.

Depois que a estrutura básica estiver lá, personalize o design do cartão para que ele se encaixe na sua marca. Ajuste cores, fontes, espaçamento e quaisquer detalhes visuais exclusivos que o tornem seus.

3. Ativar embrulho de linha

Para garantir que seus cartões sejam exibidos ordenadamente em linhas em diferentes tamanhos de tela, você desejará ativar o embrulho flexível. Selecione a linha principal e abra a guia Design .

Vá para o layout. Verifique se o estilo de layout está definido para flexionar.

Habilite o embrulho de layout para que os cartões possam passar para uma nova linha quando necessário e escolha o alinhamento de embalagem que melhor se adapte ao seu design.

4. Ligue o loop

Agora vem o passo que torna tudo automático. Selecione a coluna do cartão.

Em seguida, ligue a opção Loop na guia Conteúdo . Depois que o loop estiver ativado, o Divi repetirá o design do seu cartão para cada postagem que atende às configurações de consulta.

Para este layout, eu defini:

• Tipo de postagem: Publicações
• Postagens por página: 10
• Ordem por: data
• Ordem: Descendente (mais recente primeiro)
• Post Offset: 0 (mostre tudo a partir do mais recente)
• Ignore Postagens pegajosas: Sim

Esses pequenos ajustes garantem que a grade exiba exatamente as postagens que você deseja, na ordem desejada. Você pode alterar esses valores a qualquer momento para adaptar o layout a diferentes necessidades.

5. Adicione conteúdo dinâmico

A etapa final para dar vida ao loop é conectar cada módulo em seu cartão a dados de postagem ao vivo. É isso que transforma um cartão estático em uma listagem automatizada e sempre atualizada. Por exemplo:

• Link o módulo de imagem à imagem em destaque da postagem.
• Ligue o módulo de cabeçalho ao título da postagem.
• Ligue o módulo de texto ao trecho post.
• Conecte o botão Leia mais ao URL da postagem.

Quando loop, o Divi substituirá o conteúdo dos espaços reservados pelos dados corretos para cada postagem no loop.

Para definir a imagem em destaque, abra o módulo de imagem, passe o mouse sobre a opção de imagem e clique no ícone de conteúdo dinâmico . Selecione a imagem em destaque do loop e todas as imagens relevantes se preencherão instantaneamente.

Repita isso para o título do post, data publicada, trecho e quaisquer outros campos que você queira exibir.

Ao clicar no ícone de conteúdo dinâmico para um módulo, verá toda a gama de opções específicas de loop. Você não está limitado a títulos e imagens; Você também pode exibir datas de publicação, datas modificadas, nomes de autor, contagens de comentários, categorias, tags e até campos personalizados.

Isso significa que seu cartão postal pode ser tão mínimo ou detalhado quanto você deseja. Crie uma grade limpa e focada na imagem, um layout rico em conteúdo ou até destaque os campos de nicho de postagem personalizados. Projete -o uma vez, e o Divi o mantém preciso e consistente em todo o loop.

6. Salve seu modelo e visualize

Quando tudo parecer certo, faça qualquer ajuste final e economize alterações no Divi Builder e no Theme Builder.

Visualize sua página para ver o loop em ação. Aqui está a página de listagem do blog final:

O módulo do blog tinha limites, o loop construtor não

O módulo do blog estava funcionando bem, então por que estamos pressionando para o construtor de loop? Porque "bom" significava corrigido. O módulo do blog bloqueou você em seu modelo, mas o Loop Builder oferece uma tela em branco. Você escolhe o layout, o pedido, o estilo e o divi, ele automaticamente.

Essa é a mudança real: você não está ajustando o modelo de outra pessoa, está projetando o seu. Vamos colocar isso em prática mais uma vez e projetar um layout diferente de uma estrutura típica do módulo de blog.

Primeiro, adicione uma linha e uma seção de uma coluna. Ajuste o dimensionamento e verifique se o embrulho flex e flexível está ativado para a linha.

Esta linha conterá seus cartões de blog. Agora, adicione outra linha aninhada dentro da coluna para criar a estrutura do seu cartão, com a imagem à esquerda e os metadados da postagem à direita.

Projete sua estrutura exatamente como você deseja, não é necessário seguir a sequência do módulo do blog. Deixe a coluna esquerda vazia por enquanto. Adicionaremos a imagem em destaque como a imagem de fundo da coluna.

Personalize seu cartão de listagem do blog.

Você também pode modificar a lacuna vertical do seu grupo de módulos na coluna direita no design> Layout> opção de lacuna vertical .

Em seguida, habilitamos a opção Loop . Selecione a primeira coluna na linha pai.

Novamente, lidamos com o conteúdo dinâmico. Começando com a imagem, vá para a opção de fundo da coluna esquerda e o restante será o mesmo.

Este é o seu loop de blog no estilo de lista. Agora, se você deseja converter isso em uma grade, basta alterar a largura da coluna. Como temos o embrulho flexível ativado na linha, os cartões embrulharão por conta própria à medida que mudamos o tamanho deles.

Se isso tornar suas imagens muito grandes, você poderá remover o trecho, alterar a estrutura da coluna da linha e até ajustar a lacuna horizontal para zero.

E assim, sua grade também está pronta.

Este exemplo é apenas um vislumbre do que o Loop Builder torna possível. O verdadeiro argumento é que você não está mais limitado a um punhado de layouts predefinidos. Cada parte do cartão postal é sua para organizar, estilo e reimaginar, e o Divi cuida de repeti -lo automaticamente. Essa flexibilidade é o que transforma um blog simples em algo que parece projetado para o seu site.

Use o módulo de paginação

Se você limitar as postagens por página em sua consulta de loop, provavelmente desejará uma maneira de os leitores verem o restante. Adicione o módulo de paginação abaixo da grade e defina seu loop de destino no elemento em que você ativou o loop. Para uma explicação completa, consulte como usar o Módulo de Builder e Paginação do Divi 5 juntos: Leia o tutorial.

Baixe os modelos de blog

Se você deseja experimentar grades dentro de um modelo de blog, faça o download dos modelos que foram usados ​​neste tutorial abaixo. Para importá -los, navegue para o seu Divi Theme Builder. Você poderá importá -los usando o ícone de importação/exportação no canto direito.

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!

Construa sua postagem de blog personalizada Loop no Divi 5 hoje

Antes do construtor de loops do Divi 5, criar um loop de postagem de blog verdadeiramente personalizado geralmente significava lutar com modelos rígidos ou escrever um código personalizado para todas as pequenas alterações. Agora, é um processo visual do início ao fim. Você projeta um cartão uma vez, vincula seus módulos aos dados de postagem ao vivo e deixa o Divi lidar com o resto.

Se você trabalha nos limites do módulo do blog, o Loop Builder é a atualização que você estava esperando. Experimente no seu próximo projeto e veja o quanto é mais fácil criar um blog (ou produto, evento ou listagem) que parece exatamente como você deseja!