Having your text links highlighted can be a great way to get people exploring your website and let’s be honest if done right, can look pretty cool. You can Highlight Links in the Divi Text Module with CSS even if you are not a code ninja. You’ll see how with just a few lines of CSS code that you add a much more bespoke look to the links in the Divi Text module.
Let’s take a look at what we will be building today.
Preview:
Bacon ipsum dolor amet anim esse tongue, ullamco voluptate pig nostrud sunt. T-bone pariatur bacon boudin aliquip, flank porchetta filet mignon jowl officia ea. Consectetur leberkas turkey ut, pork belly dolor drumstick. Leberkas alcatra in in doner pastrami, salami dolore voluptate pork chop. Pork belly tempor ea, turducken adipisicing ad bacon dolore. Laborum tenderloin ham kielbasa labore consectetur.
Labore est pastrami nulla boudin shoulder. In kevin drumstick commodo porchetta ribeye veniam boudin tri-tip meatloaf picanha pork belly landjaeger. Do id chislic venison cupidatat jowl pancetta. Sirloin picanha officia duis, deserunt shoulder nulla occaecat ham ground round in chicken consectetur aliqua. Chislic proident ut pig. Sint corned beef laborum pastrami alcatra elit pig in jerky ea tenderloin.
Video Tutorial
Table of Contents
Difficulty
Easy
Time
5 Minutes
Setting it Up
Preparing Our Text Module for the Animated Highlights
The first thing we need to do before adding the CSS that will highlight the links in our Divi Text module is to make sure we either already have a page with a Text Module containing some links, or we need to create one. If you do not, go ahead and quickly create a page and add a Divi Text module to the page and add some text with at least one link.
Text Module Settings > Advanced Tab > CSS ID & Classes > Add CSS Class de-highlights
Save
Adding the CSS Code
Transforming the Links into Animated Highlights
So the CSS we need to add here will look for the Divi Text module on the page that has the class de-highlights assigned which we did in the previous step, then apply the CSS to the <a> tags in the module. Just add that class to any text module where you want the CSS applied.
Add a Code Module
Paste the Code below in the Code Box between opening and closing <style> tags
Save
PRO TIP: If you wanted to add the highlight animation to all the <a> tags on the page, just delete all instances of the class de-highlights from the code you add here.
Polishing the Design
Changing the Colors
You can easily customize this CSS to highlight your links in the Divi Text module to fit the colors of your brand. You’ll see that the comments in the code show you exactly where to adjust the colors. For a quick guide, check below:
Text Color
Initial: Line 5
Hover: Line 17
Line Color
Initial: Line 6 Change the second linear-gradient color values (both) to your desired color
Hover: Line 6 Change the first linear-gradient color values (both) to your desired color
Look at them fancy highlighted links over there…
Conclusion
Today was a little shorter than usual, but as you can see, dynamite comes in small packages. If you blog often or create content with a bunch of links, this is a great way to make things just that little bit cleaner and easy to identify your linked content.
If you found this guide on how to Highlight Links in the Divi Text Module with CSS helpful, please consider subscribing to our Youtube Channel, and as always, we love hearing your thoughts and suggestions in the comments below.
Until next time!
OK. So I tried this. If I have a link, that is also italicized text, then it does not work. Is there something else I need to add?