Use a Blurb as a Fixed Click-To-Call Button for Mobile

Jul 23, 2016 | CSS Tutorial | 28 comments

A question came up in one of the Facebook groups I’m in (please join if you’re not a member!). Someone was asking for suggestions for a plugin to put a click-to-call button on the lower right corner of their site, but only when viewing on mobile. This seemed like it could be accomplished pretty easily with Divi’s modules so I set out to build it.

A Girl and Her Mac | Divi Tutorial

This is what we’ll be getting in the end, a fixed button in the corner that acts as a click-to-call button, using ET’s phone icon.

Instructions

  • Start a section, select your row breakup and add a blurb module to one of your module slots. It doesn’t matter whether it’s 1, 1/2, 1/3 or 1/4 or whether it’s first or last.

  • Add the telephone number (up to you to add a country code or not) in the URL field in the following format:

  • Select the phone icon, make it a circle icon, and select your colors
  • I’m using the ‘left placement’ setting because it has less default padding around the icon than the ‘top placement’

  • For my example I set the icon size to 35px. If you change this you’ll need to adjust the ‘right’ and ‘width’ number in the CSS.

  • In the custom CSS section of the module add the CSS below to the ‘main element’ section to make it stay in the lower right corner.

{;} css code

position: fixed;
bottom: 10px;
right: 20px;
width: 40px;
z-index: 9999;
  • To show this click-to-call only on mobile go to your section settings and click on tablet and desktop to hide this module on those devices.

  • If you want to have different phone numbers on different pages you can make this module global, just be sure to deselect the general settings so you can edit the url.

Notes

  • Playing with this a bit can get you more customized look for your site, for instance you can upload your own image of a phone or even your logo.
  • You’re not limited to just phone numbers. You can add other calls to action by using the HTML code such as email, fax, messaging, etc. Here’s a listing of the HTML protocols:
    • tel: – place a phone call
    • mailto: – open an email app
    • callto: open Skype
    • sms: – send a text message
    • fax: – send a fax