How to Highlight Text in WordPress
Your visitors like your website for your content – the better your content, the greater your visitor satisfaction. If a lot of your content is textual, though, some of your visitors may feel a little put off – walls of text are notoriously unattractive. You can resort to adding some images, but that’s just one of the tools in your toolbox.
You could also make your text a little less scary by highlighting the important bits and drawing your visitors’ attention to a special offer, a discount, a startling datum, or whatever else. Not only that: highlighted text is easier to parse, provided that highlighting is used sparingly and correctly. Highlighting is also used in creating scannable content. It isn’t very hard to highlight text in your content, and there are several ways to do it, although WordPress highlight text is not a default feature . Here‘s what we‘ll be showing you:
This solution, it should go without saying, is for Elementor users. Elementor is one of the most widely used page builders, and for good reason – it‘s versatile, fast, intuitive, visual and completely free, at least in its basic version, which is still enough to construct a website from the ground up.
If you are using Elementor as your page editor, you are in luck: our proprietary plugin, Qi Addons For Elementor, is chock-full of useful, flexible widgets which greatly improve Elementor‘s default set. Among the 60 advanced elements the plugin has to offer, you will find the highlighted text functionality.
All you need to do is install and activate the latest Elementor (the free version will do), and then install and activate Qi Addons For Elementor as you would any other plugin. Qi Addons For Elementor is completely free.
Like with the other 59 widgets in the pack, you can set up your highlighted text just the way you like it within minutes, as demonstrated in our handy video tutorial:
But if you prefer it, we can take you there step by step.
Adding a section with highlighted text works just the same as adding any other Elementor widget: scroll down or start typing its name to find it and then simply drag it to the desired position from the left-hand side menu.
You will find it is set up with a version of Lorem ipsum, with bits of it already highlighted. Also by default, the General tab should be open. There you will find the Custom Class field, which we do not need for this demonstration. You will also find the Text field, in which you need to enter the entire body of text parts of which you wish to highlight, and the Highlight Text Position controls, which is vital: this is where you select which words will be highlighted.
The formatting for this control is simple. If you want to highlight a single word, simply put its position number in. If you want a range, put in the numbers of the words separated by a dash. And if there is more than one place you wish highlighted, separate all these values with a comma, as in the placeholder example.
And, of course, what you see is the default version of the colour settings. Which means we are only scratching the surface.
To show you what this widget can really do, we have replaced the placeholder text, set the range of the highlighted words as 3-7 and then switched to the Style tab to customize the appearance.
Here you can change the alignment of your entire body of text. We have moved it to the center setting.
The Text Tag control is there if you want to change your text’s status from the default P (for paragraph; the “normal” text) to a heading, from H1 to H6. We went bold with H1 here. Note that, for reasons of accessibility, this is not a size setting, though changing font sizes in WordPress is no big deal, either. The Text Color and Text Typography settings are what you need to look at if you want to change things like font Family, font Size, Weight (thickness or boldness), Style (italic or oblique) and Decoration (underline, strikethrough, and similar). You can also change Line Height and Letter Spacing in this section. We will leave all controls at their default values for the purposes of this demonstration.
Further in the lower section of the Style tab, we get to the highlight styling options. You can use the Highlight Text Color to change the colour of highlighted text, but we will leave it as is. What we will change is the Highlight Text Background Color from black to the hex value of #b7d4b5 – a muted fern green. Note how the colour of the highlighted text had changed to white to make the best possible use of the contrast. You can override this with the Highlight Text Color control, but we will leave it as is.
The two final controls are the Highlight Top Offset and the Highlight Bottom Offset. These controls govern the position of the highlight bar in relation to the top and bottom of the line. Leaving them blank makes the widget highlight the entire height of the line. For the effect you see below, we have switched the Highlight Text Color control to #000000 (black), the Highlight Top Offset to 36 and the Highlight Bottom Offset to 14.
This, of course, is just one of the infinite possibilities Qi Addons have when it comes to highlighting text. As we have shown, the settings are versatile enough to fit any layout or style.
Elementor not your cup of tea? No worries, you can also use WordPress‘s default page editor, Gutenberg, to highlight text in a paragraph block. We will begin with a post and a paragraph block with some placeholder text.
Selecting the paragraph block, find the Color Settings in the right-hand side menu. Under Background Color, select a colour of your choice from the selection, or enter a Custom color. We will go with white.
Now your entire block has a white background. Gutenberg does not currently allow highlighting specific words, though.
What it does allow is changing the colour of specific words. To do that, simply select the words you would like to change the colour of, and then select Text Color from the paragraph‘s drop-down menu.
Then you can choose from the selection you are offered, or choose a Custom color from the picker. We went with a bright red.
As you can see, there is no way to background-highlight individual words in a Gutenberg paragraph block‘s settings. Still, you can use paragraph blocks with different colour backgrounds for emphasising your paragraphs.
Finally, there is an easy way to highlight specific words using HTML tags. The tags you need are <mark> tags. We will start with a plain old paragraph block. In order to insert a HTML tag, you need to edit the block as HTML. You can also use this method in the Classic editor, so long as you are editing in the Text view.
Next, frame the words you want to highlight with the tags: <mark> at the beginning, </mark> at the end of the string.
The exact effect of these tags may vary depending on theme and (possibly) other settings, but most times it will look like a yellow highlight.
And there you have it, probably the quickest way you can highlight text in WordPress – though without any styling options.
In Conclusion
As you can see, there are at least three easy ways to bypass the fact that WordPress highlight text feature doesn’t exist by default. We don‘t have to tell you which is the one we prefer – with Qi Addons for Elementor, you get by far the most options and style settings. You can highlight text even if you don‘t want to use Elementor, though, or install any new software whatsoever. The choice of method is ultimately up to you. Note that there are other exciting ways to spice up your text, and they’re all conducive to better conversions. For example, you can add a stylish and elegant touch and break down your text into easily consumable parts by adding drop caps to your paragraphs. A text marquee, which adds movement to pieces of text, is also great for creating a dynamic, modern vibe. With tools like these, there’s no reason for your textual content to be bland and static.
