The highlight text shortcode will add a highlight to an inline text. It’s useful when you want to attract attention to a specific part of your page content.
In this article, we’ll explain how to create a highlighted text and configure the shortcode settings.
To see the highlight text shortcode in action, check out the demo page.
Displaying a Highlight Text
To display a highlighted text, you’ll need to first add the shortcode.
| Setting | Description |
|---|---|
| Highlight Text | The text which needs to be highlighted. |
| Text Color | Defines the text color. |
| Background Color | Defines the background color of the text. |
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
Increasing the Font Size and Padding
By default, there is no option to change the text size and increase the padding, but this all can be done through Custom CSS. In this case, we will increase the font size and add some padding to the text.
Increasing the Font Size
After adding the highlight text shortcode to your page, you’ll need to assign it a CSS class as explained in the previous section.
//increase the highlighted text font size
.custom_highligh_text {
font-size: 20px;
}Add Padding
//add paddings to the highlighted text
.custom_highligh_text {
padding: 5px 15px;
}Adding Highlight Text inside some content
If you want to add Hightlight Text inside the other text as shown on our demo, you can do it this way:
The text will be highlighted inside your content in Text element.
