Comment ajouter des effets de survol d'image dans WordPress 2024 ? [4 meilleures étapes à suivre]

Que sont les effets de survol dans WordPress ? Votre site Web doit être conçu pour être unique. C'est difficile quand tout le monde pense la même chose. La bonne nouvelle est que la technologie contemporaine simplifie la conception du site.

L'ajout d'effets de survol à des photos statiques en est un exemple. Sur les avantages d'appliquer des effets de survol à une image dans WordPress. Ensuite, nous vous montrerons comment les intégrer à votre site Web. Commençons!

Comment ajouter des effets de survol d'image dans WordPress ? 4 meilleures étapes

Après avoir appris les effets de survol et leurs avantages, vous vous demandez peut-être comment les mettre en œuvre. Heureusement, nous avons mis en place un guide complet pour faire exactement cela :

Des effets de survol peuvent être ajoutés par un code personnalisé. Cependant, si vous n'êtes pas un codeur chevronné, cela peut être une entreprise longue et parfois dangereuse.

Lors de l'utilisation d'un plugin, cependant, les choses deviennent nettement moins compliquées.

La plugin WordPress Beaver Builder gratuit simplifie le processus de création de sites WordPress entièrement fonctionnels et esthétiques.

Du CSS modulaire à l'intuitif éditeur de page par glisser-déposer, tout est conçu en pensant au développeur.

En prime, cette application permet à quiconque d'appliquer facilement des effets de survol à ses images. Vous ne pouvez pas vous tromper avec Beaver Builder pour toute image qui nécessite un élément interactif supplémentaire.

Il est également suggéré d'utiliser notre thème Beaver Builder. Utilisez les modèles de publication WordPress pour créer rapidement une variété de types de publication, y compris des pages.

De cette façon, au lieu de vous soucier du développement de mises en page, vous pouvez vous concentrer sur la création de fonctionnalités attrayantes, telles que des effets de survol. D'autre part, vous pouvez utiliser Beaver Builder avec le thème WordPress que vous choisissez.

Étape 1 : Ajouter un module photo

Avant de commencer, activez le plugin Beaver Builder. Ensuite, allez dans Pages dans WordPress admin. Activez l'éditeur en créant une nouvelle page ou en en sélectionnant une existante.

Cliquez ensuite sur le signe Plus en haut à droite. Vous allez ajouter un module Photo. Le glisser-déposer permet de positionner rapidement ce module.

Étape 2 : Activez le module photo

Ce module vous permet de poster des photos sur votre site. Sélectionnez une photo dans votre bibliothèque ou entrez une URL. Dans la médiathèque, recadrez l'image.

Vous pouvez également façonner une photo. Les images paysage, panoramique, portrait ou circulaire peuvent toutes utiliser l'effet de survol. Vous pouvez maintenant inclure un lien d'image. Les effets de survol peuvent être utilisés pour diriger le trafic vers certaines URL.

Étape 3 : Ajouter une classe personnalisée

Après la configuration du module d'image, sélectionnez Avancé. C'est le Élément HTML.

Faites défiler jusqu'à Classe. Saisissez ici les informations de la classe personnalisée de l'effet. Nous avons donc ajouté hover-unblur à la classe. Les effets de survol vous permettent de modifier la couleur et le mouvement d'une image. Effets de soulèvement dans Beaver Builder. En fonction de l'impact, une classe spéciale est requise.

Étape 4 : intégrez l'effet CSS

Enfin, ajoutez un CSS de survol à votre site. Notre base de connaissances a le survol CSS. Le temps entre les effets de survol est de 0.3 seconde. Ou lorsque vous soumettez le CSS. Vous pouvez accélérer ou ralentir la transition.

Sélectionnez Paramètres globaux dans la barre de titre de gauche. Ajoutez maintenant le code CSS à la balise CSS.

Sur chaque page de Beaver Builder, accédez à Outils > Paramètres globaux et enregistrez-le. De plus, le contenu non-Beaver Builder est soumis à vos règles CSS.

Une seule page dans LayoutCSS&Jscript. Enregistrez vos modifications CSS. VOIR PREMIER HOVER EFF Passez la souris sur l'image pour tester.

Appliquez l'effet à une ligne ou une colonne de photographies.

Liens rapides:

• Comment créer une palette de couleurs pour votre site WordPress ?
• Comment créer une page en mode maintenance dans WordPress ?
• Comment créer une page d'erreur 404 personnalisée dans WordPress ?
• Comment gérer efficacement la communication client ?

Conclusion : Comment ajouter des effets de survol d'image dans WordPress ?

Il existe de nombreuses méthodes pour personnaliser un site Web, mais l'une des plus simples consiste à utiliser un effet de survol sur les images. Les effets de survol sont un moyen amusant d'engager les visiteurs de votre site Web et de les y maintenir plus longtemps.

Avez-vous un effet de survol préféré que vous aimez utiliser ? Mettez-le dans la zone de commentaires ci-dessous!