Add a Phone Icon to the Divi Person Module

Written by Dan Mossop

Adding a phone icon to the Divi Person Module can be a great way to enable visitors to contact your staff / team members directly from your website. With a click-to-call phone link, customers can get in touch with a simple click on your site. Here's how to add a phone icon to your Divi person module.

Unfortunately, Divi doesn't include the option to add a phone number to the Divi Person Module. However, we can add a click-to-call phone icon to the person module by using either the phone field added by the Divi Booster plugin, or using custom CSS to re-style an unused social icon.

Add a Phone Icon to the Divi Person Module using Divi Booster

The easiest way to add a phone icon to the Divi person module is using the Divi Booster plugin. With Divi Booster installed, a new phone option is added to the person module, allowing you to add a click-to-call phone icon alongside the existing social icons.

Here are the steps to setup and use the Divi Booster person module phone icon option.

Get Divi Booster

Our popular Divi Booster plugin adds hundreds of new features to Divi, including the one we need here.

If you haven't already done so, grab your copy of Divi Booster now.

Divi Booster Plugin

Upon purchase, you'll be provided with a copy of the divi-booster.zip plugin file. Download the plugin zip file to your computer, ready for installing in the next step.

If you have already purchased Divi Booster, you can obtain the Divi Booster plugin zip file from within your Divi Booster account.

Install Divi Booster

The plugin zip file can then be uploaded to your own site at:

WP Admin > Plugins > Add New Plugin > Upload Plugin

There, click "Choose File", locate and select your divi-booster.zip file and then click "Install Now". Once uploaded, click the button to activate the plugin and the feature will be added to Divi.

Open your Page for Editing in the Visual Builder

Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.  

Open the Divi Person Module's Settings

Locate the person module you want to modify, or add it to your layout if you haven't already. Then, hover over the module to reveal the module buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the module instead of hovering. Click the "Gear" icon to open the module's settings.

Enter the Phone Number in the "Phone" Field

In the Divi person module settings, go into the "Content" tab and in the "Text" settings section, you should find an option called "Phone". You may need to scroll down a bit to see it – it's just after the Website URL and Email Address fields. This is the person module phone link setting added by Divi Booster. In the field, enter the phone number you want to be called when the the icon is pressed. You can just enter the number, there's no need to include the "tel:" prefix as this is automatically added. 

Please note that this setting won't show in the visual builder preview, but will be displayed when you view the page on the front-end. The person module phone number option was added in Divi Booster v4.7.

Save the Module Settings

To save the changes to the module, click the green check mark button at the bottom of the module settings. 

Save the Page

When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result

If you now view your Divi person module on the front-end of your site, you should see that the phone icon has been added to your person module. Furthermore if you click it, it should trigger the click-to-call feature to initiate a phone call. Note that the details of how this is handled depends on the browser and how it is configured.

Add a Phone Icon to the Divi Person Module using CSS

One way to add a phone icon to the person module is by leveraging an existing, unused, social media field and some custom CSS. The following steps demonstrate how to add CSS that will automatically turn an unused social media icon into a click-to-call phone link when a phone number is entered into it.

Open the Divi Theme Options

Divi's Theme Options include various settings for configuring Divi's overall behavior. To open the theme options, from your WordPress dashboard, click on "Divi" in the sidebar menu, then the "Theme Options" sub-menu item.

Navigate to the "Custom CSS" Setting

Now click on the "General" tab in the Divi Theme Options, which brings us to Divi's main site-wide settings. Scroll to the bottom and you should see a box called "Custom CSS" which allows you to add your own CSS code alongside that already added by Divi:

Add the Person Module Phone Icon CSS

Now enter the following CSS code into the Custom CSS box. 

.et_pb_team_member a[href^="tel:"].et_pb_facebook_icon:before,
.et_pb_team_member a[href^="tel:"].et_pb_twitter_icon:before,
.et_pb_team_member a[href^="tel:"].et_pb_linkedin_icon:before {
    content: '\e090';
}

The CSS code snippet will automatically swap the Facebook, X or LinkedIn icon in the person module to a phone icon, if the URL entered starts with "tel:".

Save the Divi Theme Options

To apply the changes, we need to save the Divi Theme Options. This can be done by clicking the "Save Changes" button at the top or bottom of the Divi Theme Options area:

Open your Page for Editing in the Visual Builder

Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.  

Open the Divi Person Module's Settings

Locate the person module you want to modify, or add it to your layout if you haven't already. Then, hover over the module to reveal the module buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the module instead of hovering. Click the "Gear" icon to open the module's settings.

Enter the Phone Number in an Unused Social Media URL Field

In the Person module settings, locate the social media profile URL fields. You'll find them in the "Text" settings section of the "Content" tab. Hopefully you have a spare, unused, social media icon in your person module – i.e. one of Facebook, X and LinkedIn. Assuming you do, enter your phone number into the spare profile URL field, prefixed with "tel:", for example:

tel:0412341234.

In this example, we'll enter it in the "Facebook Profile URL" field. This will turn our Facebook icon into a click-to-call link.

Save the Module Settings

To save the changes to the module, click the green check mark button at the bottom of the module settings. 

Save the Page

When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result

If you now view your Divi person module on the front-end of your site, you should see that the Facebook (or X / LinkedIn) icon has been converted into a phone icon. Furthermore if you click it, it should trigger the click-to-call feature to initiate a phone call. Note that the details of how this is handled depends on the browser and how it is configured.

Conclusion

With these two methods, using Divi Booster or custom CSS, you can easily add a functional phone icon to the Divi Person Module, making it easier for visitors to get in touch with your team. This simple customization can enhance the user experience and support better engagement on your site. If you have any questions about it, please ask in the comments.

Unlock the Full Potential of Shortcodes in Divi!

Empower your Divi site with the Divi Shortcode Enabler. This plugin allows shortcodes to run effortlessly in various Divi module fields, enhancing functionality and customization across your site. Perfect for those utilizing custom CSS to modify modules, enabling richer feature sets without editing theme files.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts