O web design moderno é sempre sobre quebrar a grade. Isso é feito escalonando elementos e acentuando acentos em posições que quebram a estrutura normal de uma grade. Você pode vê-los aplicados em designs de grade quebrados nos ótimos layouts Divi. Isso geralmente envolve mover módulos para fora de uma coluna ou linha para que eles se estendam para fora de um contêiner ou sobreponham outros elementos na página. Mas você pode não ter pensado em mover a coluna.

Neste tutorial vou mostrar como escalonar colunas e módulos Divi para designs únicos de grade quebrada. Com as novidades opções de coluna de Divi , você pode mover facilmente as colunas, bem como os módulos que elas contêm. Isso permite que você projete o módulo e a coluna com estilos exclusivos para um design criativo de grade quebrada.

Vamos começar!

Visão geral

Aqui está uma visão geral dos exemplos de design que criaremos neste tutorial.

Visualização do design do módulo Divi com lacuna

O que você precisa para começar

Para começar, você precisa do seguinte:

  1. Le Tema Divi instalado e ativo
  2. Uma nova página criada para criar do zero no front-end (construtor visual)
  3. Algumas imagens para usar conteúdo fictício

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

Estagnação de colunas e módulos para criar um design de grade quebrada exclusivo no Divi

Comece criando uma nova seção regular com uma linha de duas colunas.

Escolha o layout de coluna dupla divi

Em seguida, adicione uma chamada ao módulo de ação na coluna 1.

Divi call to actionMude o texto do título para "Divi Module" ou outro título curto de sua escolha.

Atualize o módulo com uma cor de fundo escura e edite o texto do título da seguinte maneira:

Cor de fundo: #333333
Alinhamento do texto: esquerda
Título da Fonte: bitter
Tamanho do texto do título: 50px
Espaçamento entre letras de título: 2px

Configuração do módulo de chamada de ação DiviEm seguida, atualize o botão de chamada do módulo de ação da seguinte forma:

Tamanho do texto do botão: 16px
Cor do texto do botão: #333333
Cor do fundo do botão: cor do
botão de borda: #ffffff
Raio da borda do botão: 25px
Espaçamento entre as letras dos botões: 2px
Fonte do botão: Raleway Tamanho do
Fonte de botões: Negrito
Estilo de fonte da chave: TT

Personalização do botão Divi

Em seguida, copie o módulo e cole a duplicata na coluna 2 para que você tenha a mesma chamada para o módulo de ação em cada coluna.

Módulo divi duplicadoAtualizar espaçamento de linha

Agora adicione algumas margens superior e inferior para abrir espaço para o design.

Margem: 20% para cima, 20% para baixo

Modificar linha divi

Adicione imagens de fundo da coluna

Mesmo que não possamos vê-los ainda, iremos adicionar imagens de fundo a cada uma das colunas. Eles ficarão visíveis assim que movermos nosso módulo para fora do contêiner de coluna com transform translate.

Vá em frente, abra as configurações na coluna 1 e adicione uma imagem de fundo.

Cor de fundo da coluna 1 diviEm seguida, abra as configurações da coluna 2 e adicione uma imagem de fundo.

Divi 2 da coluna traseira

Adicione uma caixa de sombra a cada coluna

Abra as configurações da coluna 1 e adicione a sombra da seguinte caixa:

Sombra da caixa: veja a imagem
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Espalhamento de sombra de caixa: 100px
Cor da sombra: rgba (151, 178, 193, 0.21)

Configuração de sombra da coluna 1

Em seguida, adicione o mesmo estilo de sombra da caixa à coluna 2. Para acelerar, você pode usar as opções do botão direito do mouse para copiar estilos de sombra de caixa na coluna 1 e colá-los nos estilos de sombra de caixa da coluna 2.

Copiar elementos de estilo de caixa de sombra divi

Você notará que as sombras na caixa se sobrepõem. Usar uma cor ombre semi-transparente ajudará a criar um efeito de super camadas. Esta é a principal vantagem de usar sombras de caixa no design. Ao contrário das bordas, você pode adicionar sombras grandes que parecem bordas, mas não afetam o espaçamento real do layout.

Colunas de sobreposição usando o Transform Translate

Neste ponto, estamos prontos para mudar as colunas e módulos para completar o projeto da grade interrompida. Primeiro, precisamos mover as colunas para a borda externa da página. Então, podemos mover os módulos para o centro mais tarde.

Escalonar a coluna 1

Abra o parâmetro da coluna 1 e adicione a seguinte propriedade de transformação de conversão.

Transformar transladar eixo X: 25%
Transformar transladar eixo Y: -25% (desktop), -5% (tablet)

Transformação de sombra Divi

Escalonar a coluna 2

Para a coluna 2, adicione a seguinte propriedade de conversão de transformação.

Transformar translação do eixo X: -25%
Transformar transladar eixo Y: 25% (desktop), 5% (tablet)

Divisão de personalização de fundo, coluna 2Módulos de deslocamento usando Transform Translate

Agora estamos prontos para espalhar nossos módulos movendo-os para fora do contêiner de coluna. Isso irá expor a imagem de fundo da coluna e nos permitirá adicionar outra área de sombra ao módulo para um elemento de design sobreposto adicional.

Deslocar o módulo 1

Abra as configurações de apelo à ação da coluna 1 e atualize o seguinte:

Transformar translação do eixo X: -60%
Transformar transladar eixo Y: 50% (desktop), 10% (tablet)

Transformação do módulo Divi 1

Adicione uma sombra de caixa ao módulo 1

Em seguida, adicione a sombra da seguinte caixa ao módulo de chamada de ação na coluna 1:

Sombra da caixa: veja a imagem
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Espalhamento de sombra de caixa: 100px
Cor da sombra: rgba (151,178,193,0.21)

Divi de texto do módulo sombraEspaçamento do módulo 2

Para mover o módulo na coluna 2, atualize o seguinte:

Transformar translado do eixo X: 60%
Transformar traduzir eixo Y: -50% (desktop), -10% (tablet)

Módulo de transformação 2 diviAdicione uma sombra de caixa ao módulo 2

Em seguida, podemos adicionar uma sombra de caixa ao módulo de call to action na coluna 2. Precisamos tornar essa sombra de caixa quase completamente transparente porque ela se sobreporá ao módulo 1 e não queremos dificultar a leitura do conteúdo.

Sombra da caixa: veja a imagem
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Espalhamento de sombra de caixa: 100px
Cor da sombra: rgba (151,178,193,0.09)

Divi do módulo da caixa de sombra

Adicionar um quadro de caixa de sombra

Para concluir o design, adicione uma sombra de zona à linha que serve como um elemento de design de quadro em segundo plano.

Sombra da caixa: veja a imagem
Posição Vertical da Sombra da Caixa: 0px
Cor da Sombra: #97b2c1

Divi da linha de fronteira de configuração

Considerações finais

Espero que este tutorial tenha dado a você uma pequena ideia de como você pode compensar colunas e módulos Divi para criar seus próprios designs de grade quebrados. A técnica é muito simples. Envolve principalmente algumas propriedades de conversão de transformação para compensar colunas e módulos, bem como sombras de caixa para criar o único padrão quebrado. Sinta-se à vontade para explorar mais opções de cores e introduzir mais módulos para ver aonde o design pode levar você.

Espero ouvir de você nos comentários.