Criação de títulos animados usando as opções de foco do Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível. Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar títulos animados usando as opções de foco do Divi e o Pacote de Layout da Escola de Condução. Esta é uma ótima abordagem para colocar diferentes partes de sua cópia no centro das atenções e acionar a ação.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado.

Carregar página inicial da escola de motoristas

Para criar este tutorial, usaremos a página inicial do Driver School Layout Pack. Então vá em frente e adicione uma nova página, habilite o Visual Builder e escolha a página de destino de seus layouts predefinidos.

Criar título animado nº 1

Alterar o fundo do gradiente da seção

Vamos começar a construir o primeiro exemplo! Estamos adicionando este título animado à seção de herói de nossa página. Mas antes de chegarmos lá, abra as configurações de sua seção de herói e altere as cores de sobreposição de fundo gradiente.

• Cor 1: rgba (0,0,0,0.94)
• Cor 2: rgba (12,12,12,0.63)

Remova as duas últimas linhas na seção Hero

Continue removendo as duas últimas linhas da seção.

Alterar Alinhamento do Divisor

Estamos mantendo a linha que ainda existe. A única coisa que precisamos mudar é o alinhamento do módulo do Módulo divisor.

• Alinhamento do Módulo: Centro

Adicionar nova linha

Estrutura da Coluna

Logo abaixo da linha anterior, vá em frente e adicione uma nova linha usando a seguinte estrutura de coluna:

Espaçamento

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

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

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

O único módulo de que precisaremos é um Módulo de texto. Estamos usando dois tipos de texto diferentes: um título e um link de parágrafo. Vá em frente e adicione sua cópia de escolha e certifique-se de que a cópia apareça em duas linhas pressionando shift + enter no meio de cada frase.

Cor de fundo padrão

Em seguida, vá para as configurações de fundo e adicione uma cor de fundo padrão ao Módulo de Texto.

• Cor de fundo: rgba (255,255,255,0)

Hover Background Color

Altere a cor do plano de fundo ao pairar.

• Cor de fundo: # ffa53b

Configurações de texto padrão

Em seguida, altere a orientação do texto nas configurações gerais de texto.

• Orientação do Texto: Centro

Configurações de texto de link padrão

Mude para a guia do link e faça algumas alterações na aparência da cópia do link.

• Peso da Fonte do Link: Ultra Negrito
• Estilo da fonte do link: itálico, maiúsculas, sublinhado
• Cor do sublinhado do link: rgba (255.255.255,0.3)
• Tamanho do texto do link: 0 px
• Altura da linha do link: 0em

Configurações do Hover Link

Faça algumas alterações ao passar o mouse a seguir.

• Tamanho do texto do link: 40px
• Altura da linha do link: 1.8em

Configurações de texto de cabeçalho padrão

Faça algumas alterações nas configurações do texto do título também.

• Peso da fonte do cabeçalho: Ultra negrito
• Estilo da fonte do título: maiúscula
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 70 px (desktop), 40 px (tablet), 30 px (telefone)
• Altura da linha de direção: 1,4em

Hover Heading Text Settings

Com alguns pequenos ajustes ao pairar.

• Cor do texto do título: rgba (255,255,255,0)
• Tamanho do texto do título: 0 px

Espaçamento Padrão

Continue acessando as configurações de espaçamento e adicionando alguns valores de preenchimento personalizados.

• Top Padding: 40px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px

Espaçamento de pairar

Os valores de preenchimento personalizado diferem um pouco ao passar o mouse.

• Top Padding: 40px
• Preenchimento inferior: 40 px
• Preenchimento esquerdo: 20px
• Preenchimento direito: 20 px

Fronteira

Estamos usando uma borda também.

• Largura da borda: 10px
• Cor da borda: # ffa53b

Transições

E adicione uma transição rápida alterando a duração da transição na guia avançada.

• Duração da transição: 0ms

Criar título animado nº 2

Adicionar nova seção

Cor de fundo

Vamos para o próximo exemplo! Adicione uma nova seção logo abaixo da seção do herói e adicione uma cor de fundo.

• Cor de fundo: #efefef

Espaçamento

Em seguida, vá para as configurações de espaçamento e brinque com os diferentes valores de margem e preenchimento.

• Margem inferior: 100px
• Margem direita: 200 px (desktop), 100 px (tablet), 50 px (telefone)
• Enchimento superior: 54 px
• Preenchimento inferior: 54 px

Sombra da caixa

Para combinar esta seção com o pacote de layout, estamos adicionando uma sombra de caixa sutil também.

• Posição horizontal da sombra da caixa: 30px
• Posição vertical da sombra da caixa: 30 px
• Força de propagação da sombra da caixa: -10px
• Cor da sombra: # ffa53b

Adicionar nova linha

Estrutura da Coluna

A linha que estamos adicionando a esta seção precisa da seguinte estrutura de coluna:

Adicionar Módulo de Texto

Adicionar conteúdo

Adicione o conteúdo de sua escolha usando um link de título e parágrafo mais uma vez. Também estamos utilizando uma lista que ajudará os visitantes a navegar facilmente por diferentes partes do site.

Configurações de texto de link padrão

Vá para as configurações de texto do link e faça algumas alterações na aparência da cópia do link.

• Estilo da fonte do link: sublinhado
• Cor do texto do link: # 000000
• Tamanho do texto do link: 0 px (desktop), 20 px (tablet), 13 px (telefone)
• Altura da linha de link: 0 px (desktop), 1.8em (tablet e telefone)

Configurações de texto do Hover Link

Faça alguns pequenos ajustes ao pairar.

• Tamanho do texto do link: 30px
• Altura da linha do link: 2.8em

Configurações de texto de cabeçalho padrão

O título que você escolheu também precisa ser modificado.

• Peso da fonte do cabeçalho 2: ultra negrito
• Estilo da fonte do título 2: maiúsculas
• Tamanho do texto do título 2: 30 px (desktop e tablet), 20 px (telefone)
• Cabeçalho 2 espaçamento entre letras: 1px

Hover Heading Text Settings

Altere o tamanho do texto ao passar o mouse.

• Tamanho do texto do título 2: 0 px

Espaçamento Padrão

Continue acessando as configurações de espaçamento e adicionando alguns valores de margem e preenchimento personalizados.

• Margem esquerda: 0px (desktop, tablet e telefone)
• Top Padding: 40px
• Preenchimento esquerdo: 50 px

Espaçamento de pairar

Altere a margem esquerda ao passar o mouse.

• Margem esquerda: 200px

Borda Padrão

Em seguida, adicione uma borda esquerda ao Módulo de Texto.

• Largura da borda esquerda: 5 px
• Cor da borda esquerda: # ffa53b

Hover Border

Remova toda a largura da borda ao pairar.

• Largura da borda esquerda: 0 px

Transições

Por último, mas não menos importante, crie uma transição suave usando uma duração de transição ligeiramente maior.

• Duração da transição: 500ms

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final.

Pensamentos finais

Nesta postagem de caso de uso, mostramos como criar títulos animados ao pairar usando apenas as opções integradas do Divi. Esta é uma ótima maneira de colocar partes específicas de sua cópia no centro das atenções e acionar a ação dos visitantes de uma forma criativa. Se você tiver alguma dúvida, deixe um comentário na seção de comentários abaixo!