Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Text Hover Highlight

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

How can we help?