Why used a floating call to action bar?

Mobile specific CTA bars can be incredibly effective in increasing conversions. They act as a a persistent call to action and can be the difference between a user leaving your website or clicking to convert.

As mentioned before they work great on mobile as mobile users are running on a shorter attention span, so providing a fixed call to action gives the user more opportunity to click your call to actions.

An effective way to use a fixed CTA bar on mobile is to offer two CTA options. You can offer an instant conversion such as a “call now”, and then you can offer a secondary CTA for a callback or to book a consultation which provides the user with a secondary tier call to action which doesn’t require an instant commitment.

I highly recommend utilising fixed CTA’s on mobile devices you just need to make sure that they are used appropriately and don’t hide or detract from any of your web page content.

Let’s build the floating call to action bar

For this tutorial we’re going to build a fixed CTA bar with 2 rows which animates in on scroll. In my opinion this is one of the most effective way to use call to actions on mobile, as it gives the user two call to action options with varying degrees of commitment.

So without further ado, Let’s build it out

We’re going to add the “Call to action” to the footer section of our website. We’re going to add it to a global footer so it shows up across the whole website but you can apply to specific footers or sections if you want to target specific pages.

Enable visual builder

Select the footer section

Add a section – (blue)

Create a new section Below the footer and apply the following settings

Content > Background : use a colour that contrasts against the palette of your website, this would usually be your primary call to action colour.

Design > Spacing > padding:0px , margin:0px

Design > Box Shadow > Choose first option

Advanced > Position: Fixed, location : bottom, z-index:99;

Next add a row (green)

Content > Column structure : 2 columns 50/50

Advanced > CSS ID & Classes : two-columns

Styles for columns

Inside first column (left hand side)

Design > Spacing > Padding > phone > Right:5px

Inside second column (right hand side)

Design > Spacing > Padding > phone > Left:5px

Add Buttons

Add a button module inside the first column

Style the button as appropriate

Duplicate the button and drag the button into the second column

Style the 2nd button as appropriate

Give the left button an alignment of left

Give the right button and alignment of right

CSS to keep the rows at 2 on mobile

@media only screen and (max-width: 479px) {
.two-columns .et_pb_column {
width: 50%!important;
}
}