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

Jul 23, 2016 | CSS Tutorial | 37 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.


  • 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.


  • 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