Usando Contornos de Colunas para Enfatizar Sua Grade de Design Divi

A estrutura de elemento embutida do Divi pode ser usada de maneiras tradicionais para definir e estilizar diferentes seções, linhas, colunas e módulos. Mas, eles também podem ser usados ​​de forma criativa para aprimorar as estruturas de design em sua página. Neste tutorial, mostraremos como usar contornos de coluna para enfatizar sua grade de design Divi. Dedicaremos uma linha com posição absoluta para criar os belos contornos das colunas de fundo e mesclá-los com outras linhas em nossa seção. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o Layout de Contornos de Colunas GRATUITAMENTE

Para colocar as mãos no layout de contornos de coluna gratuitos, 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!

Vamos começar a recriar!

Adicionar nova seção

Transbordamentos

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e defina os transbordamentos como ocultos. Isso ajudará a garantir que nada ultrapasse o contêiner da seção, especificamente os contornos das colunas que adicionaremos posteriormente no tutorial.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Largura: 100%
• Largura máxima: 100%
• Alinhamento de linha: direita

Espaçamento

A seguir, empurraremos a linha para o lado direito da página na área de trabalho usando algumas configurações de dimensionamento personalizadas.

• Margem superior: 200px
• Preenchimento esquerdo: 47% (desktop), 6% (tablet), 10% (telefone)
• Preenchimento direito: 6% (tablet), 10% (telefone)

Fronteira

Concluiremos as configurações gerais de linha adicionando uma borda superior e inferior.

• Largura das bordas superior e inferior: 4 px
• Cor das bordas superior e inferior: #bdffed

Configurações da coluna 1

Espaçamento

Depois de concluir as configurações gerais de linha, abra as configurações da primeira coluna e adicione alguns valores de espaçamento personalizados.

• Enchimento superior: 12%
• Estofamento inferior: 12%
• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Configurações da coluna 2

Espaçamento

Abra as configurações da segunda coluna a seguir e use as seguintes configurações de espaçamento para ela:

• Enchimento superior: 12%
• Estofamento inferior: 12%
• Preenchimento esquerdo: 5% (desktop), 20% (tablet), 15% (telefone)
• Preenchimento direito: 5% (desktop), 20% (tablet), 15% (telefone)

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H2

É hora de adicionar módulos, começando com um Módulo de texto contendo conteúdo H2 na coluna 1.

Configurações de texto H2

Vá para a guia de design do módulo e modifique as configurações de texto H2 de acordo:

• Fonte do Título 2: Código Fonte Pro
• Peso da fonte do cabeçalho 2: negrito
• Cor do texto do título 2: rgba (35,38,211,0.46)
• Tamanho do texto do título 2: 4vw (desktop), 60px (tablet), 50px (telefone)
• Cabeçalho 2 espaçamento entre letras: 5 px

• Sombra do texto do cabeçalho 2 Comprimento horizontal: 0,05em
• Sombra do texto do cabeçalho 2 Comprimento vertical: 0,07em
• Cor da sombra do texto do cabeçalho 2: #bdffed

Movimento Vertical

Vamos adicionar algum movimento vertical também.

• Habilitar movimento vertical: Sim
• Compensação inicial: 2
• Deslocamento médio: 0
• Compensação final: -2
• Gatilho de efeito de movimento: meio do elemento

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do anterior e insira algum conteúdo descritivo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e modifique as configurações de texto de acordo:

• Fonte do Texto: Código Fonte Pro
• Cor do texto: rgba (35,38,211,0,76)
• Tamanho do texto: 15px
• Altura da linha de texto: 2em

Movimento Vertical

Usaremos algum movimento vertical para este módulo também.

• Habilitar movimento vertical: Sim
• Compensação inicial: 2
• Deslocamento médio: 0
• Compensação final: -2
• Gatilho de efeito de movimento: meio do elemento

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O último módulo de que precisamos na coluna 1 é um Módulo de botão. Adicione alguma cópia de sua escolha.

Configurações de botão

Vá para a guia de design do módulo e estilize o botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Cor do texto do botão: # 2326d3
• Raio da borda do botão: 0 px

• Fonte do botão: Código-fonte Pro
• Mostrar ícone do botão: Sim
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não

Espaçamento

Em seguida, adicione alguns valores de preenchimento personalizados.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Movimento Vertical

E complete as configurações do módulo adicionando algum movimento vertical.

• Habilitar movimento vertical: Sim
• Compensação inicial: 2
• Deslocamento médio: 0
• Compensação final: -2
• Gatilho de efeito de movimento: meio do elemento

Adicionar Módulo de Imagem à Coluna 2

