Ir para o conteúdo principal

Como criar um texto de rolagem no Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

As maiúsculas de texto fornecem uma caixa de texto de rolagem no seu site, que envolve os leitores com trechos úteis de conteúdo. Eles também são chamados tickers (ou tickers de notícias) e geralmente são 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 é executada com uma única linha de conteúdo em um loop, para que as informações sejam exibidas repetidamente. Infelizmente, o <marquee>Como a tag html está obsoleta, contamos com CSS e JavaScript para criar tendas hoje em dia. No entanto, com o Divi, você pode criar um retângulo de seleção simples sem se preocupar com o código personalizado.

Neste tutorial, explicaremos como é fácil criar um texto de seleção simples com o Divi. Veremos até como pausar a animação de texto de rolagem e como adicionar um 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:

  1. 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

Neste primeiro exemplo, criaremos um retângulo de texto simples para uma linha de texto. Para fazer isso, atribuiremos a uma linha uma largura máxima com o estouro mascarado. Em seguida, 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 na linha, como um retângulo.

Veja como fazer isso.

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

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Antes de adicionar um módulo, atualize a linha com uma largura fixa, uma caixa de sombra e um raio, da seguinte maneira:

  • Largura máxima: 200px
  • Estofamento: 10px na parte superior, 10px na parte inferior
  • Cantos arredondados: 10px
  • Box Shadow: veja a captura de tela
  • 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.

Atualize o conteúdo do corpo com uma única linha de texto. Por enquanto, verifique se a linha de texto não se divide 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é adicionarmos uma animação para torná-la visível.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

  • Estilo de animação: Slide
  • Direção de 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 que a linha. No entanto, se quisermos criar uma linha de texto mais longa com a mesma largura, teremos que modificar um pouco os parâmetros.

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

<p> Esta é uma fase com um <a href="#"> link </a> </ p>

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, devemos 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 da margem para que haja espaço suficiente para uma única linha de texto. Em seguida, ajuste a intensidade da animação para que não haja grande intervalo entre a animação em loop.

Resultado

Aqui está o resultado final.

Pausar a animação do texto de seleção no menu suspenso

Como esse retângulo de seleção inclui um link, será difícil para os usuários clicar no link que está sendo movido. No entanto, podemos adicionar um pequeno trecho de css ao módulo de texto que interromperá a animação na rolagem.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Adicione um trecho de CSS para suspender a animação na sobreposição

Para adicionar o trecho de CSS, abra as configurações do módulo de texto e adicione o seguinte código CSS personalizado ao elemento principal sob a guia de visão geral :

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

Resultado final

Agora confira 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 tenha ensinado a adicionar texto de rolagem no Divi.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação2
chilrear
Enregistrer