By now you should know I love Divi.  Technically, I’d say I love any WP “Modular “Theme or, even more broadly, I love WordPress and mutually exclusively Modular Based Themes, so the fact that those worlds collide with WordPress and Divi makes me all giddy inside.

My reaction when I realized all it could do is eerily similar to this young child hearing Katy Perry jam come on.

But I digress.

One feature Divi offers is a nifty top-header nav which allows the easy insertion of a contact phone and contact email by filling in two simple fields in Theme Settings under Appearance –> Customize.

(You can view the final at Redondo Manufacturing.)

However, the idea of placing an email address in html where web crawlers can sneak up and steal it is something I didn’t think anyone did anymore.  Ever.  While there are some needs for it and some very good workarounds, I wanted to see if I could replace it with some text that linked to my contact page, but also keep the cool email icon.

How’d I do it your ask?  Thanks for asking.

Here you go:

1. Make sure you’re using a child theme.
2. Copy header.php from Divi/header.php into your child theme
3. Find the #et-info id (php section)
4. Insert some code:

   <span id="ytext"><a href="http://redondo.orangepulley.com/project/contact/">Contact Redondo Manufacturing</a></span>

5. Apply styling :

#ytext:before {
 content: "e076";
 position: relative;
 margin-right: 4px;
 font-family: 'ETmodules';
}

This is a useful link to the ET Line Icon set and how to use it, but nowhere does it mention the font-family gotcha I bolded above.  I worked with Elegant Theme’s excellent support and wanted to share this little nugget of wisdom…even if it’s just as a reminder to me.

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.