Carregar imagem de proporção 1: 1

Na coluna 2, o único módulo que precisamos de um Módulo de imagem. Faça upload de uma imagem com proporção de 1: 1.

Dimensionamento

Vá para a guia de design do módulo e force a largura total da imagem.

• Forçar largura total: Sim

Fronteira

Vamos transformar a imagem em um círculo adicionando alguns cantos arredondados a seguir.

• Todos os cantos: 50vw

Sombra da caixa

Então, vamos adicionar uma sombra de caixa.

• Posição horizontal da sombra da caixa: 30px
• Posição vertical da sombra da caixa: 30 px
• Cor da sombra: rgba (38.255.197,0.3)

Movimento Vertical

E vamos completar as configurações do módulo adicionando algum movimento vertical.

• Habilitar movimento vertical: Sim
• Compensação inicial: -2
• Deslocamento médio: 0
• Compensação final: 2
• Gatilho de efeito de movimento: meio do elemento

Clonar a linha inteira duas vezes

Depois de concluir a primeira linha, você pode cloná-la duas vezes.

Alterar todo o conteúdo e imagens

Certifique-se de alterar todo o conteúdo e imagens duplicados.

Adicionar Margem Inferior à Última Linha

E abra as configurações da última linha, vá para as configurações de espaçamento e adicione alguma margem inferior.

• Margem inferior: 200px

Dedique uma nova linha (no topo da seção) aos contornos das colunas

Estrutura da Coluna

Agora que temos as linhas gerais no lugar, é hora de adicionar os contornos das colunas. Para fazer isso, adicionaremos uma nova linha no topo de nossa seção usando a seguinte estrutura de colunas:

Dimensionamento

Abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 90%
• Largura máxima: 100%

Espaçamento

Estamos removendo todo o preenchimento padrão superior e inferior também.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Posição

Em seguida, vá para a guia avançada e reposicione toda a linha. Ao definir a posição como absoluta, removeremos o espaço do contêiner que é ocupado pela linha dentro da página.

• Posição: Absoluta
• Localização: Centro Superior

Largura CSS do elemento principal de todas as colunas

Depois que as configurações gerais de linha estiverem definidas, é hora de começar a estilizar as colunas. Primeiro, adicione um pouco de largura personalizada a cada coluna usando uma linha de código CSS dentro do elemento principal da linha. Isso nos ajudará a manter a estrutura da coluna em telas menores.

width: 20% !important;

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e modifique os valores de preenchimento em diferentes tamanhos de tela.

• Preenchimento superior: 150vh (desktop), 250vh (tablet e telefone)
• Preenchimento inferior: 150vh (desktop), 250vh (tablet e telefone)

Fronteira

Adicione uma borda esquerda também.

• Largura da borda esquerda: 5 px
• Cor da borda esquerda: #bdffed
• Estilo da borda esquerda: tracejado

Configurações da coluna 2

Cor de fundo

A seguir, vamos abrir as configurações da coluna 2 e adicionar uma cor de fundo.

• Cor de fundo: # b5fff1

Fronteira

Usaremos uma borda direita também.

• Largura da borda direita: 4px
• Cor da borda direita: #bdffed
• Estilo da borda direita: Sólido

Configurações da coluna 3

Fronteira

Na terceira coluna, usaremos uma borda direita com as seguintes configurações:

• Largura da borda direita: 4px
• Cor da borda direita: rgba (35,38,211,0,12)
• Estilo da borda direita: tracejado

Configurações da coluna 4

Fronteira

Em seguida, vamos abrir as configurações da coluna 4 e alterar as configurações de borda de acordo:

• Largura da borda direita: 4px
• Cor da borda direita: #bdffed
• Estilo da borda direita: Sólido

Configurações da coluna 5

Fronteira

Concluiremos as configurações da coluna adicionando uma borda direita à coluna 5 também.

• Largura da borda direita: 4px
• Cor da borda direita: rgba (35,38,211,0,12)
• Estilo da borda direita: tracejado

Adicionar Módulo Divisor às Colunas 1 e 2

Visibilidade

Na visualização móvel no início desta postagem, você pôde notar um resultado ligeiramente diferente do que no desktop. Estamos permitindo que os contornos das colunas 1 e 2 apareçam adicionando um Módulo divisor a essas colunas específicas. Certifique-se de ocultar as duas divisórias nas configurações de visibilidade e pronto!

• Mostrar divisor: Não

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com as colunas integradas do Divi. Mais especificamente, mostramos como usar contornos de coluna para enfatizar sua grade de design Divi. Essa abordagem ajuda a criar um design exclusivo sem a necessidade de software de edição de imagem adicional. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.