Como criar uma marca de seleção de texto simples com Divi
Publicados: 2019-08-24Os letreiros de texto fornecem uma área de rolagem de texto para seu site que envolve os leitores com trechos de conteúdo úteis. Eles também são chamados de tickers (ou tickers de notícias) e costumam ser usados para mostrar um fluxo constante de atualizações de notícias na parte superior ou inferior de uma 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, a tag html <marquee> está obsoleta, então contamos com CSS e JavaScript para criar letreiros atualmente. No entanto, com Divi, você pode criar uma marca de seleção simples sem se preocupar com o código personalizado.
Neste tutorial, mostraremos como é fácil criar uma marca de seleção de texto simples com Divi. Abordaremos até mesmo como pausar a animação de texto de rolagem ao passar o mouse e como adicionar uma grande marca de seleção de texto como um elemento de design exclusivo para seus cabeçalhos.
Vamos começar.
Espiada
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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.
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.
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!
Inscreva-se no nosso canal no Youtube
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Criando um letreiro digital de texto simples no Divi
Para este primeiro exemplo, vamos criar uma marca de seleção de texto simples para uma linha de texto. Para fazer isso, daremos a uma linha uma largura máxima com o estouro oculto. Em seguida, adicionaremos uma animação de slide em loop a um módulo de texto que contém a linha de texto, de forma que ela deslize ao longo da linha, aparecendo repetidamente como um letreiro.
Veja como fazer.
Primeiro, crie uma seção regular com uma linha de uma coluna.
Então, antes de adicionar um módulo, atualize a linha com uma largura fixa, uma sombra de caixa e um raio de borda da seguinte maneira:
- Largura máxima: 200px
- Preenchimento: 10px superior, 10px inferior
- Cantos redondos: 10 px
- Sombra da caixa: veja a imagem
- Excesso horizontal: oculto
- Estouro vertical: oculto
Adicione o Módulo de Texto
Quando a linha for concluída, adicione um novo módulo de texto à linha.
Em seguida, 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 divide em outra linha.
- Corpo: “Esta é uma frase”
Design de Módulo de Texto
Atualize as configurações de design do módulo de texto da seguinte forma:
- Margem: -100% à esquerda, 100% à direita
Isso posiciona o módulo de texto fora da esquerda da linha. Como a linha tem visibilidade de estouro oculta, o módulo ficará oculto até que adicionemos animação para trazê-lo à vista.
- Estilo de animação: slide
- Direção da animação: direita
- Duração da animação: 5000ms
- Intensidade de animação: 100%
- Opacidade inicial da animação: 100%
- Curva de velocidade de animação: Linear
- Repetição de animação: Loop
Resultado
Agora vamos verificar o resultado.
Criação de linhas de texto mais longas
No design de letreiro de texto 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 de linha, precisaremos modificar um pouco as configurações.
Primeiro, no módulo de texto e substitua o corpo do texto pelo seguinte:
<p>This is a sentence in a marquee with a <a href="#">link</a></p>
Adicione mais largura e margem para acomodar a linha de texto mais longa
Como você pode notar, o texto agora está se dividindo 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 de animação: 75%
O truque aqui é aumentar a largura e atualizar os valores da margem para fornecer espaço suficiente para a ú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.
Pausando a animação de texto do letreiro digital ao pairar
Como essa marca de seleção inclui um link, será difícil para os usuários clicarem no link enquanto ele se move. No entanto, podemos adicionar um pequeno trecho de 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 pairar
Para adicionar o snippet css, abra as configurações do módulo de texto e adicione o seguinte CSS personalizado ao elemento principal na guia instantânea :
animation-play-state: paused;
Resultado final
Agora confira o resultado final. Observe como a animação do texto será pausada quando o cursor passar sobre o texto, permitindo que o usuário clique no link.
Parte 2: Criando um letreiro digital de texto como um elemento de design responsivo no Divi
Agora que entendemos como criar uma marca de seleção de texto simples no Divi, podemos usar o mesmo conceito para criar um elemento de design de marca de texto responsivo. Isso funcionaria bem para criar designs de animação exclusivos para cabeçalhos ou cabeçalhos de seção.
Para fazer isso, usaremos o layout predefinido da página inicial do Job Recruiter do Divi.
Adicionar o layout pré-fabricado
Para adicionar o layout à sua página, abra o menu de configurações na parte inferior do construtor Divi e clique no símbolo de mais. No pop-up de carregamento da biblioteca, selecione o pacote de layout do recrutador de empregos. Em seguida, clique em para usar o layout da página inicial.
Excluir conteúdo extra com o layout
Uma vez que o layout foi carregado na página, implante o modo de visualização wireframe e exclua todo o conteúdo do layout, exceto para o cabeçalho de largura total e a seção diretamente abaixo dele.
Criação da animação de letreiro de texto
Como você pode ver, a palavra “contratado” já está sendo usada como um grande elemento de design de texto em um módulo de texto na segunda seção. Vamos transformar esse módulo de texto em um elemento de design de letreiro de texto responsivo. A chave para tornar o letreiro de texto responsivo é garantir que a linha e o módulo de texto ocupem toda a largura da janela do navegador. Podemos fazer isso usando uma largura de 100%. Então, podemos usar a unidade de comprimento vw para o tamanho do texto. Isso fará com que o texto seja dimensionado de acordo com as larguras do navegador. Depois disso, aplicaremos os mesmos princípios que usamos para fazer nosso exemplo de letreiro de texto simples anteriormente.
Veja como fazer.
Atualize as configurações de linha
Como mencionado antes, a linha precisa ser 100% para que esse design de letreiro de texto responsivo funcione. Isso permite que nosso módulo de texto use unidades de comprimento vw que são relativas à largura do navegador. Como nosso layout predefinido já tem uma linha com 100% de largura, não precisamos fazer nada.
No entanto, precisamos ajustar o resto das configurações da seguinte maneira.
- Margem: -24vw inferior
- Transformar o eixo Y da tradução: -24vw
- Excesso horizontal: oculto
- Estouro vertical: oculto
A margem inferior negativa serve para livrar-se do espaço negativo restante sempre que movermos a linha para cima usando transform translate. E precisamos ocultar o estouro da linha para nosso efeito de letreiro de texto.
Atualizar Design de Texto do Módulo de Texto
Agora tudo o que você precisa fazer é atualizar o módulo de texto para convertê-lo em um grande elemento de design de letreiro.
Abra o módulo de texto e atualize o seguinte:
- Cor do texto do texto: rgba (255,255,255,0,16)
- Tamanho do texto do texto: 36vw
- Margem: -100% à esquerda, 100% à direita
O tamanho do texto está usando uma unidade de comprimento vw para que o texto seja dimensionado de acordo com a largura do navegador.
Adicionar Animação ao Módulo de Texto
- Estilo de animação: slide
- Direção da animação: esquerda
- Duração da animação: 10000ms
- Intensidade de animação: 100%
- Curva de velocidade de animação: Linear
- Repetição de animação: Loop
Design final
Agora verifique o design final.
Pensamentos finais
As marcas de seleção de texto podem ser uma ferramenta conveniente em web design. Eles não estão limitados a funcionar estritamente como noticiários. Eles também podem adicionar um elemento de animação agradável ao seu design da web. E a melhor parte é que o Divi torna mais fácil criá-los e projetá-los de todas as formas bonitas. Espero que este tutorial ajude você a criar alguns letreiros de texto simples sempre que chegar a hora que você precisar de um.
Estou ansioso para ouvir de você nos comentários.
Saúde!