Cómo agregar el efecto de desplazamiento del cursor en el sitio web de Elementor

La impresión y la experiencia del usuario son dos factores cruciales en el diseño de cualquier sitio web. Incluso un pequeño detalle puede marcar una gran diferencia. Sin embargo, hoy en día se pasa por alto una característica poderosa en el diseño web: el efecto de desplazamiento del cursor. Este elemento interactivo puede mejorar notablemente la estética de su sitio.

El efecto de desplazamiento del cursor no solo agrega una capa de atractivo visual, sino que también funciona como una herramienta de ayuda para guiar a los visitantes a explorar su contenido. Esto puede conducir a una mayor participación y satisfacción del usuario. Y puede lograrlo fácilmente en su sitio de WordPress usando Elementor y HappyAddons.

HappyAddons es un complemento poderoso para el complemento Elementor. Le permite personalizar y habilitar esta función en su sitio Elementor. En este artículo, cubriremos una guía paso a paso sobre cómo agregar el efecto de desplazamiento del cursor en sitios web de WordPress. ¡Empieza!

¿Qué es el efecto de desplazamiento del cursor en un sitio web?

El efecto de desplazamiento del cursor se refiere a un cambio visual que se produce cada vez que un usuario pasa el cursor sobre una página web. El cursor viene con un elemento adicional, como un círculo, icono, texto o imagen, que se muestra justo debajo del puntero del cursor cada vez que se desplaza sobre el sitio web.

Una de las formas más importantes en que cualquier sitio comercial analiza y comprende a sus usuarios es realizar un seguimiento de sus actividades en la interfaz web. Pero la mayoría de los usuarios no usan mucho el cursor a menos que tengan que desplazarse por la página, lo que dificulta que el propietario de la web evalúe en qué productos o información en particular se centran los clientes potenciales.

Una vez que habilite el efecto de desplazamiento del cursor, será más probable que los usuarios desplacen el cursor mientras exploran su sitio. En las siguientes partes de este artículo, explicaremos cómo agregar el efecto de desplazamiento del cursor en los sitios web de Elementor.

Cómo agregar el efecto de desplazamiento del cursor en el sitio web de Elementor

Para agregar esta función, debe utilizar los siguientes complementos. Una vez que estén instalados y activados en su sitio, puede seguir los pasos explicados en el tutorial a continuación.

• Elementor
• HappyAddons

Puede habilitar el efecto de desplazamiento del cursor en toda su página o configurar diferentes efectos por separado para cada elemento de la página. En el siguiente tutorial, los exploraremos todos.

Tutorial uno: habilite el efecto de desplazamiento del cursor en toda la página

En este caso, el efecto de desplazamiento del cursor que configure se mostrará de manera uniforme para todos los elementos de la página. Explora cómo hacerlo.

Paso 01: Vaya a la opción Cursor Happy Mouse (sin seleccionar ningún elemento web)

No seleccione ningún elemento web ya que habilitará el efecto de desplazamiento del cursor en toda su página.

Simplemente navegue hasta la pestaña Configuración en el panel de Elementor. Expanda la sección Cursor Happy Mouse . Active Habilitar cursor Happy Mouse .

Una vez que esta función esté habilitada, verá un efecto de desplazamiento predeterminado mientras mueve el cursor en la página web, como se muestra en el video a continuación. El cursor aparecerá como un icono circular simple.

Paso 02: habilite el movimiento diferido

Habilitar la función Lazy Move permitirá que el efecto seleccionado siga al cursor, manteniendo una ligera distancia y un movimiento curvo.

Simplemente active la opción Habilitar movimiento lento .

Paso 03: habilite la opción Mezclar mezcla

De forma predeterminada, cuando pasa el cursor por defecto, el contenido detrás de él se vuelve invisible a medida que se cubre. Habilitar la opción Mezclar Mezcla le permitirá ver qué hay detrás del cursor.

Entonces, active la opción Habilitar mezcla de mezcla . Luego, seleccione un color de la opción Mezclar color de fusión . Combinará dinámicamente el color del cursor, ajustándolo según la página respectiva sobre la que pase el cursor.

Esto creará un efecto como de lupa.

Paso 04: cambie el efecto de desplazamiento del cursor predeterminado

