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
O que você precisa para começar
Para começar, você precisa do seguinte:
- Le Tema Divi instalado e ativo
- 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
Para 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.
Em 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
Adicione o módulo de texto
Quando a linha estiver concluída, adicione um novo módulo de texto à linha.
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.
- 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
Resultado
Vamos ver o resultado agora.
Criando 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
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.
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.
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;
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.
Isso é tudo para este tutorial, espero que ele tenha ensinado como adicionar um texto de rolagem no Divi.
Acredito que a versão mudou muito desde este tutorial e que não dá mais para se orgulhar do seu artigo
Sim, eu também acho. Nós o atualizaremos.
Bom Dia,
Obrigado por este tutorial, é exatamente o que eu preciso!
Porém fiz exatamente a mesma configuração na linha e no módulo mas infelizmente não funciona ou talvez mais.
Este também é o caso?
Agradeço antecipadamente por seu retorno.
Alexis v
Obrigado por este tutorial, super claro e preciso. Bem feito !