Surprisingly, the phone number input on the top header is not linkable in Divi.
The reason is because it is ‘sanitized’ on output. So whatever you add to that field, it’s all stripped out before its displayed on the frontend.
The reasoning is because… Elegant Themes thought it was a good idea. I don’t agree, but I don’t disagree either. Sometimes it’s safe to sanitize those fields. So yeah, whatevs.
Anyways, let’s change that.
You’re gonna have to edit the header, so you’ll need a child theme. Get one here (Click me).
Inside that child theme, you’ll see header.php
Open it up.
Change line 65 to this:
<span id="et-info-phone"><a href="<?php echo esc_attr( 'tel:' .$et_phone_number); ?>"><?php echo et_core_esc_previously( et_sanitize_html_input_text( $et_phone_number ) ); ?></a></span>
Done.
Now you’ll get the phone number to link directly to the number. It’s pretty helpful on mobile devices.
[sc name=”responsive-ad”]
Photo by Anastasia Dulgier on Unsplash
David says:
Or just input CALL ME to Header Element Menu in custum DIVI theme
PK says:
Hmmm… although you could do that, it’s a lateral approach, and this post was about changing the behavior of the top header. Thanks for your idea though, I’m sure it’ll be a good alternative suggestion for anyone looking to do that.
DAVID says:
Yes, but this avoids modifying the parent theme files. I try as much as possible not to modify the parent files for the future update 😉
PK says:
You don’t have to edit the parent theme if you’re using a child theme, which you always should.