Como construir uma grade de portfólio com o construtor de loops do Divi 5

Uma grade de portfólio é uma maneira simples e eficaz de mostrar seu trabalho. Com o construtor de loops da Divi 5, você pode projetar um layout de cartão reutilizável e deixá-lo preencher automaticamente o seu conteúdo diretamente no construtor visual.

Ao contrário dos módulos de uso único, o Loop Builder permite usar qualquer elemento Divi, definir uma consulta para postagens ou tipos de postagens personalizados e produzir uma grade responsiva que herda seus estilos globais. Neste tutorial, criaremos uma grade de portfólio passo a passo usando os projetos Tipo de postagem personalizado.

Entendendo o construtor de loops do Divi 5

O Loop Builder da Divi 5 é um novo recurso que permite criar facilmente layouts de conteúdo dinâmico e emoldores. Ao contrário dos módulos de blog ou portfólio, o Loop Builder permite que você faça um loop facilmente de qualquer elemento Divi para exibir postagens, termos ou usuários. Isso significa que você pode criar um único modelo que aparece automaticamente com o conteúdo do seu site WordPress.

O Loop Builder suporta vários tipos de conteúdo, incluindo tipos de postagens personalizados (CPTs), produtos WooCommerce e campos personalizados avançados (ACF), permitindo que você exiba seu portfólio exatamente como deseja.

Principais benefícios do construtor de loops

Graças às suas opções de personalização robustas, o Loop Builder é um ajuste perfeito para criar grades de portfólio. Aqui estão seus recursos de destaque:

• Flexibilidade para projetar modelos de loop personalizado: com o Loop Builder, você não está confinado a layouts predefinidos. Você pode usar qualquer módulo Divi para projetar um modelo exclusivo para cada item do portfólio.
• Consultas personalizáveis: o Loop Builder permite que você ajuste qual conteúdo aparece em sua grade. Filtre por categoria, tipo de postagem ou campos personalizados para exibir apenas os itens desejados em seu pedido preferido.
• Integração de conteúdo dinâmico: extrair perfeitamente dados de conteúdo dinâmico, como títulos de projeto, imagens em destaque, descrições ou metadados personalizados para tornar cada item de portfólio envolver.

Esses recursos tornam o Loop Builder do Divi 5 uma ferramenta ideal para criar um portfólio profissional e totalmente personalizável e fácil de navegar.

Construindo um portfólio com loop construtor

Usaremos os projetos internos da Divi (CPT) para criar um portfólio com o Loop Builder. O CPT dos Projetos foi projetado para mostrar conteúdo no estilo do portfólio, tornando-o a escolha ideal para o nosso layout. Embora o Divi ofereça um módulo de portfólio, usaremos o Loop Builder, porque ele nos oferece opções ilimitadas para criar um portfólio exclusivo.

Comece adicionando uma nova linha à sua página. Para isso, usaremos um layout de 3 colunas .

Adicionaremos um módulo de título à primeira coluna .

Digite um título ou use o Divi AI para gerar um para você.

Navegue até a guia Design , escolha Inter para a fonte do cabeçalho , leve para o peso da fonte do cabeçalho , defina o tamanho do texto do cabeçalho como 2em e atribua uma altura da linha de cabeçalho 1.3EM .

Agora, vamos construir nosso loop. Navegue até a 2ª coluna da nossa linha.

Localize a guia Loop , expanda -a e ative a alternância do elemento de loop .

Em seguida, escolha o tipo de consulta . Para este tutorial, usaremos os projetos de CPT interno da Divi. Em Tipo de postagem , selecione Projetos . Queremos mostrar todos os projetos, então deixaremos tudo como está.

Você pode escolher o pedido por configurações, postagens por página e deslocamento de postagem . Como nossa primeira coluna contém um módulo de título , definiremos as postagens por página como 8 . Dessa forma, a saída será uniforme em nossa linha de três colunas .

Você notará que nosso loop está tentando empilhar todas as colunas. Para corrigir isso, precisamos ir para as configurações da linha. Navegue até a linha de 3 colunas , clique na guia Design e localize as configurações de layout .

Expanda a guia Configurações de layout . Localize a configuração de embrulho de layout e selecione Wrap . Isso envolverá nosso loop de volta em 3 colunas.

Estilizando a coluna de loop

Agora que as configurações de loop estão no lugar, é hora de estilizar nossas colunas. As configurações de estilo que escolhemos aqui afetarão as colunas restantes no loop. Na linha de 3 colunas , clique na 2ª coluna e clique na guia Design . Navegue até o suspensão da borda e atribua um raio de borda de 15px à coluna. Sob estilos de fronteira , adicione uma largura de borda de 1px e use #000000 como a cor da borda .

Adicione conteúdo ao loop

Podemos começar a adicionar conteúdo ao loop com os estilos da coluna atribuídos. Clique para adicionar um módulo de imagem na 2ª coluna . Uma vez adicionado, cada coluna dentro do loop mostrará um espaço reservado para imagem.

Usaremos o poder de conteúdo dinâmico da Divi 5 para atrair a imagem em destaque do nosso projeto. Passe o mouse acima da imagem para revelar os ícones. Clique no ícone de conteúdo dinâmico para continuar.

Escolha a imagem em destaque do loop quando as opções aparecerem.

Nosso loop colocará a imagem em destaque de cada projeto diretamente em nosso loop de portfólio.

Em seguida, adicione um módulo de título à 2ª coluna sob a imagem em destaque . Isso será usado para o título do projeto . Repita as etapas acima para adicionar o título . No entanto, escolha o título de postagem do loop desta vez.

Na guia Design , selecione H3 para o nível de cabeçalho , inter para a fonte do cabeçalho , o centro para o alinhamento do texto e 20px para o tamanho do texto.