Incluso puedes cambiar el efecto de desplazamiento del cursor predeterminado sin depender de la opción de mezcla. Para hacer esto, primero desactive la opción Habilitar mezcla .

Luego, seleccione un color para la opción Color de fondo . Esto cambiará inmediatamente el color del efecto de desplazamiento del cursor predeterminado.

Paso 04: personaliza el tamaño, el borde y el radio del cursor

Puede personalizar el tipo de borde, el ancho del borde, el color del borde y el radio del borde para el efecto de desplazamiento del cursor.

HappyAddons tiene un widget Hover Box que le permite crear una sección web interactiva. Explore cómo utilizar el widget Hover Box de HappyAddons.

Tutorial dos: habilite el efecto de desplazamiento del cursor en un elemento web específico

Cualquier página web se compone de varios elementos web. Puede habilitar el efecto de desplazamiento del cursor por separado para cada elemento. Esto significa que solo se mostrarán efectos específicos al pasar el cursor sobre elementos web particulares. Veamos cómo hacerlo.

Paso 01: seleccione un elemento y habilite el cursor feliz del mouse

Seleccione cualquier elemento haciendo clic en su contenedor. Luego, navega hasta Diseño > Happy MouseCursor . Active la opción Habilitar cursor Happy Mouse .

Paso 02: seleccione un tipo de cursor

Esta función le permite elegir entre cinco tipos de efectos de cursor. Ellos son:

• Texto
• Color
• Icono
• Imagen, y
• Video .

Cada tipo viene con sus propias opciones de estilo. De forma predeterminada, el tipo de cursor de texto se selecciona automáticamente cuando habilita esta opción.

Ahora, el efecto del cursor se mostrará solo cuando coloque el cursor sobre el elemento web específico. Lo hemos mostrado como por ejemplo en el vídeo clip a continuación.

Exploremos ahora todos los tipos de cursor en las siguientes secciones, descubriendo las cosas que puede hacer con las opciones disponibles.

# Tipo de texto

Esperamos que tenga seleccionado el Tipo de cursor de texto , ya que viene de forma predeterminada cuando la opción Happy Mouse Cursor está habilitada.

Cambiar el texto del cursor:

Vaya a la opción Texto del cursor y escriba las palabras que desea que se muestren en el cursor. Después de eso, puedes cambiar el color del texto y la tipografía como desees.

Desenfoque el fondo del cursor:

De forma predeterminada, se muestra un color muy plano en el fondo del cursor. Pero para obtener más estilo, puede desenfocar el fondo del cursor activando la opción Habilitar desenfoque .

Luego, puedes cambiar la intensidad del desenfoque y la opacidad del color de fondo.

Estilizar el cursor flotante :

Una vez realizadas las partes anteriores, puede personalizar el ancho, el alto, la sombra del cuadro, el relleno, el tipo de borde y el radio del borde del cursor. Espero que puedas hacer estas personalizaciones tú mismo.

# Tipo de color

Este es un tipo de cursor muy simple. Le permite mostrar un color plano simple en lugar del icono del cursor. Elija Color en el Tipo de cursor.

Ahora, ve a la opción Color de fondo. Seleccione el color que desee mostrar como tipo de cursor de color.

# Tipo de icono

De la misma manera, seleccione el Tipo de cursor de icono . Se mostrará un icono predeterminado en un círculo como puede ver en la imagen a continuación.

Cambiar icono:

Para cambiar el icono, haga clic en la sección marcada en la imagen a continuación.

Se abrirá la biblioteca de iconos. Seleccione un icono que le guste para el cursor. Presione el botón Insertar después

Después de eso, puede cambiar el color y el tamaño del icono para el efecto de desplazamiento del cursor.

El resto de opciones (ancho, alto, desenfoque, relleno, radio, tipo de borde, etc.) son iguales para todos los tipos de cursor. Entonces, no lo explicaremos nuevamente aquí.

# Tipo de imagen

Ahora, cambie al tipo de Cursor de imagen .

Haga clic en la sección marcada a continuación. Esto le permitirá cargar una imagen desde la unidad local o la biblioteca multimedia.

Puede ver la imagen que hemos agregado para el efecto de cursor flotante. Las opciones adicionales que vienen con esta función son Ajuste de objeto y Rotación 360 .

