There are different ways to catch the reader’s attention on your WordPress site. Elementor offers you lots of text editing options: you can make text bold, underline text, change the text color, and even create strikethrough text. As there’s no Elementor widget for that purpose – how do you highlight text in WordPress? In this tutorial, you’ll learn how to highlight text in Elementor by using just a tiny bit of code. I’ll also show you a method how to change the highlight color in WordPress to your liking – quick and convenient, directly within the Elementor text editor!
Why are highlights an eye catcher?
When viewing a website, many visitors tend to scan the content first, instead of reading it. Therefore, highlighting text on web pages is an effective way to guide the reader’s attention towards those words or sentences that are particularly important.
Text highlights work best for dark text on a white background. It’s just like using an old-fashioned pen marker on an actual piece of paper!
The trick is, though, to make use of highlights wisely. As a rule of thumb, maximal 10 percent of your content should be highlighted. The less you highlight, the more attention your highlights will receive!
What’s the role of Elementor in all of This?
Elementor is the most popular website builder for WordPress. There are lots of widgets and extensions that allow you to create appealing and sophisticated websites that you can tweak to your heart’s full content!
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
Elementor has a whole range of text editing widgets, such as the dual color text headings by Essential Addons for Elementor and Ultimate Addons for Elementor, or the animated text widget by Elementor Pro.
All these widgets offer great design options. But still, there’s no Elementor widget to highlight text in WordPress.
Similarly, Elementor text boxes offer you lots of possibilities to edit and format the look of text blocks on your WordPress site.
I’m sure you already know how to make text bold in Elementor, and it’s also very easy to change the text color or create underlined and strikethrough text in Elementor.
However, despite those plenty of Elementor text editing options, one thing that is not yet working in the Elementor text editor is to highlight text.
How do I highlight in WordPress using Elementor?
Understandably, this is the question that you might be asking yourself right now. But don’t worry, there is a possibility to highlight text in WordPress with Elementor!
It’s quite simple. All you need to do is insert a small line of code around the text that you want to highlight in WordPress – and I’m going to show you step-by-step how to do that in this Elementor tutorial!
These are the three steps you need to follow that will show you how to highlight text in Elementor:
Step-by-Step Elementor Tutorial
How to highlight text in Elementor
STEP 1: Open Elementor & drag the Text Editor Widget on the canvas
First of all, create a new page, post, portfolio item or wherever you wish to highlight text on your WordPress site. Then click on the Edit with Elementor button.
Related: → Elementor Tutorial For Beginners
Once the Elementor sidebar is open on the left-hand side of your computer screen, you can grab the Text Editor widget and drag & drop it on the canvas.
This will add an Elementor text box with the default text to your page and open the text editing options in the sidebar.
STEP 2: Type in your text & switch to 'Text' view
Next, you simply type in the text that you want to display on your website, just as usual.
Before moving on to Step 3 and entering any code, it’s important that you switch from ‘Visual’ view to ‘Text’ view in Elementor’s text editor field.
By switching to ‘Text‘ view, you’ll get access to the source text that allows you to add programming code manually – and that’s exactly what we want to do in the next step!
STEP 3: Insert the following line of code around the text to highlight
When being in ‘Text‘ view, first of all find the bit of text that you want to highlight on your WordPress site.
To highlight the text in yellow, add the following two tags of code around the text:
It’s important to type in the code exactly as you see it above. This includes all special characters and spaces. Note that each HTML tag starts with an opening angle bracket (<) and ends with a closing angle bracket (>).
There’s a space after ‘span‘ and an equal sign after ‘style‘, followed by quotation marks.
The ‘background–color‘ attribute is followed by a colon (not by an equal sign!) and the color code stands right after the hash (#).
‘Background-color‘ must be hyphenated and color must be spelled the American way. 😉
The string ends with quotation marks and the closing angle bracket.
After that, you have the words that you want to highlight. Note that the span tag closes within angle brackets and a forward slash ( / ) at the beginning!
And that was already about it! Step 3 just showed you how to highlight text in Elementor!
When taking a look at the example text, we see that the sentence within the line of code is now highlighted in yellow – and obviously catching the eye!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. This is what highlighted text in Elementor looks like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Example of text highlighted in yellow within an Elementor text block.
STEP 4: Change the highlight color
How do I change the highlight color in WordPress with Elementor?
The code that defines the highlight color is a so-called hexadecimal value that follows the hash sign (#).
In the above example, the code for the yellow highlight color that we used is #F3EF29.
Every color code consists of a 6-digit combination of the numbers 0-9 and the letters A-F and starts with the hash sign (#).
For example, the color code of white is #FFFFFF, of black #000000, and a medium gray would be #7A7A7A.
There are different ways to figure out the code of a color. For example, you can use Photoshop’s color picker tool or install an extension to your Chrome browser.
One of the easiest and fastest ways is probably to use Elementor’s own color wheel.
When you’re in the Text Editor, just click on the Style tab and then on the box next to Text Color in the Text Editor dropdown.
In the Color Picker box, you can then select either one of your presaved colors or choose a different color in the color wheel.
You’ll see the color code appear in the bottom field. From there, you can simply copy and paste it after the ‘color-background’ attribute in the code line.
For example, if you want to highlight text in green instead of yellow, you can go to Elementor’s color picker, choose a green color of your liking and then replace the code of the yellow color with that of the green after the hash (e.g. #4EEC52).
And voilà, you’ve just changed the highlight color of your WordPress text!
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
I hope you found this tutorial on how to highlight text in Elementor helpful. If so, please share it with other Elementor users! Let me know what you’d like to see an Elementor tutorial about next. Cheers, Angie 🌟
You really make it seem so easy but I find this topic to be actually one thing which I feel I’d by no means understand. It seems too complex. Do you have any further information that might help me get the cling of it?
Hi Sara, doing things directly in the HTML code can feel overwhelming if you have never done it before. But don’t worry, it’s not as complex as it seems at first glance. I have an easy coding for beginners if you’re interested to learn more about HTML.