Como criar títulos de seções vibrantes para seu próximo projeto Divi

Sabemos que a maioria de vocês está sempre procurando novas maneiras de tornar os sites que criam únicos. Com Divi, existem muitas maneiras de fazer seu site se destacar dos outros que estão por aí. Hoje, vamos mostrar como você pode criar títulos de seção impressionantes usando apenas as opções integradas do Divi. Essa abordagem é ótima se você deseja criar um design impressionante, manter a estrutura geral da página e manter a navegação contínua.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado que pretendemos alcançar em diferentes tamanhos de tela:

Vamos começar a criar!

Adicionar nova seção regular

Espaçamento

Comece abrindo uma nova página, alternando para o Visual Builder e adicionando sua primeira seção. Sem adicionar nenhuma linha ou módulo ainda, abra as configurações da seção e adicione algum preenchimento:

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

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma linha usando a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações de linha a seguir e adicione uma cor de fundo a toda a linha:

• Cor de fundo: # f9f9f9

Fundo Gradiente da Coluna 1

Em seguida, adicione um fundo gradiente sutil à sua primeira coluna. Isso ajudará a criar a sobreposição de títulos de seção entre as colunas.

• Cor 1: # 0031c4
• Cor 2: # 00aeff
• Direção do gradiente da coluna 1: 125 graus

Dimensionamento

Altere o espaçamento de sua linha também para garantir que ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Por último, altere as configurações de Espaçamento de acordo com os diferentes tamanhos de tela:

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 2: 200 px
• Preenchimento inferior da coluna 2: 200 px
• Preenchimento esquerdo da coluna 2: 350 px (desktop), 50 px (tablet e telefone)
• Preenchimento direito da coluna 2: 50 px

Adicionar Módulo de Texto de Título de Seção à Coluna 1

Configurações de texto H2

Agora que todas as configurações de linha estão definidas, podemos começar a adicionar módulos. Começaremos com a primeira coluna. Aqui, o único módulo de que precisaremos é um Módulo de Texto. Depois de adicionar o conteúdo H2 na caixa Conteúdo, vá em frente e altere as configurações de texto H2:

• Peso da fonte do cabeçalho 2: ultra negrito
• Estilo da fonte do título 2: maiúsculas
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 150 px
• Altura da linha do título 2: 1,25em
• Comprimento vertical da sombra do texto do cabeçalho 2: -0,55em
• Cor da sombra do texto do título 2: rgba (0,255,255,0,25)

Espaçamento

A sobreposição entre as colunas é diferente no desktop, tablet e telefone. Para criar a sobreposição, faremos algumas alterações nas configurações de Espaçamento do nosso Módulo de Texto:

• Margem superior: 325 px (desktop), 150 px (tablet e telefone)
• Margem inferior: 325 px, -120 px (tablet), -110 px (telefone)
• Margem direita: -100% (desktop), 0px (tablet e telefone)

Filtro

Por último, mas não menos importante, usaremos um modo de mesclagem para criar a diferença de cor para o texto que aparece.

• Modo de mistura: Sobreposição

Adicionar Módulo de Título de Texto à Coluna 2

Configurações de texto H3

Vamos passar para a segunda coluna. Lá, o primeiro módulo de que precisaremos é um Módulo de texto de título. Depois de adicionar seu conteúdo H3, altere as configurações de texto H3:

• Cabeçalho 3 Peso da fonte: Semi negrito
• Cor do texto do título 3: # 00aeff
• Tamanho do texto do título 3: 60px
• Cabeçalho 3 espaçamento entre letras: -3 px

Espaçamento

Crie algum espaço adicionando a margem inferior a seguir:

• Margem inferior: 50px

Adicionar Módulo Divisor à Coluna 2

Divider Color

O segundo módulo de que precisaremos é um Módulo divisor. Abra as configurações de cores e altere a cor para combinar com a paleta de cores do design:

• Cor do divisor: # 00ffff

Dimensionamento

Em seguida, modifique as configurações de dimensionamento:

• Altura: 56px
• Largura: 75%

Adicionar Módulo de Texto de Descrição à Coluna 2

Configurações de texto

Continue adicionando um Módulo de Texto de descrição usando as seguintes configurações de texto:

• Tamanho do texto: 17px
• Altura da linha de texto: 1,3em
• Orientação do Texto: Justificar

Dimensionamento

Altere as configurações de dimensionamento a seguir:

• Dimensionamento: 70% (desktop), 100% (tablet e telefone)

Espaçamento

Adicione algum espaço abaixo deste módulo usando uma margem inferior também:

• Margem inferior: 50px

Adicionar Módulo de Botão à Coluna 2

Configurações de botão

O último módulo de que precisaremos nesta coluna é um Módulo de botão. Depois de adicionar o CTA, altere as configurações do botão:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 17 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 00aeff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px
• Espaçamento entre letras dos botões: -1px
• Peso da fonte: ultra negrito
• Estilo da fonte: maiúsculas

Espaçamento

E para dar ao botão uma aparência mais limpa, também adicionaremos um pouco de preenchimento:

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Sombra da caixa

Por último, mas não menos importante, usaremos uma sombra de caixa sutil para adicionar um pouco de profundidade à nossa seção:

• Força do desfoque de sombra da caixa: 54 px
• Força de propagação da sombra da caixa: -8px
• Cor da sombra: rgba (0,0,0,0.3)

Seção Clone

Alterar todas as cópias

Para criar a segunda seção, vamos simplesmente clonar aquela que já criamos e, em seguida, alterar toda a cópia.

Alterar a cor de fundo da linha

Para esta nova seção, vamos usar outra paleta de cores. Comece alterando a cor de fundo de sua linha.

• Cor de fundo: #efefef

Alterar o fundo gradiente da coluna 1

Em seguida, escolha outro plano de fundo gradiente também.

• Cor 1: # 5f00a8
• Cor 2: # 9000ff

Alterar a cor da sombra do título da seção

Também estamos combinando a cor da sombra do texto com nossa nova paleta de cores:

• Cor da sombra do texto do título 2: rgba (255,0,255,0,24)

Alterar as configurações de espaçamento do título da seção

Dependendo do comprimento da cópia que você está usando, você precisará brincar com a margem direita negativa.

• Margem direita: -110% (desktop)

Alterar a cor do texto do módulo de texto do título

Em seguida, altere a Cor do Texto do Módulo de Texto do título na coluna 2.

• Cor do texto do título 3: # 9000ff

Mudar a cor do divisor

Da mesma forma, faça com que a cor do divisor corresponda ao desenho.

• Cor: # ff00ff

Alterar a cor de fundo do botão

Para terminar, você precisará alterar a cor de fundo do Módulo de Botão.

• Cor de fundo do botão: # 9000ff

Antevisão

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

Pensamentos finais

Há muitas maneiras de fazer seu web design se destacar dos outros sites por aí. Neste post, mostramos como criar títulos de seção impressionantes, e seções em geral, usando apenas as opções integradas do Divi. Combinamos fundos de gradiente de coluna com sobreposições de Módulo de Texto, sombras de texto e modos de mesclagem para criar um resultado final impressionante. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!