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.

 

To learn more about CSS, media queries, Flexbox and/or responsive web design, check out this course! (use coupon code "getcoursewith5off" for 5% off) Learn how to make Divi more responsive

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

Photo by Anastasia Dulgier on Unsplash