Publié par le 23 avril 2019 • 3 Commentaires

Ça y est : vous avez conçu un superbe site WordPress.

Seulement, vous vous rendez compte que, depuis votre page « À propos » ou un article de blog, vos visiteurs n’ont plus aucune visibilité sur l’offre que vous proposez en ce moment.

Comment faire pour mettre en lumière cette superbe offre, et favoriser la conversion de vos visiteurs ?

La réponse peut être très simple : mettre en place une bannière flottante (ou « sticky » en anglais) en barre latérale ! Et pourquoi pas en profiter pour rendre votre menu flottant aussi, pour faciliter la navigation de vos visiteurs…

Concrètement, une fois que votre élément sera devenu flottant, il sera restera fixe lors de la navigation. Autrement dit, même en faisant défiler une longue page, plus de risque de se noyer : l’élément sticky reste flottant et accessible au clic à tout moment. Sauvé !

Le but étant d’attirer l’attention sans pour autant distraire l’internaute de sa lecture. Moins intrusif qu’une popup un menu flottant guide le lecteur vers votre objectif de conversion.

Regardez par exemple comment la Marmite vous propose de s’inscrire à sa newsletter juste au dessus (je dis ça je dis rien 😉).

Pour parvenir à mettre cela en place dans WordPress, vous allons utiliser l’extension…

Sticky Menu (or Anything!) on Scroll

Amis anglophones vous l’aurez compris, comme son nom l’indique si bien, le plugin Sticky Menu permet de fixer sur l’écran n’importe quel élément de votre site web.

Soyez créatif, tout est permis (ou presque) : menu de navigation, widgets, abonnement à votre newsletter, bouton de partage sur les réseaux sociaux… Il ne vous reste ensuite qu’à choisir le meilleur emplacement pour votre élément flottant :

  • en haut de page : menu ou en-tête, panier client pour une boutique ;
  • en barre latérale : appels à l’action divers dans des widgets ;
  • ou en bas d’écran : comme des boutons de partage sociaux.

Revenons à notre plugin. Il a été conçu par Mark Senff, développeur canadien. Il est en téléchargement libre et compte à ce jour plus de 80 000 installations actives, pour une notation de 5 étoiles /5  par la communauté WordPress. Vous pouvez donc le télécharger les yeux fermés.


Télécharger Sticky Menu

Bon, et ensuite ?

Après avoir téléchargé et activé le plugin, rendez-vous dans les options de configuration, soit depuis l’onglet Extensions de votre tableau de bord WordPress, soit depuis l’onglet Réglages > Sticky Menu (or Anything!).

Comment rendre un élément flottant (sticky)

Maintenant, retroussez vos manches : même si ce plugin vous facilite grandement la tâche, il faut malgré tout mettre un peu les mains dans le code. Courage, je vous assure que ce ne sera pas non plus la mer à boire : pour définir l’élément que vous souhaitez coller, il faut repérer son ID ou sa classe.

Pour examiner le code source de votre thème et retrouver la classe CSS de votre futur élément flottant, rien de plus simple : utilisez l’inspecteur de code de votre navigateur.

Il vous suffit alors de passer la souris sur l’élément en question, et hop ! Comme par magie, les lignes de code correspondantes sont surlignées. Vous n’avez plus qu’à noter l’ID.

Alors même si trouver le bon sélecteur reste simple et rapide, on vous accorde que cette manip’ s’adresse à des utilisateurs de WordPress déjà un peu expérimentés et à l’aise en CSS.

Pour aller plus loin avec le CSS, WPMarmite vous conseille CSS Express, son programme pour apprendre à personnaliser l’apparence de n’importe quel site WordPress. Cliquez ici pour en savoir plus.

Laisser un espace libre en haut de page

Par défaut, le plugin Sticky Menu colle l’élément en haut d’écran. Il se peut que vous préfériez laisser un peu d’espace, voire même conserver l’élément flottant en milieu de page : dans ce cas, indiquez la marge souhaitée en pixels.

Pour baisser l’élément uniquement dans le cas où il y aurait une barre d’administration (si l’internaute est connecté par exemple), cochez cette case :

Personnalisation esponsive

Pour une meilleure expérience utilisateur, vous pouvez personnaliser les points de rupture d’affichage de votre élément, et choisir de supprimer l’élément flottant :

  • sur les écrans plus petits que x pixels
  • sur les écrans plus grands que x pixels.

Enfin, pensez bien à sauvegarder les réglages avant de quitter le tableau de bord… Au risque de devoir tout configurer à nouveau ;).

Configuration avancée

Pour les plus tatillons et/ou débrouillards, quelques réglages avancés permettent d’aller plus loin dans la configuration :

  • L’option Z-index permet de superposer votre élément flottant au dessus des éléments de votre thème. Ne spécifiez une valeur (par exemple 100, 1000 ou plus) uniquement si votre élément apparaît sous un autre ;
  • Push-up elements : supprime l’élément flottant quand il arrive à un certain niveau de la page, généralement le pied de page (footer) ;
  • Legacy mode : dans le cas où vous seriez obligé d’utiliser une ancienne version du plugin pour le rendre compatible avec votre thème. Donc si vous venez de l’installer, n’y touchez pas ;
  • Debug mode : pour résoudre les problèmes générés par un mauvais choix de sélecteurs.

