How To Highlight Text In WordPress (3 Easy Ways)

highlight text

Long posts are often too boring and sometimes visitors don’t find the information that they have been looking for. To solve this problem, highlight text in WordPress can be your great ally. It only takes the magic touch, then your text will be highlighted and it will attract your visitor’s eyesight. 

In this post, I will show you to highlight text in WordPress. After following the post you will be able to highlight any portion of text at any time. 

Highlighting is the easiest way to emphasize important information in your post. This helps users to interact directly with the important part. A highlighted text may look like this. 

WordPress comes with the content editor by default and therefore you can highlight any text whenever you want. 

You can also do it using a plugin or CSS. Here, I am showing all three ways, but it is suggested to do it using the default way of WordPress.

 

How To Highlight Text In WordPress

Highlight in Default Way

In this method select the text by using the cursor.

Now click on the arrow button (Display more block tools). Select ‘highlight’ option.

Now you will be provided with a color palette to choose the text and background color. Choose at your will.


Highlight Using A Plugin

First, download and install the Advanced Editor Tools plugin and activate it. Earlier it was named as TinyMCE tools. 

Now open the page or post where you want to highlight the text. Select the text portion which you want to highlight. Then click on the arrow button on the toolbar and select the Mark option. 

Now your selected portion of the text will be highlighted. 

It’s super easy, right? However, if you don’t highlight text very often then it is wise to highlight text manually. 


Highlight Text Using CSS

This option requires the implementation of a little bit of code. At first, open the page post where you want to highlight text. Then select a paragraph containing the text and click on the three-dot button. Select Edit as HTML. 

Now you will be able to see the post in HTML format. Now wrap the text up inside the <mark> and </mark> tags in the below way:

<mark> Build Better Content With Ultimate Blocks</mark> 

Now you can switch back to the visual mode by clicking on the three-dot menu button and selecting ‘Edit visually’

Take a look at the changed portion. Where you placed the tags, that portion is highlighted. If you don’t like the yellow color you can change it. 

Navigate to Appearance -> Customize page and click on Additional CSS. now write the following code. 

mark {
background-color: #ffd4a1;
}

In the background color, write any color code you want then hit save changes. Then you will be able to see your color in the action. 

Final Words

Well, that’s all guys. For you, I am repeating myself again, if you don’t highlight it most often then do it manually once. And if you think you are going to highlight pretty often then use the plugin. If you have any questions, feel free to ask. I will happy to reply to your questions. If you liked the post, please share it with your friends. Stay safe. 

Leave a Comment

Your email address will not be published.