Here's a quick tip that will allow you to add a button in the footer of your site, in a fixed position and passing over your content.
I will first explain how to add it on a single page and then on all the pages of your site.
Add a "sticky" button on a single page
Create your button
Go to the page on which you want to place your button, open the Divi builder and add a button module with the style and content attributes you want.
It doesn't matter which section you insert your button in, as we will then define its position in CSS.
In the button module parameters, go to advanced -> CSS ID and classes -> CSS ID and specify button-stick
y This is the identifier that will allow us to style our button in CSS. You can name it as you wish, but remember it because we will use it later.
Define its position
Now we will add a few lines of CSS to define the position of our button.
- If you use a child theme : this code will be placed in the style.cs
- If you don't have a child theme: this code will be pasted in Divi -> Theme Options -> General -> Customize CS
S (You can also download the Divi Community kids theme for free)
Let's take a brief look at the code
So we define for our button a fixed position, at 1% from the bottom right of the browser window; the high value of the z-index allows it to always be in the foreground.
You are free to adjust all these values according to your desires.
Add a "sticky" button on every page of your site
Now, let's place our previously created button on every page of our site.
Retrieve the HTML code of your button
Go to the page where your button is located, right-click on it and choose Inspect if you are under Chrome or Examine if you are on Firefox... to display your browser's web inspector.
Here is for example what the HTML code of my button looks like.
The code we are interested in corresponds of course to the a tag with all its attributes, but also to the div that frames it (the wrapper), otherwise our button would be incomplete.
In the inspector, you just have to click on