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!
More articles
Why it’s important to keep your WordPress website up-to-date
Updating a WordPress website is often overlooked. Many businesses think they just need to set up the website once and forget about it. But this is not correct. Let’s look at why it’s important to keep your WordPress installation up to date. Exposure to Security Risk...
30 Lawyer websites for Web Design inspiration 2020
If you’re looking for inspiration for a law firms website, you’ve come to the right place! I’ve done the hard work for you and collected what I think are some of the best lawyer websites out there. If you think I’ve missed any, leave a comment below and I’ll add it to...
Web Design Inspiration Websites – The Ultimate List (35+)
As a web designer I spend a lot of my time scouring the web for inspiration. When working on client projects I used to just search "industry" + "location" into google (e.g. "architects london"), and go through all the websites on the first few pages. But this wasn't...
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.