Highlight Text Shortcode

Last Updated on

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.

Highlight Text shortcode - demo

In this article


Displaying a Highlight Text

To display a highlighted text, you’ll need to first add the shortcode.

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Highlight Text shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Highlight Text and click on it to be added to the page.

Highlight Text shortcode - add element

4
When the shortcode is added, a new pop-up screen called Highlight Text Settings will open that allows you to configure the shortcode settings.

Highlight Text shortcode - Highlight Text settings

5
Configure the settings as required.
SettingDescription
Highlight Text The text which needs to be highlighted.
Text Color Defines the text color.
Background Color Defines the background color of the text.
6
Click on Save Changes and publish or update the page to check the result.

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.

1
We’ll assume that you’ve added the custom_highlight_text to the CSS class.
2
To change the font size, add the following codes in Theme Options > Advanced > Custom CSS. We set the text size to 20px.

//increase the highlighted text font size
.custom_highligh_text {
     font-size: 20px;
}

3
Click on Save Changes.

Add Padding

1
We’ll assumed that you’ve added custom_highlight_text to the CSS class.

2
To add the paddings, put the following codes in Theme Options > Advanced > Custom CSS. We add 5px padding to the top and bottom of the text and 15px to the left and right.

//add paddings to the highlighted text
.custom_highligh_text {
    padding: 5px 15px;
}

3
Click on Save Changes.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket