Divi Plugin Highlight: Divi Next Texts

Divi Next Texts is a third-party plugin for Divi that adds lots of modules with typography design features. The modules add animations, highlighting, gradients, masks, color effects, and even glitches to help you create text effects. The modules make it easy to use typography in a unique way within your Divi designs. In this article, we’ll take a look at Divi Next Texts, see what it can do and see how easy it is to use.

Divi Next Texts Modules

Divi Next Texts Modules

12 new modules are added to the Divi Builder. Each of the modules includes the expected Divi module Content, Design, and Advanced tabs so you can style them like any Divi module. Let’s look at each module. I’m using the Divi Tutor layout pack in my examples.

Divi Next Texts Text Animation

Divi Next Texts Text Animation

Text Animation works like a slider for specific text within a sentence. Add a before and after text, and then add the animation text within submodules.

Divi Next Texts Text Animation

Choose from 10 animations. This example shows the typing animation.

Divi Next Texts Text Animation

The loading bar has options for the color and height. Like many of these modules, you can select the h tag from the Content tab. You can also stack the text. Stacking the text places the before text on top, the animated text in the middle, and the after text on the bottom. I’ve stacked the text in this example.

Text Animation demo

Here’s a look at the Spiral animation.

Divi Next Texts Text Color Motion

Divi Next Texts Text Color Motion

Text Color Motion slowly changes the color of the text.

Divi Next Texts Text Color Motion

The Design tab has two motion styles and you can set the motion duration.

Divi Next Texts Text Color Motion

Choose four different colors to create a gradient.

Divi Next Texts Text Color Motion

Set the gradient as linear or radial. Radial includes 8 directions. I’ve chosen radial and center. You can also set the starting position of each of the four colors.

Text Color Motion Demo

Here’s my example in motion. I’ve selected style 2, set the duration to 4s, changed one of the colors, and set it to linear.

Divi Next Texts Text Divider

Divi Next Texts Text Divider

Text Divider places a divider line on both sides of your text. This example shows the h tag selections.

Divi Next Texts Text Divider

The Design tab includes Divider Settings, where you can choose the divider style. Choose from 8 styles or select to not show the divider.

Divi Next Texts Text Divider

You can also choose the divider’s color, weight, and text gap.

Divi Next Texts Text Divider

The Text options let you change the text alignment and choose a text shadow. I’ve placed the text on the right of the divider.

Divi Next Texts Text Divider

The Font setting controls the text styling, so you have full control over the font family, color, size, etc.

Divi Next Texts Text Glitch

Divi Next Texts Text Glitch

Text Glitch glitches the text with animation.

Divi Next Texts Text Glitch

The Design tab includes settings for the glitch style, colors, and position. There are 7 glitch styles to choose from. Some are more animated than others.

Divi Next Texts Text Glitch

Select the text color and two different glitch colors.

Divi Next Texts Text Glitch

Set the glitch position with separate settings for the left, right, and top.

glitch demo

This is glitch 4. It’s one of the more animated glitches.

Divi Next Texts Text Gradient

Divi Next Texts Text Gradient

Text Gradient colors your text with a gradient.

Divi Next Texts Text Gradient

The Design tab includes gradient color settings. Choose two colors, the gradient type (linear or radial), and set the direction and the start and end position.

Divi Next Texts Text Gradient

The reveal effect is a bar that quickly moves across the screen. You can enable the effect and choose the color.

Divi Next Texts Text Gradient

It also includes a hover effect. Choose from 29 animations.

Text Gradient Demo

Here’s a look at the Text Gradient animation. I’ve included the Reveal effect and the Wobble Bottom hover effect.

Divi Next Texts Text Highlight

Divi Next Texts Text Highlight

Text Highlight places a highlight on the text. It also includes a before and after text, allowing you to highlight just a portion of a phrase. You can also display the text as a stack.

Divi Next Texts Text Highlight

Select the highlight style from 14 choices. The highlight style is drawn onto the text. The animation repeats after a set amount of time. This example uses Double.

Divi Next Texts Text Highlight

The Design tab includes highlight settings where you can choose the color, stroke width, and animation delay. This example uses Zig Zag.

Divi Next Texts Text Highlight

This one uses Delete. I’ve adjusted the stroke width to the maximum setting and reduced the opacity so the text will show through.

Divi Next Texts Text Highlight

You can adjust the fonts for the heading text and highlight text separately. I’ve left the heading text at default and made the highlighted text bold and increased the size.

Divi Next Texts Text Highlight

You can also enable a hover effect. This effects all of the text.

Text Highlight Demo

This example uses the Wave highlight style. I’ve set the width to 26px, selected red and reduced the opacity so it looks like a highlighter, and selected Wobble Skew for the hover effect.

Divi Next Texts Text Hover Highlight

Divi Next Texts Text Hover Highlight

Text Hover Highlight only includes the highlight on hover. This one allows you to disable the before and after the text.

Divi Next Texts Text Hover Highlight

It has 59 hover effects to choose from.

Divi Next Texts Text Hover Highlight

You can adjust the highlight height. The default is 3px. In this example, I‘ve selected the Overline Left hover effect and set the highlight height to 10px.

Divi Next Texts Text Hover Highlight

The highlight settings include the color and a gradient. I’ve enabled the before and after text, selected Underline Right for the highlight, and set the height to 16px. The highlight color is red with a reduced opacity.

Divi Next Texts Text Hover Highlight

This one includes a gradient. Select two colors, the gradient type, direction, start position, and end position.

Divi Next Texts Text Hover Highlight

The fonts have independent control for the text and highlight text. I’ve made adjustments to both.

Text Hover Highlight demo

Here’s the animation. I’ve selected Double Underling Right for the hover effect, set the height to 24px, and used a gradient for the hover effect.

Divi Next Texts Text Mask

Divi Next Texts Text Mask

Text Mask has several settings and options, including vertical rotation and vertical flip options. I’ve enabled both options.

Divi Next Texts Text Mask

Image Mask lets you select an image that will display as the colors of the text. Select the background-size, position, and image repeat.

Divi Next Texts Text Mask

This effect works especially well with large, ultra-bold, fonts.

Divi Next Texts Text Mask

They also look great with color over the background image.

Divi Next Texts Text Mask

Text Mask also includes hover animations.

Text Mask Demo

This example shows the Pop hover effect. I’ve included a tan overlay and set the font to italics and all-caps.

Divi Next Texts Text Multi Heading

Divi Next Texts Text Multi Heading

Text Multi Heading adds three sets of heading text and includes a different background for each heading.

Divi Next Texts Text Multi Heading

The backgrounds include colors and gradients. This example places a blue background behind the first heading.

Divi Next Texts Text Multi Heading

The gradient has two colors. Choose the gradient type (linear or radial), direction, start position, and end position. I’ve added a gradient to the second heading.

Divi Next Texts Text Multi Heading

The three headings can be adjusted independently. I’ve adjusted the colors, sizes, and weight of the headings. I’ve also increased the size of the fonts. Each heading is a different size.

Divi Next Texts Text Multi Heading

Each heading can have a gradient. I’ve added a gradient to the second heading.

Divi Next Texts Text Multi Heading

Headings include a separate reveal effect where you can choose a different color for each heading.

Divi Next Texts Text Multi Heading

The hover effect includes all three headings.

Divi Next Texts Text Multi Heading

Each heading has separate spacing settings. I’ve added 30px to the right and left of the second heading.

Divi Next Texts Text Multi Heading

Headings also have independent borders. I’ve added a border to the second heading.

Divi Next Texts Text Stroke

Divi Next Texts Text Stroke

Text Stroke creates a stroking animation and large outlined text.

Divi Next Texts Text Stroke

Stroke settings include color, hover effects, hover direction, and motion duration. I’ve adjusted the color and set the stroke width to 6px. This changes the thickness of the font’s lines. Animations include Stroke to Fill and Fill to Stroke. It has 6 directions to choose from.

Divi Next Texts Text Stroke

The hover color changes the color inside the font. It has a solid color and a gradient. This is the solid color.

Divi Next Texts Text Stroke

Here’s a gradient. I’ve adjusted the colors, set it to radial, and set the direction to center.

Divi Next Texts Text Stroke Motion

Divi Next Texts Text Stroke Motion

Text Stroke Motion adds a stroke effect with animations.

Divi Next Texts Text Stroke Motion

Color adjustments include single, multi, and fill. This is Single, which shows just one color.

Divi Next Texts Text Stroke Motion

Multi lets you choose 5 different colors. The colors are animated.

Divi Next Texts Text Stroke Motion

Fill lets you choose a color inside the text.

Divi Next Texts Text Stroke Motion

Stroke settings include the width of the lines, length of the dash, size of the gap, and the dash offset. These work together to create some interesting designs.

Text Stroke Motion demo

Here’s the animation. I’ve changed the colors, width, and dash size.

Divi Next Texts Text Tilt

Divi Next Texts Text Tilt

Text Tilt provides a card with a title and a content area. Add your content with the editor. The card tilts in a different direction depending on where you hover.

Divi Next Texts Text Tilt

The background content includes solid colors and gradients. Here’s an example of the card tilting.

Divi Next Texts Text Tilt

Glare adds a glare effect that looks different depending on how the card is tilted.

Divi Next Texts Text Tilt

3D Tilt makes the text pop away from the card.

Divi Next Texts Text Tilt

Tilt Reverse makes the card tilt in the opposite direction. Settings also include perspective, max, speed, start for x and y, and scale.

Divi Next Texts Text Tilt

It also includes settings for Content Spacing, Content Border, and Content Box Shadow.

Text Tilt demo

Here’s the tilt effect using glare. I’ve included a border and box shadow.

Divi Next Texts Price and Support

Divi Next Texts is available from the developer’s website. There are 3 license options:

  • Single License – $29.00
  • Unlimited License – $49.00
  • Lifetime License – $129.00

Support is provided with a ticket system. The support page includes links to FAQs. Several include detailed videos and instructions.

Ending Thoughts

Divi Next Texts is an excellent plugin that adds a lot of typographical features to Divi. I especially like the animations, hover effects, mask, stroke, and, well actually, I like all of them.

The modules are highly intuitive. Some of the settings, such as h tags, seem like they should be in the Design tab. Some of the animations look similar. These aren’t complaints by any means, but I wanted to mention them.

If you’re interested in adding lots of typographical animation features to your Divi websites, Divi Next Texts is a great choice.

We want to hear from you. Have you tried Divi Next Texts? Let us know what you think about it in the comments.

Featured Image via Mascha Tace / shutterstock.com

The post Divi Plugin Highlight: Divi Next Texts appeared first on Elegant Themes Blog.

Go to source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.