Highlight Element

Last Update: August 30, 2025

The Avada Highlight Element is a simple Element that allows you to highlight a section of content on your page. The Highlight Element is an Inline Element, which means it’s meant to be used in conjunction with existing text, and can only be accessed through the Avada Element Generator, or the Inline Editing function in the Avada Live Visual Builder.

Watch the video below for a visual overview of the Element, view the Avada Highlight Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Highlight Element

Note. As stated previously, the Avada Highlight Element is an Inline Element, which means that you can access it through the Avada Builder Element Generator in the back-end builder, or via Inline Editing in Avada Live. This Element can be used in all Elements that allow text editing in the Visual Editor and that therefore have access to the Avada Builder Element Generator, or Inline Editing.

Background Highlight Method in Avada Builder

Step 1 – Add a text based element via the Avada Builder, for example, the Text Block Element.
Step 2 – Add your content as normal.
Step 3 – Select the part of your text content that you want highlighted, and then select the Avada Builder Element Generator icon on the Visual Editor toolbar, as seen in the screenshot below.
Step 4 – Select the Highlight Element. Choose your Background Style – Full, or Marker Style.
Step 5 – Select your background color, whether you want rounded corners, and your highlight font color if you wish (leave empty to use an auto-calculated value).
Step 6 – You will see the selected text to be highlighted in the Content box. When you are finished, click Insert.
Step 7 – You are now back in the Text Block Element. When you are finished, click Save, and you are returned to your page. Preview to see your highlighted text.

Gradient Font Color Highlight Method In Avada Builder

Step 1 – Add a text based element via the Avada Builder, for example, the Text Block Element.
Step 2 – Add your content as normal.
Step 3 – Select the part of your text content that you want highlighted, and then select the Avada Builder Element Generator icon on the Visual Editor toolbar, as seen in the screenshot below.
Step 4 – Select the Highlight Element.
Step 5 – Turn the Background option to No, and the Gradient Font Color option to Yes.
Step 6 – Set the Gradient Start and End Colors, as well as the Gradient Start and End Position, and the Gradient Type and Angle.
Step 7 – You will see the selected text to be highlighted in the Content box. When you are finished, click Insert.
Step 8 – You are now back in the Text Block Element. When you are finished, click Save, and you are returned to your page. Preview to see your highlighted text.

How To Use The Highlight Element In Avada Live

The Highlight Element Works in virtually the same way in Avada Live, only you can see the result as it happens. For color work, and adjusting gradients, this is a vastly better experience. Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.

Element Options

Heading		Description
Background		Select if you would like a highlight background or not.
Background Style		Select the background highlight style.
Background Color		Pick a highlight background color.
Rounded Corners		Choose to have rounded corners.
Font Color		Pick a text-color for your highlight. Leave empty to use an auto-calculated value.
Gradient Font Color		Set to "Yes" to enable gradient font color.
Gradient Start Color		Select start color for gradient.
Gradient End Color		Select end color for gradient.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Text Stroke		Set to "Yes" to enable text stroke.
Text Stroke Size		Set text stroke size. In pixels.
Text Stroke Color		Controls the color of the text stroke.
Content		Enter some text to highlight.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.