With the world living on mobile devices, it makes sense to provide clickable contact links on your website that take advantage of the mobile experience. These contact links, like a click-to-call link, can jumpstart a call on your mobile phone in a single click. Others, like a directions link, can open directions to a business address in Google Maps. These are really convenient for users and a must for certain businesses.
In this tutorial, we are going to show you how to create a Divi mobile contact bar with Click-to-Call, Email, SMS, and Directions Links. To do this we will be using the Divi builder to design the bar and the buttons on a global footer. Then we will add custom URLs to each contact link to bring home the functionality we need.
Let’s get started!
Here is a quick look at the design we’ll build in this tutorial.
Download the Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
How to Add the Fixed Contact Bar Template Download to Your Divi Site
WARNING!: Adding this template will override the default website template (if you have one) on your Divi site. We suggest adding this to a test site so that you don’t mess anything up on a live site.
To import the fixed footer bar template to your own website, unzip the download zip file to access the JSON file.
Then go the WordPress Dashboard and navigate to Divi > Theme Builder.
Then click the portability icon at the top right of the page.
Inside the portability popup, choose the JSON file you just unzipped and select the option “Download backup before importing”, just in case you had something in the default website template previously that you didn’t want to override.
Then click the Import button.
Lastly, save the Theme Builder changes and view a live page to see the fixed footer bar.
Now, let’s get to the tutorial, shall we?
Part 1: Creating a Global Footer
For this tutorial, we are going to add a mobile contact bar to the global footer using the Divi Theme Builder. Start by navigating to Divi > Theme Builder. Then click the Global Footer Area inside the default website template. From the dropdown, select Build Global Footer.
NOTE: If you already have a global footer, you can open edit the global footer and add the contact bar in addition to the current footer.
Choose the option “Build From Scratch”.
Part 2: Creating the Fixed Content Bar
Inside the Global Footer Layout Editor, begin the design process by adding a one-column row to the default section.
Before we start adding modules, open the section settings give it a set height as follows:
- Height: 80px
This is important for creating the space at the bottom of the page where the fixed row will eventually come to rest. We will also take out the default top and bottom padding as well.
- Padding: 0px top, 0px bottom
Now that our section is ready, we are ready to customize the row to serve as the fixed contact bar. Open the settings for the row and then update the following:
- Background Color: #751136
- Gutter Width: 1
- Width: 100%
- Max Width: 100%
- Height: inherit
Although the row will be fixed, we want the height of the row to match the height of the parent section so that the space at the bottom of the page will adequately contain the row. To do this we must type in the text “inherit” for the height.
- Padding: 0px top, 0px bottom, 15% left, 15% right
We want to make sure the content within the row stays vertically aligned and the columns do not break on mobile. To do this, add the following custom CSS to the row’s main element:
display:flex; flex-wrap:nowrap; align-items:center;
To make the row fixed so that it floats at the bottom of the screen, we need to give it a fixed position at the bottom left location as follows:
- Position: Fixed
- Location: bottom left
- Z Index: 99999
Part 3: Building the Call-to-Click, Email, SMS, and Direction Links
Now that our contact bar is complete, we are ready to add the clickable contact buttons along with the custom URLs.
Designing the Click-to-Call Button
The first contact button we are going to create is the click-to-call button. To create it, add a new blurb module to the column.
Under the content tab, add a Title and an Icon to the blurb as follows:
- Title: Call
- Use Icon: YES
- Icon: phone
The give it a white background color:
- Background Color: #ffffff
Jump over to the design tab, and update the settings as follows:
- Icon Color: #751136
- Use Icon Font Size: YES
- Icon Font Size: 2em
- Tite Font Style: TT
- Title Text Alignment: Center
- Title Text Color: #751136
- Title Text Size: 1em
Body Text Size
If you noticed, we have been sizing the blurb elements using the “em” length unit. This is relative to the size of the body text. Therefore adjusting the size of the blurbs body text (even though it doesn’t have body text displayed) will adjust the size of all the blurb elements with the em length unit. This is simply a convenient way to change the size of the button going forward without having to adjust each element individually.
Update the body text as follows:
- Body Text Size: 12px
Give the blurb a set height and width as follows:
- Width: 4.5em
- Module Alignment: center
- Height: 4.5em
Padding and Corners
- Padding: 0.5em top
- Box Shadow: see screenshot
- Box Shadow Horizontal Position: 0px
- Box Shadow Vertical Position: 2px
- Shadow Color: rgba(255,255,255,0.55)
In order to make the content of the blurb module vertically centered, add the following Custom CSS to the Main Element:
And take out the spacing under the blurb icon by adding the following Blurb Image:
Adding the Call link URL
In order to add a call link URL that will initiate a call on a mobile phone, add the number after the prefix “tel:”.
- Module Link URL: tel:555-555-5555
Designing the Email Button
To create the email button, duplicate the entire column.
Adding the Email Icon and link URL
Then update the duplicate blurb in column 2 with a new Title and Icon.
In order to add a call link URL that will initiate an email on a mobile app, add the email address after the prefix “mailto:”.
- Module Link URL: mailto:[email protected]
Designing the SMS(Text Message) Button
To create the SMS button, duplicate column 2.
Adding the SMS Icon and link URL
Then update the duplicate blurb in column 2 with a new Title and Icon.
In order to add a call link URL that will initiate an email on a mobile app, add the email address after the prefix “sms:”.
- Module Link URL: sms:+15555555555
Designing the Directions Button
To create the SMS button, duplicate column 3.
Adding the Directions Icon and Link URL
Then update the duplicate blurb in column 3 with a new Title and Icon.
In order to add a call link URL that will initiate directions via Google Maps, use these Direction URL structures.
For this tutorial, we are going to add a directions link that will generate directions from the user’s current location to the GooglePlex in Mountain View, CA.
- Module Link URL:
To add your own address to the URL, replace the text after “destination=” in the URL, making sure to separate the words with plus (“+”) symbols.
Clicking the button should give you something similar to this…
Hide Section on Desktop
Because we want the contact bar only to show on mobile devices, we can disable the entire section on desktop. To do this, open the section settings and update the following:
- Disable On: Desktop
More Contact Links
With HTML5, you’re not limited to phone numbers. You can add other calls to action such as email, messaging, fax, etc. HTML5 protocols include:
tel: – place a phone call
mailto: – open an email app
callto: open Skype
sms: – send a text message
fax: – send a fax
And if you want, you can also add a targeted Waze link for the Directions URL.
The contact bar seems like it would be a great addition to any company website that wants to make it convenient for users to contact them from a mobile device. And once you familiarize yourself with the structures of the link URLs, you are all set to any type of contact link you want.
For more, check out our post on Telephone Links.
I look forward to hearing from you in the comments.