There are cases in which it is quite useful to show a button (or any other element) on one fixed position on the screen. No matter if you want to do this temporarily to permanently, you for sure do not want to touch every single page and post on your website. The solution is quite simple by adding the button to the global footer or header and simply reposition it via CSS. Every page that shows a footer or header will also show that button. If it is unclear where we are heading to have a look at the result first.

I wanted to have a simple button indiscreetly on the bottom left of each page. Instead of adding the button individually on each page, I was looking for a more global solution. I thought that this would be extremely easy (and it is if you know what to do) but was puzzled at first how to do that with Divi (or just even just default WordPress).

Three different solutions: header/footer, child-theme or global modules

My first guess was looking into the footer and it turned out this was the right guess. Other resources suggest to use a child theme and adapt the body.php. If you do not have a child theme yet, it is anyway high time to create one as there will be always things coming along the way that require small customizations on your theme files. However, I was really not in the mood to work out some magic PHP statements that perform this easy task.

In Divi, it is also possible to create global modules. At first, I thought that might be a good attempt but basically it’s only about re-using global modules and elements on several pages and sync changes in the original element to all of them. Again, what I wanted to do was something else. And it was totally simple. Why did I have to research for more than one hour to figure it out?

The WordPress default footer and the Divi Global Footer are not the same

If you use the Divi theme there are two options to create a footer. First, you can simply use the built-in feature from WordPress by going to Appearance → Widget → Footer. Further customizations on footers can often be done at Appearance → Customization. Earlier I did not want to deal with a special footer, so that’s the way (also see in the screenshot) I initially set up my footer. I just added two links to the default footer widget and nothing else. However, now is the time for a little change.

Second, you could use the Divi Global Footer to replace the WordPress default footer that I just described before. We are doing that for a reason, as the next step will (for some reason) not work on the WordPress default footer.

The easiest way is to just add a Divi Global Footer

Here is how to do it. Head over to Divi → Theme Builder → Add Global Footer. If you already use a global Divi header you can simply edit it here. Otherwise, create the global footer and rebuild it to your liking. In my case, I just had to copy the two text links from the WordPress default footer into a text element in the Divi global footer.

Add a button to your footer and apply custom CSS

Now we can add a button (or whatever element) to the footer and tweak its position a bit with custom CSS. We need to take care of a few mandatory styles and a few optional styles.

Go to the button settings to take care of some formatting and then go to the Advanced tab to add the following custom CSS to your button. Even though you are adding an element into the footer (which is shown on a global level, i.e. every page and every post) we can still force its position anywhere we want. In my case, I simply wanted to have a fixed position on the bottom left of every page.

Consider optimizing for mobile view and see the result

The result: no matter on which page you are you can scroll up and down and the button will always be visible on the bottom left of your page. Keep in mind though that this might look differently on your mobile phone and requires some additional CSS tweaks.