People often ask how you can add an email link to the Divi Person module. It seems an obvious thing to have so it’s still a wonder to me why it isn’t included by default.
I’m sure at some point ElegantThemes will add it, but until then I’ve created a super-quick walkthrough showing you how to add an email icon to a Person module and link it up to the appropriate email address.
Step 1: Add a new Div to the Person Module Description
The first stage is to add a new div container to hold the email address we want to use. Don’t worry we’ll hide this with JQuery later.
So in your Divi Person module, add the following into the Description field anywhere you like (ideally at the end) and set the content to the appropriate email address:
<div class="dh_person_email">ed@divihype.com</div>
Here’s a screenshot to show you what it should look like:
Now save your page.
Step 2: Add JQuery and CSS to set up the Email link
The next stage is to add a small amount of CSS and JQuery to convert the DIV we added above into an email icon and add the link.
I’ll run through the simplest way to do this with Divi, but the more experienced you can of course add the CSS to your style.css file and enqueue a separate .js file for the JQuery code if you want.
The quickest and easiest way to get things working is:
- Log into the WordPress Admin area
- Go to Divi > Theme options
- Select the Integration tab
- Add the code below into the box labelled ‘Add code to the < head > of your blog’
<script>
jQuery(document).ready(function($) {
//Check each person module
$('.et_pb_team_member').each(function () {
//Find the div we added containing the email address
$emailcontainer = $(this).find('.dh_person_email');
//Extract the email address
$email = $emailcontainer.text();
//This adds the email icon to the START (First icon). If you want it at the end instead, simply change '.prepend' to '.append'
$(this).find('ul.et_pb_member_social_links').prepend("<li><a href='mailto:"+$email+"' class='et_pb_font_icon dh_email_icon'><span>Email</span></a></li>");
//Hide the div we added
$emailcontainer.hide();
});
}
)
</script>
<style>
/* This adds the email icon to the new Email list item added by JQuery */
.dh_email_icon:before {
content: "\e076";
}
</style>
Here’s a screenshot showing what it should look like:
Make sure you save your Divi settings afterwards!
The Result
Ed Solman
Divi Hypester
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum et sapien fermentum vestibulum. Aliquam erat volutpat.
Rounding up
So as you can see, with a bit of CSS and JQuery you can easily add an email link to the Divi Person module.
That’s it from me, please leave a comment if you found this quick tutorial useful!
About the Author
Ed Solman
Entrepreneur, Blogger and Website Developer/Designer. Passionate about helping people and businesses develop and grow. Daredevil sportsbike enthusiast.
Thanks for this great tutorial, works perfectly. Question: what would you need to change to add an icon with a link to a person’s personal website?
Hi ilse,
Yes you sure can. To change the code to show a website link instead, you need to:
1) Add the full website address where the email address goes
2) Change the href link in the JQuery code to ‘’ (i.e. blank) instead of ‘mailto:’
3) Change the CSS to display a website icon instead, so switch the content code from “\e076” to “\e09b”
4) You may also want to add target=”_blank” after where it says rel=”nofollow”, so the website opens in a new tab
You can choose a different icon if you need. This website has a list of all the standard divi icon codes.
If that doesn’t make sense, feel free to email me of get in touch through the divihype facebook page 🙂 Thanks, Ed
I hope you don’t mind the product promotion, but I have developed a ‘divi person plus’ module that has an in-built possibility to show an email link. See https://www.sitesforscholars.com/products/divi-person-plus-module/ for more info
Thanks for the help! I am having trouble on two of my person modules. The email icon does not appear when a person doesn’t have any activated social icons. Do you have a work around for that?
Ah, yes if there are no other social icons at all Divi won’t create the section that my code adds the email icon to. I’ve not tested this, but I think it will work. Change the <script> section of code to the following and it should work in both scenarios, i.e. when you DO have other social icons and when you do not. It checks if the social icons area exists first. If it DOES exist it just adds the new email icon, otherwise it creates the section and adds the icon:
<script>
jQuery(document).ready(function($) {
//Check each person module
$(‘.et_pb_team_member’).each(function () {
//Find the div we added containing the email address
$emailcontainer = $(this).find(‘.dh_person_email’);
//Extract the email address
$email = $emailcontainer.text();
// Check if the social icons area exists
if ($(this).find(‘ul.et_pb_member_social_links’).length) {
//This adds the email icon to the START (First icon). If you want it at the end instead, simply change ‘.prepend’ to ‘.append’
$(this).find(‘ul.et_pb_member_social_links’).prepend(“<li><a href=’mailto:”+$email+”‘ class=’et_pb_font_icon dh_email_icon’ rel=”nofollow”><span>Email</span></a></li>”);
} else {
//This creates the required social links section if it doesn’t exist, assuming you’ve not added any other social links to the person module
$(this).find(‘.et_pb_team_member_description’).append(“<ul class=’et_pb_member_social_links’><li><a href=’mailto:”+$email+”‘ class=’et_pb_font_icon dh_email_icon’ rel=”nofollow”><span>Email</span></a></li></ul>”);
}
//Hide the div we added
$emailcontainer.hide();
});
}
)
</script>
Love that you put this together but can’t seem to get it to work. Using it in the instance where no other socials are present. Tried the code you provided for that instance, and nothing. Were you able to get it to work?
Sadly I cannot get this to work. :(. http://yindigroup.com.au/about-us
Hi, I’ve tried this but it doesn’t fix the issue. My staff choose not to display any other social profile links, only email. Is there another fix? Thanks
So you want to ONLY show an email link, nothing else? I’ll try and take a look at the code as I think it assumes you have at least one other link available.
I believe the issue with the above text is that it interprets the quotation and apostrophe marks as different characters. (” vs ” and ’ vs ‘). I retyped all these marks and the code works for me.
I would post it, but it seems like the website is blocking my comment from posting.
Seems like the code is not working because of the quotation and apostrophe marks (“ vs ” and ’ vs ‘) for me, so I fixed them all.
Hopefully, this helps.
Thanks.
You’re most welcome Eric.
didnt work for me … 🙁
What was the issue Andre? Maybe I can help. It should work OK.
Great tutorial, thanks for putting this up
You’re welcome Stephen. Glad it was useful 🙂
Will this work in the extra theme (divi with extra things added)?
Sorry, I’m not sure. I’ve not used Extra. If it has a person module like Divi, it may work. It depends on whether it uses the same classes and fonts.
very nice
can you make this also work for the phone number?
Yes you sure can. To change the code to show a phone link instead, you need to:
1) Add the phone number where the email address goes
2) Change the href link in the JQuery code to ‘tel:’ instead of ‘mailto:’
3) Change the CSS to display a phone icon instead, so switch the content code from “\e076” to “\e090”
If you want to add Email AND Phone at the same time, you’d need to extend the code and add a second div with a different class (e.g. dh_person_phone), add a duplicate bit of JQuery to prepend the second link to the existing social icons and add an extra bit of css to add the second icon.
If that doesn’t make sense, feel free to email me of get in touch through the divihype facebook page 🙂 Thanks, Ed
I’m receiving:
Expecting a comma error on this line of code:
$(this).find(‘ul.et_pb_member_social_links’).prepend(“Email“);
When I remove the rel=”nofollow” the error goes away, but the code doesn’t work. Do you know why it thinks it needs a comma?
Sorry Sue, this was my mistake. The additional code in my comment was not quite right. You need to wrap the nofollow in single quotes, not double quotes. So:
rel=’nofollow’ rather than rel=”nofollow”. Hope that helps 🙂
Hi how do you make the linkedin social icon open in a new tab?
Hi Ed!
I just sent an email regarding the email link triggering when clicked, as my site is not. It shows mailto:email@site.com, but does nothing when clicked. I’m posting here in case my email goes to your spam folder.
By the way, what an incredibly easy and useful tutorial! I look forward to exploring your site more!
Thanks Ed!
Hi Ed, I’m using the person module with dynamic content pulled from the WordPress-user section in the admin to display the author of a blogpost.
Sadly, the only dynamic info available in the current Divi module are name, image and bio. Not the email, although that is part of the user information in the WordPress admin.
Do you know of a way to include this in de standard Person module so that is shows automatically?
Thanks!
Thank you – exactly what I needed.
Surprised this is not a standard option in Divi.
Indeed. ET keep adding so many complex features, but an email for the person module (basically a contact module for an individual) seems an obvious one to include!
This will put the email icon on each Person even if that person has no email. In order to accommodate a situation where some people have email only, some people have social media, some people have social media and email, and some people have neither, the second part of the if … else has to be an if (testing to see if the dh_email_icon div exists).
Hi Ed – this is a great tip – thanks! Instead of including a specific email in the DIV in step 1, would it be possible to pull the email as dynamic content from a user profile??
Not easily Graham, as the person module isn’t actually linked to a user record. You would need to write some custom code to, for example, identify the name of the person from the person module, then run a query to find the user with that name and pull out their email address. Yes, it could be done, but I won’t include code for that here. Good question though!
Did I do Something wrong? I have 4 persons modules, and I want to display the email only for one; I added the tag only for this person and it works as a charm, however all persons have an email icon with a blank “mailto” link. Care to help? 🙂
Thank you for this great tip, it’s unbelievable that DIVI does not have a email icon by default!