divi headline pop featured image

Seu título geralmente é a primeira coisa que as pessoas leem quando visitam seu website. Além de ter um bom título, também é importante fazer as pessoas perceberem e realmente lerem o que você está mostrando. As manchetes geralmente não passam despercebidas por causa de seu tamanho e posição central na seção de heróis, mas se você quiser dar um passo além e literalmente fazer a manchete estourar, 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 de seus visitantes. Vamos dividir o título em 5 partes e criar um efeito de flash que fará com que seus visitantes queiram seguir o movimento e ler o que está sendo compartilhado.

Vamos lá!

Visualizar

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

manchete pop  - divi headline pop preview desktop - Como fazer seu título Pop com configurações de animação do Divi

Móvel

manchete pop  - divi headline pop preview mobile - Como fazer seu título Pop com configurações de animação do Divi

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 do plano de fundo.

  • Cor de fundo: #ededed

manchete pop  - abx1 - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

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

  • Preenchimento inferior: 10vw

manchete pop  - abx2 - Como fazer seu título Pop com configurações de animação do Divi

Adicionar linha 1

Estrutura da Coluna

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

manchete pop  - abx3 - Como fazer seu título Pop com configurações de animação do Divi

Cor de fundo

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

  •  Cor de fundo: # c9c9c9

manchete pop  - abx4 - Como fazer seu título Pop com configurações de animação do Divi

Dimensionamento

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

  • Make This Row Largura Total: Sim
  • Use a largura da medianiz personalizada: sim
  • Largura da Calha: 1

manchete pop  - abx5 - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

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

  • Top Padding: 0 px
  • Preenchimento inferior: 0 px

manchete pop  - abx6 - Como fazer seu título Pop com configurações de animação do Divi

Adicionar módulo de texto 1

Adicionar conteúdo

Hora de começar a adicionar módulos! O primeiro módulo que precisamos é de um módulo de texto. Digite a primeira parte do seu título para a caixa de conteúdo usando o estilo de texto do parágrafo.

manchete pop  - bbx1 - Como fazer seu título Pop com configurações de animação do Divi

Cor de fundo

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

  • Cor de fundo: # c9c9c9

manchete pop  - bbx2 - Como fazer seu título Pop com configurações de animação do Divi

Configurações de texto

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

  • Fonte do texto: Didact Gothic
  • Peso da Fonte de Texto: Negrito
  • Cor do texto: # 000000
  • Tamanho do texto: 10vw
  • Altura da linha de texto: 0.9em
  • Orientação do Texto: Centro

manchete pop  - bbx3 - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

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

  • Top Padding: 10vw
  • Preenchimento inferior: 3vw

manchete pop  - bbx4 - Como fazer seu título Pop com configurações de animação do Divi

Animação

Por último, mas não menos importante, vamos adicionar uma animação. É importante garantir que a duração da animação e a opacidade inicial sejam 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: Once
  • Duração da Animação: 0ms
  • Atraso da animação: 1000 ms

manchete pop  - bbx5 - Como fazer seu título Pop com configurações de animação do Divi

Módulo de Texto Clone x4

Depois de modificar o primeiro Módulo de Texto, você pode prosseguir e clonar o módulo quantas vezes quiser, dependendo da duração 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.

manchete pop  - bbx6 - Como fazer seu título Pop com configurações de animação do Divi

Alterar Duplicar # 1

Conteúdo

Altere a cópia da primeira duplicata.

manchete pop  - bbx7 - Como fazer seu título Pop com configurações de animação do Divi

Cor de fundo

Junto com a cor de fundo.

  • Cor de fundo: # 5900ff

manchete pop  - bbx8 - Como fazer seu título Pop com configurações de animação do Divi

Cor do texto

Altere a cor do texto para branco.

  • Cor do texto: #ffffff

manchete pop  - bbx9 - Como fazer seu título Pop com configurações de animação do Divi

Animação

E aumentar o atraso de 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 da animação: 1500 ms

manchete pop  - bbx10 - Como fazer seu título Pop com configurações de animação do Divi

Alterar Duplicar # 2

Conteúdo

Altere o conteúdo da segunda duplicata a seguir.

manchete pop  - bbx11 - Como fazer seu título Pop com configurações de animação do Divi

Cor de fundo

Junto com a cor de fundo.

  • Cor de fundo: # ffb200

manchete pop  - bbx12 - Como fazer seu título Pop com configurações de animação do Divi

Cor do texto

E a cor do texto também.

  • Cor do texto: #ffffff

manchete pop  - bbx13 - Como fazer seu título Pop com configurações de animação do Divi

Animação

Mais uma vez, garantiremos que o atraso da animação seja maior que o atraso de animação usado nos dois módulos anteriores. Estamos deixando 500ms entre cada um deles para dar às pessoas tempo suficiente para ler.

  • Atraso da animação: 2000 ms

manchete pop  - bbx14 - Como fazer seu título Pop com configurações de animação do Divi

Alterar Duplicar # 3

Conteúdo

Continue alterando o conteúdo da terceira duplicata.

manchete pop  - cbx1 - Como fazer seu título Pop com configurações de animação do Divi

Animação

Junto com o atraso da animação.

  • Atraso da animação: 2500 ms

manchete pop  - cbx2 - Como fazer seu título Pop com configurações de animação do Divi

Alterar Duplicar # 4

Conteúdo

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

