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.

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';
}
Related Post: Adding CSS to the Divi Theme
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.
0 Comments