In some cases, sometimes we need to attract attraction to our users by emphasizing some important information on your site. Highlighting a text is one way to attract your users’ attention. If you are an Elementeor user, lucky for you, you can highlight a text effortlessly.
This article will show you how to highlight a text in Elementor without the help of any add-on.
How to Highlight a Text in Elementor
Well, there are several methods to highlight a text in Elementor. In this tutorial, we would like to show you two ways that have strengths and weaknesses for each method; it depends on your scenario and your needs.
Option One (HTML Code Only)
This method will show you how to highlight a text in Elementor by adding the HTML code. To highlight with HTML code is support for all Elementor widgets with text. In this method, we will use a Text Editor widget.
Alright, go to the Elementor editor, select the Text Editor widget from the widget panel, then drag and drop it into the canvas area. Afterward, you can replace the text or edit and style up if you want to.
Please navigate the text editor and switch to Text mode on the widget settings.
Next, prepare the text that you want to highlight. This example will highlight two different texts (see the image).
Now, it’s time to add the HTML code to the text editor. Place the HTML code depending on the text/s you want to highlight.
- Example Code
Don’t be too fast to <span style="background-color: #ffff00;">highlight the weaknesses of other people.</span> That is the quickest way of <span style="background-color: #ffff00;">exposing your own weaknesses.</span>
- Example Result
Note: You can change the highlight color by editing the hex color code in the HTML code.
Option Two (Inline Method)
This method will be better for you if you want to create a “template” for your highlight. You don’t need to write whole HTML code on your text editor; you only need to add the CSS class and property.
First, go to your WordPress dashboard and navigate to theme customizer (Appearance -> Customize).
Open the Additional CSS block on the theme customizer panel
Copy the simple CSS snippet below and paste it into the Additional CSS field.
.subscriber-highlight {
background-color: #DADADA47;
border-radius: 0.25rem;
color: inherit;
padding: 0.2em 0.4em;
text-decoration: none;
white-space: nowrap;
}
Once you’ve added the CSS snippet, apply it by clicking the Publish button.
Next, go back to the Elementor editor. Like option one, you can add any Elementor widgets with text into the canvas area. In this example, we will use the Heading widget. Once you add, edit and style up your widget, please prepare the text you want to highlight.
Navigate the Title editor and add the simple HTML code (class and property only) to the Title editor field. Place the HTML code depending on the text/s you want to highlight.
- Example Code
Get <span class="subscriber-highlight">FREE</span> plugin for your next project
- Example Result
Note: You can customize your highlight by editing the value on the CSS snippet that you added on the Additional CSS. Such as background color, border radius, padding, etc.
The Bottom Line
This article shows you how easy to highlight text in Elementor without the help of any add-ons. As we mentioned earlier, the purpose of highlighting the text is to attract attention to important information. So, be careful when you use it. Please ensure that the text you highlight is only for important text so as not to be overused.
