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]

Design web 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 mover os módulos para fora de uma coluna ou linha para que eles se estendam para fora de um contêiner ou se sobreponham a 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 designs de grade quebrados exclusivos. Com as novidades opções de coluna de Divi, você pode facilmente mover as colunas, bem como os módulos que eles contêm. Isso permite que você crie módulos e colunas com estilos exclusivos para um design criativo de grade quebrada.

Vamos começar!

exame

Aqui está uma visão geral dos exemplos de design que vamos construir 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 construir do zero no front-end (construtor visual)
  3. Algumas imagens para usar em conteúdo ficcional

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

Estagnação de colunas e módulos para criar um design exclusivo de grade quebrada em 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.

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

Em seguida, atualize o módulo com uma cor de fundo escura e edite o texto do título da seguinte forma:

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

Em seguida, atualize o botão de chamada do módulo de ação da seguinte maneira:

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]

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

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 criar espaço para o design.

Margem: 20% para cima, 20% para baixo

Adicione imagens de fundo da coluna

Mesmo que não possamos vê-los ainda, adicionaremos imagens de fundo a cada uma das colunas. Eles se tornarão visíveis quando movermos nosso módulo para fora do contêiner da coluna com transform 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 plano 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 o screenshot
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Sombra de caixa espalhando: 100px
Cor da sombra: rgba (151, 178, 193, 0.21)

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

Você notará que as sombras da caixa se sobrepõem. Usar uma cor de sombra semitransparente ajudará a criar um efeito super sobreposto. Essa é a principal vantagem de usar sombras de caixa no design. Ao contrário das bordas, você pode adicionar sombras grandes que se parecem com bordas, mas não afetam o espaçamento real do layout.

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]

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. Então podemos mover os módulos para o centro depois.

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)

Módulos de deslocamento usando o Transform Translate

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

Deslocamento do módulo 1

Abra as configurações de call-to-action 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 caixa a seguir ao módulo de chamada na coluna 1:

Box Shadow: veja o screenshot
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Sombra de caixa espalhando: 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. Nós temos que tornar esta caixa quase completamente transparente porque ela irá se sobrepor ao módulo 1 e nós 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. [FREE]

Box Shadow: veja o screenshot
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Sombra de caixa espalhando: 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 estrutura de quadro no plano de fundo.

Box Shadow: veja o screenshot
Posição Vertical da Sombra da Caixa: 0px
Cor da Sombra: #97b2c1

Últimos pensamentos

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

Espero ouvir de você nos comentários.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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