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.

Customize the style of your sticky button

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.

Add an ID to your sticky button

 

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
    s
    file.
  • 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)
#bouton-sticky {
  position:fixed;
  bottom:1%;
  right:1%;
  z-index:9999;
}

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.

A button in a fixed position at the bottom right of the browser window

 

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.

HTML code of the button in the web inspector

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

and do CTRL + C or Command + C, which will copy the content of this div.
Don't close your inspector because we're going to need him again ;).

So open a new tab in your browser and go to Divi -> Theme Options -> Integration -> Add code in the ..

. tag.
You can paste the contents of your clipboard there.
Once the code is in place, remove the class and_pb_button_0 (the number may be different in your case, I'll explain why later) present in the a tag, as it is no longer useful and may cause conflicts later.

Add the HTML code of your sticky button to the Divi theme options

If you look at the different pages of your site, you now have a basic button (usually without a background and with a simple white border) that is present at the position you have chosen.
It is now a matter of reassigning the styles we had defined when we created our button on a single page.

 

Retrieve the CSS of your button

Go back to the tab of your browser where you (normally) left your web inspector open and click on the a tag of your button.
In the styles tab of the web inspector, you will therefore see the CSS corresponding to your button.

The CSS of the button in the web inspector

Pour les récupérer, le plus simple est de cliquer sur le texte souligné qui se trouve à droite : et-core-unified…
Ceci ouvre dans un nouvel onglet (sources) de l’inspecteur web la feuille de styles sur-mesure générée par Divi et contenant vos personnalisations.
Par défaut, cette feuille de styles est minifiée, c’est-à-dire que pour alléger le poids du fichier, tous les espaces inutiles sont supprimés.
Pour la reformater afin de la rendre lisible, il vous suffit de cliquer sur l’icone en forme de double accolades {} que vous voyez en bas de la fenêtre, vers le nombre de lignes.

Minimized CSS of the button

Now you can copy the CSS lines corresponding to your button.

Be careful, there will be several groups of lines to be taken.

  • They start with body #page-container .et_pb_button_0,
    knowing that my button has the value "0" because it is the only one present on my example page, but in your case this number can be different
  • They end with either :hover, :after or :before depending on whether they define the status of the button on hovering, or the icon that appears (or not) in your button.

Here's for your information, the CSS I got for my button.

body #page-container .et_pb_button_0 {
    color: #ffffff!important;
    border-width: 5px!important;
    border-color: rgba(255,255,255,0.7);
    border-radius: 10px;
    letter-spacing: 2px;
    font-weight: bold!important;
    text-transform: uppercase!important;
    padding-left: 2em;
    padding-right: 0.7em;
    background-image: linear-gradient(160deg,#29c4a9 30%,#2b87da 64%)!important;
}

body #page-container .et_pb_button_0:hover {
    background: #29c4a9!important;
}

body #page-container .et_pb_button_0:after {
    display: none;
}

body #page-container .et_pb_button_0:before {
    content: attr(data-icon);
    font-family: "ETmodules"!important;
    line-height: 1.7em;
    font-size: 20px!important;
    opacity: 1;
    margin-left: -1.3em;
    right: auto;
    display: inline-block;
}

body #page-container .et_pb_button_0:hover:before {
    margin-left: .3em;
    right: auto;
    margin-left: -1.3em;
}

All you have to do is go back to where you had placed the CSS defining the fixed position of your button. Remember the #button-sticky?
That is, either in the style.css file of your child theme, or inDivi -> Theme Options -> General -> Customize CSS

Paste the CSS lines under the lines defining #button-sticky
As it is, it won't work because body #page-container .et_pb_button_0, which correctly defined our only button on a single page, is not valid on all pages of the site...
You just have to replacebody #page-container .et_pb_button_0 by#button-sticky by taking care to keep the :hover, :before and :after present in various places!

 

Finally

You can now go back to the page where the module of your original button is located, and delete it or simply hide it in order to keep it for possible future style changes.

Hide your button

 

To go further

This tutorial is based on the use of a simple button, but it is also possible to place in a fixed position a whole module, or even a section on all the pages of your site, in order to recreate for example a fly-in in the style of the Bloom plugin of Elegant Themes, but with the content of our choice formatted in the builder.

But this is another story and will be the subject of a future article... 😉