Divi Phone Number Module


The Divi Theme includes the option to display a phone number in the top header bar. But what if you want to display a phone number somewhere else, such as in a custom Theme Builder header, or in the content of your page? Divi doesn't come with a Phone Number module, but here's how you can create one yourself.

Turn the Icon Module into a Phone Number Module

Perhaps the easiest way to add a phone number module is by re-purposing an existing module. The most suited module for this is perhaps the built-in Divi Icon Module. To display a phone number using the icon module, do the following:

1. To begin, add an icon module to your page and select a phone icon to display. You can search for "phone" in the icon filter to bring up a list of the available phone-related icons:

2. Probably the icon will be too large at this point, so head over to the design settings and select your desired size (and color): 

3. Next, we'll add the phone number, styling the icon's "after" pseudo-element to represent the phone number. Here's the CSS we'll use:

content: '0412341234';
color: #0C71C3;
font-size: 20px;
margin-left: 0.3em;

This sets the phone number via the content element, gives the phone number a color which matches the icon, sets the desired font-size for the phone number, and adds a bit of margin to provide a bit of space between the icon and phone number.

Place this CSS into the "Icon Settings > Advanced > Custom CSS > After" box, like so:

4. Now save everything and view on the front-end. You should now have an icon module that works as a phone number module, and looks something like this:


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.