Moving your button more to the back

Estimated time to complete: 2 minutes
Requirements: The Call Now Button WordPress plugin

From version 0.3.4 it’s possible to change the stack order of the Call Now Button. By default the button sits all the way forward, on top of everything else. That way the button is always visible and easily accessible at all times.

But there are situations where you would like the button to sit behind another element. For example when your website shows a Cookie Notice at the bottom of your website as well. That should be readable by all your visitors and cannot be partly hidden behind the Call Now Button.

Another example are Chat windows. If your website has a chat functionality, you don’t want the button to be in front of the field where your visitors enter their text. So when people open the Chat window, the button should sit nicely behind it.

How to move the button backwards in the stack order?

In the Call Now Button Advanced settings you’ll find a slider to adjust the order. By default the slider sits all the way forward, to the right. By moving this to the left, the button moves backwards.

Step 1

In the Call Now Button WordPress plugin, open the Settings page.

Step 2

Locate the Order setting and move the slider one step down.

Step 3

Scroll to the bottom of the page and click Save to store your changes and review the result on your website.

Step 3

If it's still too much forward, go back to step 2 and move one more step to the left. Then Save and Review. Keep repeating this process till you're happy with the result.

Why one one step at a time?

You should only move the slider back one step at a time and see if that does the trick for you. The reason for this is that you want the button to sit as much to the front as possible and that a new plugin or something else on your website doesn’t end up on top of the button as well. You want the button to only sit behind the elements that you want to have in front of it.

Why so many steps?

What the setting does is it changes the value of the Z-index. The z-index is a CSS attribute that let’s you control the order of page elements. The z-index can be a huge number so to give control while keeping it simple I decided to make it a 10 step process, each dividing the previous value by 10.

What do the step represent?

The steps represent values for the z-value. The goal of the plugin is to keep this easy to use for everybody and eliminate the need for technical knowledge. Instead of offering a free field for people to enter a custom value, I’ve tried to simplify it into 10 steps to move the button from one up from the back all the way to the front, on top of everything else.

But if you’re curious what z-values the slider values correspond to, here it is:

  • 10 = 2147483647
  • 9 = 214748365
  • 8 = 21474836
  • 7 = 2147484
  • 6 = 214748
  • 5 = 21475
  • 4 = 2147
  • 3 = 215
  • 2 = 21
  • 1 = 2