Highlight Text Shortcode

Updated on December 21, 2018

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


Displaying a Highlight Text

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

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

Highlight Text shortcode - visual composer screen

3In 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

4When 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

5Configure 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.
6Click 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.

1We’ll assume that you’ve added the custom_highlight_text to the CSS class.
2To 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;
}

3Click on Save Changes.

Add Padding

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

2To 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;
}

3Click on Save Changes.

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:

1From the WordPress left menu go to Pages > Add New.
2Add Highlight Text element in WPBakery page builder and set the settings to your needs.
3Switch to Classic editor and copy the Highlight Text shortcode.

4Then go to a page where you want to add that highlight text and open Text element and paste the shortcode you copied in the step 3.

5Update the page and check on frontend.

The text will be highlighted inside your content in Text element.

Did this answer your question?