¿Cómo personalizar el cursor del ratón en su sitio?

¿Quiere que su sitio web esté personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasan por encima de un enlace, el cursor está totalmente personalizado:

Puedes utilizar emojis o incluso tu logotipo para crear una imagen de marca. Además, es tan fácil que, incluso sin conocimientos, conseguirás un resultado inmediato en menos de 5 minutos...

¡Vamos!

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Por qué personalizar el cursor del ratón?

Creo que lo mejor de crear un sitio web es personalizar el diseño. Con un poco de imaginación y algo de conocimiento, puedes hacer cualquier cosa... También es el objetivo de Divi Tips darte todas las claves para conseguirlo. Sin embargo, hay un tema que aún no se ha tratado aquí: los cursores de ratón personalizados.

La buena noticia es que el siguiente tutorial es adecuado para todos los sitios: WordPress con o sin Divi, ¡e incluso sitios que no son de WordPress!

Entonces, ¿por qué personalizar los deslizadores? Simplemente a :

• No deje ninguna piedra sin remover,
• para añadir algo de diversión,
• crear asombro
• y, si se hace bien, mejorar la experiencia del usuario.

Aquí hay 4 buenas razones para implementar esto en su sitio.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

2 - El video tutorial

Para empezar, te sugiero que veas el vídeo que lo explica todo, luego encontrarás los detalles en el resto del artículo...

3 - Cree su deslizador personalizado en 3 pasos

No necesitas ninguna habilidad para crear tu propio deslizador personalizado, pero lo más difícil es elegir la imagen adecuada. Además, es probable que necesites un programa de edición de imágenes para establecer el tamaño adecuado.

3.1 - Prepare sus imágenes

No olvides que la imagen debe tener un fondo transparente para obtener una mejor representación = utiliza .png.

Si quieres utilizar emojis, dirígete a un sitio que te permita descargar el emoji en PNG. No todos lo hacen, pero sugiero Emojipedia.org.

Puede utilizar su(s) logotipo(s).

El tamaño ideal parece ser entre 25px y 32px de ancho.

Una vez que tengas tus imágenes, puedes subirlas a la biblioteca multimedia de tu sitio.

3.2 - Defina sus clases CSS

Ahora ve a la Apariencia > Personalizar > CSS adicional y añada el código siguiente para crear su clase CSS:

/* changer l'apparence du curseur */

.my-cursor {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

También puede crear varias clases CSS para utilizar varios deslizadores personalizados en su sitio, por lo que se vería así:

/* changer l'apparence du curseur */

.cursor-loupe {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-licorne {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-curieux {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

.cursor-fusee {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

Vaya aquí para saber más sobre añadir código a su sitio web.

Por supuesto, no olvides introducir la URL de tu imagen. Para encontrarla, ve a la biblioteca de medios en modo "cuadrícula", haz clic en la imagen y luego copia su URL en el portapapeles. A continuación, péguelo en el código de su clase CSS.

3.3 - Personalizar los enlaces

Ahora aplique su clase a algunos enlaces dentro de su texto.

1. Inserte un enlace en su texto, como de costumbre.
2. Cambiar el editor al modo "Texto"
3. Ajoutez votre classe CSS au sein de la balise <a> (balise de lien). Notez qu’ici on saisit <strong><em>class= »cursor-loupe »</em></strong> et non <strong><em>class= ».cursor-loupe »</em></strong>. Il convient donc de ne pas mettre le point « . » devant le nom de la classe.

¡Eso es! El cursor del ratón se personaliza completamente cuando se pasa por encima de un enlace.

4 - ¡Personaliza el cursor de todos tus enlaces!

Otra posibilidad es que no quiera editar todos sus enlaces para añadir una clase CSS. No quieres personalizar ALGUNOS de tus enlaces sino TODOS.

Dans ce cas, vous n’avez pas besoin de créer de classe CSS, vous devez directement agir sur la balise HTML <a>.

Ir a la pestaña Apariencia > Personalizar > CSS adicional y añada el código siguiente para cambiar el deslizador en todo el sitio:

/* changer l'apparence du curseur sur tous les liens du site */

a {	
cursor:url(URL DE VOTRE IMAGE),auto;
}

Ahora todos los enlaces de su sitio tendrán un cursor personalizado al pasar por encima.

5 - Personalizar el cursor en todo el sitio (siempre visible)

Los cursores personalizados pueden ser divertidos, y yo me divertí mucho. Sin embargo, si has visto mi vídeo de presentación del sitio deIrregular Choice, habrás notado que el cursor del ratón era una varita mágica y que era diferente al pasar el ratón por encima de los enlaces.

Si quieres cambiar el cursor del ratón en todo tu sitio, incluso cuando el usuario no está pasando por encima de los enlaces, entonces debes utilizar este código:

/* changer l'apparence du curseur sur tout le site */

* {
cursor:url(URL DE VOTRE IMAGE),auto;
}

Pero ten cuidado, al hacer esto reduces la experiencia del usuario, ya que tu visitante no verá ninguna diferencia al pasar por encima de los enlaces y no sabrá si puede hacer clic, por lo que deberías establecer un estado del cursor para todo el sitio y un estado diferente al pasar por encima de los enlaces (usando 2 imágenes) :

/* changer l'apparence du curseur sur tout le site (UX) */

* {
cursor:url(URL IMAGE 1),auto;
}

a {	
cursor:url(URL IMAGE 2),auto;
}

¡Eso sí que es costumbre 😉 !

No se demore. Descubra el tema Divi aquí !

6 - O bien, utilice una extensión

Por supuesto, también hay extensiones que le permiten implementar un deslizador personalizado dentro de su sitio. Seguramente encontrará más opciones de personalización, pero ¿merece la pena? Es cuestión de ver (y probar):

7 - ¡Toma tus cursores!

Bueno, ¡eso es todo! Con un poco de CSS se pueden hacer grandes cosas, ¡ya lo sabes! Pero también hay otras formas de modificar el cursor del ratón en su sitio, especialmente en JavaScript...

Para ir más allá, he aquí una lista de lecturas:

• Lista de todos los estados del cursor disponibles de forma nativa
• Cómo añadir un slider estilizado e invertido a tu página Divi
• Entender cómo cambiar el cursor del ratón
• Cómo convertir el cursor en un botón al pasar por encima de un elemento usando Divi
• Cambia el cursor del ratón sólo para tu ordenador (no para su sitio)
• Cómo cambiar una imagen al pasar por encima con Divi

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !