Highlight Element

25/02/2019

The Highlight Element is a simple element, that allows you to highlight a section of content on your page. The Highlight Element is a Content Based Element, which means it can only be accessed through the Fusion Builder Element Generator. See below to read more about this useful element.

Vivamus at metus ut nunc condimentum gravida. Morbi imperdiet nisl et pellentesque molestie. Integer eu ligula at accumsan et a augue. You can also use any highlight color you want! Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

How To Use The Highlight Element

Note. As stated above, the Highlight Element is Content Based, which means that you can access it through the Fusion Builder Element Generator. This Element can be used in all Elements that allow text editing in the Visual Editor and that therefore have access to the Fusion Builder Element Generator.

Step 1. Add a text based element via the Fusion Builder, for example, the Text Block Element.

Step 2. Add your content as normal, up to the point where you want highlighted text.

Step 3. Place your cursor at the end of your content and select the Fusion Builder Element Generator icon on the Visual Editor toolbar.

Step 4. Select the Highlight Element.

Step 5. Select your highlight color, and whether you want rounded edges.

Step 6. Add the text content you want highlighted in the Content box. When you are finished click Insert.

Step 7. You are now back in the Text Block Element. You can add more normal text content if you wish. When you are finished click Save, and you are returned to your page. Preview to see your highlighted text.

Highlight Element Example

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

  • Highlight Color - Pick a color and opacity for the highlight.
  • Highlight With Round Edges - The highlight can have rounded edges. Choose from No, or Yes.
  • Content - Add your content to be highlighted in this box.
  • CSS Class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • CSS ID - Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options Screen

Global Options

The Highlight Element does not have any global options.

Highlight Element Parameters

Copy to Clipboard
  • color - Accepts a hexcode ( #000000 ). Sets the highlight color.
  • rounded - Choose from yes, or no. Enable or disable rounded corners on the highlight.
  • class - Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id - Add a custom id to the wrapping HTML element for further css customization. Learn more here.
  • custom content - Insert the content you'd like to highlight between the
    Copy to Clipboard

    tags.