Nous essayons à chaque optimisation d’offrir une meilleure expérience aux visiteurs et abonnés de nos blogs WordPress. Et même si nous sommes conscients du fait que la beauté n’est pas ce qu’il y a de plus important dans un blog, nous savons tout de même que parfois ce qui est beau parvient à retenir l’attention.

Dans ce tutoriel, je vous montrerai comment attirer l’attention de vos lecteurs sur les images de votre blog, en ajoutant une animation de la souris au survol (Hover Effect) afin d’afficher les détails de ces dernières à l’aide du plugin Amazing Hover Effects.

amazing-hover-effects

Ce que vous allons faire en premier, c’est d’installer et d’activer le plugin disponible sur WordPress.org depuis votre tableau de bord. Il est également possible de vous procurer le plugin sur forme de fichier zip.

amazing-hover-effects-tableau-de-bord-installation

Comment créer un nouvel effet au survol

Après avoir installé et activé le plugin, un nouveau menu « Hover Effects » s’ajoutera au tableau de bord. Cliquez sur le sous menu « Ajouter » de ce menu pour créer un nouvel effet. L’interface de cette nouvelle page est similaire à celle des pages et articles. Elle est composée à la place de l’éditeur visuel de 2 boites méta, qui vous permettent respectivement :

D’ajouter une image, un titre et une description. Pour ajouter plus d’images, vous pouvez cliquer sur le bouton « Add More Hover info ».

hover-image-meta-box

D’ajouter des effets aux différentes images depuis la section « Hover Effects Setting ». Vous pouvez choisir un style, un effet, une direction, un effet coloré. La largeur et la hauteur d’une image sont réglées avec les options « Image Width » et « Image Height ».

hover-effect-sur-les-images

Remarque : Les catégories vous permettent de regrouper vos différentes listes d’images. Il est nécessaire d’utiliser les catégories pour afficher les listes d’images dans une page ou un article.

Comment afficher une liste d’images sur une page

Ce qui suit s’applique également aux pages. Pour ajouter une liste d’images dans un article, vous devez cliquer sur le bouton « Hover Shortcode » affiché sur l’éditeur visuel.

ajouter-une-liste-d-image

En cliquant dessus, un shortcode sera ajouté à l’éditeur avec une propriété « category », qui a pour valeur « Category_name » remplacé par l’identifiant d’une des catégories que vous avez créée.

hover-category-identfiant-d-une-categorie

Après avoir ajouté l’identifiant de cette catégorie, publiez votre article et consultez-la pour voir comment s’affiche cette nouvelle liste.

hover-categorie-demo

Je vous invite à regarder plus de démo sur le site web de l’auteur.

Avant de nous quitter

Vous devez savoir qu’il existe une version premium du plugin. Cette version offre plus d’effets (beaucoup plus) et d’autre éléments intéressant. C’est tout pour ce tutoriel sur la personnalisation des images de votre blog WordPress.