Como alterar o número de colunas no módulo Divi Blog

O módulo de blog do Divi pode exibir postagens de blog em um layout de largura total ou de grade. Se você escolher o layout de grade, a quantidade máxima de colunas que você pode ter é três. Neste tutorial, vamos explorar a combinação do poder do CSS Grid com o módulo Divi Blog para criar qualquer número de colunas que você desejar. Com apenas alguns trechos de CSS, seu blog se transformará em um belo layout de grade de várias colunas. Além disso, as colunas serão responsivas de forma fluida com todos os tamanhos de navegador, portanto, não há necessidade de se preocupar em atualizar essas consultas de mídia ou configurações responsivas. Após a mágica do CSS Grid, você ainda terá as configurações internas do módulo de blog para projetar o blog visualmente sem mais CSS personalizado. Portanto, se você estiver procurando por mais colunas para o seu blog Divi, isso fará o truque e muito mais.

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

E aqui está um codepen demonstrando o CSS Grid Layout que adicionaremos ao módulo do blog.

Baixe o Layout GRATUITAMENTE

Para colocar as mãos no design do módulo de blog deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para ter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será “subscrito novamente” ou receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Boletim Divi e nós lhe enviaremos por e-mail uma cópia do pacote de layout de página de destino Divi, além de muitos outros recursos, dicas e truques incríveis e gratuitos do Divi. Acompanhe e você será um mestre Divi em pouco tempo. Se você já é inscrito, basta digitar seu endereço de e-mail abaixo e clicar 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 de layout Divi semanais gratuitos!

Inscreva-se em nosso canal no Youtube

Para importar o layout da seção para sua Biblioteca Divi, navegue até a Biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a guia de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Uma vez feito, o layout da seção estará disponível no Divi Builder.

Vamos ao tutorial?

Como alterar o número de colunas no módulo Divi Blog usando CSS Grid

Por que CSS Grid?

Existem muitas maneiras de fazer layouts de coluna para o módulo de blog usando CSS. Mas para este caso, faz mais sentido usar CSS Grid. A propriedade CSS Grid é uma maneira popular de criar layouts de grade previsíveis e responsivos para conteúdo com apenas algumas linhas de CSS. Com ele, podemos organizar todos os cartões do módulo do blog em uma grade totalmente responsiva. Em suma, oferece uma solução simples e completa para adicionar qualquer layout de coluna que você deseja para o seu blog Divi. Na verdade, também o usamos para construir um layout de grade para os módulos Divi.

Agora, vamos voltar nossa atenção para o módulo blog.

Configurando um módulo de blog com um layout de largura total

O módulo Divi Blog pode ser usado para adicionar um blog em qualquer lugar do seu site. Isso torna muito fácil criar uma página de blog no Divi. Tudo o que você precisa fazer é adicionar um módulo de blog à página usando o Divi Builder.

Para este tutorial, usaremos um modelo de página de blog pré-fabricado de um de nossos pacotes de layout gratuitos que já possui um módulo de blog com alguns estilos básicos. Para carregar o layout de página de blog pré-definido em sua página, abra o menu de configurações na parte inferior e abra o pop-up Adicionar da Biblioteca. A partir daí, pesquise e encontre o layout da página do blog de design de moda e carregue-o na página.

Depois que o layout for carregado, encontre o módulo do blog usado para exibir as postagens do blog e abra as configurações do módulo do blog.

Definir contagem de postagens

Nas configurações do blog, atualize o conteúdo para limitar a contagem de postagens a 10. (Isso ocorre principalmente por razões estéticas, pois nossa grade eventualmente incluirá duas linhas de cinco postagens de blog na área de trabalho.)

• Contagem de postagens: 10

Selecione o layout de largura total

Como vamos criar o layout da coluna para o nosso blog usando CSS Grid, precisamos garantir que o layout do módulo do blog seja de largura total (não grade). Isso garantirá que as postagens do blog sejam empilhadas verticalmente em sua ordem normal do documento/página.

Para alterar o layout do módulo de blog, abra as configurações do módulo de blog e, na guia design, abra o menu suspenso Layout e selecione Fullwidth .

Agora, cada postagem do blog deve abranger toda a largura da coluna (ou contêiner pai).

Apenas por diversão, vamos adicionar uma borda às postagens do blog para que possamos ter uma ideia melhor de como será o layout da grade quando adicionarmos nosso CSS. Atualize as opções de borda da seguinte forma:

• Largura da borda: 1px
• Cor da borda: rgba(150,104,70,0,35)

Adicionando a classe CSS personalizada ao módulo Blog

Para direcionar com eficiência este módulo de blog específico (e nenhum outro) com nosso CSS, precisamos fornecer ao nosso módulo uma classe CSS personalizada. Na guia avançado, adicione a seguinte classe CSS:

• Classe CSS: et-blog-css-grid

