Como criar um layout de grade CSS para módulos Divi

Para aqueles que já estão familiarizados com a construção de sites no Divi, a criação de layouts de grade personalizados é um aspecto central do Divi Builder. Basta criar uma linha e escolher entre vários layouts de coluna integrados para essa linha. Uma vez que o layout da coluna está no lugar, simplesmente adicionamos o conteúdo / módulos que queremos dentro de cada coluna. Mas, e se quiséssemos um layout de grade adicional para esses módulos?

Neste tutorial, vamos explorar como expandir os layouts de grade do Divi criando layouts de grade CSS para módulos Divi em uma única coluna. A propriedade CSS Grid (junto com CSS Flex) é 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 módulos em uma coluna em uma grade totalmente responsiva. Pense nisso como um layout de grade adicional para módulos que você pode adicionar a qualquer coluna Divi. Mas uma das melhores coisas sobre essa técnica é que cada módulo adjacente terá a mesma altura e largura sem todo o trabalho de tentar fazer isso usando preenchimento personalizado ou valores de altura em cada módulo.

Talvez seja melhor começarmos e mostrarmos como isso funciona.

Vamos começar!

Espiada

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

E aqui está uma amostra da mesma técnica usando diferentes módulos e designs do pacote de layout de academia de ginástica.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está 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. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

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 aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criação de um layout de grade CSS personalizado para módulos Divi

Parte 1: Adicionando os Módulos a uma Coluna Divi

Antes de organizarmos nossos módulos em um layout de grade, vamos primeiro adicionar todos os módulos que queremos usar à nossa coluna.

Para começar, crie uma nova linha de uma coluna para a seção regular padrão no Divi Builder.

Criando os Módulos

Dentro da coluna da linha, adicione um novo módulo de texto. Em seguida, atualize as configurações de conteúdo do módulo da seguinte forma:

1. Adicione um cabeçalho H2 acima do texto do parágrafo do conteúdo do corpo padrão
2. Cor de fundo: # 333333

Em seguida, atualize as configurações de design da seguinte forma:

1. Fonte do texto: Poppins
2. Cor do Texto: Claro
3. Selecione a guia H2 em Texto do Título
4. Estilo da fonte do título 2: TT
5. Preenchimento: 10% superior, 10% inferior, 10% esquerdo 10% direito

NOTA : Para simplificar, vamos continuar usando vários módulos de texto com várias cores de fundo para mostrar uma distinção entre cada módulo. Mas, como explicarei mais tarde, você pode usar qualquer combinação de módulos que desejar (módulos de blurb, módulos de call to action, módulos de formulário de contato, etc.).

Abra a visualização de camadas (opcional) e crie o próximo módulo de texto da seguinte maneira:

1. Duplique o módulo de texto.
2. Abra as configurações de texto para o módulo duplicado.
3. Atualize a cor de fundo
   • Cor de fundo: # 4c6085

Repita esse processo para criar o terceiro módulo de texto da seguinte maneira:

1. Duplique o módulo de texto anterior.
2. Abra as configurações de texto para o módulo duplicado.
3. Atualize a cor de fundo
   • Cor de fundo: # 39a0ed

Repita esse processo mais uma vez para criar o quarto módulo de texto da seguinte maneira:

1. Duplique o módulo de texto anterior.
2. Abra as configurações de texto para o módulo duplicado.
3. Atualize a cor de fundo
   • Cor de fundo: # 13c4a3

Para criar os próximos quatro módulos, use o recurso multiselect para selecionar todos os quatro módulos. Em seguida, copie e cole os módulos na mesma coluna para criar um total de oito módulos de texto.

Parte 2: Criando o Layout de Grade CSS para os Módulos

Agora que nossos módulos estão no lugar, estamos prontos para criar nossa grade CSS para esses módulos.

Configurações de linha

Para este exemplo, estamos usando um layout de uma coluna para que possamos exibir nossa grade de módulo em um layout de largura total. Portanto, precisaremos atualizar as configurações de linha para garantir que a linha ocupe toda a largura da página. Também precisamos remover a largura padrão da medianiz para que nenhuma margem adicional seja adicionada aos nossos módulos.

Abra as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Adicionando grade CSS à coluna para construir o layout da grade para os módulos

