How to add a paint stroke highlight to text using CSS in Divi

Feb 23, 2018

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://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.

Related posts

Change image on hover in Divi with CSS

Having an image which changes on hover is a cool effect, but unfortunately it's not a native feature of Divi. Luckily though with a little bit of CSS it's an easy effect to build yourself. In part 1 of this tutorial I'll walk you through step-by-step on how to create...

3 Divi blurb hover effects (CSS)

Now Divi has the option of turning any module into a link, I often find myself making sections with blurbs which are linked to other areas of the website. The only issue though is it’s not that obvious these blurbs are links, as the only thing to show they’re...

CSS 3D Website Mockups in Divi

3D mockups are a great way to show off your web design work, and also a lot easier to make than you might think! There are a couple different ways you can achieve this look: 1. Photo editing software (e.g. Photoshop) 2. CSS The problem with the first method is 1) you...