Voilà: vous avez créé un excellent site WordPress.

Vous seul constatez que vos visiteurs de votre page « À propos » ou de votre article de blog n’ont plus de visibilité sur l’offre que vous proposez actuellement.

Comment mettre en valeur cette excellente offre et favoriser la conversion de vos visiteurs?

La réponse peut être très simple: configurez-le une bannière flottante (ou « sticky » en anglais) dans la barre latérale ! Et pourquoi ne pas en profiter? Faites flotter votre menu aussi pour faciliter la navigation de vos visiteurs …

Plus précisément, votre élément est conservé dès qu’il devient flottant fixe en surfant. En d’autres termes, même en faisant défiler une longue page, il n’y a aucun risque de noyade: l’élément collant du repos flottant et accessible à tout moment d’un simple clic de souris. Avec certitude !

Le but estAttirer l’attention sans distraire l’internaute de la lecture. Moins intrusif qu’un surgir Un menu flottant guide le lecteur vers votre objectif de conversion.

Par exemple, regardez comment la Marmite vous propose de vous abonner à la newsletter ci-dessus (je dis que je ne dis rien 😉).

Pour ce faire dans WordPress, utilisez l’extension …

Vous comprendrez que, comme son nom l’indique, des amis anglophones autorisent le plugin Sticky Menu à le faire Fixateur sur l’écran chaque élément de votre site Web.

Soyez créatif, tout est permis (ou presque): Le menu de navigation, Widgets, Abonnement à votre Bulletin, Bouton Partager sur les réseaux sociaux … Il ne vous reste plus qu’à choisir le meilleur emplacement pour votre objet flottant:

  • dans le Haut de page : Menu ou en-tête, panier client pour une boutique;
  • dans le Barre latérale : divers appels à l’action dans les widgets;
  • ou dans Bord de l’écran : comment Boutons de partage social.

Revenons à notre plugin. Il a été conçu par Mark Senff, développeur canadien. Le téléchargement est gratuit et compte actuellement plus de 80000 agents d’installation, pour une note de 5 étoiles / 5 de la communauté WordPress. Vous pouvez donc le télécharger les yeux fermés.

Télécharger Sticky Menu

Et après?

Après avoir téléchargé et activé le plugin, accédez à Options de paramétrage, soit via l’onglet « Extensions » de votre tableau de bord WordPress, soit via l’onglet « Extensions » Réglages> Sticky Menu (ou quoi que ce soit!).

Comment rendre un article collant

Maintenant retroussez vos manches: même si ce plugin vous facilite beaucoup la tâche, vous devez encore le faire Mettez vos mains dans le code. Courage, je vous assure que ce ne sera pas la mer à boire non plus: pour définir l’élément que vous voulez coller, il faut le localiser JE VOUDRAIS ou alors classer.

À la Vérifiez le code source de votre sujet et trouvez la classe CSS de votre futur élément flottant, rien de plus simple: utilisez leInspecteur de code depuis votre navigateur.

Tout ce que vous avez à faire est de déplacer la souris sur l’objet en question et vous êtes prêt à partir! Comme par magie, les lignes de code correspondantes sont mises en évidence. Tout ce que vous avez à faire est de noter l’ID.

Même si trouver le bon sélecteur reste simple et rapide, on admettra que cette manipulation est destinée aux utilisateurs de WordPress qui ont déjà un peu d’expérience et pratique avec CSS.

Pour aller plus loin avec CSS, WPMarmite vous recommande CSS Express, son programme pour apprendre à personnaliser l’apparence d’un site WordPress.

Laisser de l’espace libre en haut de la page

Par défaut, le plugin Sticky Menu insère l’élément en haut de l’écran. Vous voudrez peut-être laisser de l’espace ou même laisser l’élément flottant au milieu de la page. Dans ce cas, entrez la marge souhaitée en pixels.

Abaissez l’élément juste au cas où il y en aurait un Barre d’administration (Par exemple, si l’internaute est connecté) cochez cette case:

Personnalisation réactive

Pour le meilleur Expérience utilisateurvous pouvez personnaliser cela Points de rupture Affichez votre élément et supprimez l’élément flottant:

  • sur des écrans inférieurs à x pixels
  • sur des écrans de plus de x pixels.

Enfin, pensez-y économiser les réglages avant de quitter le tableau de bord … Il y a un risque que tout soit à reconfigurer;).

Configuration avancée

