How To Create A “Call Now” and “Email Now” Button Without Code On WordPress With Divi
Editorial Note We may earn a commission when you visit links from this website.

WordPress is a powerful platform for building websites, and it’s no surprise that it’s the most popular content management system in the world. 

One of the many reasons for its popularity is the ease with which users can customize their websites using various plugins and themes. Divi, in particular, is a popular theme that allows users to create stunning designs with ease.

In this article, we will show you how to create a “Call Now” and “Email Now” button on your WordPress website without writing a single line of code. 

This is made possible with the use of Divi’s powerful features and functionality, and these buttons can be a great way to encourage visitors to take action and contact you, ultimately boosting your website’s conversions. 

Whether you’re a business owner, blogger, or just someone who wants to make it easy for visitors to get in touch, this brief tutorial will provide you with the knowledge you need to create these buttons quickly and easily. So, let’s get started!

Table of Contents

Before we Begin

While writing the “How To Create A “Call Now” and “Email Now” button Without Code On WordPress With Divi”, we took inspiration from a tutorial created by Elegant Themes, and written by Jason Champagne.

We appreciate their hard work, the value they have added to the Divi community, and the way they encourage a culture of collaboration and learning within the community, which is beneficial for everyone involved.

We believe that it’s important to give credit where it’s due, and we are grateful for the resources and support provided by Elegant Themes and the contributors!

FAQs About Creating Call and Email Buttons

Is it possible to have both “Call Now” and “Email Now” buttons on my WordPress site?

Yes, you can have both buttons on your WordPress site. Install a plugin that provides both functionalities or use separate plugins for each button. Position them strategically on your website to make them easily accessible to users.

Do “Call Now” and “Email Now” buttons work on all devices, including mobile and desktop?

Yes, these buttons work on all devices. On mobile devices, the “Call Now” button directly initiates a call, while the “Email Now” button opens the user’s default email client with a new email addressed to your specified email address. On desktop devices, clicking the buttons will redirect users to their default phone or email applications.

Will adding these buttons impact my website’s loading speed?

No, adding “Call Now” and “Email Now” buttons typically has a negligible impact on your website’s loading speed. The buttons are lightweight and designed to load quickly, ensuring a smooth user experience.

Creating the “Call Now” and “Email Now” Buttons

For the purpose of the tutorial, we’ll need to add a mobile contact bar to the global footer using the Divi Theme Builder. 

Navigate to Divi > Theme Builder, and then click the Global Footer Area inside the default website template. Choose Build Global Footer.

Create "Call Now" button without code - start with editing the global footer

IMPORTANT: If you already have created a global footer for your Divi website, you can edit it and add the contact bar in addition to the current footer.

Step 2: Creating the Fixed Content Bar

Now, in the Global Footer Layout Editor, start by adding a one-column row to the default section.

Create "Call Now" button without code
- continue by adding the column for the buttons

Before you start adding the row’s modules, quickly open the section settings and set the height at 80px.

Then, in order to create the space at the bottom of the page where the fixed row would eventually be, you’ll need to take out the default top and bottom padding as well. 

Row Settings

Now that our section is ready, we are ready to customize the row to serve as the fixed contact bar. Open the row’s settings and update the following: 

  • Background Color: #751136
  • Size: Gutter Width: 1; Width: 100%; Max Width: 100%; Height: inherit
  • Spacing: 0px top, 0px bottom, 15% left, 15% right

Even though this row will remain fixed, you need the height of the row to be equal with the height of the parent section so that the space at the bottom of the page can fit the row there. 

Custom CSS

To ensure that the content within the row stays vertically aligned and the columns do not break on mobile, you need to add the following custom CSS to the row’s main element:

Create "Call Now" button without code
- add the custom CSS for the button

Fixed Positioning

To make this row fixed and floating at the bottom of the screen, you’ll need to fix its position at the bottom left with the following settings: 

  • Position: Fixed
  • Location: bottom left
  • Z Index: 99999

Now, we need to move on towards adding the clickable call and email buttons along with their URLs.

Designing the Click-to-Call Button

The click-to-call button is the first button that you should create. To do this, just add a new Blurb module to your row, and under the content tab of the Blurb, insert the following settings:

  • Title: Call
  • Use Icon: YES
  • Icon: phone

The, give your Blurb’s background a white color, then jump to the Design settings and update the following:

  • Icon: Icon Color: #751136; Use Icon Font Size: YES; Icon Font Size: 2em;
  • Title Text: Tite Font Style: TT; Title Text Alignment: Center; Title Text Color: #751136; Title Text Size: 1em;
  • Body Text: Body Text Size: 12px;
  • Size: Width: 4.5em; Module Alignment: center; Height: 4.5em;
  • Padding and Corners: Padding: 0.5em top; Round Corners: 0.6em;
  • Box Shadow: Box Shadow Horizontal Position: 0px; Box Shadow Vertical Position 2px: Shadow Color: rgba(255, 255, 255, 0.55);

Custom CSS

To make the blurb module’s content vertically centered, add the following Custom CSS to the Main Element:

Then, take out the spacing under the blurb icon by adding the following Blurb Image CSS:

To a call link URL that will start a call on a given mobile phone, you’ll need to add the number after the prefix “tel:” within the Blurb module’s URL. For example:

Create "Call Now" button without code
- adding the call link

Step 4: Designing the Email Button

Now, to create the email button, first, you’ll need to duplicate the entire column that you ‘ve created with the phone-related Blurb module. 

Then, you’ll need to update the duplicate blurb in column 2 with a new Title and Icon that is relevant to emailing. 

Afterwards, just switch the call link URL with an email that follows the “mailto:” prefix. 

Create "Email Now" button without code -

There you go, by implementing these blurb-buttons, you’ve provided your Divi website visitors with a quick and easy way to get in touch with you, which can help improve their overall experience on your site.

However, if you want to fine-tune your footer and make it truly stand out, you may need to do a bit more work. In that case, we recommend watching Elegant Themes’ entire video tutorial below and carefully tweaking your footer according to your preferences. 

This will allow you to create a customized footer that perfectly matches your Divi website and appeals to your target audience.

Frequently Asked Questions

Why should I add ‘Call Now’ and ‘Email Now’ buttons to my website?

Adding these buttons to your website can make it easier for potential customers or clients to contact you, which can lead to increased sales and improved customer satisfaction.

By providing a quick and easy way for users to contact you, you can also increase trust in your business and improve your overall online reputation.

Are there any best practices for placing ‘Call Now’ and ‘Email Now’ buttons on my website?

Yes, there are a few best practices to keep in mind when adding these buttons to your website.

For example, you should place them prominently on your website so that they are easy to find, and you should make sure that they are easily visible and clickable on mobile devices.

You should also make sure that your phone number and email address are correct and up-to-date, and that you are prepared to respond to any inquiries in a timely and professional manner.

Are there any downsides to using ‘Call Now’ and ‘Email Now’ buttons on my website?

One potential downside is that you may receive spam calls or emails as a result of making your contact information more visible. To mitigate this risk, you can use anti-spam measures such as CAPTCHAs or filters to prevent spam from reaching your inbox or phone.

Wrapping Up

Remember, the footer of your Divi website is an important part of your site, and can have a big impact on the overall user experience, which is why you need to make an effort to make it look and function as you want it to.

With the right design and functionality, your footer can help drive conversions, improve engagement, and enhance the overall performance of your website. 

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details