Latest Tech and Tips

How to Highlight Text in WordPress (Beginner’s Guide)

13

Do you desire to highlight text in a WordPress article or web page?

Being able to highlight text can aid you direct customer’s focus to a details text location. This can be terrific to highlight a telephone call to activity, special deal, or merely include focus on particular sentences.

In this write-up, we’ll reveal you how to conveniently highlight text in WordPress both with or without a plugin.

Highlighting text in WordPress

Why and also When to Highlight Text

Text highlighting is a very easy method to highlight vital info in your material. This assists you straight customer’s focus to vital phone calls to activity.

Here’s an example of what text highlighting can appear like:

Example of highlighted text

By default, the WordPress material editor does not featured the alternative to merely choose and also highlight any kind of text. You can still highlight text by making it italic, adjustment text shade, or making it vibrant

Default paragraph toolbar in WordPress block editor

That being claimed, allow’s have a look at how to conveniently highlight textin WordPress

Method 1. Highlight any kind of Text in WordPress (No HTML Required)

The most convenient method to highlight text is by utilizing a WordPress plugin.

First, you require to mount and also turn on the Advanced Editor Tools plugin. For even more information, see our detailed overview on how to mount a WordPress plugin.

Advanced Editor Tools (previously referred to as TinyMCE Advanced) includes even more format alternatives and also prolongs the WordPress obstruct editor.

Once the plugin is triggered, you can modify the WordPress article or web page where you desire to highlight some text. Simply choose the text you desire to customize and afterwards click the dropdown arrowhead for even more format alternatives.

Highlighting text in WordPress using Advanced Editor Tools plugin

From the drop-down food selection, you require to choose the ‘Mark’ alternative. This will certainly highlight the text making use of the default shades.

However, the real shade might differ depending upon your WordPress motif shades. You can currently conserve your post/page and also sneak peek it to see the highlighted text in activity.

Example of highlighted text

Easy had not been it?

However, if you do not require to highlight text extremely frequently, after that this following technique enables you to do the exact same without making use of a plugin.

Method 2. Manually Highlight Text in WordPress

This alternative calls for a bit of code, yet it’s simple to apply.

For this instance, we’ll be making use of the HTML ‘mark’ component. This can be utilized to highlight and also bring focus to a particular component of your writing.

Simply modify the article or web page where you desire to highlight the text. Next, go to the paragraph consisting of the text and afterwards click three-dot food selection in the block toolbar. From below, you require to choose ‘Edit as HTML’ alternative.

Editing a block as HTML

Next, you’ll see raw text in HTML layout. Simply cover the text you desire to highlight inside the << mark>> and also < tags such as this:

<< mark>> highlighted text<.

You can currently switch over back to the aesthetic setting by clicking the three-dot food selection once again and also picking ‘Edit Visually’ in the block toolbar.

Edit visually

The obstruct location will certainly switch over back to the aesthetic setting, and also you'll discover your picked text highlighted.

Highlighted text in the editor

Your highlighted text might look various depending upon your WordPress motif. However, typically it is simply a yellow history.

If you would certainly such as to transform it, after that you can do so by including your very own personalized CSS.

Simply go to Appearance" Customize web page to launch the motif customizer. From below, you require to button to the ‘Additional CSS’ tab.

Custom CSS settings

Here you can paste your personalized CSS. You can utilize the complying with CSS code as a beginning factor.

mark {
background-color: #ffd 4a1;.
}

Once you're done, struck the ‘Publish’ switch to conserve your adjustments. You can currently see your WordPress blog site to see your highlighted text in activity.

Custom CSS to change background color of highlighted text

We wish this aided you discover how to highlight textin WordPress You might likewise desire to see our overview on the very best WordPress web page contractors to aid you develop entirely personalized styles with no code, and also our contrast of the very best e-mail advertising solutions to expand your website traffic.

If you liked this write-up, after that please subscribe to our YouTube Channel for WordPress video clip tutorials. You can likewise locate us on Twitter and also Facebook.