skip to Main Content

Comment donner du style aux images de votre blog WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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 ».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

Cet article comporte 4 commentaires
  1. Merci pour cet article !

    J’utilise amazing hover effect pro.
    J’ai 4 « images » en hover effect cote à cote, j’aimerais ajouter un petit texte sous chaque image.
    Donc pas au survol, mais bien en dessous.
    Une idée ? Merci d’avance 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
8 Partages
Partagez8
Tweetez
Enregistrer