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

Publicado el 19/10/2021 | 0 comentarios

¿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:

curseur souris personnalisé
Cree sus propios cursores de ratón

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

Anuncio: 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, para 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 - Definir las 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.

url des medias
Recupera la URL de la imagen para personalizar tu slider.

3.3 - Personalizar los enlaces

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

ajouter classe css
Asigne una clase CSS a uno de sus enlaces.
  1. Inserte un enlace en su texto, como de costumbre.
  2. Cambiar el editor al modo "Texto"
  3. Añade tu clase CSS dentro de la etiqueta (etiqueta de enlace). Tenga en cuenta que aquí se introduce class="cursor-loupe" y no class= ".cursor-loupe". Por lo tanto, es aconsejable no poner el punto "." delante del nombre de la clase.

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

4 - ¡Personaliza el cursor en 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.

En este caso, no es necesario crear una clase CSS, hay que actuar directamente sobre la etiqueta HTML .

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 usar 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 esperes más. 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):

plugins custom cursor
Encuentre todos los extensiones deslizantes personalizadas aquí.

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:

¿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 eficiente con mi formación en Divi !

1.140 palabras

5

A ti también te debería gustar:

La bibliothèque des Snippets pour Divi

La biblioteca de fragmentos para Divi

Este artículo le ofrece un resumen de fragmentos de código que puede copiar y pegar en su sitio para arreglar algunos detalles visuales/gráficos. Te va a encantar.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto