Cómo añadir el efecto de cursor de ratón al sitio web Elementor

La impresión visual y la interacción son dos elementos muy importantes en el diseño de un sitio web. Incluso un pequeño detalle puede tener un gran impacto. Una característica que a menudo se pasa por alto en el diseño web actual es el efecto de cursor hover del ratón. Este efecto interactivo no sólo embellece la página, sino que guía a los visitantes a explorar más contenido y mejora el rendimiento general. Con la ayuda de Elementor coubicación HappyAddons plug-in, cualquier WordPress puede conseguir fácilmente el efecto de cursor flotante del ratón. Este artículo explicará paso a paso el método de operación relevante.

¿Qué es el efecto del cursor del ratón?

Cuando un usuario pasa el ratón por una zona de una página web, el cursor produce un cambio visual adicional, como la aparición de un círculo, un icono, un texto o una imagen. Este efecto interactivo aumenta el atractivo visual y también motiva al usuario a explorar el contenido de la página de forma más activa.

Muchos sitios web quieren seguir el recorrido de un usuario por una página, y los visitantes tienden a utilizar el ratón sólo cuando necesitan desplazarse por la página, lo que dificulta determinar con precisión en qué se está centrando el usuario. Una vez activado el efecto hover, los visitantes moverán el ratón con más frecuencia durante el proceso de navegación, lo que dará lugar a datos de comportamiento más intuitivos.

Plugin necesario para añadir el efecto de cursor hover del ratón

Para activar esta función, es necesario instalar primero los siguientes plug-ins:

• Elementor
• HappyAddons

El efecto puede aplicarse a toda la página, o puede configurarse individualmente para algunos elementos concretos. A continuación se describen las dos formas distintas de configurarlos.

Tutorial 1: Activar el efecto de cursor flotante para toda la página

De este modo, todos los elementos de la página mostrarán el mismo efecto de cursor flotante de manera uniforme.

Paso 1: Activar la opción Cursor del Ratón Feliz (sin seleccionar ningún elemento)

Sin comprobar ninguna páginaelementalSi desea utilizar la configuración de "Cursor del ratón feliz", abra el editor de Elementor, haga clic en la pestaña "Configuración" del panel, expanda el área de configuración de "Cursor del ratón feliz" y active "Activar Ratón Feliz".

El ratón por defecto en la página será ahora un cursor circular.

Paso 2: Activar el seguimiento dinámico Lazy Move

Cuando la opción "Activar movimiento perezoso" está activada, el efecto del cursor seguirá la posición real del ratón de forma retardada y curva.

Paso 3: Activar el modo de mezcla Mix Blend

Por defecto, el cursor bloqueará el contenido situado detrás de él. Con la opción "Activar mezcla de colores" activada, puedes configurar el color de mezcla para que el fondo del cursor sea transparente y se funda con la página, de forma similar al efecto visual de una lupa.

Paso 4: Cambiar el estilo predeterminado del cursor

Si no desea utilizar el modo de mezcla, puede desactivar la opción "Activar mezcla" y personalizar el fondo predeterminado del cursor eligiendo cualquier color en "Color de fondo".

Paso 5: Configurar el tamaño del cursor, los bordes y las esquinas

Los valores de tipo de borde, anchura, color y esquinas redondeadas del cursor pueden ajustarse según sea necesario para crear un estilo único.

Tutorial 2: establecer el efecto del cursor del ratón para el elemento especificado

Las páginas web suelen constar de varios elementos, y se pueden activar distintos efectos de cursor individualmente para módulos específicos.

Paso 1: Seleccione el elemento y active Cursor Ratón Feliz.

Haga clic en cualquier contenedor o elemento de la página, busque "Cursor del ratón feliz" en su panel Diseño y active la opción correspondiente.

Paso 2: Seleccionar el tipo de cursor

Se admiten los cinco estilos de cursor siguientes:

• estilo de redacción
• color
• icono (informática)
• fotografía
• vídeo

Cada tipo puede ser estilizado individualmente. Cuando se activa por defecto, es el tipo "Texto".

Explicación del estilo del cursor

Tipo de texto (Texto)

Entre en el campo "Texto del cursor" y rellene el texto que desea visualizar. Puede ajustar el color de la fuente ytipográfico.

Si quieres que el fondo sea más flexible, también puedes activar Desenfocar para establecer el grado de desenfoque y la opacidad.

Además, se pueden ajustar parámetros como la anchura, la altura, las sombras, los márgenes, los bordes, etc.

Tipo de color (Color)

Tras seleccionar "Color", basta con ajustar elcolor de fondoSi quieres crear un efecto de cursor de color sólido, puedes hacerlo.

Tipo de icono (Icono)

Cambie a "Icono" y haga clic en el área de iconos para seleccionar uno integrado.icono (informática). También puede personalizar el color y el tamaño del icono después de insertarlo.

El resto de los estilos como tamaño, borde, sombra y otros ajustes son comunes a todos los tipos.

Tipo de imagen (Imagen)

Después de cambiar al tipo "Imagen", cargue imágenes desde la biblioteca multimedia o local y establezca "Ajuste de objeto" en Relleno.

Los ajustes opcionales incluyen ángulo de rotación de 360º, tamaño personalizado, borde y transparencia.

Tipo de vídeo (Vídeo)

Después de seleccionar el tipo "Vídeo", cargue un vídeo como fondo del cursor y establezca el tamaño y el modo de adaptación del diseño. Verás en el lienzo en directoefecto dinámico.

Después de completar la configuración, se recomienda comprobar los resultados en la página principal para ver si son los esperados.

Escenarios de aplicación del efecto cursor al pasar el ratón por encima

Esta funcionalidad interactiva puede adaptarse con flexibilidad a cualquier Elementor sitio web, combinado con el diseño de las páginas para lograr efectos visuales más atractivos y reacciones interactivas:

• Aumenta la diversión del proceso de desplazamiento: Cree una experiencia más dinámica con animaciones de desplazamiento.
• Mostrar información adicional: Transmite consejos a través de imágenes, vídeos o cursores de texto, de forma similar a los tooltips.
• Optimizar la estética de la páginaUtilizar un estilo de cursor especial para personalizar la página
• Contenidos más interactivos: Los elementos estáticos con efectos hover conducen a una navegación más profunda.
• Orientación visual: Cambia el color del cursor o del borde del botón para indicar el área de operación.
• Análisis conductual complementario: El seguimiento de la posición del cursor ayuda a evaluar las preferencias del usuario y el interés de los contenidos.

Preguntas frecuentes

P: ¿Cuántos efectos de cursor tiene Elementor?
R: HappyAddons ofrece cinco tipos: texto, colores, iconos, imágenes y vídeos.

P: ¿Puedo añadir efectos hover a las imágenes?
R: Claro. El estilo del cursor se puede configurar individualmente para cada módulo de imagen.

P: ¿Tengo que optimizar este efecto para dispositivos móviles?
R: Se recomienda activar el ajuste Modo de respuesta para elegir si se activa o no el efecto según el tipo de pantalla.

P: ¿Afecta a la velocidad del sitio activar el efecto hover?
R: HappyAddons está implementado de forma ligera, pero se recomienda habilitarlo tras evaluar la complejidad del sitio.

resúmenes

con respecto a Elementor El efecto del cursor del ratón ya está completo. Si crees que hay algo más que merezca la pena añadir, no dudes en dejarlo en la sección de comentarios y lo incluiremos en una próxima actualización.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres