Text Highlighter Overview

DiviFlash’s Text Highlighter module is the newest addition to its extensive collection. 

The Text Highlighter module can enhance communication and engagement with your audience whether you are emphasizing critical points in a blog post, highlighting key information in an instructional guide, or drawing attention to important details in a presentation.

In this overview, we will share all the details about how this module works.

How to Highlight Your Desired Text

Selecting the “Text Highlighter” module will open the Text Highlighter settings panel. The panel has three additional tabs: Content, Design, and Advanced. 

Under the Content tab, in the Content section, you will see three fields-

• Title Prefix: Use this field to input a string of text that will be displayed in front of the highlighted text.
• Title Infix: Use this field to insert the text you want to highlight.
• Title Suffix:  Add text after the highlighted text in this field.

Now, all that’s left is to customize the text according to your needs.

How to Customize the Highlighted Text

Other than adding highlighted text, the content tab offers some additional features for tweaking. Also, there are the design and advanced tabs for further customization. 

Content

On this tab, you will find customization options for editing the content of the Text Highlighter module.

Highlighter Settings

• Type: Choose from 23 different hand-designed options for the highlighter.
• Enable Animation: Toggle this option on to enable highlighter animation.
• Animation Start: Choose if you want to start the animation on page load or in the viewport. 
• Easing: Set the speed at which the highlighter animation begins and ends.
• Duration: Choose how long it will take to complete the highlighter animation.
• Delay: Define how long it will take to start the animation.
• Loop: Toggle this to “Yes” to start the animation loop.
• Iteration: Choose how many times the animation will occur.
• Iteration Gap: Adjust the gap between each animation.

Divider

Dividers can be added to separate the highlighted text from the rest of the content. Expand the Divider section and toggle the “Use Divider” option to “Yes.”

• Divider Position: Select whether the divider will be at the top or bottom of the text.
• Divider Line Style: Choose a style for the divider. You have 6 different options to choose from.
• Divider Line Color: Pick a color for the divider line.
• Divider Thickness: Make the divider line thicker or thinner.
• Divider Border Radius: Adjust the sharpness of the divider’s border.
• Divider Max Width: The width of the divider can be increased or decreased. 
• Divider Alignment: Determine where the divider should be placed.
• Use Divider Icon: Set this option to “Yes” to display an icon within the divider. A wide range of icon options are available to choose from.
• Divider Icon Alignment: Adjust the positioning of the divider icon.
• Divider Icon Color: Select a different color for the divider icon
• Divider Icon Background Color: Choose a different color for the icon’s background.

• Icon Circle: Set this option to “Yes” to make the icon background circular.
• Divider Icon Size: Choose the icon’s size.
• Divider Image: If you prefer images over icons, toggle this option to “Yes” and click on the (+) icon to add an image.
• Image Alt Text: Use this field to input the alt text of the image (if any).
• Divider Image Max Width: Defines how large the image can be.
• Divider Image Alignment: Reposition the image within the divider line.
• Divider Image Background Color: Change the background color of the image.
• Image Circle: Turn the image background into a circle.

Divider Line Background

You can add a background to the divider line from a simple color, a color gradient, or an image.

Prefix Background

The same options as the “Divider Line Background” but for the prefix text.

Infix Background

The same options as the “Divider Line Background” but for the highlighted text.

Suffix Background

The same options as the “Divider Line Background” but for the suffix text.

Link

This section allows you to link the Text Highlighter to a URL. The link can also be opened in a new tab or within the same tab.

Background

The background of the entire module can be edited.

Design

This tab allows you to customize the appearance of the Text Highlighter module.

Title

• Title Tag: Select the HTML tag for the entire title from the drop-down menu.
• Title Font: The title text can be rendered in a variety of font styles.
• Title Font Weight: Specify the density of the title font.
• Font Style: You can make the title font italic, uppercase, underlined, or struck through. In addition, you can choose the color and style of the underline and strikethrough. 
• Title Text Alignment: Set the placement of the title text.
• Title Text Color: Select a different color for the title text.
• Title Text Size: Adjust the appropriate text size for the title.
• Title Letter Spacing: Determine how much space should be between each letter of the title.
• Title Line Height: Specify the distance between each line of the title.
• Title Text Shadow: You can add a shadow effect to your title and customize different aspects of it.

Dual Text

