Design Trends – Using Back Highlight on Headings

Design Trends – Using Back Highlight on Headings

We always love testing out new design trends and one of our favorites right now is the back highlight on certain words within your website design.

You’ve probably seen it, that cool back highlight behind headings but so far you can’t figure out how to make it happen on YOUR site.

Well lucky for you we’ve been able to dissect it from others coding and make it easy for you to do too.

First you will need to add this code to your CSS Custom Code Area on your WordPress Website.

.highlight {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #75ced2 50%);

Replacing the #75ced2 color code with whatever color you want as the back highlight on your website.

Now you want to go sparing with the back highlight so the best way we think to incorporate it is to use Span style coding on the text to apply this look on an as needed basis.

You will need to be sure that in WordPress you are in the TEXT editor not VISUAL editor. For most page builders you have the ability to switch back and forth to this as well.

Before and after the text you want highlighted – put this code:

<span class=”highlight”>YOUR TEXT HERE THAT WILL BE HIGHLIGHTED</span>

If you want an extra space (extending the highlight out from the edges) at the front and back you will need to change the coding slightly here is the coding you will need:

<span class=”highlight”> YOUR TEXT HERE THAT WILL BE HIGHLIGHTED </span>

Or possibly <span class=”highlight”>&nbsp;YOUR TEXT HERE THAT WILL BE HIGHLIGHTED&nbsp;</span>

We’ve done it both ways with different theme builders to get the desired results. If your editor doesn’t add the space in with the top code, try the second one and it should work great.

Easy as that and you are the new cool kid on the block with the snazzy website!

Leave a Reply

Your email address will not be published. Required fields are marked *