Fixed Bar for Divi:
how to improve conversions
Follow us on
Fabio Sarcona, Web Developer, Italy
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.
Fixed Bar with a single CTA
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.
Fixed Bar with a double CTA
Fixed Bar Mobile App Style
I in the example you can see by clicking the button below, I added:
- Maps button, great when you want to show the location of a shop or office quickly, for example in the case of a restaurant.
- 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.
- Contact Us button, to immediately open the email provider for fast communication.
- 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.
Write it in the comments.