Esta é a etapa principal do tutorial que cria o layout dos módulos usando a propriedade CSS Grid.

Para fazer isso, vamos adicionar três linhas de CSS à coluna que determinará o layout de nossos módulos.

Abra as configurações de coluna e, na guia avançada, cole o seguinte CSS dentro do elemento principal:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

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

display: grade

A segunda linha do CSS define o modelo de coluna da grade. Neste caso, a grade terá quatro colunas com 25% de largura cada (veja a imagem acima).

colunas de modelo de grade: 25% 25% 25% 25%

A terceira linha do CSS especifica que as linhas serão geradas automaticamente conforme necessário com um tamanho (ou altura) definido como automático. Isso significa que a altura de cada linha será determinada pela altura vertical do conteúdo (ou módulos) dentro da linha (veja a imagem acima).

grid-auto-rows: auto

Ajuste o layout da grade no celular

Também precisaremos ajustar o layout da grade em dispositivos móveis conforme necessário.

Para fazer isso, simplesmente precisamos adicionar CSS adicional a cada tablet um celular que altera o número de colunas e a largura de cada coluna.

Neste exemplo, vamos alterar o layout da grade dos módulos no tablet para duas colunas com 50% de largura cada.

Abra as opções responsivas e selecione a guia tablet sob o elemento principal e cole o seguinte CSS:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Para a tela do telefone, queremos um layout de coluna única. Para criar isso, cole o seguinte CSS na guia Telefone Elemento principal:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Parte 3: Fazendo alterações nos itens da grade (ou módulos)

Adicionando um novo módulo à grade e como ele reage

Agora que cada módulo está dentro da grade CSS, adicionar um novo módulo empurrará os outros módulos para a direita e criará novas linhas automaticamente conforme necessário.

Como precisamos de mais um módulo para este layout de qualquer maneira, duplique o primeiro módulo de texto para ver como os outros módulos se ajustam na grade.

Como a grade responde a módulos com diferentes quantidades de conteúdo

No momento, todos os módulos de texto têm a mesma quantidade de conteúdo, por isso é difícil ver como o layout da grade lida com módulos com diferentes quantidades de conteúdo. Para ver como isso funciona, altere a quantidade de texto de parágrafo em cada módulo. Observe que os módulos permanecerão da mesma altura que o módulo com a maior parte do conteúdo na mesma linha. E a altura da linha também será determinada pelo módulo com mais conteúdo (ou altura vertical).

Alterar a posição dos módulos (ou itens da grade)

Os itens de grade CSS podem ser posicionados usando o sistema de numeração de linha embutido do módulo de grade. Cada linha da grade representa um número. Para as colunas, os números das linhas começam em 1 e continuam horizontalmente. Cada número de linha fica no início e no final de cada coluna. Portanto, para nossa estrutura de quatro colunas, o número da linha começa em 1 à esquerda da primeira coluna e termina em 5 à direita da quarta coluna. E, como temos três linhas, os números das linhas começam em 1 na parte superior da primeira linha e continuam até 4 na parte inferior da terceira linha.

Para alterar a posição de um módulo (ou item de grade) no CSS Grid, podemos definir onde queremos que um determinado módulo seja colocado na grade. Isso substituirá o posicionamento padrão do módulo na grade.

Para este exemplo, vamos mover o primeiro módulo de texto para uma posição diferente. Para fazer isso, precisamos adicionar duas linhas de CSS ao módulo.

Abra as configurações do primeiro módulo de texto e cole o seguinte CSS personalizado no elemento principal:

grid-column: 2/4;
grid-row: 2/3;

A primeira linha do CSS define a posição do módulo (ou item de grade) horizontalmente, dizendo ao módulo para começar na linha da coluna 2 e terminar na linha da coluna 4.

grade-coluna: 2/4

A segunda linha do CSS define a posição do módulo (ou item da grade) verticalmente, dizendo ao módulo para começar na linha 2 e terminar na linha 3.

linha de grade: 2/3

Para a tela do tablet e do telefone, queremos trazer o módulo de volta ao local original. Isso é útil para manter o cabeçalho principal no topo da página.

