Comment ajouter une barre latérale flottante à un site WordPress

Mise à jour: 13 septembre 2017 / Article par: Vishnu

Les barres latérales flottantes sont pratiques lorsque vous souhaitez garder une facette ou une partie de votre site Web accessible au lecteur à tout moment. L’objectif principal de l’accessibilité est donc que l’utilisateur voie presque toujours le contenu présenté dans une barre latérale flottante.

C’est pour cette raison même que de nombreux sites Web utilisent une barre d’actions flottante. Ces barres latérales sont toujours visibles et facilement accessibles au visiteur. Cela augmente la probabilité qu'un visiteur partage votre contenu.

De même, les webmasters ont tendance à afficher leur meilleur contenu dans la partie la plus accessible du site Web. Cela permet de conserver à tout moment ce que vous voulez dans le champ de vision de vos visiteurs.

Besoin d'aide pour peaufiner votre site WordPress?
WHSR est désormais partenaire de Codeable.io pour aider les utilisateurs ayant besoin de services professionnels de développement / personnalisation de WP.

Pour obtenir un devis gratuit, veuillez remplir ce formulaire de demande.

 

Un excellent exemple de quelque chose qui peut être ajouté à une barre latérale flottante, consultez Article de WHSR sur la sécurité des médias sociaux.

Exemple

 

Dans ce cas particulier, Jerry propose de fournir à un visiteur un livre électronique expliquant comment démarrer et gérer un blog avec succès. Nous pensons que c'est l'un des guides les plus précieux que WHSR puisse fournir. Et nous aimerions que chaque visiteur en prenne note.

L'accès au livre électronique est autorisé si vous fournissez votre adresse électronique. Donc, non seulement nous vous fournissons le livre électronique, mais nous vous abonnons également à notre blog. En d'autres termes, il s'agit d'un formulaire d'abonnement flottant.

Le formulaire d'abonnement flottant sur WHSR est assez difficile à répliquer pour un débutant WP.

Alors, laissez-moi vous montrer comment vous pouvez exploiter la puissance d'une barre latérale flottante avec un petit plugin astucieux, Q2W3 Widget Fixe.

Q2W3 Widget Fixe

 

q2w3

 

Une fois que vous avez installé et activé le plugin, le mettre en place est en fait assez facile.

1. Ouvrez Apparences> Widgets.

2. Vous verrez les options de la barre latérale, le nombre de barres latérales dépend de votre choix de thème.

3. Sélectionnez l'option de widget fixe et vous avez terminé. Le widget particulier restera en place. Jetez un coup d'œil à la capture d'écran ci-dessous, j'ai corrigé les publications et catégories récentes dans ma barre latérale.

 

WidgetsSettingsQ2W3

 

Et le résultat:

 

 

Vous pouvez également faire quelques personnalisations avec le plugin.

  • Les marges peuvent être ajustées
  • L'intervalle d'actualisation et la largeur maximale peuvent recevoir une valeur spécifique
  •  Les options de plug-in peuvent aider à assurer la compatibilité avec votre thème. Un exemple serait la possibilité d'hériter de la largeur d'un conteneur parent - cela peut changer dans un thème réactif en fonction de la taille de l'écran.

ParamètresQ2W3

 

Créer des formulaires d'abonnement et des barres de partage flottantes

Si vous souhaitez créer un autre type de barre latérale flottante, il existe des plugins qui le permettent également. Par exemple, si vous souhaitez ajouter une barre de partage flottante ou un formulaire d'abonnement à votre barre latérale, recherchez un plugin de formulaire d'abonnement ou un plugin de partage social.

1. Ajouter un widget de texte à la barre latérale.

2. Ajoutez le code abrégé approprié (fourni par le plug-in) au widget de texte et vous obtiendrez une barre de partage permanente.

L'effet serait similaire à la vidéo ci-dessous, où ils ont créé une barre de partage flottante.

 

 

Avec n'importe quel autre plugin, vous pouvez ajouter des fonctionnalités à votre site et les rendre hautement accessibles en ajoutant leurs codes abrégés à un widget texte que vous avez ajouté à la barre latérale. De plus, vous pouvez ajouter du code HTML ou JavaScript personnalisé au widget Texte.

Final Thoughts

Utilisez judicieusement les barres latérales flottantes et optimisez le nombre de partages / réseaux sociaux / nombre d’abonnés ou toute autre fonction pour laquelle vous choisissez d’utiliser le plug-in.

Maintenant, regardez à droite de cet article. Nous avons notre formulaire d'inscription et un guide qui peut vous aider dans vos efforts de blogging, veuillez vous abonner et tous nos articles atteindront votre boîte aux lettres.

Si vous utilisez un autre plugin, hacks ou code pour créer une barre latérale flottante, j'aimerais en entendre parler dans la section commentaires.

À propos de Vishnu

Vishnu est un rédacteur pigiste de nuit, travaille comme analyste de données le jour.