A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

Highlight Text in WordPress

How to Highlight Text in WordPress the Easy Way

If you are often dealing with lengthy articles on your website or blog, or you are simply looking for a way to make your articles more visually appealing, there’s a lot more you can do besides adding images to your text. Content is king but style matters too. Rarely anyone can stay focused enough to go through piles of uniform text and everything you can do to make your blog post more digestible is highly recommended.

Simple tricks like highlighting certain parts of the text can completely change the way an article is perceived and consumed by the readers.

Making style changes in the text can often be a bit time-consuming, but the good news is that you can highlight text in WordPress easily with a help of a free plugin. In this article, we will show you how to highlight text in WordPress with the Qi Addons for Elementor Highlighted Text Widget.

Highlighting Text With Qi Addons for Elementor

Qi Addons for Elementor is a feature-rich and intuitive plugin that comes with such a wide variety of features that it can easily answer the needs of any website type. It offers 60 free widgets and 40+ premium that you can use for business, eCommerce, creative and other purposes. No coding knowledge is necessary to use it, absolute beginners can customize their website like professionals thanks to its simplicity of use.

Highlighting text in WordPress with Qi Addons for Elementor is an easy, fun, and creative task, and we’ll show you how it is done in just a couple of simple steps. It is installed just like any other WordPress plugin and doesn’t require any particular configuration. The Highlight Text widget that we are using for this tutorial is a free widget from the Qi collection.

Install Qi addons for Elementor

So after you install it, go to the post in WordPress you want to edit, and open it in Elementor.

Then type “highlighted text” in the search field in the Elementor’s left side menu to find the Qi Addons highlighted text widget.

Highlight Text Widget

Now, hold and scroll the widget to the desired place in your WordPress post or page. When you do that the text field will appear with the default text in it.

Highlight Text default text

When you hover your mouse over it, an Edit Highlighted Text button will appear in the top right corner of the text field. Click on it to continue.

Edit Highlighted Text button

In the Elementor’s left side menu, the text will be available in the widget for you to edit. You can delete the default text, write your own or copy/paste the desired text.

Delete the default text

After you enter the text that you want to be highlighted, you need to define the exact part of the text that you want to be highlighted. You will notice the Hihglight Text Position field below the text box – that’s the place you enter the exact word or words by their ordering number in the text that you want to be highlighted.

Define the text you want to be highlighted

If you want to highlight more than one segment in the text, you can also do it simply by entering the ordering numbers of the words you want to be highlighted.

Highlight more than one segment in the text

In case you want to highlight just one word, the value you should enter should be 4-4.

Highlight just one word

When you are done with selecting the parts of the text you want to highlight, you can proceed to customize the highlighted text style.

Customizing the Highlighted Text Style

To make the content more dynamic and interactive you can choose to Enable appear animation for the highlighted text. Simply tick yes in the appear animation tab and the highlighted text will appear and reappear on the screen.

Enable appear animation

To set the speed at which the text will appear and reappear you can choose the Set MS option from the Appear Delay setting and set the speed to your preference.

Set MS option

All the changes you make are live so you can immediately see how the value you enter here affects the text.

Appear Delay setting

To customize the style of the highlighted text, click the Style tab. You can set the text alignment to be left, center or right. You also have the option to customize the highlighted text background color, adjust the text typography, and many more fine-tuning style options that allow you to make your text more appealing.

Highlight style options

You can set the text alignment to be left, center or right. You also have the option to customize the highlighted text background color, adjust the text typography, and many more fine-tuning style options that allow you to make your text more appealing.

This is how the result looks in our case:

Example Highlighted Text

In Conclusion

Feel free to play and experiment with all the options that come with this powerful plugin. It is free and extremely user-friendly so you will quickly find your way through all the features it offers. You can see all the changes you make in real-time, and you always have the option to preview your post, so you can let your creativity shine. There are also many other elements like toggles and accordions, amazing tabs, or process widgets and similar you can add to make your content more exciting, attractive, and dynamic.

The way you present your content can be a game-changer in the way your users perceive you, your brand, or your business. Every detail matters and you should not miss any opportunity you get to make your articles more appealing.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply