Comment ajouter un effet de curseur au survol de la souris sur un site web Elementor

L'impression visuelle et l'interaction sont deux éléments cruciaux dans la conception d'un site web. Même un petit détail peut avoir un impact considérable. Une caractéristique souvent négligée dans la conception actuelle des sites web est l'effet du curseur au passage de la souris. Cet effet interactif ne se contente pas d'embellir la page, il incite également les visiteurs à explorer davantage de contenu et améliore les performances globales. Avec l'aide de Elementor collocation HappyAddons n'importe quel WordPress peut facilement obtenir l'effet du curseur de survol de la souris. Cet article explique, étape par étape, la méthode d'exploitation appropriée.

Quel est l'effet du curseur au passage de la souris ?

Lorsqu'un utilisateur déplace la souris sur une zone d'une page web, le curseur produit un changement visuel supplémentaire, tel que l'affichage d'un cercle, d'une icône, d'un texte ou d'une image. Cet effet interactif renforce l'attrait visuel et incite l'utilisateur à explorer plus activement le contenu de la page.

De nombreux sites web souhaitent suivre le parcours d'un utilisateur sur une page, et les visiteurs ont tendance à n'utiliser la souris que lorsqu'ils ont besoin de faire défiler la page, ce qui rend difficile la détermination précise de ce sur quoi l'utilisateur se concentre. Une fois l'effet de survol activé, les visiteurs déplaceront leur souris plus fréquemment au cours du processus de navigation, ce qui permettra d'obtenir des données comportementales plus intuitives.

Plugin nécessaire pour ajouter l'effet de curseur au survol de la souris

Pour activer cette fonctionnalité, les plug-ins suivants doivent d'abord être installés :

• Elementor
• HappyAddons

L'effet peut être appliqué à l'ensemble de la page ou être défini individuellement pour certains éléments spécifiques. Les deux manières différentes de les paramétrer sont décrites ci-dessous.

Tutoriel 1 : Activer l'effet de curseur au survol de la souris pour l'ensemble de la page

De cette manière, tous les éléments de la page entière afficheront uniformément le même effet de survol du curseur.

Étape 1 : Activer l'option Curseur de souris heureux (sans sélectionner d'éléments)

Sans vérifier aucune pageélément d'un ensembleSi vous souhaitez utiliser les paramètres de "Happy Mouse Cursor", ouvrez l'éditeur Elementor, cliquez sur l'onglet "Paramètres" dans le panneau, développez la zone de paramètres de "Happy Mouse Cursor" et activez "Enable Curseur de souris heureux".

La souris par défaut sur la page sera désormais un curseur circulaire.

Étape 2 : Activer le suivi dynamique Lazy Move

Lorsque l'option "Enable Lazy Move" est activée, l'effet du curseur suit la position réelle de la souris de manière retardée et incurvée.

Étape 3 : Activer le mode Mix Blend

Par défaut, le curseur bloque le contenu situé derrière lui. Si l'option "Activer le mélange" est activée, vous pouvez définir la couleur de mélange pour que l'arrière-plan du curseur soit transparent et se fonde dans la page, à l'instar de l'effet visuel d'une loupe.

Étape 4 : Modification du style de curseur par défaut

Si vous ne souhaitez pas utiliser le mode de mélange, vous pouvez désactiver l'option "Activer le mélange", puis personnaliser l'arrière-plan du curseur par défaut en choisissant n'importe quelle couleur dans le champ "Couleur d'arrière-plan".

Étape 5 : Définition de la taille, des bordures et des angles du curseur

Le type, la largeur, la couleur et les valeurs des coins arrondis de la bordure du curseur peuvent être ajustés selon les besoins pour créer un style unique.

Tutoriel 2 : définir l'effet du curseur de survol de la souris pour l'élément spécifié

Les pages web sont généralement composées de plusieurs éléments, et différents effets de curseur peuvent être activés individuellement pour des modules spécifiques.

Étape 1 : Sélectionnez l'élément et activez le curseur Happy Mouse.

Cliquez sur n'importe quel conteneur ou élément de la page, recherchez "Happy Mouse Cursor" dans son panneau "Layout" et activez l'option correspondante.

