How To Design A Mobile Call To Action Button In Elementor

mobile call to action
“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Increasing conversion isn’t just a game of writing better copy or creating a more targeted audience on your Facebook Ads. Sometimes, the smallest changes like having a proper mobile call to action can skyrocket your conversion rates and bring you all the sales/leads you’re hoping to get.

 

User experience in mobile devices

 

“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”

— Don Norman, inventor of the term “User Experience”

 

Even though you’re thinking that you should make your website as beautiful as possible, your focus should really be on making it usable. Because nowadays, usability is the name of the game. And it doesn’t end just on desktop. Given that we’re more mobile each and every day, you need to think about mobile first design.

 

Mobile first design is a strategy that is all about starting your web designs for mobile screens and then working your way up so you can deliver the proper user experience on the right devices. When we talk about user experience on mobile devices, one of the key design principles is that the controls should be based on hand position. Essentially, this means having buttons close to the thumb of the user. Actually, a research made by Steven Hoober came to the conclusion that 49% of mobile users rely on one thumb to get things done on their phones.

 

But, how do you implement this principle in your Elementor website? How do you make it so that you have a mobile call to action that users can easily click on once they’re interested in your product?

 

Entering the Sticky Button for Mobile on Elementor

Like I mentioned when talking about hiding and showing headers on scroll, Elementor is a pretty powerful page builder, but it isn’t magical. We have to bring some of our own creativity to make things like this happen. Fortunately, creating a sticky/fixed mobile button or how I’ve been calling it mobile call to action, is a simple process that only requires 5 single steps.

 

The Full Elementor Way

1) First, you either gotta use the Theme Library feature in OceanWP to build a footer or use the Hello Elementor theme with Elementor Pro and build a footer there. Really, anything that would allow you to build a footer on Elementor can do the trick.

 

2) Next, in the footer section we add an inner section that we will make sticky later. We make sure to remove the padding in the section’s column and the inner section’s column as well.

 

call to action mobile elementor

 

We drag the button widget and we create out button. You can use some of the button examples I wrote about before.

 

 

Go back to the inner section, specifically to the Advanced > Responsive tab and make it only display on mobile.

 

sticky button elementor

 

Still on the inner section, click on the Advanced > Motion Effects tab and select Sticky Bottom. This what will make the button stay fixed regardless of whether the user is scrolling. It will also keep the button close the user’s thumb so they can take action quickly.

 

fixed mobile button

 

The CSS Way

You can also do it in a non-Elementor way, which I don’t necessarily recommend because it just works better when you do it fully on Elementor. This requires setting a top property of 88vh !important to the inner section and making so that it gets displayed on the bottom side of the mobile screen and a z-index property of 99 to make it appear in front of everything else.

 

This one works better for when you just want the mobile call to action or sticky mobile button (however you want to call it) to appear only on the homepage without creating two different footers on the theme builder.

 

The steps are pretty simple. Imagine you have a Call to action inner section like the one below where the two buttons are (the inner section that is grayed out in this case is because that one doesn’t display on mobile, only on desktop).

 

 

What you need to do is take that inner section and go to Advanced > Motion Effects, and select Sticky top.

 

mobile call to action

 

You then make it to only be displayed on mobile devices, not on desktop nor tablet.

 

sticky buttons on mobile

 

Finally, you add this little snippet on the custom CSS section:

 

selector.elementor-sticky--effects {background-color: #1AA328 !important;

top: 88vh !important;

}

selector {transition: background-color 1s ease !important;}

selector.elementor-sticky--effects >.elementor-container {min-height: 80px;

}

selector > .elementor-container {transition: min-height 1s ease !important;}

 

These lines of CSS code will make the inner section container go to the bottom of the screen where the button(s) will be closer for the user to take action.

 

Mobile Call To Actions In Elementor: Final Words

The world is mobile and there’s just no way around that. Some users may not even own a desktop and, more often than not, the preference is for mobile devices.

You need every visitor to count towards your conversion goals, which includes the goals for those users in mobile devices. But increasing conversions, even on these types of devices, is not only about what message are you communicating or how beautiful your images are. Sure, they help, but they’re just a part of the entire system that is providing the user with an amazing experience. That’s what makes them to convert.

This doesn’t mean that you should be hopping to your laptop and firing up Elementor in your website to make a button that sticks to the bottom, because every audience in every business is different. What can work for my business doesn’t necessarily mean that it has to work for yours.

Check other businesses to see how if they’re doing it and ask yourself – from the user’s perspective – if it would be better to have the buttons fixed to the bottom on mobile devices.

 

I hope you liked this tutorial. Comment below on your thoughts about mobile call to actions!

Leave a Reply

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

backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want