In this tutorial I am going to show you how to highlight text on your website.
1- specific words or, 2- paragraphs with various background colors.
This way, you will be able to create highlighted boxes with important text inside or even buttons!

I'm going to show you how to do that by using inline CSS styling code in your text editor.


The first step in this tutorial will be to introduce you to a color tool , the Color picker. You could just go ahead and google it or click directly on this link. https://www.w3schools.com/colors/colors_picker.asp


What a color picker does, is help you find any color nuance that you like.
It provides you with a hexadecimal color code for each color you choose. We are going to use this code when writing our code.


So lets start coding :)


Click on Next page to learn how to highlight specific words in a paragraph.







Join the Discussion
Write something…
Recent messages
Natalia777 Premium
Hey, friends !

I am trying to highlight a paragraph in one of my posts, following the instructions in this tutorial.

Unfortunately, I can't highlight the whole paragraph I want, only one part of it.

When I change the mode from code to visual, the p tag that has to be at the end of paragraph, goes from where I have inserted it to other place upper in my paragraph.

How can I fix that ?
Reply
Robert-A Premium
Why not just highlight what words you want to using the menu?
its as simple as that
Reply
Natalia777 Premium
I want to create a highlighted box in my post so I can put more emphasize on certain aspects of my content.

I don't know how am I able to do this through the menu ?

I followed Athanasia's tutorial and it has helped me a lot, I even managed to create rounded boarders box :)

The only issue I have is why the p tag that has to be at the end of paragraph, jumps up when I change the mode from code editor to visual.

As a result, I have highlighted box that contains only one part of what I wanted to be highlighted.

May be it is because I want to highlight a paragraph that is not a plain text, but a list of top 10 products, that goes like this:

1. Product Name
2. Product Name
3. Product Name ...
Reply
Robert-A Premium
I take it you are using the Gutenberg and not the Classic Editor.

I have never used Gutenberg so can't actually help you.

I thought you just wanted to highlight words which is pretty simple with the Classic Editor.

The person I would say to contact is Marion Black but she lives in Australia so will probably be in bed now.

https://my.wealthyaffiliate.com/marionblack

She does know a lot about Wordpress.
Reply
Natalia777 Premium
Thank you, Robert, I will try to contact Marion later on this issue.

I have noticed some differences between my editor interface and the other people's while I was watching their video tutorials.

May be I am using Gutenberg as you supposed, how can I check it ?

It seems like it is easier to use Classic editor instead of Gutenberg ?
Reply
Robert-A Premium
Its a whole lot easier to use the Classic Editor.
Its a plugin and you can switch over from Gutenberg to Classic no problem.

What i mean is if you like Gutenberg for some functions that's ok but with the Classic Editor its so much easier to work with.

https://en-gb.wordpress.org/plugins/classic-editor/

You can also add other plugins that will make life so much easier as well.

Such as Fonts and Styles and Wordpress Edit which gives you so much more functionality when you are creating an article.

https://wordpress.org/plugins/fonts/

https://wordpress.org/plugins/wp-edit/

I have them all and used them for a few years.

I have published a blog you might like to read.

I'm off out for a few hours but get back to me if you get stuck.

Robert
Reply
Chrissies Premium
Many thanks for this Athanasia :)
Reply
Athanasia Premium
You're welcome Chrissie :)
Reply
SadieChan Premium
Thanks, Great training.
Reply
Athanasia Premium
My pleasure Sadie :)
Reply
GautamWorld Premium
Useful information. Thank you, Athanasia!
Reply
Athanasia Premium
You're welcome Gautam :)
Reply
reanna1 Premium
Thank you so much, Athanasia!
Reply
Athanasia Premium
You're very welcome Reanna :)
Reply
jvranjes Premium
This is very useful. I use these color blocks a lot. Have problems with tables but it works somehow. No idea if this is well accepted by readers or not. Do you know more?
Reply
Athanasia Premium
Thank you Jovo :)

If it's well accepted by readers?
Well it depends on how you use it. Everything matters; the colors, where you will place it, if the content inside of the box needs to be highlighted etc.
A website can have a bad or good user experience and that depends on many things.
Here is an interesting article about user experience
https://www.usertesting.com/blog/2015/09/16/what-is-ux-design-15-user-experience-experts-weigh-in/
Reply
jvranjes Premium
Obviously very hard to find an answer.
Reply
Athanasia Premium
yes lol
Reply
Top