Sélectionner une page


Souhaitez-vous apprendre à ajouter des effets de survol d’image dans WordPress?

Les effets de survol d’image peuvent rendre votre site Web plus interactif et attrayant. Cela crée une meilleure première impression et améliore le temps que vous passez sur votre site Web.

Dans cet article, nous allons vous montrer étape par étape comment ajouter des effets de survol d’image dans WordPress.

Comment ajouter des effets de survol d'image dans WordPress

Que sont les effets de survol d’image?

Les effets de survol d’image vous permettent d’ajouter des éléments interactifs à vos images statiques, tels que: B. Animations, effets de zoom, fenêtres contextuelles et plus encore.

Par exemple, vous pourriez avoir des images qui se retournent pour montrer vos prix ou des liens vers votre portefeuille.

Les survols d’image vous offrent également un moyen créatif d’afficher vos photos, galeries et miniatures.

Les images interactives et les éléments de survol peuvent aider votre site Web de plusieurs manières:

  • Améliorez le temps que vos visiteurs passent sur votre site Web
  • Offrez des opportunités créatives pour présenter du contenu à vos visiteurs
  • Faites savoir à vos utilisateurs qu’un élément de site est cliquable

Comment créer des effets de survol d’image dans WordPress

La meilleure façon d’ajouter des effets de survol d’image à votre image Site Web WordPress est avec un plugin WordPress.

Avec un plugin, vous n’avez pas à passer du temps à éditer, formater et ajouter du CSS pour créer des effets d’image. Cela fonctionne juste.

Il existe toutes sortes de plugins que vous pouvez utiliser pour créer des effets de survol d’image et des animations uniques.

Dans ce didacticiel, nous allons vous montrer les quatre façons différentes d’ajouter les effets de survol dont vous avez besoin.

1. Ajout d’effets Flipbox de survol d’image dans WordPress

Une boîte à bascule est une boîte qui bascule lorsque vous la survolez avec la souris.

Vous pouvez ajouter cette animation à vos images pour afficher du texte ou changer l’image en flottant.

Flip box image flottante

Vous pouvez contrôler la façon dont l’image est retournée et la conception de l’image de chaque côté.

Si vous en êtes un photographevous pouvez l’utiliser pour présenter votre travail et séparer vos portefeuilles.

Le moyen le plus simple d’ajouter des effets de flipbox d’image est d’utiliser un plugin WordPress. Avec un plugin, vous pouvez rapidement créer et personnaliser ces effets.

Nous vous recommandons d’utiliser le Flipbox – Superposition d’image des Flip Boxes Awesomes Brancher. C’est le meilleur plugin de flipbox et de survol d’image pour WordPress.

Avec ce plugin, vous pouvez facilement ajouter des effets flipbox personnalisés à vos images WordPress.

Paramètres du plugin Image Hover Flipbox

Il est livré avec des dizaines d’effets d’animation différents et de modèles prédéfinis. Vous pouvez même contrôler les couleurs et ajouter votre propre CSS personnalisé.

Pour plus d’informations, consultez notre guide sur comment créer des superpositions flipbox et flotter dans WordPress.

2. Ajout d’effets de zoom et d’agrandissement d’image dans WordPress

Avec les effets de zoom d’image, vos utilisateurs peuvent voir les détails qu’ils ne peuvent pas voir dans une image en taille réelle.

C’est un excellent effet pour les didacticiels de produits et les images très détaillées.

Vous pouvez également l’utiliser sur le vôtre Magasin en ligne pour ajouter un effet de zoom comme Amazon.

Agrandir l'image zoom

Le moyen le plus simple d’ajouter des effets de zoom et d’agrandissement d’image à vos images est d’utiliser un plugin WordPress.

Nous vous recommandons d’utiliser le Zoom d’image WP Brancher. Avec ce plugin, vous pouvez facilement ajouter des effets de zoom et d’agrandissement à vos images.

Paramètres du plugin WP Image Zoom

Il regorge également de fonctionnalités qui vous permettent de choisir la forme de l’objectif zoom, le niveau de zoom, etc.

Pour plus d’informations, consultez notre guide sur Comment ajouter un zoom grossissant pour les images dans WordPress.

3. Ajout d’effets d’animation dans WordPress

Il existe toutes sortes d’effets de survol supplémentaires que vous pouvez ajouter à WordPress.

Par exemple, vous avez des galeries d’images animées, des images de boîte à lumière, des images de comparaison, des superpositions de texte, etc.

Effet d'animation flottant

Pour ajouter de tels effets de survol, nous vous recommandons d’utiliser Effets de survol d’image Ultimate Brancher.

Ce plugin est très léger et n’affecte donc pas votre plugin Performances du site Web et vitesses de chargement. Il est également très facile à utiliser. Vous pouvez ajouter des effets d’image uniques en quelques clics.

La première chose à faire est d’installer et d’activer ce Effets de survol d’image Ultimate Brancher. Pour plus d’informations, consultez notre guide étape par étape à l’adresse Comment installer un plugin WordPress?.