Para fazer isso, selecione a guia do tablet na opção responsiva para o elemento principal e cole o seguinte CSS:

grid-column: auto;
grid-row: auto;

Agora a posição do módulo voltará ao fluxo original (automático) dos itens da grade.

Vamos prosseguir e posicionar mais alguns módulos (ou itens de grade) usando este método.

Vamos posicionar o terceiro módulo de texto (agora na segunda coluna da linha superior) em um novo local definido dentro da grade. Esta nova posição começará na linha da coluna 1 e terminará na linha da coluna 2 e também começará na linha da linha 2 e terminará na linha da linha 4.

Para fazer isso, abra as configurações do terceiro módulo de texto e cole o seguinte CSS personalizado no elemento principal:

grid-column: 1/2;
grid-row: 2/4;

Agora podemos mudar a posição de volta para o celular, adicionando o seguinte CSS para tablet:

grid-column: auto;
grid-row: auto;

Para o nosso posicionamento final da grade do módulo personalizado, vamos posicionar o sétimo módulo de texto (agora na última coluna da segunda linha) em um novo local definido dentro da grade. Esta nova posição começará na linha da coluna 4 e terminará na linha da coluna 5 e também começará na linha da linha 2 e terminará na linha da linha 4.

Para fazer isso, abra as configurações do sétimo módulo de texto e cole o seguinte CSS personalizado no elemento principal:

grid-column: 4/5;
grid-row: 2/4;

Em seguida, cole o seguinte CSS para exibição em tablet, como fizemos para os módulos anteriores.

grid-column: auto;
grid-row: auto;

Alinhando o conteúdo do módulo (ou item de grade) ao centro

Poderíamos parar por aí, mas perderíamos uma maneira útil de alinhar (ou centralizar) o conteúdo do módulo verticalmente. Ter o conteúdo do módulo (ou item de grade) centralizado verticalmente é um recurso conveniente de um layout de grade porque torna tudo mais simétrico e esteticamente agradável.

Para fazer isso, podemos adicionar um snippet de CSS que usa a propriedade flex CSS para alinhar e justificar o conteúdo ao centro. Precisamos adicionar este trecho a cada um dos módulos. Para fazer isso, podemos usar multiselect para selecionar todos os módulos (ou itens de grade) que ainda não têm CSS personalizado para o elemento principal (não queremos substituir esses módulos por posições personalizadas). Em seguida, abra as configurações de elemento abrindo as configurações de um dos módulos selecionados. Na guia Avançado, cole o seguinte CSS no elemento principal:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

Agora podemos voltar aos nossos outros três módulos (módulo nº 1, nº 3 e nº 7) individualmente e adicionar o mesmo fragmento de CSS além do CSS que foi usado para dar ao módulo uma posição personalizada na grade. Certifique-se de adicionar o snippet CSS no CSS existente para desktop e tablet.

Adicionar CSS ao Módulo de Primeiro Texto

Adicionar CSS ao Terceiro Módulo de Texto

Adicionar CSS ao Sétimo Módulo de Texto

Resultado final

Aqui está o resultado final de nosso layout de grade CSS personalizado para nossos módulos de texto.

Observe como os módulos (ou itens de grade) se ajustam suavemente em diferentes larguras de navegador para um design responsivo agradável.

Exemplo usando diferentes módulos e designs

É difícil ver todo o potencial do uso de grade CSS para criar layouts de módulo usando apenas módulos de texto. Então, pensei em mostrar a você um design que criei aplicando as mesmas etapas deste tutorial usando diferentes módulos e elementos de design de nosso Pacote de Layout de Academia de Fitness.

Aqui está…

Também incluí este layout junto com o layout do módulo de texto com o download gratuito apresentado no início deste post.

Sinta-se à vontade para dar uma volta!

Pensamentos finais

Neste tutorial, mostramos como criar um layout de grade CSS para módulos Divi. Embora o processo dependa de algum CSS personalizado, surpreendentemente não é muito, considerando os resultados poderosos que pode ter. É bom ser capaz de controlar o layout de todos os seus módulos no nível da coluna quando necessário para layouts Divi mais exclusivos. Para obter mais informações sobre a grade CSS, você deve verificar este guia completo para considerar mais possibilidades.

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

Saúde!