Voici une petite astuce rapide qui vous permettra d’ajouter en pied de page de votre site, un bouton en position fixe et passant par-dessus votre contenu.
Je vais tout d’abord vous expliquer comment l’ajouter sur une seule page puis sur toutes les pages de votre site.

 

Ajoutez un bouton “sticky” sur une seule page 

 

Créez votre bouton

Allez sur la page sur laquelle vous souhaitez placer votre bouton, ouvrez le Divi builder et ajoutez un module bouton en lui donnant les attributs de style et de contenu qui vous conviennent.
Peu importe la section dans laquelle vous insérez votre bouton étant donné qu’on va définir ensuite sa position en CSS.

Personnalisez le style de votre bouton sticky

Dans les paramètres du module bouton, allez dans avancé -> ID et classes CSS -> ID CSS et précisez bouton-sticky
C’est l’identifiant qui va nous permettre de styler notre bouton en CSS. Vous pouvez le nommer comme bon vous semble, mais retenez-le bien car nous allons nous en servir ensuite.

Ajouter un ID à votre bouton sticky

 

Définissez sa position

Maintenant, nous allons donc ajouter quelques lignes de CSS pour définir la position de notre bouton.

  • Si vous utilisez un thème enfant : ce code sera à placer dans le fichier style.css
  • Si vous ne possédez pas de thème enfant : ce code sera à coller dans Divi -> Options du thème -> Général -> Personnaliser CSS
    (Vous pouvez aussi télécharger gratuitement le thème enfant Divi Community)
#bouton-sticky {
  position:fixed;
  bottom:1%;
  right:1%;
  z-index:9999;
}

Détaillons brièvement le code

On définit donc pour notre bouton une position fixe, à 1% du bas à droite de la fenêtre du navigateur ; la valeur élevée du z-index lui permet d’être toujours au premier-plan.
Libre à vous d’ajuster toutes ces valeurs en fonction de vos envies.

Un bouton en position fixe en bas à droite de la fenêtre du navigateur

 

Ajoutez un bouton “sticky” sur toutes les pages de votre site

Maintenant, plaçons notre bouton précédemment créé sur toutes les pages de notre site.

 

Récupérez le code HTML de votre bouton

Rendez-vous sur la page où se trouve votre bouton, faites un clic droit dessus et choisissez Inspecter si vous êtes sous Chrome ou Examiner si vous êtes sur Firefox… afin d’afficher l’inspecteur web de votre navigateur.
Voici par exemple à quoi ressemble le code HTML de mon bouton.

Code HTML du bouton dans l’inspecteur web

Le code qui nous intéresse correspond bien sûr à la balise a avec tous ses attributs, mais aussi à la div qui l’encadre (le wrapper), sans quoi notre bouton serait incomplet.
Dans l’inspecteur, vous n’avez donc qu’à cliquer sur <div class="et_pb_button_module_wrapper et_pb_module"> et faire CTRL + C ou Command + C, ce qui aura donc pour but de copier le contenu de cette div.
Ne fermez pas votre inspecteur car nous allons en avoir encore besoin ;).

Ouvrez donc un nouvel onglet de votre navigateur et allez dans Divi -> Options du thème -> Intégration -> Ajoute du code dans la balise <body>….
Vous pouvez y coller le contenu de votre presse-papier.
Une fois le code en place, supprimez la classe et_pb_button_0 (le chiffre peut être différent dans votre cas, je vous explique pourquoi plus tard) présente dans la balise a, car elle n’est plus utile et risque de provoquer des conflits par la suite.

Ajoutez le code HTML de votre bouton sticky aux options du thème Divi

Si vous regardez sur les différentes pages de votre site, vous avez maintenant un bouton basique (généralement sans fond et avec une simple bordure blanche) qui est présent à la position que vous avez choisie.
Il s’agit donc désormais de lui ré-attribuer les styles que nous avions définit lors de la création de notre bouton présent sur une seule page.

 

Récupérez les CSS de votre bouton

Retournez dans l’onglet de votre navigateur dans lequel vous avez (normalement) laissé ouvert votre inspecteur web et cliquez sur la balise a de votre bouton.
Dans l’onglet styles de l’inspecteur web, vous verrez donc s’afficher les CSS correspondantes à votre bouton.

Les CSS du bouton dans l’inspecteur web

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.

CSS minifiées du bouton

Maintenant vous pouvez copier les lignes de CSS correspondantes à votre bouton.

Attention, il va y avoir plusieurs groupes de lignes à prendre.

  • Elles commencent par body #page-container .et_pb_button_0,
    sachant que mon bouton à la valeur “0” car c’est le seul présent sur ma page d’exemple, mais dans votre cas ce chiffre peut être différent
  • Elles se terminent soit par :hover, :after ou :before suivant si elles définissent l’état du bouton au survol, ou l’icone qui s’affiche (ou non) dans votre bouton

Voici pour info, les CSS que j’ai récupérées pour mon bouton.

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;
}

Il ne vous reste plus qu’à retourner là où vous aviez placé les CSS définissant la position fixe de votre bouton. Vous vous souvenez du #bouton-sticky ?
C’est-à-dire, soit dans le fichier style.css de votre thème enfant, soit dansDivi -> Options du thème -> Général -> Personnaliser CSS

Collez les lignes de CSS sous les lignes définissant #bouton-sticky
En l’état, ça ne fonctionnera pas car body #page-container .et_pb_button_0 qui définissait correctement notre unique bouton présent sur une seule page, n’est pas valable sur toutes les pages du site…
Il suffit donc de remplacerbody #page-container .et_pb_button_0 par#bouton-sticky en faisant bien attention à conserver les :hover, :before et :after présents en divers endroits !

 

Pour terminer

Vous pouvez maintenant revenir sur la page où se trouve le module de votre bouton originel, et le supprimer ou simplement le masquer afin de le conserver dans l’optique d’éventuelles futures modifications de style.

Masquez votre bouton

 

Pour aller plus loin

Ce tuto est basé sur l’utilisation d’un simple bouton, mais il est également possible de placer en position fixe tout un module, voire une section sur toutes les pages de votre site, dans le but de recréer par exemple un fly-in dans le style du plugin Bloom d’Elegant Themes, mais avec le contenu de notre choix mis en forme dans le builder.

Mais ceci est une autre histoire et fera l’objet d’un prochain article… 😉

D'autres tutoriels pouvant vous intéresser: