Como criar um título de modo de mesclagem dividido com Divi

Não é nenhum segredo que os modos de mesclagem podem ajudá-lo a dar atenção extra à estética do design em que você está trabalhando. No passado, cobrimos dicas e truques do modo de mesclagem que o ajudam a criar alguns designs exclusivos e lindos. Agora, como a atualização da coluna foi lançada, existem algumas coisas extras que você pode fazer com esses modos de mesclagem. Uma dessas coisas é criar um título de modo de mesclagem dividido. Neste artigo, mostraremos como você pode obter um resultado impressionante combinando modos de mesclagem de módulo e coluna, cores de fundo de coluna e margens negativas. 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.

Baixe a seção Hero do modo Split Blend GRATUITAMENTE

Para colocar suas mãos na seção de herói do modo de mistura grátis, 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Espaçamento

Adicione uma nova seção regular à página em que está trabalhando e remova todo o preenchimento padrão superior e inferior.

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

Sombra da caixa

Passe para as opções de sombra de caixa e adicione uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 70 px
• Cor da sombra: rgba (0,0,0,0,07)

Adicionar nova linha

Estrutura da Coluna

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

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique um fundo gradiente. Na próxima etapa desta postagem, mesclaremos o fundo gradiente com uma imagem de fundo usando um modo de mesclagem.

• Cor 1: # 00cbff
• Cor 2: # bf35ff
• Direção do gradiente: 96deg

Imagem de fundo

Adicione uma imagem de plano de fundo à linha e use-a em combinação com as seguintes configurações de imagem de plano de fundo:

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: tela

Dimensionamento

Vá para as configurações de dimensionamento a seguir e permita que a linha ocupe toda a largura do contêiner da seção.

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

Espaçamento

Remova todo o preenchimento padrão superior e inferior da próxima linha. Isso garantirá que a cor de fundo da coluna 2, que adicionaremos mais tarde nesta postagem, toque as bordas superior e inferior dos contêineres de linha e seção.

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

Exibição

Para garantir que as duas colunas apareçam lado a lado em tamanhos de tela menores, vamos adicionar uma única linha de código CSS ao elemento principal da linha.

display: flex;

Configurações da coluna 2

Cor de fundo

Depois de concluir as configurações gerais de linha, vá em frente e abra as configurações da segunda coluna. Comece adicionando uma cor de fundo branca.

• Cor de fundo: #FFFFFF

Filtros

Vá para a guia de design e adicione um modo de mesclagem a toda a coluna.

• Modo de mistura: tela

Adicionar Módulo Divisor à Coluna 1

Visibilidade

É hora de começar a adicionar módulos! O único módulo de que precisamos na primeira coluna é um Módulo divisor. Este módulo nos ajudará a criar espaço na primeira coluna sem que um módulo apareça. Certifique-se de que a opção 'Mostrar divisor' do divisor esteja desabilitada.

• Mostrar divisor: Não

Espaçamento

Passe para as configurações de espaçamento e adicione alguma margem inferior para criar espaço na primeira coluna.

• Margem inferior: 50vw

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar título H1

Vamos para a segunda coluna! Aqui, começaremos com o título Módulo de texto. Insira algum conteúdo H1 de sua escolha.

Configurações de texto H1

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do título: Poppins
• Peso da fonte do cabeçalho: negrito
• Cor do texto do título: #FFFFFF
• Tamanho do texto do título: 12vw
• Espaçamento entre letras do cabeçalho: -0,2vw

Espaçamento

Também estamos criando algum espaço ao redor do módulo e empurrando-o para a esquerda aplicando alguns valores de margem personalizados. A margem esquerda negativa desempenha um papel importante na criação do modo de mesclagem dividido. Permite que uma parte da cópia apareça abaixo da primeira coluna que não contém nenhuma cor de fundo.

• Margem superior: 18vw
• Margem inferior: 2vw
• Margem esquerda: -27,3vw

Filtros

Agora, nesta próxima etapa, a mágica acontecerá! Estamos combinando um modo de combinação de módulo e coluna para permitir que o plano de fundo da linha apareça. Certifique-se de selecionar o seguinte modo de mesclagem para o Módulo de Texto:

• Modo de mistura: diferença

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Para o segundo módulo! Adicione algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Poppins
• Alinhamento de Texto: Justificar
• Cor do texto: # 000000
• Tamanho do texto: 0.8vw (desktop), 1.5vw (tablet), 2.3vw (telefone)
• Altura da linha de texto: 2,5em (desktop e tablet), 2,2em (telefone)

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem inferior: 1vw
• Margem esquerda: 5vw
• Margem direita: 14vw (desktop), 4vw (tablet), 5vw (telefone)

Adicionar Módulo Divisor à Coluna 2

Visibilidade

Passe para o próximo módulo, que é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design e altere as configurações de linha de acordo:

• Cor da linha: #FFFFFF
• Estilo de linha: Sólido
• Posição da linha: topo

Dimensionamento

Modifique também as configurações de dimensionamento do divisor.

• Peso do divisor: 0,7vw
• Largura: 9%
• Altura: 0 px

Espaçamento

E adicione alguns valores de espaçamento personalizados.

• Margem superior: 2vw (desktop), 5vw (tablet e telefone)
• Margem inferior: 3vw (desktop), 6vw (tablet e telefone)
• Margem esquerda: 5vw

Filtros

Por último, mas não menos importante, aplique um modo de mesclagem para permitir que a imagem de fundo da linha e o gradiente apareçam.

• Modo de mistura: diferença

Adicionar Módulo de Botão à Coluna 2

Adicionar cópia

Passe para o próximo e último módulo, que é um Módulo de Botão. Insira alguma cópia de sua escolha.

Alinhamento

Vá para a guia de design e verifique se o alinhamento do botão está definido para a esquerda.

• Alinhamento do botão: Esquerda

Configurações de botão

Modifique as configurações do botão também.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: # 000000
• Raio da borda do botão: 0 px
• Fonte do botão: Poppins

Espaçamento

E, por último, adicione alguns valores de margem e preenchimento personalizados às configurações de espaçamento.

• Margem inferior: 10vw (desktop), 15vw (tablet e telefone)
• Margem esquerda: 5vw
• Enchimento superior: 1vw
• Preenchimento inferior: 1vw
• Preenchimento esquerdo: 3vw
• Preenchimento direito: 3vw

Antevisão

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

Pensamentos finais

Neste post, mostramos como usar as novas opções de coluna do Divi para criar títulos de modo de mistura dividida impressionantes. Este tutorial só mostra como as opções integradas do Divi são versáteis e como, a cada atualização do Divi, o software de design de terceiros se torna desnecessário. Se você tiver dúvidas ou sugestões, deixe 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.