Dès que vous avez installé et activé le plugin, vous devez cliquer sur « Image Hover » dans votre administrateur WordPress. Cela fera apparaître huit effets de survol d’image différents parmi lesquels vous pourrez choisir.

Choisissez l'effet de survol d'image

Dans ce didacticiel, nous utiliserons l’effet Effets de lettrage. Cela ajoute du texte animé avec un pointeur de souris sur votre image.

Tout d’abord, cliquez sur le champ « Effets des sous-titres ». Cela fera apparaître un menu avec plusieurs options d’animation parmi lesquelles choisir.

L'animation de survol d'image crée un style

Lorsque vous avez trouvé l’effet d’image souhaité, cliquez sur « Créer un style ».

Dans la fenêtre contextuelle, nommez votre effet de survol et choisissez la mise en page. Le numéro de mise en page que vous avez sélectionné correspond à la séquence ordonnée d’images.

N’oubliez pas de cliquer sur « Enregistrer ».

Nommez la nouvelle image

Sur l’écran suivant, vous avez plusieurs options pour personnaliser votre effet de survol.

Cependant, nous laissons les options d’animation standard.

Déplacez le pointeur de la souris sur les paramètres d'animation

Si vous apportez des modifications, elles seront affichées dans le champ « Aperçu ».

Pour changer l’image par défaut, survolez l’image et cliquez sur l’option « Modifier ».

Modifier l'animation de survol

Dans cette fenêtre contextuelle, vous pouvez modifier votre titre et votre description qui seront affichés au survol.

Pour télécharger votre image, cliquez sur la case sous le titre de l’image et téléchargez ou sélectionnez une image dans votre bibliothèque multimédia.

Changer l'image Survolez l'image

Vous pouvez également ajouter un lien et un texte de bouton si vous souhaitez que votre image redirige les utilisateurs vers une autre page de votre site Web.

Lorsque vous avez terminé, cliquez sur Soumettre.

Shortcode de survol de l'image

Pour ajouter l’image à votre site Web, copiez le shortcode dans le champ « Shortcode ».

Ensuite, ouvrez une page, une publication ou un widget sur lequel vous souhaitez que votre image apparaisse et collez le code court.

Collez le shortcode pour l'animation de survol

Assurez-vous de cliquer sur Publier ou Mettre à jour pour enregistrer vos modifications et activer votre effet de survol d’image.

4. Ajout d’effets contextuels de survol d’image dans WordPress

Les plugins ci-dessus vous permettent d’ajouter des fonctionnalités telles que des flip boxes, des effets de survol, des animations, etc.

Que faire si vous souhaitez ajouter un autre effet de survol d’image qui n’est pas couvert par les plugins ci-dessus?

La meilleure façon de le faire est avec un CSS personnalisé WordPress Brancher. Cela vous permet d’apporter des modifications visuelles à vos images sans modifier aucun code.

Vous pouvez modifier vos fichiers CSS manuellement ou ajouter du CSS via le personnalisateur WordPress. Cependant, l’utilisation d’un plugin est l’option la plus simple.

Nous vous recommandons d’utiliser le Héros CSS Brancher. Ce plugin vous permet de modifier presque tous les styles CSS sur votre site WordPress sans écrire une ligne de code.

Effets de survol CSS

Il existe toutes sortes d’effets CSS intégrés spécifiquement pour les images.

Pour plus d’informations sur l’installation d’un plugin, consultez notre guide Comment installer un plugin WordPress?.

Une fois le plugin installé, vous devez cliquer sur le bouton « Continuer à l’activation du produit ».

Activer CSS Hero

Cela vous guidera tout au long du processus d’activation du plugin.

Une fois le plugin activé, vous pouvez commencer à personnaliser vos images.

Ouvrez une page ou un message avec l’image ou les images que vous souhaitez animer et cliquez surHéros CSS‘ en haut de la page.

Cela ouvrira le menu Editeur où vous pourrez ajouter divers effets CSS.

Nous allons ajouter une image contextuelle à l’effet de survol. Vous devez d’abord cliquer sur l’image que vous souhaitez modifier, puis cliquer sur « Extraits de code ».

Cliquez ensuite sur « Effets de survol ».

Effets de survol CSS Hero

Un menu avec divers effets CSS apparaîtra. Ensuite, sélectionnez l’effet ‘.hvr-pop’ et cliquez sur ‘Appliquer’.

Cliquez sur Enregistrer et publier. L’effet CSS est automatiquement appliqué à vos images.

Enregistrer les modifications apportées au survol d'image

Nous espérons que cet article vous a aidé à apprendre comment ajouter des effets de survol d’image dans WordPress. Vous pouvez également consulter notre guide sur Comment optimiser les images pour le Web et notre Guide du débutant sur le référencement d’images.

Si vous avez apprécié cet article, veuillez vous abonner au nôtre chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.





Source link

Recent Posts