How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial

  • Post category:WordPress
  • Post last modified:June 14, 2024

GinAngieLa.com independently selects and reviews products & services. When you purchase through links on our site, we may earn a commission, at no extra cost to you. Learn more.

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!

How to highlight text in Elementor

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.

GET STARTED WITH ELEMENTOR TODAY for free

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?
Elementor text editing options.

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:

    Add a header to begin generating the table of contents

    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. 

    How to hightlight text in Elementor – Step-by-Step
    Dragging & dropping the Elementor Text Editor widget on the canvas.
    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! 

    Elementor text editor
    Switching to Text view in Elementor shows you the source code.
    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:

    Code to highlight in WordPress
    Highlighting text in Elementor
    Adding HML tags around the text that you want to highlight.

    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 ‘backgroundcolor‘ 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.

    How do I change the highlight color in WordPress with Elementor?
    Changing the highlight color in WordPress using Elementor's color wheel.

    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!

    Quick Tip:

    You can also use this method to highlight words in headings. To find out how to use code within Elementor headings, check out my tutorial on → How to make an Elementor Heading in Different Colors.

    elementor icon
    The WordPress Website Builder.

    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 🌟

    How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial
    How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial
    How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial
    How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial
    How To Highlight Text In Elementor – Step-By-Step Elementor Tutorial
    AngieG. – The Person behind the Pictures
    HI Y'ALL!  
    My name is Angie and I’m a self-taught digital artist. On this blog, I am sharing my knowledge and educational resources to help you build a website for your art. My desire is to show you that you don’t need to be a coder to create a website. All you need is the desire to learn and the get-up-and-go to get started!
    LET'S CONNECT:
    SHARE THIS POST:

    This Post Has 2 Comments

    1. Sara McMillan

      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?

      1. User Avatar
        GinAngieLa

        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.

    We ♥ comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.