manchete pop  - cbx3 - Como fazer seu título Pop com configurações de animação do Divi

Cor de fundo

Junto com a cor de fundo.

  • Cor de fundo: # 000000

manchete pop  - cbx4 - Como fazer seu título Pop com configurações de animação do Divi

Cor do texto

Modifique a cor do texto também.

  • Cor do texto: # 3a3a3a

manchete pop  - cbx5 - Como fazer seu título Pop com configurações de animação do Divi

Animação

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

  • Atraso da animação: 3000 ms

manchete pop  - cbx6 - Como fazer seu título Pop com configurações de animação do Divi

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

Depois de personalizar todos os módulos de texto, você pode ir em frente 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 nos certificando de que todos os módulos que vêm depois do primeiro módulo apareçam no primeiro módulo de texto.

  • Margem Superior: -21.98vw

manchete pop  - cbx7 - Como fazer seu título Pop com configurações de animação do Divi

Transform Row

Transform Traduzir

Continue transformando a linha inteira, começando pelas configurações de conversão de conversão.

  • Inferior: -35vw

manchete pop  - cbx8 - Como fazer seu título Pop com configurações de animação do Divi

Transforme Rodar

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

  • Esquerda: 320deg

manchete pop  - cbx9 - Como fazer seu título Pop com configurações de animação do Divi

Adicionar linha 2

Estrutura da Coluna

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

manchete pop  - dbx1 - Como fazer seu título Pop com configurações de animação do Divi

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:

  • Make This Row Largura Total: Sim
  • Use a largura da medianiz personalizada: sim
  • Largura da Calha: 1

manchete pop  - dbx2 - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

Remova o preenchimento superior padrão da linha a seguir.

  • Top Padding: 0 px

manchete pop  - dbx3 - Como fazer seu título Pop com configurações de animação do Divi

Adicione o módulo de texto de título à coluna 2

Adicionar Conteúdo H1

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

manchete pop  - dbx4 - Como fazer seu título Pop com configurações de animação do Divi

Configurações de texto H1

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

  • Heading Font: Didact Gothic
  • Peso da fonte do título: Negrito
  • Título do texto: 1.8vw (Desktop), 3.8vw (Tablet), 4vw (Telefone)

manchete pop  - dbx5 - Como fazer seu título Pop com configurações de animação do Divi

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 (área de trabalho), 15vw (Tablet e telefone)

manchete pop  - dbx6 - Como fazer seu título Pop com configurações de animação do Divi

Adicionar módulo divisor à coluna 2

Visibilidade

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

  • Mostrar divisor: sim

manchete pop  - dbx7 - Como fazer seu título Pop com configurações de animação do Divi

Cor

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

  • Cor: # 000000

manchete pop  - dbx8 - Como fazer seu título Pop com configurações de animação do Divi

Dimensionamento

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

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

manchete pop  - dbx9 - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

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

  • Margem Inferior: 1vw
  • Margem Esquerda: 30vw

manchete pop  - dbx10 - Como fazer seu título Pop com configurações de animação do Divi

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

Adicionar conteúdo

O próximo módulo que precisamos é outro módulo de texto. Digite algum conteúdo de sua escolha.

manchete pop  - ebx1 - Como fazer seu título Pop com configurações de animação do Divi

Configurações de texto

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

  • Tamanho do texto: 0.8vw (Desktop), 1.3vw (Tablet), 1.6vw (Telefone)
  • Altura da linha de texto: 2.2em

manchete pop  - ebx2 - Como fazer seu título Pop com configurações de animação do Divi

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 (área de trabalho), 15vw (Tablet e telefone)

manchete pop  - ebx3 - Como fazer seu título Pop com configurações de animação do Divi

Adicionar módulo de botão à coluna 2

Configurações de botão

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 o botão: Sim
  • Botão Tamanho do Texto: 1vw (Desktop), 1.5vw (Tablet), 2vw (Telefone)
  • Largura da borda do botão: 0 px
  • Botão Fonte: Poppins
  • Intensidade da fonte: Negrito
  • Estilo da fonte: maiúscula

manchete pop  - ebx5 - Como fazer seu título Pop com configurações de animação do Divimanchete pop  - ebx5a - Como fazer seu título Pop com configurações de animação do Divi

Espaçamento

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

  • Margem Esquerda: 30vw
  • Top Padding: 1vw
  • Preenchimento inferior: 1vw
  • Enchimento esquerdo: 3vw
  • Direito de preenchimento: 3vw

manchete pop  - ebx6 - Como fazer seu título Pop com configurações de animação do Divi

Visualizar

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

Área de Trabalho

manchete pop  - divi headline pop preview desktop - Como fazer seu título Pop com configurações de animação do Divi

Móvel

manchete pop  - divi headline pop preview mobile - Como fazer seu título Pop com configurações de animação do Divi

Pensamentos finais

Neste post, mostramos como tornar seu título pop usando apenas as opções incorporadas do Divi. Esta é uma ótima técnica para atrair a atenção de seus visitantes e comunicar sua mensagem de uma maneira original. Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!

Leave A Comment

O que pensa sobre este post!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

icon 01

Onde Estamos

Avenida 7 de Setembro, 325, Icaraí, NIterói, RJ

wap80

WhatsApp Suporte

(21) 98382-7525

(21) 3620-4538

blue60

Área do Cliente

central.gmsite.com.br

Olá!
Entre em contato comigo pelo WhatsApp!
Powered by