Você está familiarizado com a criação de sites deslumbrantes usando Divi? Você provavelmente deve saber que o layout da grade é uma característica central do Divi Builder. Normalmente, você começa criando uma linha e opta por criar várias colunas para essa linha. Com a coluna no lugar, é aí que você adicionará módulos. Podemos fazer as coisas irem mais longe, adicionando mais grades para esses módulos.
Ao longo deste tutorial, exploraremos como estender o layout da grade da Divi criando layouts de grade CSS para módulos Divi com uma única coluna. A grade CSS é (usando CSS Flex) é muito popular para criar redes responsivas para conteúdo com apenas algumas linhas CSS. Podemos então organizar todos os nossos módulos para responder. Considere isso como um layout adicional para módulos que você pode adicionar a uma coluna Divi. O bom ponto aqui é que todos os nossos módulos aninhados terão a mesma altura e largura sem a necessidade de definir estofamento e valores de altura.
Visualização do resultado final
Antes de começar, vamos ver o que você será capaz de alcançar até o final deste tutorial.
Criando um layout de grade CSS personalizado para módulos Divi
Parte 1: Adicionar os módulos a uma coluna Divi
Uma das primeiras coisas que precisamos fazer é organizar nossos módulos em layouts de grade. Vamos adicionar todos os módulos que queremos usar à nossa coluna. Vamos começar criando uma nova linha de uma coluna para a seção regular padrão.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agora
Criando os Módulos
Dentro das colunas, w e'll adicionar o módulo de texto. Em seguida, alteraremos as configurações de conteúdo da seguinte forma:
- Adicione uma posição H2 acima do texto do parágrafo
- Cor de fundo: #444444
Também atualizaremos as configurações de design da seguinte forma:
- Fonte de texto: Poppins
- Cor do texto: Luz
- Selecione a guia H2 em Texto de direção
- Estilo de fonte de posição 2: TT
- Preenchimento: 10% superior, 10% inferior, 10% esquerda 10% direita
NOTA: Para torná-lo muito simples, vamos continuar usando vários módulos de texto com várias cores de fundo para mostrar uma distinção entre cada módulo.
Mude para a visualização de camadas e crie o próximo módulo de texto da seguinte forma:
- Duplicar o módulo de texto.
- Abra as configurações de texto para o módulo duplicado.
- Atualize a cor de fundo Cor de fundo: #4c6085
Você pode repetir este processo para criar o terceiro módulo de texto da seguinte forma:
- Duplicar o módulo de texto anterior.
- Abra as configurações de texto para o módulo duplicado.
- Atualize a cor de fundo Cor de fundo: #39a0ed
Repetiremos o processo mais uma vez para criar o quarto módulo de texto da seguinte forma:
- Duplicar o módulo de texto anterior.
- Abra as configurações de texto para o módulo duplicado.
- Atualize a cor de fundo Cor de fundo: #13c4a3
Para criar os próximos quatro módulos, use o recurso multiselétrico 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: Vamos criar o layout da grade CSSpara os módulos
Agora que todos os nossos módulos são adicionados, vamos criar uma grade para eles.
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. Agora, precisaremos atualizar as configurações da linha para garantir que a linha tenha toda a largura da página. Também precisaremos tirar a largura padrão da sarjeta para que não sejam adicionadas margens adicionais aos nossos módulos.
Abra as configurações da linha e atualize o seguinte:
- Largura da sarjeta: 1
- Largura: 100%
- Largura máxima: 100%
Adicionando grade CSS à coluna para construir o layout da grade para os módulos
Este é um passo importante no tutorial que cria o layout para os módulos usando a propriedade CSS Grid.
Para isso, vamos adicionar três linhas de CSS à Coluna que determinarão o layout de nossos módulos.
Abra as configurações da coluna e, sob a 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 de CSS estabelece o conteúdo (ou módulos) de acordo com o Módulo de grade CSS.
Exibição:grade
Na segunda linha de CSS, definiremos o modelo de coluna da grade. Neste caso, nossa grade terá quatro colunas com 25% de largura.
Grade-modelo-colunas: 25% 25% 25% 25% 25%
A terceira linha menciona as linhas que serão geradas automaticamente. Isso significa que a altura de cada linha será determinada pela altura vertical do conteúdo (ou módulos) dentro da linha.
Grade-auto-linhas: auto
Adjust Grid Layout on Mobile
Agora, também precisaremos ajustar o layout da rede em dispositivos móveis, conforme necessário.
Para poder fazer isso, só precisamos adicionar um pouco de CSS ao tablet e ao celular que altera o número de colunas e a largura de cada coluna.
Neste exemplo, vamos alterar o layout da grade para os módulos em tablets para duas colunas que têm 50% de largura cada.
Vamos abrir as opções responsivas e selecionar a guia do tablet sob o elemento principal e colar o seguinte CSS:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Para exibição do telefone, queremos um layout de uma única coluna. Para criar isso, cole o seguinte CSS na guia Telefone Principal Elemento:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Parte 3: Fazendo alterações nos módulos da grade
Adicionando um novo módulo à grade e como ele reage
Agora que temos cada módulo para a Grade, se adicionarmos mais módulos, o outro será empurrado para a direita e novas linhas serão criadas. Como precisamos de mais um módulo para este layout de qualquer maneira, duplicar o primeiro módulo de texto para ver como os outros módulos se ajustam dentro da grade.
Como a grade responde a módulos com diferentes quantidades de conteúdo
Enquanto isso, todos os módulos têm a mesma quantidade de conteúdo, então não podemos realmente ver como a grade lidará com módulos que têm várias alturas. Para ver como isso funciona, altere a quantidade de texto de parágrafo dentro de cada módulo. Observe que os módulos permanecerão na mesma altura do módulo com mais conteúdo na mesma linha. A partir de agora, a altura da linha também será determinada pelo módulo com mais conteúdo (ou altura vertical).
Alterando a posição dos módulos na grade
Os itens da grade CSS podem ser posicionados usando o sistema de numeração incorporado no módulo de grade. Cada linha na grade representa um número. Para as colunas, os números da linha começam em 1 e continuam horizontalmente. Cada número de linha está no início e no final de cada coluna. Assim, para a nossa estrutura de coluna, o número da linha começa a partir de 1 à esquerda da primeira coluna e termina às 5 à direita da quarta coluna. E, como temos três linhas, os números de linha para linhas começam em 1 no topo da primeira fila e até 4 na parte inferior da terceira fila.
Se quisermos alterar a posição de um módulo (ou item de grade) na Grade CSS, podemos definir onde queremos que um determinado módulo seja colocado na grade. Fazer isso substituirá a colocação padrão do módulo na grade.
Para este exemplo, vamos mover o primeiro módulo de texto para uma posição diferente. Para isso, só 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 para o elemento principal:
grid-column: 2/4;grid-row: 2/3;
A primeira linha de CSS define a posição do módulo horizontalmente, dizendo ao módulo para iniciar na linha 2 da coluna e terminar na coluna linha 4.
Coluna de grade: 2/4
A segunda linha de CSS define verticalmente a posição do módulo (ou item da grade), dizendo ao módulo para iniciar na linha 2 e terminar na linha 3.
Grade-row: 2/3
Para a exibição de tablets e telefones, traremos o módulo de volta ao local original. Isso é útil para manter seu cabeçalho principal no topo da página.
Para isso, selecione a guia do tablet sob a 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 em frente e posicionar mais alguns módulos (ou itens de grade) usando este método.
Agora 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 1 da coluna e terminará na coluna linha 2 e também começará na linha 2 e terminará na linha 4.
Para isso, abra as configurações do terceiro módulo de texto e cole o seguinte CSS personalizado ao elemento principal:
grid-column: 1/2;grid-row: 2/4;
Agora podemos alterar a posição para celular adicionando o seguinte CSS para tablet:
grid-column: auto;grid-row: auto;
Para nossa última modificação, vamos posicionar o sétimo módulo em um novo local definido dentro da grade. Esta nova posição começará na linha 4 da coluna e terminará na coluna linha 5 e também começará na linha de linha 2 e terminará na linha 4.
Para isso, vamos abrir as configurações do sétimo módulo de texto e colar o seguinte CSS personalizado para o elemento principal:
grid-column: 4/5;grid-row: 2/4;
Agora cole o seguinte CSS para exibição de tablet.
grid-column: auto;grid-row: auto;Alinhando conteúdo do módulo (ou item da grade) ao centro
Você provavelmente está cansado de instruções, mas se pararmos aqui, perderemos uma maneira útil de alinhar (ou centralizar) nosso conteúdo do módulo verticalmente. Ter o conteúdo do módulo verticalmente centrado é uma boa característica de um layout de grade, pois torna tudo mais simétrico e esteticamente agradável.
Assim, para isso, podemos adicionar um trecho de CSS que usa a propriedade flex CSS para alinhar e justificar o conteúdo para o centro. Precisamos adicionar este trecho a cada um dos módulos. Podemos usar multi-selecionados para selecionar todos os módulos (ou itens de grade) que ainda não possuem CSS personalizados para o elemento principal (porque não queremos substituir esses módulos com posições personalizadas). Em seguida, abra as configurações do elemento abrindo as configurações para 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 #1, #3 e #7) individualmente e adicionar o mesmo trecho 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 trecho CSS sob o CSS existente tanto para desktop quanto para tablet.
Resultado Final
Eis como foi assim que fizemos até agora.
Você pode notar como os módulos (ou itens de grade) se ajustam suavemente em diferentes larguras do navegador para um design responsivo agradável.
Exemplo real usando diferentes módulos e designs
Se você quiser ver um exemplo real usando este sistema de grade, então você pode usar módulos diferentes. Aqui está o que você pode criar usando essa técnica. Isso está disponível no Fitness Gym Layout Pack.
Em Todos os Seus Agora
Neste tutorial, estamos trabalhando na criação de um layout de grade CSS para módulos Divi. Embora o processo dependa de alguns CSS personalizados, é surpreendentemente não muito, considerando os resultados poderosos que podemos ter a partir dele. É bom poder controlar o layout de todos os seus módulos no nível da coluna quando necessário para layouts Divi mais exclusivos. Se você é um viciado em CSS e gostaria de mergulhar além disso, você deve verificar Este guia completo para considerar mais possibilidades.
Ficaremos felizes, então veja o quão bem sucedido você é na seção de comentários.
