Como sobrepor horizontalmente as bordas das linhas com divi

Criar designs de página que interagem nem sempre é uma tarefa fácil. Além de focar na experiência do usuário, princípios de design e tendências de design, você também precisa criar algo que corresponda à marca de sua empresa e fascine seus visitantes à primeira vista.

Se você pesquisar em nosso blog, encontrará uma tonelada de maneiras criativas de abordar seu design da web usando Divi e as versáteis opções integradas do Divi. Hoje, estamos adicionando outra abordagem criativa a essa lista. Mostraremos como sobrepor criativamente as bordas das linhas para criar um design impressionante. Estamos garantindo que temos o mesmo tipo de design em todos os tamanhos de tela.

Vamos lá!

Inscreva-se no nosso canal no Youtube

Antevisão

Vamos criar um exemplo do zero, mas antes de mergulharmos nele, vamos dar uma olhada no resultado final em diferentes tamanhos de tela.

Baixe a fonte Mightype grátis

A primeira coisa que você precisa fazer é baixar a fonte gratuita com letras à mão Mightype do AF Studio. Acesse o link a seguir e habilite o download gratuito por e-mail.

Adicionar nova seção

Espaçamento

Depois de fazer o download da fonte gratuita mencionada na etapa anterior, você pode prosseguir e criar uma nova página. Depois de fazer isso, ative o Visual Builder, abra a primeira seção da sua nova página e adicione algum preenchimento personalizado:

• Enchimento superior: 250px
• Preenchimento inferior: 250 px

Adicionar nova linha

Estrutura da Coluna

Precisaremos de duas linhas no total. Vamos começar com o primeiro e cloná-lo depois, quando estiver pronto. Adicione uma nova linha à sua seção usando a seguinte estrutura de coluna:

Fundo Gradiente da Coluna 1

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione o seguinte fundo gradiente da coluna 1:

• Cor 1: #ffffff
• Cor 2: rgba (0,255,233,0,25)
• Tipo de gradiente da coluna: Radial
• Direção radial da coluna: esquerda
• Posição inicial da coluna: 59%
• Posição final da coluna: 59%
• Coluna Gradiente Acima da Imagem de Fundo: Sim

Padrão de fundo da coluna 1

Continue salvando o seguinte padrão em seu computador e enviando-o como sua imagem de plano de fundo da coluna 1:

Depois de fazer o upload do padrão, use as seguintes configurações de imagem de fundo:

• Tamanho da imagem de fundo da coluna: tamanho real
• Repetição da imagem de fundo da coluna: Espaço

Alinhamento de linha

Habilite o alinhamento de linha à direita também.

Dimensionamento

Também estamos usando algumas configurações de dimensionamento personalizadas para esta linha:

• Usar largura personalizada: Sim
• Largura personalizada: 950 px

Espaçamento

Estes são os valores de espaçamento que você precisa adicionar a seguir:

• Margem inferior: 100px
• Margem direita: -30px (tablet e telefone)
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Por último, mas não menos importante, adicione uma borda na parte superior, esquerda e inferior de sua linha:

• Largura da borda: 14 px
• Cor da borda: # 000000
• Estilo da borda esquerda: duplo

Adicionar Módulo de Texto de Título

Adicionar cópia H2

Agora podemos começar a adicionar nossos módulos! Adicione um título Módulo de texto e certifique-se de que sua cópia seja H2.

Cor de fundo

Vamos interromper a borda esquerda de nossa linha adicionando uma cor de fundo branca ao Módulo de Texto.

Carregar fonte Mightype

Em seguida, localize a fonte Mightype em seu computador e carregue-a em sua biblioteca de fontes clicando no botão de upload em sua lista de fontes.

Selecione o arquivo de fonte Mightype, dê um nome à sua fonte e carregue-a na sua biblioteca de fontes.

Configurações de texto H2

Depois de adicionar a nova fonte, vá em frente e faça algumas outras alterações nas configurações de texto H2:

• Fonte do título 2: Mightype
• Cor do texto do título: # 000000
• Tamanho do texto do título 2: 150 px (desktop), 100 px (tablet), 60 px (telefone)

Espaçamento

Para cada um dos módulos que você deseja sobrepor as bordas da linha, você precisará adicionar uma margem negativa. Esta margem negativa afetará apenas o módulo em questão, não a linha em que foi colocado. A margem negativa que você precisará adicionar depende do número de caracteres que são usados ​​em sua cópia.

• Margem superior: 200px
• Margem inferior: 100px
• Margem esquerda: -35%
• Enchimento superior: 50 px
• Preenchimento inferior: 50 px

Modo de mistura

E para ter certeza de que a cor de fundo do Módulo de Texto afeta apenas a borda da linha, e não o fundo da coluna 1, habilite o Modo de Mesclagem 'Multiplicar' nas configurações de Filtros.

Adicionar Módulo de Texto de Descrição

Cor de fundo

Logo abaixo do título do Módulo de Texto, vá em frente e adicione uma descrição do Módulo de Texto com uma cor de fundo branca.

Configurações de texto

Vá para as configurações de texto e faça algumas alterações:

• Tamanho do texto: 22 px (desktop), 18 px (tablet), 15 px (telefone)
• Altura da linha de texto: 1.8em
• Orientação do Texto: Centro

Dimensionamento

A seguir, diminua o tamanho deste módulo de texto para '96% '.

Espaçamento

Adicione algum espaçamento também:

• Margem inferior: 200px
• Margem esquerda: -50%
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Modo de mistura

E use o modo de mesclagem 'Multiply' aqui também.

Clone Row

Terminamos de modificar a primeira linha! Vamos criar o mesmo resultado, mas do outro lado da página. Para economizar tempo, clonaremos a linha que já temos e faremos algumas alterações ao longo do caminho.

Alterar configurações de linha

Fundo Gradiente da Coluna 1

A primeira coisa que você precisa alterar é o fundo gradiente da coluna 1:

• Cor 2: rgba (255,187,0,0,33)
• Direção radial da coluna: direita

Alinhamento de linha

Queremos que a linha apareça do outro lado, por isso escolheremos o alinhamento da linha à esquerda.

Espaçamento

Estamos ajustando as configurações de Espaçamento também:

• Margem esquerda: -25% (tablet e telefone)

Fronteira

Remova a borda esquerda que foi aplicada à sua linha e aplique-a no lado direito:

• Largura da borda direita: 14 px
• Cor da borda direita: # 000000
• Estilo da borda direita: duplo

Alterar as configurações do módulo de texto de título

Espaçamento

Altere as configurações de espaçamento de seu Módulo de texto de título a seguir:

• Margem esquerda: 52% (desktop e tablet), 58% (telefone)
• Margem direita: -52% (desktop e tablet), 58% (telefone)

Alterar configurações de texto de descrição

Espaçamento

Por último, mas não menos importante, a descrição do Módulo de Texto também precisa de alguns outros valores de Espaçamento:

• Margem Esquerda: 50%
• Margem direita: -50%

Antevisão

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

Pensamentos finais

A sobreposição de bordas de linha usando as opções integradas do Divi pode trazer ao seu site a personalização e a personalização que você estava procurando. Nesta postagem, mostramos exatamente como fazer isso. Recriamos um belo exemplo do zero. Este exemplo fica ótimo em todos os tamanhos de tela e usamos apenas as opções integradas do Divi! Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!