Como conduzir os visitantes de forma persuasiva para baixo na página com as configurações de animação integradas da Divi

Um dos principais objetivos das seções de herói é convencer as pessoas a continuar rolando a página para baixo e descobrir mais conteúdo e informações que você compartilhou. Com as opções de animação integradas do Divi, você pode adicionar animações interativas à sua página que o ajudarão a conduzir os visitantes de forma persuasiva para baixo na página. Neste tutorial, vamos motivar os visitantes a rolar para baixo até a seção de serviços usando ícones de seta que os levam à seção de serviços.

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 criar!

Inscreva-se no nosso canal no Youtube

Adicionar Seção # 1

Cor de fundo

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: # 0f0f0f

Divisória Inferior

Continue adicionando um divisor inferior à seção.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #ffffff
• Altura do divisor: 30px
• Repetição horizontal do divisor: 10x (desktop), 4x (tablet e telefone)

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Preenchimento superior: 269 px (desktop), 100 px (tablet e telefone)
• Preenchimento inferior: 674 px (desktop), 200 px (tablet e telefone)

Adicionar linha

Estrutura da Coluna

Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para as configurações de dimensionamento e habilite a opção 'Tornar esta linha largura total'.

• Tornar esta linha com largura total: Sim

Adicionar Módulo de Texto

Adicionar conteúdo

O único módulo de que precisamos nesta linha é um Módulo de Texto. Vá em frente e adicione algum conteúdo H1 de sua escolha.

Configurações de texto de título

Altere as configurações de texto do título a seguir.

• Fonte do título: Didact Gothic
• Peso da fonte do cabeçalho: negrito
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: #ffffff
• Tamanho do texto do cabeçalho: 170 px (desktop), 50 px (tablet e telefone)
• Altura da linha de direção: 0,8em

• Cabeçalho Texto Sombra Comprimento Vertical: 1,5em
• Cor da sombra do texto do título: rgba (0,0,0,0.11)

Adicionar Seção # 2

Cor de fundo

Continue adicionando a segunda seção à página. Altere a cor de fundo nas configurações da seção.

• Cor de fundo: # 0f0f0f

Divisor superior

Adicione um divisor superior à seção também.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #ffffff
• Altura do divisor: 30px
• Repetição horizontal do divisor: 10x (desktop), 4x (tablet e telefone)

Espaçamento

E aumente os valores de espaçamento nas configurações de espaçamento.

• Enchimento superior: 245 px
• Preenchimento inferior: 245 px

Adicionar linha

Estrutura da Coluna

Continue adicionando uma nova linha com a seguinte estrutura de coluna à seção:

Dimensionamento

Abra as configurações de linha, vá para as configurações de dimensionamento e faça algumas alterações.

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

Adicionar Módulo Blurb

Selecione o ícone

O primeiro módulo de que precisaremos na primeira coluna é um Módulo Blurb. A única parte do elemento do Módulo Blurb de que precisamos é o ícone. Selecione o ícone de seta que aponta para baixo.

Configurações de ícone

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

• Cor do ícone: # 4ffcff
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 150px

Espaçamento

Para aumentar o alcance do ícone, precisaremos adicionar alguma margem superior negativa. Isso permitirá que o Módulo Blurb se sobreponha à seção anterior e permitirá que a animação entre as duas seções aconteça suavemente. Para compensar a margem personalizada, adicionaremos também preenchimento superior personalizado. Isso garantirá que o ícone permaneça na mesma posição de antes. A única coisa que muda é o tamanho e o alcance de todo o módulo.

• Margem superior: -550px
• Enchimento superior: 550 px

Animação

Por último, mas não menos importante, adicione uma animação ao Módulo Blurb usando as seguintes configurações:

• Estilo de animação: slide
• Direção da animação: baixo
• Duração da animação: 3000ms
• Atraso de animação: 1200 ms
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Ease-In-Out
• Animação de imagem / ícone: sem animação

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

O próximo módulo de que precisamos na primeira coluna é um Módulo de Texto. Adicione algum conteúdo de sua escolha.

Configurações de texto

Continue alterando as configurações de texto.

• Fonte do texto: Didact Gothic
• Peso da fonte do texto: negrito
• Cor do texto: rgba (255,255,255,0,03)
• Tamanho do texto: 350px
• Orientação do Texto: Centro

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Adicione um segundo Módulo de Texto à primeira coluna com algum conteúdo H3 de sua escolha.

