Destaque do plug-in Divi: próximos textos do Divi

Divi Next Texts é um plugin de terceiros para Divi que adiciona muitos módulos com recursos de design de tipografia. Os módulos adicionam animações, realces, gradientes, máscaras, efeitos de cor e até mesmo falhas para ajudá-lo a criar efeitos de texto. Os módulos facilitam o uso da tipografia de uma maneira única nos designs Divi. Neste artigo, vamos dar uma olhada em Divi Next Texts, ver o que ele pode fazer e ver como é fácil de usar.

Módulos Divi Next Texts

12 novos módulos são adicionados ao Divi Builder. Cada um dos módulos inclui as guias Conteúdo, Design e Avançado do módulo Divi, para que você possa estilizá-los como qualquer módulo Divi. Vejamos cada módulo. Estou usando o pacote de layout do Divi Tutor em meus exemplos.

Divi Next Texts Text Animation

A animação de texto funciona como um controle deslizante para um texto específico dentro de uma frase. Adicione um texto antes e depois e, em seguida, adicione o texto da animação nos submódulos.

Escolha entre 10 animações. Este exemplo mostra a animação de digitação.

A barra de carregamento possui opções de cor e altura. Como muitos desses módulos, você pode selecionar a tag h na guia Conteúdo. Você também pode empilhar o texto. Empilhar o texto coloca o texto anterior no topo, o texto animado no meio e o texto posterior na parte inferior. Empilhei o texto neste exemplo.

Aqui está uma olhada na animação em espiral.

Divi Next Textos Texto Cor Movimento

Text Color Motion muda lentamente a cor do texto.

A guia Design tem dois estilos de movimento e você pode definir a duração do movimento.

Escolha quatro cores diferentes para criar um gradiente.

Defina o gradiente como linear ou radial. Radial inclui 8 direções. Eu escolhi radial e centro. Você também pode definir a posição inicial de cada uma das quatro cores.

Aqui está meu exemplo em movimento. Selecionei o estilo 2, configurei a duração para 4s, mudei uma das cores e configurei como linear.

Divi Próximos Textos Divisor de Texto

O divisor de texto coloca uma linha divisória em ambos os lados do texto. Este exemplo mostra as seleções de tags h.

A guia Design inclui Configurações do divisor, onde você pode escolher o estilo do divisor. Escolha entre 8 estilos ou selecione para não mostrar o divisor.

Você também pode escolher a cor, o peso e a lacuna do texto do divisor.

As opções de Texto permitem alterar o alinhamento do texto e escolher uma sombra para o texto. Coloquei o texto à direita da divisória.

A configuração da fonte controla o estilo do texto, para que você tenha controle total sobre a família da fonte, cor, tamanho, etc.

Divi Next Texts Text Glitch

Text Glitch modifica o texto com animação.

A guia Design inclui configurações para o estilo, cores e posição do glitch. Existem 7 estilos de falhas para escolher. Alguns são mais animados do que outros.

Selecione a cor do texto e duas cores diferentes de falhas.

Defina a posição do glitch com configurações separadas para a esquerda, direita e superior.

Esta é a falha 4. É uma das falhas mais animadas.

Divi Próximos Textos Gradiente de Texto

O gradiente de texto colore seu texto com um gradiente.

A guia Design inclui configurações de cor gradiente. Escolha duas cores, o tipo de gradiente (linear ou radial) e defina a direção e as posições inicial e final.

O efeito de revelação é uma barra que se move rapidamente pela tela. Você pode ativar o efeito e escolher a cor.

Também inclui um efeito de foco. Escolha entre 29 animações.

Aqui está uma olhada na animação Text Gradient. Incluí o efeito Revelar e o efeito de foco Wobble Bottom.

Divi Próximos Textos Destaque de Texto

Destaque de texto coloca um destaque no texto. Também inclui um texto antes e depois, permitindo destacar apenas uma parte de uma frase. Você também pode exibir o texto como uma pilha.

Selecione o estilo de destaque entre 14 opções. O estilo de destaque é desenhado no texto. A animação se repete após um determinado período de tempo. Este exemplo usa Double.

A guia Design inclui configurações de realce onde você pode escolher a cor, a largura do traço e o atraso da animação. Este exemplo usa Zig Zag.

Este usa Delete. Ajustei a largura do traço para a configuração máxima e reduzi a opacidade para que o texto apareça.

Você pode ajustar as fontes para o texto do título e realçar o texto separadamente. Deixei o texto do título como padrão, coloquei o texto destacado em negrito e aumentei o tamanho.

Você também pode ativar um efeito de foco. Isso afeta todo o texto.

Este exemplo usa o estilo de destaque Wave. Eu defini a largura para 26px, selecionei vermelho e reduzi a opacidade para que se pareça com um marcador de texto e selecionei Wobble Skew para o efeito de foco.

Divi Próximos Textos Texto Hover Destacado

O destaque de texto flutuante inclui apenas o destaque ao passar o mouse. Este permite que você desative o antes e o depois do texto.

Possui 59 efeitos de flutuação para você escolher.

Você pode ajustar a altura do destaque. O padrão é 3px. Neste exemplo, selecionei o efeito de foco Overline Left e defini a altura do realce para 10px.

As configurações de realce incluem a cor e um gradiente. Habilitei o texto antes e depois, selecionei Sublinhado à direita para o destaque e configurei a altura para 16px. A cor de destaque é vermelha com opacidade reduzida.

