Insérez un bouton “sticky” en pied de votre site

par Pierre Bichet | 6 novembre 2017 | Tutoriels Divi | 16 commentaires

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.

Voir la démo

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.

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.

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.

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.

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… 😉

Ces tutoriels pourraient vous intéresser

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie

20% sur la licence annuelle

16 Commentaires

Jérémy sur 18 juin 2018 à 17h55 pm

Bonjour,
Je déterre ce post bien longtemps après, j’ai un soucis avec ce fameux “sticky button”.
J’en ai fait un bouton contact, centré verticalement, collé à droite et tourné à -90 degré.

il ce trouve que tout fonctionne très bien mais qu’une foi arrivé sur une page produit (woo commerce) le sticky bouton joue une animation (la même que les autres boutons présent sur cette page), ce comportement ne s’applique sur aucune autre page et je ne voit vraiment pas comment régler ce problème =/
Auriez vous une idée

Merci d’avance
Jérémy
Pierre sur 19 juin 2018 à 12h08 pm

Bonjour Jérémy,
en ajoutant les quelques lignes de CSS ci-dessous à ton bouton, cela devrait supprimer l’animation :
-webkit-animation-duration:initial!important;
-moz-animation-duration:initial!important;
-o-animation-duration:initial!important;
animation-duration:initial!important;
jérémy sur 19 juin 2018 à 12h24 pm

Bonjour pierre,
tout dabord, merci beaucoup pour cette réponse rapide, qui résous en parti mon problème et qui me fait comprendre un peu le truc… (débutant wordpress)

En effet ces CSS stop la durée de l’animation mais pas le mouvement en lui même.
Le bouton fait toujours une rotation à 90deg mais instantanée cette foi.
J’imagine que c’est la rotation que j’ai donné au bouton qui est “corrigé” mais je ne trouve pas le terme exact pour lui dire soit de ne pas tourner, soit de conserver sa rotation.

Quoi qu’il en soit, encore merci pour cette article et tes réponse !

Jérémy
jérémy sur 19 juin 2018 à 12h25 pm

Edit : cette rotation ne ce fait que sur IE et chrome, pas sur firefox (si ça peut aider =/ )
Pierre sur 19 juin 2018 à 14h02 pm

As-tu un !important sur tes lignes avec la propriété rotate ?
Du genre :
-webkit-transform: rotate(-90deg)!important;
-moz-transform: rotate(-90deg)!important;
-ms-transform: rotate(-90deg)!important;
-o-transform: rotate(-90deg)!important;
transform: rotate(-90deg)!important;
Ton site est-il visible en ligne ? Je t’invite sur notre groupe de support Facebook pour en parler plus confortablement.
jérémy sur 19 juin 2018 à 15h50 pm

AAaaaaaaAAaah merci !!!
Il faudra que j’étudie ces subtilités plus en profondeur !

J’ai terminé sur un :

-webkit-transform: rotate(-90deg) !important;
-moz-transform: rotate(-90deg) !important;
-webkit-animation-duration:initial!important;
-moz-animation-duration:initial!important;
-o-animation-duration:initial!important;
animation-duration:initial!important;
-webkit-transform: none!important;

En fait je pense que l’absence de “moz” et “webkit” posé des problèmes sur certain nabivateur.

promis je vais étudier le sujet ^^ 🙂

Merci encore !
j’ai un beau bouton contact 🙂 🙂 🙂
Thomas sur 31 août 2018 à 16h59 pm

Super tuto,
je me demandais juste, si je souhaite que ce bouton n’apparaisse pas sur une seule de toutes mes pages, comment faire ?

Merci
Pierre sur 10 septembre 2018 à 23h09 pm

Bonjour Thomas,
tu as 2 possibilités :
– soit tu ajoutes dans les CSS perso de ta page : #bouton-sticky { display:none; }.
– soit tu ajoutes dans les “options du thème Divi -> CSS personnalisé” : .page-id-999 #bouton-sticky { display:none; } où il te faut modifier 999 par l’identifiant de la page concernée.
Pour trouver l’identifiant d’une page, affiche son code source et regarde les classes de la balise body.
Thomas sur 11 septembre 2018 à 10h53 am

Merci beaucoup !
Kellens sur 2 novembre 2018 à 00h59 am

Bonjour,

Je viens de tester ce tutoriel et malheureusement ça ne fonctionne pas pour moi, à savoir, je pars d’un layout de divi que je modifie à ma guise, j’ai voulu me servir d’un des boutons déjà présent pour faire le sticky.

Cela m’a créé un bouton en bas de page qui ne fait rien mais n’a pas modifié celui du haut.

Une petite idée pour moi ?

Merci d’avance

Cordialement
Thibaud sur 10 novembre 2018 à 16h04 pm

Super article, j’ai pu créer mon bouton sticky en quelques minutes à peine !
j’ai tout de même 2 questions :
J’ai beau avoir caché la visibilité sur bureau pour garder que sur mobile, le bouton apparait toujours sur le pc.
Autre question, un tuto sur comment faire un bandeau fixe contenant le bouton est possible ? Encore 1000 x merci 🙂
Julien sur 12 novembre 2018 à 10h58 am

Salut, quand tu dis caché, c’est cacher le module?
Maxime sur 24 mai 2019 à 11h14 am

Bonjour,
Super tuto, merci !

Par contre, le bouton n’est pas visible sur mobile, est-ce normal ? Si oui, comment puis-je faire pour qu’il le soit svp ?

Merci pour votre réponse 🙂
Pierre sur 24 mai 2019 à 11h16 am

Si si, il l’est ; vérifie peut-être les options de visibilité de ton module “bouton”…
Geffynho sur 8 juin 2020 à 17h23 pm

Bonjour, merci pour le suppert tuto !
je voulais savoir si l’article sur le fly-innn formulaire à ajouter à ce bouton était sortit car je ne le trouve pas …

Merci !
Pierre Bichet sur 8 juin 2020 à 17h28 pm

Je ne suis pas sûr de comprendre ta question… tu parles de cet article ?