Configurações de texto de título

E altere as configurações de texto do título na guia de design.

• Fonte do título 3: Didact Gothic
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 40 px (desktop), 30 px (tablet e telefone)
• Cabeçalho 3 espaçamento entre letras: -1 px

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O próximo módulo necessário na primeira coluna é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Continue alterando a cor do divisor na guia de design.

• Cor: #ffffff

Dimensionamento

Faça algumas alterações nas configurações de dimensionamento também.

• Largura: 59%
• Alinhamento do Módulo: Centro

Animação

E adicione uma animação ao módulo também.

• Estilo de animação: slide
• Direção da Animação: Centro
• Duração da animação: 2.000 ms
• Intensidade de animação: 10%
• Curva de velocidade de animação: Ease-In-Out

Adicione o Módulo de Texto # 3 à Coluna 1

Adicionar conteúdo

O próximo e último módulo de que precisamos na coluna um é outro Módulo de Texto. Adicione algum conteúdo de sua escolha.

Configurações de texto

Continue alterando as configurações de texto.

• Peso da fonte do texto: leve
• Cor do texto: # b7b7b7
• Tamanho do texto: 18 px
• Altura da linha de texto: 1.8em
• Orientação do Texto: Centro

Animação

E adicione uma animação ao módulo.

• Estilo de animação: slide
• Direção da animação: para cima
• Intensidade de animação: 20%
• Curva de velocidade de animação: Ease-In-Out

Clonar módulos 3 vezes e colocar duplicatas nas colunas restantes

Agora que terminamos de modificar todos os módulos na coluna 1, podemos clonar todos os módulos na coluna um 3 vezes e colocar as duplicatas nas colunas restantes.

Alterar o conteúdo do módulo

Altere o conteúdo das duplicatas.

Adicionar Atraso de Animação aos Módulos Divisores de Duplicados

Adicione também algum atraso de animação a cada uma das duplicatas do Módulo Divisor.

• Módulo divisor na coluna 2: 400ms
• Módulo divisor na coluna 3: 800ms
• Módulo divisor na coluna 4: 1200ms

Adicionar Atraso de Animação às Duplicatas do Módulo de Texto # 3

Faça o mesmo para o último Módulo de Texto em cada coluna.

• Último Módulo de Texto na Coluna 2: 400ms
• Último Módulo de Texto na Coluna 3: 800ms
• Último Módulo de Texto na Coluna 4: 1200ms

Personalize o ícone # 2 do Blurb

Cor do ícone

Também estamos modificando a cor e a animação do ícone de sinopse para cada uma das duplicatas. Abra o Módulo Blurb na coluna 2 e mude a cor do ícone.

• Cor do ícone: # ff6b86

Animação

Altere também as configurações de animação.

• Tipo de animação: slide
• Direção da animação: baixo
• Duração da animação: 2.000 ms
• Atraso de animação: 800ms
• Intensidade de animação: 62%
• Opacidade inicial da animação: 100%
• Animação de imagem / ícone: sem animação

Personalize o ícone do Blurb nº 3

Cor do ícone

Continue abrindo o Módulo Blurb na coluna 3 e altere a cor do ícone.

• Cor do ícone: # ffe500

Animação

Modifique as configurações de animação também.

• Tipo de animação: slide
• Direção da animação: baixo
• Duração da animação: 1000ms
• Atraso de animação: 600 ms
• Intensidade de animação: 69%
• Opacidade inicial da animação: 100%
• Animação de imagem / ícone: sem animação

Personalize o ícone # 4 do Blurb

Cor do ícone

Abra o último Módulo Blurb, na coluna 4, e mude a cor do ícone.

• Cor do ícone: # 00ff9d

Animação

E finalize o design alterando as configurações de animação na guia de design.

• Tipo de animação: slide
• Direção da animação: baixo
• Duração da animação: 3000ms
• Atraso de animação: 400 ms
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%
• Animação de imagem / ícone: sem animação

Pensamentos finais

Nesta postagem, mostramos como conduzir os visitantes de forma persuasiva para baixo na página usando as configurações de animação do Divi. A ideia básica é que você use os Módulos do Blurb para seus ícones e aumente o alcance da animação para a seção de heróis. Você pode usar essa abordagem em qualquer tipo de site que construir e ser tão criativo quanto desejar. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!