Highlight Element
The Highlight Element marks a word or phrase inside running text. It wraps the text in a colored background, a marker-style stroke across the lower part of the letters, a gradient text color or an outline, so an important term stands out without breaking the flow of the sentence.
It is an inline element: you insert it into the content of another element, such as a Text Block, rather than placing it in a column on its own. The rest of the paragraph keeps its normal typography, and only the highlighted part changes.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Highlight Element
Open the content editor of a Text Block or another element with a text field, place the cursor where the highlight should go and insert the Highlight Element from the element list. Type the words to mark in the Content field.
Keep Background on Yes and choose a Background Style: Full fills the whole line height behind the text and can have Rounded Corners, Marker Style colors only the lower part like a highlighter pen. Pick the Background Color and, if needed, a Font Color.
Set Background to No to use Gradient Font Color instead: the letters themselves are filled with a linear or radial gradient between the start and end colors. Text Stroke adds an outline to the letters and works with every style.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| 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. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Leave Font Color empty and the text color is chosen automatically from the brightness of the background color.
- Gradient Font Color is only available when Background is set to No; a background and a gradient cannot be combined.
- The highlight is output as a
marktag, the HTML tag for marked text. Use it for a few key terms, not for whole paragraphs. - Check the contrast between text and background, especially with light background colors and thin fonts.