Introdução à grade CSS para Divi 5

Este é um grande. Construímos o melhor construtor de grade CSS e está disponível para o Divi 5 hoje. É melhor que o Elementor. É melhor do que tijolos. Se você deseja dominar a grade ou simplesmente usar os novos modelos de grade da Divi, você vai adorar esta atualização.

Confira o vídeo a seguir para ver o novo recurso em ação.

Grade CSS para todos

Divi 5 está muito longe de seu antecessor. Temos transformado o Divi em uma potência da web design, com novos recursos como Flexbox, unidades avançadas, predefinições e variáveis ​​de design. CSS Grid é o próximo grande passo à frente.

Ao mesmo tempo, não queremos que os usuários existentes se sintam perdidos ou enterrados em novas configurações. Acalamos o equilíbrio certo entre fornecer aos usuários avançados as ferramentas necessárias enquanto tornam os layouts da grade acessíveis aos iniciantes.

Modelos de grade para cada ocasião

Se você nunca ouviu falar da grade do CSS e não deseja aprender os meandros dos layouts da grade, não se preocupe - você não precisa. Aproveite os novos modelos de grade pré-construída!

A beleza do uso de modelos de grade é que a grade é controlada no nível do contêiner e, ao adicionar novos itens, eles estão em conformidade com a grade automaticamente. É muito mais intuitivo e desbloqueia uma nova variedade de designs.

O Divi possui modelos de grade para todas as situações, e aplicar -os ao conteúdo existente é fácil.

Controle completo para especialistas em grade

Se você é um especialista em grade CSS experiente, as opções de grade da Divi não o impedem. Você pode chegar direto ao ponto, definir manualmente os modelos de coluna e grade de linha e criar layouts de grade variados usando a edição de deslocamento, na qual abordarei mais tarde.

Obviamente, você pode renunciar à interface e aplicar regras de grade usando o painel CSS personalizado também; O que quer que funcione melhor para você.

Opções de grade intuitiva para montadores da web

Se você está em algum lugar no meio, então o Divi 5's Grid Builder brilha.

Transformamos os parâmetros da grade CSS em configurações para criar grades verticais ou horizontais, personalizar dimensões de coluna e linha, direção da grade, alinhamento e justificativa de elementos e muito mais.

Além disso, o grupo de opções de dimensionamento inclui novas opções de coluna e linha que permitem ajustar a largura, a altura e a posição de um item de grade individual na grade.

Edição de deslocamento de grade

Um dos aspectos mais exclusivos do Divi 5 Grid Builder é o editor de deslocamento, que você pode usar para criar padrões de grade não simétricos repetidos no nível do contêiner. Deixe-me dar a você um exemplo do mundo real.

Criei um modelo de blog no vídeo abaixo usando o Divi 5's Loop Builder; Cada coluna é um item de loop preenchido com conteúdo dinâmico. Quando habilito o estilo de layout da grade no contêiner pai, as colunas estão automaticamente em conformidade com a grade.

Eu posso ajustar o número de colunas, inserir padrões de coluna ou linha personalizados, alterar os tamanhos de lacunas e fazer muitas outras coisas.

Além disso, posso usar o editor de deslocamento para aplicar regras a itens específicos na grade.

Em vez de um padrão de coluna padrão que se repete em cada linha, posso criar padrões de deslocamento, por exemplo, com cada 4º item abrange duas colunas, começando no segundo e terceiro item. Esses padrões de deslocamento dão aos modelos de linha pré-construída da Divi 5 tanta variedade.

CSS Grid Demos (download grátis)

Você pode criar layouts espetaculares usando a grade CSS que nunca era possível antes. Se você deseja inspiração, veja esses layouts impressionantes que nossa equipe de design criou usando a versão mais recente do Divi 5.

Você pode baixá -los gratuitamente e testá -los você mesmo.

Tente divi 5 hoje

O CSS Grid para o Divi 5 está disponível hoje e é um dos muitos recursos que chegam ao Divi este ano.

Você pode acompanhar à medida que avançamos no lançamento final do Divi 5 e além, com atualizações a cada duas semanas. Dependendo de suas prioridades, você pode usar o Divi 5 agora para criar novos sites ou esperar até adicionar mais recursos, o que funciona melhor para você.

Conforme descrito no cronograma de lançamento multifásico original do Divi 5, o Divi 5 Public Alpha é como "Divi 5 Lite". Está faltando alguns recursos e pode não ser adequado para sites existentes, mas está pronto para ser usado em novos sites, se você preferir a experiência do Divi 4.

Queremos que você experimente e, se você gosta, use -o; Quando todo mundo adora, vamos tornar -o oficial.

Você já tentou atributos personalizados para o divi 5?

Caso você tenha perdido, lançamos recentemente os novos atributos personalizados, que permitem adicionar qualquer atributo, como ALT, título, REL e ARIA-Label, a elementos e a maioria dos subelementos.

A Divi teve suporte para atributos específicos, como Class e ID, mas agora você pode adicionar qualquer atributo a qualquer elemento. Isso é especialmente importante para a acessibilidade, permitindo que você adicione texto ALT às imagens e funções e etiquetas a elementos não semânticos, como um botão baseado em ícone.

Assista a este vídeo para todos os detalhes.

Mais atualizações do Divi 5 estão a caminho

2025 é o ano do Divi 5 . O trabalho tedioso está para trás. Construímos a fundação super-rápida e agora é hora de o Divi voltar.

Se você estiver aqui para o retorno do Divi, faça um grande favor e informe -nos curtindo este vídeo e deixando um comentário. Significa muito para nós ver você torcendo dividindo, e é essencial alimentar o algoritmo e espalhar a palavra.

Não se esqueça de nos seguir no YouTube e assinar o boletim informativo Divi para que você nunca perca uma atualização. Vejo você em breve para outro anúncio do Divi 5, que eu prometo que estará ao virar da esquina.