¿Estás buscando una manera de personalizar aún más tu sitio web hecho con Divi? En este tutorial premium de uxdivi te voy a enseñar a crear un cursor personalizado que reemplaza el puntero estándar del navegador por un círculo con un punto interior que sigue al mouse con un efecto magnético muy elegante. Es un detalle pequeño, pero de esos que hacen que un sitio se sienta cuidado y diferente al resto.
La técnica combina código CSS y JavaScript, y lo bueno es que no necesitas ningún plugin para lograrlo. Son apenas dos snippets —uno que crea la función del cursor y otro que le da los estilos— y un par de pasos de configuración dentro de Divi. En esta guía te explico el proceso completo, qué hace cada parte del código y, sobre todo, qué valores tienes que tocar para adaptar el cursor al diseño de tu sitio.
Qué vamos a construir y cómo funciona
El cursor por defecto de un sitio Divi es funcional pero anónimo: una flechita o un puntito que casi ni se nota. Lo que vamos a hacer es ocultar ese cursor nativo y dibujar en su lugar dos elementos que siguen al mouse. El primero es un punto sólido que acompaña al puntero con precisión. El segundo es un círculo más grande que persigue al punto con un ligero retardo, lo que genera ese efecto magnético tan agradable a la vista.
Técnicamente la mecánica es simple. Un fragmento de JavaScript escucha el movimiento del mouse en la ventana y, en cada movimiento, actualiza la posición de los dos elementos para que sigan al cursor. El CSS se encarga del resto: define el tamaño, el color, la forma circular y —el detalle clave— una transición que se aplica solo al círculo para que llegue un instante después que el punto. Esa diferencia de tiempo es la que crea la sensación de "imán".
Consejo: antes de empezar, ten claro el color de acento de tu marca. El cursor personalizado funciona mejor con un color que haga buen contraste tanto en fondos claros como oscuros. Un tono neutro, como un naranja tirando a café, suele verse bien en casi todo el sitio sin pelearse con los fondos.
Paso 1: Inserta el script en la integración de Divi
El primer snippet es el JavaScript que da vida al cursor. Lo vamos a pegar en la zona de integración de Divi, que es el lugar donde Divi te permite inyectar código en el <head> de todo el sitio. Sigue esta ruta:
- Ve a Divi > Opciones del tema > Integración.
- Pega el código del script en el cuadro que inyecta código en el
<head>de tu blog. - Te recomiendo ponerle un comentario de título, como "Cursor personalizado en Divi UXDIVI-1", para tenerlo identificado si luego agregas más cursores.
Ese script contiene dos div que crean los elementos del cursor —el círculo y el punto, cada uno con su clase— y un bloque de JavaScript que, cuando carga la página, hace que esos elementos sigan la posición del mouse usando jQuery. Si pegas solo el script y recargas, no verás ningún cambio todavía: eso es normal, porque falta el CSS que les da forma y visibilidad. Encuentras el código JS completo en la zona de recursos premium al final de este tutorial.
Paso 2: Agrega el CSS y personaliza tamaño y color
Para que el cursor aplique en todo el sitio, el CSS va en el CSS personalizado de Divi. Ve a Divi > Opciones del tema > General y pega el snippet en el cuadro de CSS personalizado (al igual que con el script, ponle un título tipo comentario para mantenerlo ordenado). Apenas guardes y recargues, el cursor nativo desaparece y aparecen el punto y el círculo siguiendo al mouse.
El snippet está construido con variables CSS justamente para que la personalización sea trivial. No necesitas tocar toda la hoja de estilos: solo hay cuatro valores que realmente te interesa cambiar, y están agrupados al inicio de la clase .cursor:
--tamano-punto: el diámetro del punto interior. En el ejemplo lo subí de 8 a 12 píxeles.--tamano-circulo: el diámetro del círculo exterior. Lo llevé de 40 a 60 píxeles para que el efecto magnético se note más.--color-punto: el color del punto. Aquí va tu color de acento en hexadecimal.--color-ciculo: el color del borde del círculo. Normalmente lo igualas al color del punto para que todo converse.
Cambiando solo esos cuatro valores tienes el control total sobre cómo se ve tu cursor. El resto del CSS —el redondeado, el posicionamiento absoluto, el z-index alto y la transición— ya viene resuelto y no necesitas tocarlo a menos que quieras experimentar.
El truco del color que funciona en fondos claros y oscuros
Acá está el detalle que separa un cursor personalizado bonito de uno que da problemas. Como el cursor es de un solo color, en las secciones oscuras de tu sitio un cursor claro casi no se ve, y al revés. La solución no es complicar el código, sino elegir bien el color: busca un tono medio que haga contraste razonable contra blanco y contra negro. En el video usé una herramienta tipo cuentagotas (ColorZilla) para tomar un naranja neutro del propio diseño, y al ser un color intermedio se veía correcto en botones oscuros, fondos oscuros y fondos claros por igual.
Consejo: evita el negro puro o el blanco puro para el cursor. Esos extremos garantizan que en la mitad de tu sitio el cursor desaparezca. Un color de marca con saturación media es la apuesta segura.
Detalles de usabilidad que no debes pasar por alto
Un cursor personalizado es vistoso, pero como reemplaza al cursor nativo del navegador tienes que asegurarte de no romper la experiencia de uso. El snippet ya contempla esto: incluye una regla para que los enlaces conserven el comportamiento de "manita" (cursor: pointer) al pasar por encima, de modo que el usuario siga entendiendo qué es clicable. Aun así, conviene que pruebes la navegación completa después de aplicarlo.
Verifica que al hacer clic en botones, enlaces y campos de formulario todo responda con normalidad —que es justamente lo que pasa, porque solo cambiamos la apariencia visual del cursor, no su funcionalidad—. Y ten presente que en dispositivos táctiles no hay cursor, así que este efecto solo aplica en escritorio. No es un problema, pero sí algo que vale la pena saber: el cursor personalizado es una mejora estética para quienes navegan con mouse, no una funcionalidad que afecte a usuarios móviles.
Si quieres profundizar en cómo manipular elementos del DOM y reaccionar a eventos del usuario como el movimiento del mouse, este tutorial es una excelente puerta de entrada. Aprender a usar JavaScript te abre la puerta a este tipo de personalizaciones avanzadas que van mucho más allá de lo que ofrece el constructor visual por sí solo.
Preguntas frecuentes sobre el cursor personalizado en Divi
¿Este cursor personalizado afecta el rendimiento del sitio?
El impacto es mínimo. El script escucha el evento de movimiento del mouse y actualiza la posición de dos elementos, una operación muy ligera para los navegadores modernos. No carga imágenes pesadas ni librerías adicionales más allá de jQuery, que Divi ya incluye. Para un sitio estándar no notarás ninguna diferencia de velocidad.
¿Puedo cambiar la velocidad del efecto magnético?
Sí. El retardo con el que el círculo persigue al punto está definido por la propiedad transition dentro de la clase .cursor.cursor-circulo. Si subes ese tiempo, el círculo tardará más en alcanzar al punto y el efecto se sentirá más "elástico". Si lo bajas, el círculo seguirá al cursor casi pegado. Experimenta con valores pequeños hasta encontrar la sensación que más te guste.
¿Funciona con cualquier tema o solo con Divi?
El código en sí es JavaScript y CSS estándar, así que conceptualmente funciona en cualquier sitio WordPress. Lo que cambia es dónde pegar el código: en este tutorial usamos la zona de integración y el CSS personalizado de Divi porque es lo más cómodo. En otro tema tendrías que inyectar el script en el <head> con otro método (un plugin de snippets, por ejemplo) y el CSS en su personalizador.
¿Tengo que tocar el JavaScript para personalizar el cursor?
No. Toda la personalización visual —tamaño y color del punto y del círculo— se hace desde las cuatro variables CSS al inicio del snippet de estilos. El JavaScript se deja tal cual: su única función es hacer que los elementos sigan al mouse. Esa separación entre lógica (JS) y apariencia (CSS) es lo que hace que el cursor sea tan fácil de adaptar.
Conclusión
Un cursor personalizado es una de esas microinteracciones que aportan personalidad a un sitio web sin un gran esfuerzo de implementación. Con dos snippets —uno de JavaScript para la función y otro de CSS para los estilos— y un par de minutos de configuración en Divi, logras un puntero con efecto magnético que diferencia tu sitio de la competencia. Y como toda la personalización vive en cuatro variables CSS, adaptarlo al color y al tamaño que pida tu diseño es cuestión de segundos.
Este es solo el primer cursor de la serie —por eso lo llamamos UXDIVI-1—, así que en próximos tutoriales exploraremos variantes con más efectos. Si te animaste a probarlo, cuéntame en los comentarios cómo te quedó y qué color elegiste para tu marca. Y si quieres llevar tus habilidades con código al siguiente nivel para crear este tipo de efectos por tu cuenta, te invito a explorar los cursos de uxdivi.com.
¿Eres miembro premium de UXDIVI? Checá acá abajo los recursos del tutorial 👇
/* CSS para cursor personalizado UXDIVI-1*/
* {
cursor: none;
}
.cursor {
--tamano-punto: 12px;
--tamano-circulo: 60px;
--color-punto: #e9a245;
--color-ciculo: #e9a245;
border-radius: 50%;
position: absolute;
z-index: 100000;
transform: translate(-50%, -50%);
pointer-events: none;
}
.cursor.cursor-circulo {
height: var(--tamano-circulo);
width: var(--tamano-circulo);
background-color: transparent;
border: 1px solid var(--color-ciculo);
transition: top .2s, left .2s;
transition-timing-function: ease-out;
}
.cursor.cursor-punto {
height: var(--tamano-punto);
width: var(--tamano-punto);
background: var(--color-punto);
}
a {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
Comentarios
Para dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →