Como fazer seu título se destacar com as configurações de animação da Divi

Normalmente, o título é a primeira coisa que as pessoas leem quando visitam seu site. Além de ter um título muito bom, também é importante fazer as pessoas perceberem e realmente lerem o que você está mostrando a elas. Os títulos geralmente não passam despercebidos por causa de seu tamanho e posição central na seção do herói, mas se você quiser dar um passo adiante e literalmente fazer o título se destacar, este tutorial é para você.

Vamos combinar as configurações de animação do Divi para criar um título que se destaque e chame a atenção dos visitantes. Vamos dividir o título em 5 partes e criar um efeito flash que fará seus visitantes quererem seguir o movimento e ler o que está sendo compartilhado.

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

Vamos começar a recriar!

Adicionar nova seção

Cor de fundo

Vamos começar a criar! Crie uma nova página e adicione uma seção regular a ela. Abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: #ededed

Espaçamento

Em seguida, vá para as configurações de espaçamento da seção e adicione algum preenchimento inferior personalizado.

• Preenchimento inferior: 10vw

Adicionar linha # 1

Estrutura da Coluna

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

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo da linha.

• Cor de fundo: # c9c9c9

Dimensionamento

Vá para as configurações de dimensionamento a seguir e permita que a linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Remova o preenchimento padrão superior e inferior da linha também.

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

Adicionar Módulo de Texto # 1

Adicionar conteúdo

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de Texto. Insira a primeira parte do título na caixa de conteúdo usando o estilo de texto do parágrafo.

Cor de fundo

Em seguida, vá para as configurações de fundo do módulo e adicione uma cor de fundo.

• Cor de fundo: # c9c9c9

Configurações de texto

Altere as configurações de texto na guia de design também.

• Fonte do texto: Didact Gothic
• Peso da fonte do texto: negrito
• Cor do texto: # 000000
• Tamanho do texto: 10vw
• Altura da linha de texto: 0,9em
• Orientação do Texto: Centro

Espaçamento

E crie a forma desejada usando preenchimento superior e inferior personalizado.

• Enchimento superior: 10vw
• Preenchimento inferior: 3vw

Animação

Por último, mas não menos importante, vamos adicionar uma animação. É importante certificar-se de que a duração da animação e a opacidade inicial são zero. Isso permitirá que o módulo de texto apareça com um efeito de flash.

• Estilo de animação: Fade
• Repetição de animação: uma vez
• Duração da animação: 0ms
• Atraso de animação: 1000 ms

Clonar Módulo de Texto x4

Assim que terminar de modificar o primeiro Módulo de texto, você pode clonar o módulo quantas vezes quiser, dependendo do comprimento do título. Para cada parte do título que você deseja mostrar com um efeito de flash, você precisará de um Módulo de Texto separado. Para este exemplo, precisaremos de 4 módulos extras.

Alterar Duplicado # 1

Contente

Altere a cópia da primeira duplicata.

Cor de fundo

Junto com a cor de fundo.

• Cor de fundo: # 5900ff

Cor do texto

Mude a cor do texto para branco.

• Cor do texto: #ffffff

Animação

E aumente o atraso da animação nas configurações de animação. Isso permitirá que seus visitantes tenham tempo suficiente para ler o Módulo de texto anterior antes que este apareça.

• Atraso de animação: 1500ms

Alterar Duplicado # 2

Contente

Altere o conteúdo da segunda duplicata a seguir.

Cor de fundo

Junto com a cor de fundo.

• Cor de fundo: # ffb200

Cor do texto

E a cor do texto também.

• Cor do texto: #ffffff

Animação

Novamente, vamos ter certeza de que o atraso da animação é maior do que o atraso da animação que foi usado para os dois módulos anteriores. Estamos deixando 500ms entre cada um deles para dar às pessoas tempo suficiente para ler.

• Atraso de animação: 2.000 ms

Alterar Duplicado # 3

Contente

