Ter um título que se destaca significa garantir que você tenha a chance de capturar a atenção de seu visitantes. Os títulos geralmente não passam despercebidos devido ao seu tamanho e posição central, mas se você quiser dar um passo adiante e tornar o título literalmente pop, você veio ao lugar certo.

Neste tutorial, vamos combinar as configurações de animação de Divi para criar um título que se destaque e chame a atenção do seu visitantes.

Resultado final

Parte Um: Design

Configuração de seção

Cor de fundo

Vamos começar a desenhar! 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: #EEE

espaçamento

Em seguida, vá para as configurações de espaçamento de seção e adicione margens de preenchimento personalizadas.

• Estofamento 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: #DDD

dimensionamento

Em seguida, vá para as configurações de dimensionamento e deixe a linha preencher toda a largura da tela.

• Faça esta linha com largura total: Sim
• Use uma largura de calha personalizada: Sim
• Largura da calha: 1

espaçamento

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

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

Adicionar um módulo de texto

É hora de começar a adicionar módulos! O primeiro módulo que precisamos é um módulo de texto. Insira a primeira parte do seu título na caixa conteúdo usando o estilo de texto de 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: #ccc

Configurações de texto

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

• 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

Em seguida, crie a forma desejada usando preenchimento personalizado na parte superior e inferior.

• Preenchimento no topo: 10vw
• Estofamento inferior: 3vw

Animação

Por último, mas não menos importante, vamos adicionar algumas animações. É 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 seja exibido com um efeito de flash.

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

Clone o módulo de texto x4

Depois de editar o primeiro módulo de texto, você pode cloná-lo quantas vezes quiser, dependendo do tamanho do seu título. Para cada parte do título que você deseja exibir com um efeito flash, você precisará de um módulo de texto separado. Neste exemplo, precisaremos de módulos 4 adicionais.

Cor de fundo

Com a cor de fundo.

• Cópia 1 = Cor de fundo: # 5900ff, cor do texto: #FFF
• Cópia 2 = deixar como está, modificar a duração da animação (Atraso da animação): 1500ms
• Cópia 3 = Cor de fundo: # ffb200, cor do texto: #FFF, modificar duração da animação: 2000 ms
• Cópia 4 = Cor de fundo: # 000, cor do texto #FFF, modificar duração da animação: 2500 ms

Adicione uma 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, adicionaremos uma margem superior negativa a cada um dos módulos de texto duplicados. Em outras palavras, asseguramos que todos os módulos que seguem o primeiro módulo apareçam acima desse primeiro módulo de texto.

• Margem superior: -31.98vw

Linha de transformação

Transform Traduzir

Continue transformando a linha inteira, começando com os parâmetros de transformação.

• Inferior: -35vw

Transformar Rotação

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

• Esquerda: 320deg

Adicione a linha 2

Estrutura da coluna

Em segundo lugar! Agora que o efeito do título está em vigor, podemos começar a adicionar os módulos restantes. Adicione uma nova linha usando a seguinte estrutura de colunas:

dimensionamento

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

• Faça esta linha com largura total: Sim
• Use uma largura de calha personalizada: Sim
• Largura da calha: 1

espaçamento

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

• Preenchimento superior: 0px

Adicione um módulo de descrição de texto à coluna 2

Adicionar conteúdo H1

É hora de adicionar módulos. O primeiro módulo será um módulo de texto. Você pode adicionar o conteúdo que você deseja.

Configurações de texto H1

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

• Fonte do título: Didact Gothic
• Peso do título: Negrito
• Tamanho da fonte: 1.8vw (computador), 3.8vw (tablet), 4vw (telefone)

espaçamento

Adicione margens personalizadas na seção de espaçamento.

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

Adicione um módulo separador à coluna 2

visibilidade

O próximo módulo é o módulo separador. Certifique-se de que a opção “Mostrar divisor” esteja habilitada.

• Mostrar Separador: Sim

Cor

Em seguida, vá para a guia "Design" e altere a cor do separador.

• Cor: #000000

Dimentionnement

Altere as opções de espaçamento também.

• Peso de espaçamento: 8px
• Largura: 7%

espaçamento

Sempre com opções de dimensionamento.

• Margem baixa: 1vw
• Margem esquerda: 30vw

Adicione um módulo de texto à coluna 2

Adicionar conteúdo

O próximo módulo será outro módulo de texto. Você deve fornecer o conteúdo De sua escolha.

Configuração de texto

Em seguida, você precisa alterar as configurações de texto na guia "Design".

• Tamanho do texto: 0.8vw (computador), 1.3vw (tablet), 1.6vw (telefone)
• Altura da linha: 2.2em

espaçamento

Adicione algumas margens na seção de espaçamento também.

• Margem baixa: 3vw
• Margem Esquerda: 30vw
• Margem direita: 30vw (computador), 15vw (tablets e telefones)

Adicione um módulo de botão à coluna 2

Configurações do módulo de botão

Para o último módulo, que será um módulo de botão. Você adicionará o conteúdo de sua escolha e alterará as configurações da seguinte forma:

• Usar estilo personalizado: Sim
• Tamanho da fonte: 1vw (computador), 1.5vw (tablet), 2vw (telefone)
• Largura da borda do botão: 0px
• Fonte do botão: Poppins
• Peso do texto: negrito
• Estilo da fonte: maiúscula

espaçamento

Vá para as configurações de espaçamento e adicione uma margem externa personalizada, bem como uma margem interna e é isso.

• Margem externa esquerda: 30vw
• Margem alta interna: 1vw
• Margem baixa interna: 1vw
• Margem interna esquerda: 3vw
• margem interna direita: 3vw

para terminar

Neste tutorial, vimos como criar um título com texto animado, usando apenas as opções internas do Divi. Esta é uma excelente técnica que lhe permitirá chamar a atenção do seu visitantes de uma forma muito original.