Étape 2 : Sélection du type de curseur

Les cinq styles de curseurs suivants sont pris en charge :

• style d'écriture
• couleur
• icône (informatique)
• photographie
• vidéo

Chaque type peut être stylé individuellement. Lorsqu'il est activé par défaut, il s'agit du type "Texte".

Explication du style de curseur

Type de texte (Texte)

Entrez dans le champ "Texte du curseur" et remplissez le texte à afficher. Vous pouvez ajuster la couleur de la police ettypographique.

Si vous souhaitez que l'arrière-plan soit plus souple, vous pouvez également activer l'option Activer le flou pour définir le degré de flou et l'opacité.

En outre, des paramètres tels que la largeur, la hauteur, les ombres, les marges, les bordures, etc. peuvent être ajustés.

Type de couleur (Couleur)

Après avoir sélectionné "Couleur", il suffit de régler lecouleur de fondSi vous souhaitez créer un effet de curseur de couleur unie, vous pouvez le faire.

Type d'icône (Icône)

Passez à "Icône" et cliquez sur la zone des icônes pour sélectionner une icône intégrée.icône (informatique). Vous pouvez également personnaliser la couleur et la taille de l'icône après son insertion.

Les autres styles, tels que la taille, la bordure, l'ombre et les autres paramètres, sont universels pour tous les types.

Type d'image (Image)

Après avoir choisi le type "Image", téléchargez des images à partir de la bibliothèque multimédia ou de votre ordinateur et réglez l'option "Ajustement de l'objet" sur Remplissage.

Les paramètres optionnels comprennent un angle de rotation de 360°, une taille personnalisée, une bordure et une transparence.

Type de vidéo (Vidéo)

Après avoir sélectionné le type "Vidéo", téléchargez une vidéo comme arrière-plan du curseur et définissez la taille et le mode d'adaptation de la mise en page. Vous verrez dans le canevas en directeffet dynamique.

Une fois la configuration terminée, il est recommandé de vérifier les résultats sur la page d'accueil pour voir s'ils sont conformes aux attentes.

Scénarios d'application de l'effet de curseur au survol de la souris

Cette fonctionnalité interactive peut être adaptée de manière flexible à n'importe quelle Elementor combinée à la conception des pages pour obtenir des visuels plus attrayants et un retour d'information interactif :

• Améliore le plaisir du défilementLes animations : Créez une expérience plus dynamique avec des animations de défilement.
• Afficher les informations complémentairesLes conseils sont transmis par le biais d'images, de vidéos ou de curseurs de texte, à l'instar des infobulles.
• Optimiser l'esthétique des pagesLes pages d'accueil peuvent être personnalisées à l'aide d'un style de curseur spécial.
• Rendre le contenu plus interactifLes éléments statiques avec effet de survol incitent à une navigation plus approfondie.
• Fournir une orientation visuelleModifier la couleur du curseur ou de la bordure de la touche pour indiquer la zone d'opération.
• Analyse comportementale complémentaireLes utilisateurs peuvent ainsi évaluer leurs préférences et le degré d'intérêt du contenu.

Questions fréquemment posées

Q : Combien d'effets de curseur Elementor possède-t-il ?
R : HappyAddons propose cinq types de fichiers : texte, couleurs, icônes, images et vidéos.

Q : Puis-je ajouter des effets de survol aux images ?
R : Bien sûr. Le style de survol du curseur peut être défini individuellement pour chaque module d'image.

Q : Dois-je optimiser cet effet pour les appareils mobiles ?
R : Il est recommandé d'activer le paramètre Mode réactif pour choisir d'activer ou non l'effet en fonction du type d'écran.

Q : L'activation de l'effet de survol affecte-t-elle la vitesse du site ?
R : HappyAddons est implémenté de manière légère, mais il est recommandé de l'activer après avoir évalué la complexité du site.

résumés

en ce qui concerne Elementor L'effet de curseur au survol de la souris est maintenant terminé. Si vous pensez que quelque chose d'autre mérite d'être ajouté, n'hésitez pas à le laisser dans la section des commentaires et nous l'inclurons dans une prochaine mise à jour.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.