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

How to create cool custom buttons for the Divi wordpress theme

How to create cool custom buttons for the Divi wordpress theme

Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module


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.