Por fim, adicionaremos um botão que links a cada projeto . Adicione um módulo de botão à 2ª coluna abaixo do título da postagem . Clique no ícone de conteúdo dinâmico no URL do link do botão e selecione Link Loop .

Alterne para a guia Design e defina o alinhamento no centro .

Expanda as configurações suspensas do botão e habilite o uso de estilos personalizados para o botão . Digite as seguintes configurações de design:

• Fundo do botão: #000000
• Raio da borda do botão: 15px
• Largura da borda do botão: 0px
• Fonte do botão: inter
• Button Texto Cor: #ffffff
• Tamanho do texto do botão: 16px
• Margem: 15px em baixo
• Preenchimento: 15px superior e inferior, 35px esquerda e direita

É isso! Como você pode ver, criar um loop com o Divi 5 é um processo direto.

Mudança de estilos com loop construtor

Editar os estilos do seu loop é tão simples quanto criar o loop em si. Digamos que você queira trocar de um tema claro para um sombrio para o seu loop. Fazer alterações no design leva apenas alguns segundos. Você pode alterar a cor de fundo da seção e fazer alterações nos elementos de loop individual com alguns cliques.

Não há necessidade de editar itens de loop individualmente. Como todos estão conectados, você só precisa editar módulos uma vez e o Divi 5 aplicará os estilos atualizados automaticamente em todos os módulos do loop.

Você pode adicionar mais módulos ao loop, como o trecho do projeto , a data de publicação, a contagem de comentários , a biografia do autor , os campos personalizados e muito mais.

Se você deseja apertar o espaço ao redor dos itens do seu loop, poderá ajustar a lacuna vertical nas configurações de linha e coluna . Isso controla a quantidade de espaço entre cada linha e módulos individuais usando o sistema de layout do Flexbox da Divi 5, permitindo que você aperfeiçoe a aparência do seu loop.

Testando e refinando o loop do portfólio

Depois de criar um portfólio, é hora de testá -lo para garantir que tudo funcione conforme o pretendido. Comece visualizando a grade no front end usando o link de visualização na barra superior do Visual Builder.

Verifique se o título de cada projeto, a imagem em destaque , o trecho e o link de loop estão retirando corretamente dos projetos CPT. Garanta que nenhum espaço reservado seja elementos quebrados que aparecem.

De volta ao Visual Builder, verifique para garantir que o layout se adapte corretamente usando os pontos de interrupção responsivos personalizáveis ​​do Divi 5. Por padrão, o Divi 5 oferece 3 pontos de interrupção - um para desktop , tablet e telefone -, mas você pode ativar até 7 clicando no menu Ellipsis no meio da barra superior do Visual Builder.

Navegue por cada ponto de interrupção , verifique o layout e faça ajustes conforme necessário.

Para tornar o layout mais amigável para dispositivos móveis, você pode usar a configuração da estrutura da coluna de mudança do Divi 5 para alterar o número de colunas exibidas em dispositivos menores.

Melhores práticas e dicas

Para garantir que você aproveite ao máximo o Divi 5 e o Loop Builder, aqui estão algumas práticas recomendadas a seguir ao criar seu portfólio.

1. Garanta a consistência do projeto com variáveis ​​de design

O recurso de design do Divi 5 permite definir tipografia, cores e espaçamento consistentes na página do portfólio. No Visual Builder, defina variáveis ​​globais para fontes, cores e preenchimento/margens para garantir que todos os itens do portfólio pareçam uniformes. Para criar variáveis , clique no ícone do Variable Manager no menu lateral esquerdo do Visual Builder.

A partir daí, você pode atribuir fontes globais , cores e muito mais, garantindo que seus designs sejam consistentes em todo o site, não apenas na página do portfólio.

2. Considere a acessibilidade

A acessibilidade garante que todos os usuários, incluindo aqueles com deficiência, possam navegar e aproveitar seu trabalho. Certifique -se de adicionar texto alternativo para imagens enquanto as carrega na galeria de mídia. Isso ajuda a tela dos leitores a transmitir o conteúdo para usuários com deficiência visual.

Também é bom selecionar cores com taxas de contraste suficientes para garantir a legibilidade para os usuários com deficiências visuais.

3. Salvar e reutilizar modelos

Depois de aperfeiçoar o modelo do Loop Builder, salve-o na biblioteca Divi clicando com o botão direito do mouse na seção do portfólio e selecionando Salvar na biblioteca . Dê um nome descritivo para facilitar a referência. Isso permite que você reutilize o modelo em outras páginas sem reconstruir do zero.

Para usar o modelo em outros sites, você pode salvá -lo para o Divi Cloud e importá -lo para outros projetos da Web com um clique.

A economia de modelos otimiza seu fluxo de trabalho e garante que você possa implantar rapidamente grades de portfólio profissional para projetos futuros.

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!

Experimente o construtor de loops no Divi 5 hoje

O construtor de loops do Divi 5 facilita a criação de grades de portfólio dinâmico, permitindo mostrar seu trabalho com estilo e eficiência. Ao alavancar os projetos internos CPT e os poderosos recursos do Loop Builder, você pode criar grades flexíveis e totalmente personalizáveis ​​que puxam dinamicamente o conteúdo do seu projeto. Sua flexibilidade permite projetar layouts exclusivos usando qualquer módulo Divi, configurar consultas para exibir projetos específicos e criar grades responsivas que brilham em qualquer dispositivo.

Você está pronto para dar vida ao seu portfólio? Mergulhe no mais recente lançamento público público do Divi 5 e experimente o layout do seu portfólio. Seja você um freelancer que mostra projetos ou uma empresa destacando o trabalho do cliente, o Loop Builder permite criar facilmente uma tela profissional e dinâmica.