How to create a floating call to action (CTA) bar on mobile using the WordPress Divi theme

Post By : Jim Monkhouse
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme. Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention. They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.

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;
}
}

Whilst your here can I ask a quick favour?

If you found this this post helped in any way, feel free to tap the like button on my accompanying youtube video. it’ll cost you nothing and really helps me get these tutorials out to more people like you.

I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.