Often a client will want a call-to-action button in the header of the website. Often they want their phone number in a big green button (or Call Now!) or sometimes a Request a Quote button.

This can be done using Divi’s Secondary Menu (which adds a thin menu at the top of the header). The downsides of this option are:

  • It adds to the overall height of the header, even on mobile devices, where it reduces the amount of content visible above the fold.
  • The secondary menu is normally thin and making the button large enough to grab attention adds even more height.
  • We may want to use the secondary menu for other purposes.

A better solution is to move Divi’s default header’s primary menu to the bottom of the header and insert a CTA button in the empty space above it.

Examples

Here is an example of what I mean.

Image showing CTA button in header on desktop

On a tablet, it looks like this.

Image showing CTA button in header on tablet

On a smartphone, I like to eliminate the phone number and shrink it down to show just the icon.

Image showing CTA button in header on smartphone

Instructions

Here are the steps required to make this work.

Step 1. If you don’t already have a child theme activated, then create and activate one.

Some find this intimidating, but there is really nothing complicated to it. The simplest method is to:

  • Download the zip file here
  • Go to Appearances > Themes
  • Click on the Add New button
  • Upload the zip file.
  • Activate your child theme.

Step 2. Copy header.php file from the Divi directory to your child theme directory.

You will need to access your hosting account via cPanel or FTP to accomplish this.

Step 3. Insert code for the button in the child theme’s header.php file.

Open up the file for edit and locate the the line that starts with:

<div id="et-top-navigation" data-height=...

Insert this code before that line:

To add a button with a phone icon and number use this code. You’ll want to replace the generic phone number with the desired number.


<div class="header-button">
  <a href="tel:555-555-1212">
    <span class="icon_phone">555-555-1212>/span>
  </a>
</div>

Step 4. Style the button by adding this CSS code to your website.

The CSS code can be implemented in many ways. The simplest is to add it to the child theme’s style.css file.

Here is the code you need.

/* Change these CSS variables to match the your preferences */
:root {
  --button-background: #17c244;
  --button-color: #fff;
  --button-hover-background: #1adb4d;
  --button-hover-color: #fff;
  --button-border: 0;
  --button-hover-border: 0;
  --button-border-radius: 30px;
  --button-padding: 0.5em 0.75em;
  --button-font-size: 20px;
  --button-font-family: "Roboto",Helvetica,Arial,Lucida,sans-serif;
  --button-font-weight: 700;
}
/* Display icon before phone number */
.icon_phone::before {
  font-family: 'ETmodules';
  content: "\e090";
  padding-right: 5px;
}
/* Header Button */
.header-button {
  position: absolute;
  top: 30px;
  right: 0;
  padding: var(--button-padding);
  background-color: var(--button-background);
  border: var(--button-border);
  border-radius:var(--button-border-radius);
  font-size: var(--button-font-size);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.header-button a {
  color: var(--button-color) !important;
}
.header-button:hover {
  background: var(--button-hover-background);
  border: var(--button-hover-border);
}
.header-button:hover a{
  color: var(--button-hover-color) !important;
}
@media all and (max-width: 980px) {
  .header-button {
    top: 20px;
    right: 50px;
    font-size: .8em;
  }
}
@media all and (max-width: 768px) {
  .header-button {
    top: 23px;
  }
}
/* This CSS code shrinks the button to only show the icon on a smartphone */
@media all and (max-width: 768px) {
  .header-button {
    top: 23px;
    width:  40px;
    height:  40px;
    overflow: hidden;
    font-size: 24px;
    padding-left: 8px;
    padding: 8px;
  }
  .header-button a {
    visibility: hidden;
  }
  .icon_phone::before {
    visibility: visible;
}

Depending on the height of your logo and headers, you will probably need to adjust the top attribute of the header-button and perhaps make a few other adjustments.

Summary

Adding a CTA button to the Divi header is needed in some instances. With this method, the process of implementing it isn’t difficult.

If you have questions, or experience problems, let me know.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This