Si toutefois vous aviez d’autres questions, une FAQ est disponible directement depuis le tableau de bord.

3 exemples d’éléments flottants bien pensés

Vous êtes maintenant paré pour fixer n’importe quel élément sur votre site, mais vous vous demandez par quoi commencer ? Voici quelques exemples dont vous pouvez vous inspirer.

Un widget d’opt-in flottant

Sur le blog Siècle Digital, pour favoriser les conversions dans les articles de blog, un widget en barre latérale reste flottant : celui qui vous propose un formulaire d’opt-in tout simple pour recevoir la newsletter « La quotidienne du numérique ».

Malin, n’est-ce pas ?

En en-tête flottant (sticky header)

Si vous êtes un addict du tweet, vous avez probablement envie de garder un oeil sur vos notifications tout en faisant défiler votre timeline. Twitter a trouvé la solution en intégrant un en-tête fixe, assez fin et discret, qui sait se faire remarquer ou oublier selon le moment.

Sur WPMarmite, nous avons également choisi d’intégrer un en-tête sticky qui comprend :

  • une barre de progression de lecture dynamique pour vous situer au sein de l’article ;
  • un bouton d’abonnement à la newsletter pour ne manquer aucune de nos fabuleuses astuces WordPress 😉 !

Des boutons de partages sociaux

Pour inciter les lecteurs à partager les articles en un clic, la plateforme Medium France a choisi d’ajouter des boutons de partage sociaux flottants sur la droite (tout comme la Marmite d’ailleurs).

Si vous avez envie de creuser la question, vous pouvez également lire l’article très complet de Nicolas sur les boutons de partage qui vous explique en long, en large et en travers leurs intérêts, mais aussi leurs limites.

Après avoir testé de nombreuses extensions, Social Warfare nous est apparu comme la solution la plus efficace, et si cela vous intéresse, je vous laisse jeter un oeil au tuto vidéo réalisé par Alex.

L’extension Social Warfare, pour créer vos boutons de partage social

De base Social Warfare permet de faire flotter les boutons de partage sociaux mais si cela n’est pas possible avec la solution que vous utilisez, Sticky Menu (or Anything !) on scroll vous sera bien utile.

Conclusion

Bon, je vais vous avouer qu’après test de ce plugin, mon avis reste un peu mitigé…

Au niveau des points positifs, nous avons :

  • Une extension qui permet de rendre flottant n’importe quel élément de votre site ;
  • Un plugin gratuit et qui a fait ses preuves ;
  • Un outil rapide à prendre en main ;
  • … et pédagogique : ne coller qu’un seul élément évite de surcharger inutilement vos pages.

Et pour les points négatifs :

  • La possibilité de ne fixer qu’un seul élément, justement ! Donc par exemple, si votre menu principal et votre menu mobile n’ont pas la même ID/classe, il faudra faire un choix. Cela dit, les développeurs précisent dans leur FAQ que la prochaine mise à jour majeure du plugin devrait étendre cette fonction à plusieurs éléments. Affaire à suivre, donc ;
  • Le plugin nécessite quelques notions de CSS pour inspecter le code et repérer le bon sélecteur de l’élément sticky ;
  • Pas de personnalisation possible sans ajouter du CSS à votre feuille de style : si par exemple, votre header est transparent sur un visuel foncé, il ne sera pas forcément visible sur une page à fond blanc ;
  • Un plugin non traduit en français (mais accessible tout de même).

Avec Sticky Menu, on ne tient donc pas encore la solution miracle pour ajouter des éléments flottants à notre site WordPress.

Mais, rassurez-vous, on ne va pas vous laisser botter en touche !

Si vous souhaitez fixer un widget sur votre page, l’extension Q2W3 Fixed Widget est une alternative qui mérite d’être explorée. Cette fois-ci, vous pourrez rendre le widget flottant sans avoir à rentrer dans le code pour repérer sa classe CSS, ça peut avoir un certain avantage en fonction de vos projets.

En bref, le plugin Sticky Menu (or Anything) on Scroll !, bien que facile à utiliser, ne s’adresse pas aux “vrais” débutants, mais aux utilisateurs de WordPress déjà habitués à manipuler les classes CSS.

Pour un meilleur rendu, on aurait également aimé quelques options de personnalisation supplémentaires : jouer sur le contraste ou les couleurs, proposer une apparition à un certain niveau de la page, ou tout simplement pouvoir intégrer plusieurs éléments flottants différents.

Et vous, que pensez vous de l’utilisation des éléments flottants sur un site web ? À la lecture de cet article, avez-vous envie de tester cette extension ?