As letras maiúsculas fornecem uma caixa de texto rolante para o seu site da Web que envolve os leitores com trechos úteis de conteúdo. Eles também são chamados de tickers (ou tickers de notícias) e costumam ser usados ​​para exibir um fluxo constante de atualizações de notícias na parte superior ou inferior da página. . Normalmente, a animação de rolagem é feita com uma única linha de conteúdo em um loop para que as informações sejam exibidas repetidamente. Infelizmente, o <marquee>Uma vez que a tag html é obsoleta, nós contamos com CSS e JavaScript para criar letreiros atualmente. No entanto, com Divi, você pode criar um retângulo de seleção simples sem se preocupar com o código personalizado.

Neste tutorial, vamos explicar como é fácil criar um texto de seleção simples com Divi. Veremos até mesmo como pausar a animação de texto de rolagem ao pairar e como adicionar texto de rolagem grande como um elemento de design exclusivo para seus cabeçalhos.

Vamos começar.

Visão geral

Visualização da animação Divi

O que você precisa para começar

Para começar, você precisa do seguinte:

  1. Le Tema Divi instalado e ativo
  2. Uma nova página criada para criar do zero no front-end (construtor visual)

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Início da concepção

Visualização da animação DiviPara este primeiro exemplo, criaremos um retângulo de texto simples para uma linha de texto. Para fazer isso, vamos dar a uma linha uma largura máxima com o estouro oculto. A seguir, adicionaremos uma animação de slide em loop a um módulo de texto que contém a linha de texto para que ela deslize repetidamente para a linha, como um retângulo.

Veja como fazer isso.

Comece criando uma seção regular com uma linha de uma coluna.

Defina uma divisãoEm seguida, antes de adicionar um módulo, atualize a linha com largura, caixa de sombra e raio fixos, da seguinte maneira:

  • Largura máxima: 200px
  • Estofamento: 10px na parte superior, 10px na parte inferior
  • Cantos arredondados: 10px
  • Sombra da caixa: veja a imagem
  • Estouro horizontal: oculto
  • Estouro vertical: oculto

Configuração de estilo de linha Divi

Adicione o módulo de texto

Quando a linha estiver concluída, adicione um novo módulo de texto à linha.

Adicionar módulo de texto

Então atualize o conteúdo do corpo com uma única linha de texto. Por enquanto, certifique-se de que a linha de texto não se divida em outra linha.

  • Corpo: "Esta é uma frase"

Design do módulo de texto

Atualize os parâmetros de design do módulo de texto da seguinte maneira:

  • Margem: -100% à esquerda, 100% à direita

Isso posiciona o módulo de texto fora da esquerda da linha. Como a visibilidade oculta da linha está oculta, o módulo ficará oculto até que adicionemos uma animação para torná-lo visível.

Alterar alinhamento divi

  • Estilo de animação: slide
  • Direção da animação: direita
  • Duração da animação: 5000ms
  • Intensidade da animação: 100%
  • Animação Opacidade inicial: 100%
  • Animação da curva de velocidade: linear
  • Repita a animação: Loop

Configuração da animação do módulo de texto Divi

Resultado

Vamos ver o resultado agora.

Resultado da animação divi 1Criando linhas de texto mais longas

No design de texto de seleção simples acima, limitamos a largura da linha de texto à mesma largura da linha. No entanto, se quisermos criar uma linha de texto mais longa com a mesma largura, precisaremos ajustar um pouco as configurações.

Primeiro, no módulo de texto e substitua o corpo do texto pelo seguinte:

Esta é uma fase com um link

Frase com link divi

Adicione mais largura e margem para caber na linha de texto mais longa

Como você pode notar, o texto é dividido em três linhas em vez de uma.

Divi frase wordpress

Portanto, precisamos ajustar a margem e a intensidade da animação.

  • Largura: 207%
  • Margem: -207% à esquerda, 207% à direita
  • Intensidade da animação: 75%

O truque aqui é aumentar a largura e atualizar os valores das margens para que apenas espaço suficiente seja deixado para uma única linha de texto. Em seguida, ajuste a intensidade da animação para que não haja uma grande pausa entre a animação em loop.

Resultado

Aqui está o resultado final.

Resultado da animação divi 2

Pausar animação de texto de seleção ao passar o mouse

Como essa seleção de letreiro inclui um link, será difícil para os usuários clicarem no link enquanto se movem. No entanto, podemos adicionar um pequeno snippet css ao módulo de texto que pausará a animação ao passar o mouse.

Adicione um snippet CSS para pausar a animação ao passar o mouse

Para adicionar o snippet css, abra as configurações do módulo de texto e adicione o seguinte código CSS personalizado ao elemento principal sob a aba hover :

estado da reprodução da animação: pausado;

Personalização de animação de foco Divi

Resultado final

Agora verifique o resultado final. Observe que a animação do texto para quando o cursor passa sobre o texto, permitindo que o usuário clique no link.

Animação de divisão de resultado de animação interrompida

Isso é tudo para este tutorial, espero que ele tenha ensinado como adicionar um texto de rolagem no Divi.