Add email link in header
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
Divi comes with the option to add a phone number and email in the top header but the email address is not linked. This tweak will show you how to add a link so the user's default email application will automatically open when the email is clicked.
PHP
Locate the header.php file in the Divi folder
Copy this file into your Divi-child theme folder
Find these lines of code around line 74:
<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><?php echo esc_html( $et_email ); ?></span>
<?php endif; ?>
Change them to this:
<?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
<span id="et-info-email"><a href="mailto:contact@example.com"><?php echo esc_html( $et_email ); ?></a></span>
<?php endif; ?>
That's it. Make sure you replace "contact@example.com" with the correct email address. I also added CSS to make the email address underlined when hovered on:
CSS
Open your style.css file in your Divi-child folder and add the following code:
#et-info-email a:hover {
text-decoration: underline;
}
9 Comments
Hi. I’d like to make the phone number field in the header a callto link. Could you tell me how to do this? Thanks!
February 9, 2015
Hi, I’d like to do exactly the same thing as Nick. is there a way to do that?
May 5, 2015
Hey Nick, I figured out how to make the phone number clickable. Sharing in case you still need it.
in header.php you need to change
to
<a href="”>
May 5, 2015
How do you add other info at the header element right next to phone and email and not above or below it?
And how do you make it visible when let’s say you leave the phone and email blank?
Thanks in advance 🙂
October 28, 2015
Hi Rambo. You’ll have to remove the conditional if statements in the header.php file:
and
Then just add your own text or links and delete the phone and email if you don’t want them. You should do this in a child theme.
November 6, 2015
Hi, I am trying to add link to header next to phone number. How I can do it? Thank you.a
December 16, 2015
Hi, i wont to make the mailto clickeble to a url page (my contact page).
how to do that what do i have to change in de copy header.php file in my child theme.
working whit divi 3.0 elegant theme and make my chld theme whit te plugin divi children.
February 22, 2017
Is it possible to make the text or bg image of my header a clickable link?
September 8, 2018
Hi yes I too would like to make it “say email us” in the fixed menu and then a link to our contact us form
January 31, 2019