Criando o layout de várias colunas com CSS Grid

Agora que nosso módulo de blog está configurado com um layout de largura total, estamos prontos para adicionar nosso CSS personalizado. Por enquanto, vamos usar um módulo de código para adicionar o CSS à página. Mas, quando terminarmos, você sempre poderá mover o CSS para o local de sua preferência (como o CSS personalizado em Opções de tema ou o style.css do seu tema filho).

Adicione um novo módulo de código no módulo blog.

Na caixa de entrada de código, adicione as tags de estilo necessárias para envolver qualquer código CSS adicionado a uma página.

Dentro das tags de estilo , cole o seguinte snippet de CSS:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

A primeira linha do CSS apresenta o conteúdo (ou módulos) de acordo com o módulo de grade CSS.

exibição: grade;

A segunda linha de CSS define o modelo de coluna da grade.

grid-template-columns: repeat(auto-preenchimento, minmax(200px, 1fr));

A terceira linha determina o espaçamento entre os itens da grade (como a largura da medianiz).

intervalo: 20px;

Como funcionam as colunas de grade CSS

Nesse caso, a grade adicionará colunas repetidamente conforme necessário para preencher o espaço restante do contêiner da grade. Cada coluna terá uma largura mínima de 200px e uma largura máxima de 1fr (que é exatamente o mesmo que auto). Isso significa que quando o contêiner pai (a linha/coluna Divi) estiver em sua largura máxima de 1080px, a grade terá 5 colunas. Cada coluna terá uma largura de 200px (a largura mínima) que equivale a 1000px. Adicione as 4 lacunas de grade de 20px e você terá um total de 1080px. Uma vez que a janela de visualização comprime a grade abaixo de 1080px, a mágica da grade CSS assume e preenche cada espaço disponível com postagens de blog até atingir a largura de 200px. Novas linhas serão criadas automaticamente à medida que forem necessárias por padrão.

Para obter mais colunas, você pode alterar o valor minmax de 200px para algo menor ou aumentar a largura máxima da linha Divi para algo maior que 1080px.

Aqui está um codepen demonstrando a funcionalidade CSS Grid Layout que adicionamos aqui.

Neste ponto, a grade responsiva de cinco colunas está pronta para ser usada. Na verdade, você não planeja usar paginação ou bordas para as postagens do seu blog, pode parar por aqui.

Aqui está o resultado até agora.

Estilize o cartão postal do blog (ou item de grade)

Em seguida, podemos adicionar algumas linhas de CSS que visam os itens da grade (ou cartões de postagem do blog) para que fiquem alinhados ao topo de cada linha e tenham um pouco de preenchimento.

.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

Removendo paginação da grade

Atualmente, se você tiver paginação ativa no módulo blog, ela será tratada como o último item de grade na grade CSS. Para remover completamente a paginação da grade, podemos dar a ela uma posição absoluta e colocá-la diretamente sob o módulo blog. Para fazer isso, adicione o seguinte CSS:

.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

Agora os links de paginação estão seguros fora da grade para que não sejam movidos em diferentes larguras de janela de visualização.

Vamos conferir o resultado até agora!

Dica de bônus: ajuste o tamanho de todas as imagens em destaque (ou miniaturas)

Neste ponto, você pode notar a inconsistência de altura das imagens em destaque em cada post do blog. Se você quiser torná-los todos da mesma altura, você pode usar CSS adicional para fazer isso também.

.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

O primeiro snippet tem como alvo o contêiner de imagem em destaque e adiciona uma porcentagem de preenchimento que basicamente ajusta a altura do contêiner de imagem. Mas o primeiro snippet não funciona até que posicionemos a imagem em destaque para que ela caiba perfeitamente centralizada no contêiner da imagem. Para fazer isso, damos à imagem uma posição absoluta e usamos “object-fit:cover” para fazer a imagem abranger toda a largura e altura do contêiner.

Com 56,25% de preenchimento superior, devemos obter uma proporção de 16:9 para todas as nossas imagens.

Sinta-se à vontade para ajustar o preenchimento no contêiner da imagem para obter a proporção desejada para sua imagem.

Resultado final

Aqui está outra olhada em todo o CSS que adicionamos ao módulo de código com alguns comentários.

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.et-blog-css-grid .entry-featured-image-url {
  padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  object-fit: cover;
}

E aqui está uma visão final do nosso módulo de blog com nossas novas colunas e layout de grade.

Pensamentos finais

Sempre me surpreende o que pode ser feito com apenas algumas linhas de CSS usando CSS Grid. Nesse caso, conseguimos reestruturar todo o módulo do blog Divi em um layout fluido de cinco colunas. A melhor parte é que você não precisa se preocupar em usar consultas de mídia! Felizmente, isso economiza seu tempo e oferece mais opções para criar belas páginas de blog.

Estou ansioso para ouvir de você nos comentários.

Saúde!