Como adicionar animações de blocos de texto CSS ao título com Divi

O título é uma das partes mais importantes da sua página inicial. Geralmente é o primeiro texto que as pessoas leem, o que deixa sua primeira impressão. Como qualquer outra primeira impressão, você deseja que seja uma boa impressão. Agora, se você está procurando uma maneira criativa de divulgar seu título, vai gostar deste post. Neste tutorial, mostraremos como adicionar animações de bloco de texto CSS ao título e você também poderá baixar o arquivo JSON do layout gratuitamente!

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

Baixe o layout de animação em bloco de texto GRATUITAMENTE

Para colocar as mãos no layout de animação de bloco de texto livre, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vamos começar a recriar!

Adicionar Seção # 1

Fundo Gradiente

Comece adicionando uma seção regular a uma nova página ou à página em que você está trabalhando. Abra as configurações da seção e aplique o seguinte fundo gradiente:

• Cor 1: # ff0f2b
• Cor 2: # c10b1a
• Tipo de gradiente: Linear
• Direção do gradiente: 63deg

Espaçamento

Vá para a guia de design da seção e aplique os seguintes valores de preenchimento superior e inferior personalizados em diferentes tamanhos de tela:

• Preenchimento superior: 7vw (desktop), 20vw (tablet), 25vw (telefone)
• Preenchimento inferior: 7vw (desktop), 20vw (tablet), 25vw (telefone)

Fronteira

Adicione uma borda à seção também.

• Largura da borda: 2vw (superior, esquerda, direita)
• Largura da borda inferior: 0vw
• Cor da borda: #ffffff

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

• Largura: 100%
• Largura máxima: 100%

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H1

Em seguida, adicione um Módulo de Texto com um título H1 de sua escolha.

Adicionar tags Div a cada palavra no título H1

Mude para a guia de texto da cópia do título e adicione um div diferente a cada palavra do título. O CSS ID precisa ser diferente para cada palavra.

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

Configurações de texto H1

Vá para a guia de design do módulo e modifique as configurações de texto H1 de acordo:

• Fonte do cabeçalho: Work Sans
• Peso da fonte do cabeçalho: médio
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 4vw (desktop), 5vw (tablet), 6vw (telefone)
• Altura da linha de direção: 1,4em

Espaçamento

Em seguida, modifique os valores de margem em diferentes tamanhos de tela.

• Margem esquerda: 20vw (desktop e tablet), 15vw (telefone)
• Margem direita: 35vw (desktop), 20vw (tablet), 15vw (telefone)

Adicionar Módulo de Código à Coluna

Insira o código CSS

Para fazer a animação do bloco de texto se aplicar ao nosso título, vamos precisar de algum código CSS. Vamos adicionar esse código CSS a um novo Módulo de Código.

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

Espaçamento

Vá para a guia de design do módulo e remova todo o preenchimento inferior padrão.

• Margem inferior: 0px

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O próximo módulo de que precisamos é um Módulo de botão. Insira alguma cópia de sua escolha.

Configurações de botão

Vá para a guia de design do módulo e altere as configurações do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 000000
• Largura da borda do botão: 0 px

• Fonte do botão: Work Sans

Espaçamento

Em seguida, vá para as configurações de espaçamento e aplique alguns valores de margem e preenchimento personalizados em diferentes tamanhos de tela.

• Margem superior: 3vw (desktop),
• Margem esquerda: 20vw (desktop e tablet), 15vw (telefone)
• Preenchimento superior: 1,2vw (desktop), 2vw (tablet), 4vw (telefone)
• Preenchimento inferior: 1.2vw (desktop), 2vw (tablet), 4vw (telefone)
• Preenchimento esquerdo: 1.8vw (desktop), 3vw (tablet), 6vw (telefone)
• Preenchimento direito: 1.8vw (desktop), 3vw (tablet), 6vw (telefone)

Animação

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

• Estilo de animação: Flip
• Direção da animação: baixo
• Atraso de animação: 2.000 ms
• Intensidade de animação: 100%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Ease-In-Out
• Repetição de animação: uma vez

Adicionar Seção # 2

Continue adicionando uma nova seção regular logo abaixo da anterior.

Espaçamento

Abra as configurações da seção e remova o preenchimento superior padrão.

• Preenchimento superior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando 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 do contêiner de seção.

• Largura: 100%
• Largura máxima: 100%

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo

Em seguida, adicione um Módulo de Texto com algum conteúdo de descrição de sua escolha.

Cor de fundo

Adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Configurações de texto

Vá para a guia de design do módulo e modifique as configurações de texto de acordo:

• Fonte do Texto: Work Sans
• Cor do texto: # 9b9b9b
• Tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Altura da linha de texto: 2.6em

Espaçamento

Adicione alguns valores de espaçamento personalizados em diferentes tamanhos de tela também.

• Margem superior: -5vw (desktop), -20vw (tablet), -27vw (telefone)
• Margem esquerda: 20vw (desktop), 13vw (tablet), 8vw (telefone)
• Margem direita: 20vw (desktop), 13vw (tablet), 8vw (telefone)
• Preenchimento superior: 5vw (desktop), 7vw (tablet e telefone)
• Preenchimento inferior: 5vw (desktop), 7vw (tablet e telefone)
• Preenchimento esquerdo: 3vw (desktop), 5vw (tablet), 6vw (telefone)
• Preenchimento direito: 3vw (desktop), 5vw (tablet), 6vw (telefone)

Sombra da caixa

E complete as configurações do módulo aplicando uma sombra de caixa sutil. É isso!

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.1)

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 adicionar animações de bloco de texto CSS ao seu título. É importante ter certeza de que seu título está visível e lido desde o início, adicionar uma animação ao seu título pode certamente ajudar nisso! Você também pode baixar o arquivo JSON do layout gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.