Ir para o conteúdo principal

Como descartar colunas e módulos Divi para projetos de grade exclusivos

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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

Neste tutorial, mostrarei como escalonar colunas e módulos Divi para projetos de grade quebrados exclusivos. 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ê crie módulos e colunas com estilos exclusivos para um design de grade quebrado criativo.

Vamos começar!

Visão geral

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

O que você precisa para começar

Para começar, você precisa do seguinte:

  1. 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 em 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.

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

Mude 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

Atualize o botão de chamada do módulo de ação da seguinte maneira:

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

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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.

Atualizar espaçamento entre linhas

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

Margem: 20% para cima, 20% para baixo

Adicione imagens de fundo da coluna

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

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

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

Adicione uma caixa de sombra a cada coluna

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

Box Shadow: veja a captura de tela
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)

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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Você notará que as sombras da caixa se sobrepõem. Usar uma cor de sombra semi-transparente ajudará a criar um efeito superposto. Essa é a principal vantagem do uso de 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 os módulos para concluir o design da grade interrompida. Primeiro, precisamos mover as colunas para a borda externa da página. Depois, 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 traduzir o eixo X: 25%
Transformar traduzir o eixo Y: -25% (desktop), -5% (tablet)

Escalonar a coluna 2

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

Transformar traduzir o eixo X: -25%
Transform Traduzir Eixo Y: 25% (Desktop), 5% (Tablet)

Trocar módulos usando o Transform Translate

Agora estamos prontos para espalhar nossos módulos movendo-os para fora do contêiner da coluna. Isso expõe a imagem de plano de fundo da coluna e nos permite adicionar outra sombra de zona 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 traduzir o eixo X: -60%
Transform Traduzir Eixo Y: 50% (Desktop), 10% (Tablet)

Adicione uma sombra de caixa ao módulo 1

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

Box Shadow: veja a captura de tela
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)

Espaç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)

Adicione uma sombra de caixa ao módulo 2

Em seguida, podemos adicionar uma sombra de zona ao módulo de call to action da coluna 2. Temos que tornar essa caixa sombreada quase completamente transparente, porque ela se sobrepõe ao módulo 1 e não queremos complicar a leitura do conteúdo.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Box Shadow: veja a captura de tela
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)

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.

Box Shadow: veja a captura de tela
Posição Vertical da Sombra da Caixa: 0px
Cor da Sombra: #97b2c1

Considerações finais

Espero que este tutorial tenha lhe dado uma idéia de como você pode mudar as colunas e os módulos Divi para criar seus próprios projetos de grade quebrada. A técnica é muito simples. Envolve principalmente algumas propriedades de conversão de transformação para mudar colunas e módulos, bem como sombras de caixa para criar o padrão único quebrado. Sinta-se livre para explorar mais opções de cores e apresentar mais módulos para ver aonde o design pode levá-lo.

Espero ouvir de você nos comentários.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação2
chilrear
Enregistrer