Este inclui um gradiente. Selecione duas cores, o tipo de gradiente, direção, posição inicial e posição final.

As fontes têm controle independente para o texto e realçam o texto. Fiz ajustes em ambos.

Aqui está a animação. Selecionei Double Underling Right para o efeito de foco, configurei a altura para 24px e usei um gradiente para o efeito de foco.

Máscara de Texto Divi Próximos Textos

A máscara de texto tem várias configurações e opções, incluindo rotação vertical e opções de inversão vertical. Eu habilitei as duas opções.

Máscara de imagem permite selecionar uma imagem que será exibida como as cores do texto. Selecione o tamanho do fundo, a posição e a repetição da imagem.

Esse efeito funciona especialmente bem com fontes grandes e ultra-negrito.

Eles também ficam ótimos com cores sobre a imagem de fundo.

A máscara de texto também inclui animações de foco.

Este exemplo mostra o efeito Pop hover. Eu incluí uma sobreposição bege e configurei a fonte para itálico e maiúsculas.

Divi Próximos Textos Texto Vários Cabeçalhos

Text Multi Heading adiciona três conjuntos de texto de título e inclui um fundo diferente para cada título.

Os planos de fundo incluem cores e gradientes. Este exemplo coloca um fundo azul atrás do primeiro título.

O gradiente tem duas cores. Escolha o tipo de gradiente (linear ou radial), direção, posição inicial e posição final. Eu adicionei um gradiente ao segundo título.

Os três títulos podem ser ajustados independentemente. Eu ajustei as cores, tamanhos e peso dos títulos. Também aumentei o tamanho das fontes. Cada título tem um tamanho diferente.

Cada título pode ter um gradiente. Eu adicionei um gradiente ao segundo título.

Os títulos incluem um efeito de revelação separado, onde você pode escolher uma cor diferente para cada título.

O efeito de foco inclui todos os três títulos.

Cada título tem configurações de espaçamento separadas. Adicionei 30px à direita e à esquerda do segundo título.

Os títulos também têm fronteiras independentes. Eu adicionei uma borda ao segundo título.

Divi Next Texts Text Stroke

Text Stroke cria uma animação de traço e um grande texto contornado.

As configurações de traço incluem cor, efeitos de foco, direção de foco e duração do movimento. Eu ajustei a cor e defini a largura do traço para 6px. Isso altera a espessura das linhas da fonte. As animações incluem Stroke to Fill e Fill to Stroke. Tem 6 direções para escolher.

A cor flutuante muda a cor dentro da fonte. Possui uma cor sólida e um gradiente. Esta é a cor sólida.

Aqui está um gradiente. Eu ajustei as cores, configurei-o para radial e configurei a direção para o centro.

Divi Next Texts Movimento de toque de texto

Text Stroke Motion adiciona um efeito de traço com animações.

Os ajustes de cores incluem simples, múltiplo e preenchimento. Este é o único, que mostra apenas uma cor.

Multi permite escolher 5 cores diferentes. As cores são animadas.

Preencher permite escolher uma cor dentro do texto.

As configurações do traço incluem a largura das linhas, o comprimento do traço, o tamanho da lacuna e o deslocamento do traço. Eles trabalham juntos para criar alguns designs interessantes.

Aqui está a animação. Eu mudei as cores, largura e tamanho do traço.

Divi Próximos Textos Inclinação do Texto

A inclinação do texto fornece um cartão com um título e uma área de conteúdo. Adicione seu conteúdo com o editor. O cartão se inclina em uma direção diferente, dependendo de onde você passa o mouse.

O conteúdo do plano de fundo inclui cores sólidas e gradientes. Aqui está um exemplo de inclinação do cartão.

O brilho adiciona um efeito de brilho que parece diferente dependendo de como o cartão é inclinado.

3D Tilt faz com que o texto saia do cartão.

A inclinação reversa faz com que o cartão se incline na direção oposta. As configurações também incluem perspectiva, máximo, velocidade, início para xey e escala.

Também inclui configurações para Espaçamento de conteúdo, Borda de conteúdo e Sombra de caixa de conteúdo.

Aqui está o efeito de inclinação usando brilho. Eu incluí uma borda e uma sombra de caixa.

Preço e suporte do Divi Next Texts

Divi Next Texts está disponível no site do desenvolvedor. Existem 3 opções de licença:

• Licença Única - $ 29,00
• Licença ilimitada - $ 49,00
• Licença vitalícia - $ 129,00

O suporte é fornecido com um sistema de tickets. A página de suporte inclui links para perguntas frequentes. Vários incluem vídeos e instruções detalhadas.

Reflexões finais

Divi Next Texts é um excelente plugin que adiciona muitos recursos tipográficos ao Divi. Gosto especialmente das animações, efeitos de flutuação, máscara, traço e, na verdade, gosto de todos eles.

Os módulos são altamente intuitivos. Algumas das configurações, como tags h, parecem que deveriam estar na guia Design. Algumas das animações são semelhantes. Não são reclamações de forma alguma, mas eu queria mencioná-las.

Se você estiver interessado em adicionar muitos recursos de animação tipográfica aos seus sites Divi, o Divi Next Texts é uma ótima escolha.

Nós queremos ouvir de você. Você já experimentou o Divi Next Texts? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via Mascha Tace / shutterstock.com