Elija Relleno para la opción Ajuste de objeto . Si deseas mostrar la imagen ligeramente inclinada, establece un valor en la opción Girar 360 .

Después de eso, personalice el ancho, el alto, el tipo de borde, el radio del borde, la opacidad y otras opciones que desee para el tipo de cursor al pasar el cursor.

# Tipo de vídeo

Ahora, cambie al tipo de vídeo del cursor en la lista desplegable.

De manera similar a los tipos de íconos e imágenes, agregue un video desde la opción Elegir video para el cual desea usar el efecto de desplazamiento del cursor.

Luego, cambie el tamaño y ajuste el objetivo usando las opciones respectivas como se muestra arriba. Verás los cambios en el lienzo en tiempo real.

Una vez hecho esto, vaya a la página de vista previa y vea si el cursor funciona perfectamente. Espero que todo funcione bien. Por lo tanto, puede habilitar diferentes efectos de desplazamiento por separado para elementos web que coincidan perfectamente con el tipo de contenido.

Sin embargo, si tiene algún problema, puede comunicarse con nuestro equipo de soporte a través del cuadro de chat en vivo. Estamos listos para brindar cualquier tipo de ayuda con respecto al complemento HappyAddons. Aprenda a crear un sitio web profesional con Elementor.

Casos de uso del efecto de desplazamiento del cursor

El efecto de desplazamiento del cursor es un componente flexible. Se puede modificar para adaptarlo a los requisitos y la marca de cualquier sitio web de Elementor. Cuando se aplica, puede garantizar la mejor experiencia de usuario, participación y datos posibles para mejorar el sitio. Eche un vistazo rápido a cómo el efecto de desplazamiento del cursor hace esto en su sitio web.

• Experiencia atractiva de desplazamiento de página

Agregar efectos de desplazamiento es útil para mantener interactiva la experiencia de desplazamiento. A través de activadores visuales o animaciones, puede brindar a los usuarios un desplazamiento más agradable.

• Mostrar información adicional/navegación

Puede mostrar información adicional a través de efectos de desplazamiento de texto, imágenes y videos. También puede utilizarlos para proporcionar una guía de navegación sin saturar el vídeo principal, como si fuera una información sobre herramientas.

• Mejorar la estética

Los efectos de desplazamiento bien diseñados pueden hacer que un sitio web se vea y funcione mejor. Pequeñas animaciones o estilos de cursor pueden hacer que la interfaz sea interesante y memorable.

• Haga que el contenido web sea más interactivo

Los efectos de desplazamiento pueden convertir elementos web estáticos en interactivos para atraer a los usuarios a una visita más profunda a la página. Esto puede generar más interacción y visitas a la página.

• Proporcionar señales visuales

Los efectos de desplazamiento pueden notificar visualmente al usuario si se hace clic o no en algo o resaltar información. Esto puede mejorar la experiencia general del usuario. Por lo tanto, puedes cambiar el color del cursor o poner un brillo tenue alrededor de un botón para indicar que se está moviendo.

• Seguimiento de la participación del usuario

Al realizar un seguimiento de las funciones sobre las que los usuarios pasan el cursor, puede conocer los hábitos y preferencias de los usuarios. Puede proporcionar información que puede utilizarse para tomar decisiones futuras de diseño y contenido.

Preguntas frecuentes sobre el efecto de desplazamiento del cursor en el sitio web de Elementor

Espero que estés disfrutando de esta discusión. En esta sección, cubriremos las respuestas a algunas preguntas que podrían surgirle al leer esta publicación.

Conclusión

Espero que a estas alturas de la discusión no quede nada nuevo que decir o explicar. Todo lo que hay que decir ya se ha cubierto anteriormente. Sin embargo, si cree que nos hemos perdido algún punto importante, menciónelo en el cuadro de comentarios.

Lo cubriremos en la próxima actualización de la publicación. Sin embargo, si está interesado en HappyAddons, encontrará una gran colección de publicaciones de tutoriales en nuestra página de archivo. También encontrará toda la documentación necesaria sobre cada una de las funciones y widgets de nuestros productos.

Sigue explorándolos y disfruta de un feliz diseño web.