Highlighted text is super cool!
Highlighting text is a great way to draw attention to a certain word or area of a page, as well as looking really cool! Although basic highlighting is achievable through simple html, adding a brush stroke effect requires just a little bit of CSS.
Here’s a really simple breakdown of how you can achieve this same effect:
Step 1:
Download the paint stroke you’d like to use from this website: Free brush stroke banners
Step 2:
Upload the PNG file you’d like to use to your media library. (You could also use the SVG file, but as SVG is not natively supported by WordPress I’ll keep this tutorial simple and just use the PNG)
Step 3:
Add a text module to the page where you’d like to add the highlighted text. Make sure you’re on the “Text” tab of the text box, NOT the “Visual” tab.
Wrap the word you’d like to highlight in a <span> element with class “highlight”. It should look something like this:
<span class=”highlight”>Highlighted</span> text is super cool!
Step 4:
Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):
.highlight {
background: url(your image URL);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}
e.g.
.highlight {
background: url(https://www.andyhooke.co.uk/wp-content/uploads/2018/02/yellow-brushstroke.png);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 8px 0;
}
And that’s it!
Let me know if you have any questions in the comment section below! You can also contact me directly via email at hello @ andyhooke.co.uk.
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
Hi there! Are you familiar with how to do this on navigation buttons on the menu bar on WordPress? Thank you!
Hey Ana! This would be possible, but will depend on which theme you use as to how you do it. Are you using Divi?
hi! I LOVE this! It’s just the code I was looking for! Except I’m looking to ‘hilight’ the entire line of text (as a heading for example). Can you please help me alter the code to make the line/image go behind ALL words? So far I have this, as if it is it’s own heading category:
HTML:
Style Crush
CSS
background: url (link goes here);
background-repeat: no-repeat;
Thank you!
Hi Devon,
HTML
Style Crush
CSS
.highlight {
background: url(example.com/brush.png);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 10px 0;
}
You may need to fiddle with the paddings, but that will work 🙂
agh it takes out with HTML Tags
add class=”highlight” to your Heading tags
Hi. So far, my design is doing great thanks to this tutorial.
The desktop view is good. But I’m wondering how I can adjust the highlight in mobile view without ruining the desktop view as it’s already perfectly fine.
Thank you!
Hey Jayzel – well done getting the desktop view sorted! For the mobile view, you can use media queries to adjust the padding so it only changes on mobile.