• Use Dual Text: By enabling this option, you can add a dual text effect to your title.
• Custom Text: Use this option to use a different text as the dual text effect.
• Custom Text Input: Use this field to input your custom dual text. 
• Dual Text Margin: Give the dual text a custom margin.
• Dual Text Padding: Add padding to the dual text.
• Dual Text Font: Choose from a variety of font styles for the dual text.
• Dual Text Font Weight: Define the thickness of the dual text font.
• Dual Text Font Style: Dual text can be italicized, capitalized, underlined, or struck through. Also, you can select the color and style of the underline and strikethrough. 
• Dual Text Text Alignment: Select the position for the dual text.

• Dual Text Color: Choose a different color for the dual text.
• Dual Text Size: Choose the appropriate size for the dual text.
• Dual Text Letter Spacing: Determine how much space to leave between each letter of the dual text.
• Dual Text Line Height: Indicate the distance between the lines of dual text.
• Dual Text Shadow: Create a shadow effect for your dual text and allow you to customize different aspects of it.

Prefix Text

• Display Element: You can display the prefix text inline or as a block. It is also possible to set different display elements for different devices.
• Max Width: You can set a maximum width for a block element that displays the prefix.
• Alignment: Determine where the block element should be placed.
• Enable Clip: You can use a clip effect in your heading prefix by enabling this option.
• Enable Background Clip: If you want to have the background of the prefix clipped as well, you can choose this option.

• Fill Color: Choose a different fill color for the clip effect.
• Stroke Color: Select a different stroke color for the clip effect.
• Stroke Width: You can adjust the width of the prefix’s stroke.
• Prefix Font: Pick the font you would like to use for the prefix.
• Prefix Font Weight: Defines the thickness of the prefix font.
• Prefix Font Style: Prefixes can be in italics, uppercase, underlined, or strikethrough. In addition, you can choose the color and style of the underline and strikethrough.
• Prefix Text Alignment: Determine where the prefix should be positioned.
• Prefix Text Color: Select a different color for the prefix.
• Prefix Text Size: Choose the appropriate text size for the prefix.
• Prefix Letter Spacing: Indicate how much space should be left between each letter of the prefix.
• Prefix Line Height: Define the distance between lines for the prefix.
• Prefix Text Shadow: Adds a shadow effect to the prefix text and allows customization.  
• Box Shadow: Creates a shadow effect on the prefix and its background.

Infix Text

The same options as the Prefix Text section.

Suffix

The same options as the Prefix Text section.

Highlighter

• Color: Select the color you like for the highlighter.
• Use Gradient Color: Turn this option on to use gradient as the highlighter’s color.
• Start Color: Select the first color for the gradient.
• End Color: Select the second color for the gradient.
• Gradient Type: Choose if the radiant will be linear or radial.
• Radial Direction: If the gradient is radial, choose its direction.
• Gradient Direction: If the gradient is linear, choose the angle of the gradient.
• Start Position: Choose the position of the “start color” in the gradient.
• End Position: Choose the position of the “end color” in the gradient.
• Stroke Width: Choose the width of the highlighter.

• Size: Increase or decrease the scale of the highlighter. 
• Opacity: Adjust how transparent you want the highlighter to be.
• Position: Choose if you want to place the highlighter below or above the text. 
• Vertical Offset: Change the position of the highlighter along the Y-axis.
• Horizontal Offset: Change the position of the highlighter along the X-axis.

Border

You can adjust the sharpness of the corners in the title container and the width, color, and style of its borders.

Custom Border

This section allows you to customize the border of the container for the prefix, infix, and suffix separately. You can modify the width, color, and style of their borders and adjust the sharpness of the border corners.

Sizing

You can adjust the width, height, and alignment of the module.

Spacing

This section provides all the options for setting padding and margin individually for the prefix, suffix, infix, divider container, divider line, and divider icon and image. Additionally, it allows you to set the padding and margin for both the title and the module itself.

Box Shadow

This feature enables you to add a box shadow to the entire text highlighter module and tailor its appearance according to your preferences.

Transform

Change the text highlighter module’s size, position, orientation, angle, and origin.  

Animation

Add an animation effect from Divi’s 8 different animation effects to the module. 

Advanced

This default Divi tab allows you to add custom CSS codes, scroll effects, and more to the text highlighter module.

Do You Still Have Any Questions?

If you require any additional assistance with the DiviFlash Text Highlighter module, please feel free to reach out to our support team at support@diviflash.com.