Fixed Bar for Divi: how to improve conversions

by | Oct 13, 2016 | Tips & Tricks, Tutorial | 32 comments

Many times when building a website, it makes one of the most serious mistakes to focus too much on design and less on what it really is imported: the conversions. Yet in some casesΒ small trick can help increase conversions with minimal effort, and that’s what I will do in this article where I’ll show you how to add a fixed bar to your website to improve conversions and even the user experience .

I almost forgot: all this without using any plugins πŸ˜‰

Clicking the button below you can download the .zip package that contains three layouts and CSS code.

As always, you’ll need to add the JSON files to the library and the CSS code to the option panel or your child theme.

DOWNLOAD ZIP PACKAGE

 

Fixed Bar with a single CTA

This is a very simple bar: I added a text to the left and a button to the right to push the user to make an action.

I chose to place the text on the left and the CTA on the right for a reason and this reason is called Visual HierarchyΒ a much used term when designing the UX of an interface and that is to place the interface elements following the normal human eye displacement, from top to bottom and from left to right (except for some countries).

So keeping in mind that “flow”, I’m going to place the text on the left and right button, so the user first reads our message and we attract his attention with a button that must always be clearly visible.

Live Demo:
Live Demo

Fixed Bar with a double CTA

This bar, unlike the previous one, uses two call to action and useful when you have to give multiple options to the user. I use the pages of my store and you can see it in action by clicking the button below:

Live Demo:
Live Demo

Fixed Bar Mobile App Style

By now we all know: the traffic generated by the mobile exceed that generated by desktop, this means that it is very important that each element and each page is fully optimized to provide users with a good user experience, even via mobile. That’s why I created this three layout that allows you to add 4 call to action in pure style Mobile App.

I in the example you can see by clicking the button below, I added:

  1. Maps button, great when you want to show the location of a shop or office quickly, for example in the case of a restaurant.
  2. Call button, a quick shortcut that allows you to make a call to the number you want, with just one click and without any waste of time.
  3. Contact Us button, to immediately open the email provider for fast communication.
  4. Support button, a button that you can use to target your users to the support page of your site.

Of course, you are just an example, but you can easily customize every call to action in a few minutes.

NOTE: This bar is only visible on Tablets and Smartphones.

Live Demo:
Live Demo

Conclusion

So that’s all. But now I have a question for you: do you think you use this call to action in your site? Already use some tricks to increase conversions?

Write it in the comments. πŸ™‚


Author | Fabio Sarcona

I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! πŸ˜€


Get the latest resources and freebies in your inbox

Join over 7000 people and get access to free resources, exclusive discounts and the latest tutorials. All directly in your mailbox!

Your email is safe 💌 . I hate SPAM same as you!

Pin It on Pinterest

Shares
Share This