Pour certains paramètres plus fins et / ou plus imaginatifs, vous pouvez continuer dans la configuration avec quelques paramètres avancés:

  • L’option Indice Z Cette option vous permet de superposer votre élément flottant sur les éléments de votre thème. Entrez une valeur (par exemple 100, 1000 ou plus) uniquement si votre article est affiché sous un autre.
  • Éléments push-up : Supprime l’élément flottant lorsqu’il atteint un certain niveau sur la page, généralement le pied de page.
  • Mode hérité : Au cas où vous seriez obligé d’utiliser une ancienne version du plugin pour le rendre compatible avec votre thème. Si vous venez de l’installer, n’y touchez pas.
  • Mode débogage : pour résoudre les problèmes causés par une mauvaise sélection des sélecteurs.

Cependant, si vous avez d’autres questions, une FAQ est disponible directement sur le tableau de bord.

3 exemples d’éléments flottants bien conçus

Tu es prêt maintenant Corrigez chaque élément de votre site, mais vous vous demandez par où commencer? Voici quelques exemples dont vous pouvez vous inspirer.

Un widget opt-in flottant

Avec certitude le blog numérique de SièclePour favoriser les conversions dans les articles de blog, un widget sidebar reste flottant: Le widget vous propose un formulaire d’inscription très simple pour recevoir la newsletter «La Daily du Numérique».

Intelligent, n’est-ce pas?

Dans l’en-tête flottant (en-tête collant)

Si vous êtes accro aux tweets, vous voudrez probablement garder un œil sur vos notifications lorsque vous faites défiler votre chronologie. Twitter a trouvé la solution en intégrant un en-tête fixe assez fin et discret et pouvant être remarqué ou oublié selon le moment.

Dans WPMarmite, nous avons également décidé d’inclure un en-tête collant contenant:

  • une Barre de progression pour une lecture dynamique pour vous trouver dans l’article;
  • une Bouton d’inscription à la newsletter Vous ne manquerez donc aucun de nos fantastiques conseils WordPress 😉!

Boutons de partage social

Pour inciter les lecteurs à partager des articles en un clic, la plateforme Medium France a ajouté des boutons flottants à droite pour partager les réseaux sociaux (à l’image de La Marmite d’ailleurs).

Si vous avez envie de creuser dedans, vous pouvez aussi lire ceciarticle très complet de Nicolas sur les boutons de partage cela explique leurs intérêts, mais aussi leurs limites.

Après avoir testé de nombreuses extensions Guerre sociale nous a semblé être la solution la plus efficace, et si cela vous intéresse, laissez Alex regarder le didacticiel vidéo.

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

Basic Social Warfare permet aux boutons de partage social de flotter. Si la solution que vous utilisez ne le fait pas, le menu collant (ou tout!) Est très pratique lors du défilement.

Conclusion

Bon, j’avoue qu’après avoir testé ce plugin, mon avis reste un peu mitigé …

Du côté positif, nous avons:

  • Une extension qui permet à chaque élément de votre site de flotter ;;
  • Un plugin gratuit et éprouvé;
  • Un outil d’apprentissage rapide;
  • … Et instructif: si vous capturez un seul élément, vous éviterez d’encombrer inutilement vos pages.

Et pour les points négatifs:

  • La possibilité de fixer un seul élément exactement! Par exemple, si votre menu principal et votre menu mobile n’ont pas le même ID / classe, vous devrez faire une sélection. Les développeurs déclarent dans leur FAQ que la prochaine mise à jour majeure du plugin étendra cette fonction à plusieurs éléments. La suite suit;
  • Le plugin en a besoin Concepts de CSS à la Vérifiez le code et trouve le bon Les électeurs l’élément collant;
  • Aucune personnalisation possible sans l’ajout de CSS à votre feuille de style : Par exemple, si votre en-tête est transparent dans une image sombre, il ne sera pas nécessairement visible sur une page avec un fond blanc.
  • Un plugin qui n’a pas été traduit en français (mais qui est toujours accessible).

Avec Sticky Menu, nous n’avons pas encore la solution miracle pour ajouter des éléments flottants à notre site WordPress.

Mais rassurez-vous, nous ne vous laisserons pas entrer en contact!

Si vous souhaitez définir un widget sur votre page, l’extension Widget fixe Q2W3 est une alternative à explorer. Cette fois-ci, vous pouvez faire flotter le widget sans entrer dans le code pour trouver sa classe CSS. Cela peut avoir des avantages en fonction de vos projets.

Pour un meilleur rendu, nous aurions également aimé quelques options de personnalisation supplémentaires: jouer avec le contraste ou les couleurs, offrir une apparence sur un calque spécifique de la page, ou simplement intégrer plusieurs éléments flottants différents.

Et vous, que pensez-vous de l’utilisation d’éléments flottants sur un site Web? Souhaitez-vous essayer cette extension après avoir lu cet article?



Source link

Recent Posts