Continue alterando o conteúdo da terceira duplicata.

Animação

Junto com o atraso da animação.

• Atraso de animação: 2500 ms

Alterar Duplicado # 4

Contente

Para a próxima e última duplicata. Altere o conteúdo.

Cor de fundo

Junto com a cor de fundo.

• Cor de fundo: # 000000

Cor do texto

Modifique a cor do texto também.

• Cor do texto: # 3a3a3a

Animação

E aumente o atraso da animação nas configurações de animação.

• Atraso de animação: 3000ms

Adicionar margem negativa a cada módulo de texto, exceto o primeiro

Quando terminar de personalizar todos os Módulos de texto, você pode prosseguir e criar uma sobreposição. Para criar essa sobreposição, vamos adicionar uma margem superior negativa a cada um dos Módulos de Texto duplicados. Em outras palavras, estamos garantindo que todos os módulos que vêm após o primeiro módulo apareçam na parte superior desse primeiro Módulo de texto.

• Margem superior: -21,98vw

Transform Row

Transformar Traduzir

Continue transformando toda a linha, começando com as configurações de conversão de transformação.

• Inferior: -35vw

Transformar, girar

Modifique os valores de rotação de transformação também.

• Esquerda: 320deg

Adicionar linha # 2

Estrutura da Coluna

Para a segunda fila! Agora que temos o efeito de título no lugar, podemos começar a adicionar os módulos restantes. Adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela nas configurações de dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Remova o preenchimento padrão superior da próxima linha.

• Preenchimento superior: 0 px

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

Adicionar conteúdo H1

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de texto de título. Adicione algum conteúdo H1 de sua escolha.

Configurações de texto H1

Em seguida, vá para a guia de design e altere as configurações de texto H1.

• Fonte do título: Didact Gothic
• Peso da fonte do cabeçalho: negrito
• Tamanho do texto do título: 1.8vw (desktop), 3.8vw (tablet), 4vw (telefone)

Espaçamento

Adicione alguns valores de margem personalizados às configurações de espaçamento.

• Margem superior: -4vw
• Margem inferior: 2vw
• Margem esquerda: 30vw
• Margem direita: 30vw (desktop), 15vw (tablet e telefone)

Adicionar Módulo Divisor à Coluna 2

Visibilidade

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

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do divisor.

• Cor: # 000000

Dimensionamento

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

• Peso do divisor: 8px
• Largura: 7%

Espaçamento

Junto com as configurações de espaçamento.

• Margem inferior: 1vw
• Margem esquerda: 30vw

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

Adicionar conteúdo

O próximo módulo de que precisamos é outro Módulo de Texto. Insira algum conteúdo de sua escolha.

Configurações de texto

Em seguida, modifique as configurações de texto na guia de design.

• Tamanho do texto: 0,8vw (desktop), 1,3vw (tablet), 1,6vw (telefone)
• Altura da linha de texto: 2.2em

Espaçamento

Adicione alguns valores de margem personalizados nas configurações de espaçamento também.

• Margem inferior: 3vw
• Margem esquerda: 30vw
• Margem direita: 30vw (desktop), 15vw (tablet e telefone)

Adicionar Módulo de Botão à Coluna 2

Configurações de botão

Passe para o próximo e último módulo, que é um Módulo de Botão. Adicione alguma cópia de sua escolha e altere as configurações do botão de acordo:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 1,5vw (tablet), 2vw (telefone)
• Largura da borda do botão: 0 px
• Fonte do botão: Poppins
• Intensidade da fonte: Negrito
• Estilo da fonte: maiúsculas

Espaçamento

Vá para as configurações de espaçamento e adicione alguns valores de margem e preenchimento personalizados e pronto!

• Margem esquerda: 30vw
• 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.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como fazer seu título se destacar usando apenas as opções integradas do Divi. Essa é uma ótima técnica para chamar a atenção dos visitantes e comunicar sua mensagem de maneira original. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!