Adding a phone icon to the Divi Person Module can be a handy way to enable visitors to contact team members directly from your website. Here's how it can be done.
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.
Step 1: Update the Social Media URL
Hopefully you have a spare, unused, social media icon in your person module – i.e. one of Facebook, X and LinkedIn. Using Facebook as our example, let's replace one of the social media URLs with your phone number, turning it into a click-to-call link.
Go to Person Module > Content > Text > Facebook Profile URL.
Enter your phone number as, for example:
tel:0412341234.
This converts the Facebook icon into a clickable phone link.
Step 2: Add Custom CSS
Next, we need to replace the Facebook icon with a phone icon. Add the following CSS to your site:
.et_pb_team_member .et_pb_facebook_icon:before {
content: '\e090';
}Related Post: Adding CSS to the Divi Theme
This snippet swaps the Facebook icon for a phone icon.
Before
After
Applying to Specific Modules
To apply this change to specific Person Modules only, add a custom CSS class to the module:
- Go to: Person Module > Advanced > CSS ID & Classes > CSS Class.
- Add a class, for example,
phone-icon.
Then, modify the CSS accordingly:
.phone-icon .et_pb_facebook_icon:before {
content: '\e090';
}For Other Social Media Icons
You can do the same for other icons by using the following CSS:
For X (formerly Twitter):
.et_pb_team_member .et_pb_twitter_icon:before {
content: '\e090';
}For LinkedIn:
.et_pb_team_member .et_pb_linkedin_icon:before {
content: '\e090';
}With these steps, you can efficiently turn any unused social media link in the Divi Person Module into a functional phone icon, 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.
0 Comments