Divi Text Hover Highlight

Highlight a word or phrase with the options to add before and after texts. The module comes with an impressive collection of hover effects for the highlighted text. This is a great way to grab the attention of the viewers!

Content → Text

1. Before Text Enable - enable before text switch to include before the highlighted text.
2. Before Text - type a relevant text before the highlighted text in the field provided.
3. Hover Highlight Text - Type the text you want to highlight.
4. After Text Enable - enable after text switch to include text after the highlighted content.
5. After Text - add the after text in the field provided.
6. Select Heading Tag - select the heading tag from the list.
7. Select Hover Effect - from the 50+ hover effects available here, select the one you like best.
8. Highlight Height - configure the height of the highlight from the text.

Content → Text Background

Pick between fill color or gradient to use as the background color for the text.

Text Color Enable - enable this to open color settings

Design → Highlight

1. Highlight Color Enable - enable the switch to view the highlight color settings.
2. Highlight Color - select a color for the highlight by using the pointer or simply apply the hex code, and get the precise color required for the content.

Design tab → Fonts

1. Font - pick a font or upload a custom font for the content
2. Font Weight - select the weight of the font to stylize the text
3. Font Style - choose a creative style for the font
4. Text Color - select a color for the font by using the pointer or simply apply the hex code, and get the precise color required for the content
5. Text Size - adjust the size of the text using the slider
6. Letter Spacing - adjust the spacing between the letters for an easier read
7. Line Height - modify the height between the lines to give a bit of breathing space and a neater look to the content
8. Text Shadow - choose any of the following styles of shadows for your text

Design → Text Shadow

1. Text Shadow - select a shadow for the text 
2. Text Shadow Horizontal Length - move the shadow in a horizontal direction
3. Text Shadow Vertical Length - move the shadow in a vertical direction
4. Text Shadow Blur Strength - adjust the blur strength using the slider
5. Text Shadow Color - select a color for the shadow

Design → Text

1. Text Alignment - set up the text position either to the left, center, or right
2. Text Shadow - add shadow to the text 

Design → Text Spacing 

1. Text Margin - adjust the marginal spacing for the text using the tools provided here
2. Text Padding - adjust the padding space for the text using the tools provided here

Design → Text Border 

1. Rounded Corners - adjust the four corners to add rounded corners. 
2. Border Styles - add a border to the text on any side or on all four sides. 
3. Border Width - adjust the width of the borders using the slider
4. Border Color - select a color for the border using the pointer or you can paste the hex code to get the exact color required for your text
5. Border Style - select a particular style of the border from the premade border styles