Cursor personalizado (por elemento)
El cursor personalizado en sí es una función de todo el sitio — su estilo, tamaño, colores,
estela y efecto de clic viven todos en un único lugar; consulta
Ajustes del cursor personalizado para esa parte.
Esta página trata sobre lo que puedes hacer por elemento, una vez que el cursor de todo el
sitio está activado: atributos HTML planos (sin prefijo data-) que cambian lo que muestra el
cursor mientras está sobre un elemento concreto.
Con la función de todo el sitio desactivada, estos controles por elemento ni siquiera aparecen en el builder, y los atributos no hacen nada en el front end.
El cursor personalizado nunca se ejecuta en dispositivos táctiles, por debajo del tamaño mínimo de pantalla configurado en el sitio, en wp-admin, ni dentro de los lienzos (canvas) del builder de Bricks o Etch. Compruébalo siempre en el front end publicado, con un ratón.
Míralo en acción: Custom cursor en fancyanimations.com.
Atributos
| Atributo | Efecto mientras el puntero está sobre el elemento |
|---|---|
| Cursor text | El cursor crece y muestra este texto |
| Text size | Sobrescribe el tamaño de texto por defecto del sitio, en px |
| Text box size | Sobrescribe el tamaño de caja del cursor mientras muestra texto, en px |
| Cursor image | El cursor muestra esta imagen en lugar de texto |
| Image size | Sobrescribe el ancho de imagen por defecto del sitio, en px |
| Image aspect ratio | Sobrescribe la proporción por defecto del sitio, p. ej. 16 / 9 |
Una imagen gana al texto si ambos están definidos en el mismo elemento. Ninguno de los dos se muestra si el estilo de cursor de todo el sitio está puesto en solo-punto (dot-only). Los enlaces y botones reciben automáticamente el efecto hover del sitio — no necesitas fijar nada para eso.
- Bricks
- Etch
- Gutenberg
Pestaña Style → Custom Cursor: Cursor text, Text size, Text box size, Cursor image (elige desde la biblioteca de medios o pega una URL), Image size, Image ratio. Los campos de tamaño y caja solo tienen efecto una vez que el campo de texto/imagen correspondiente también está definido.
Define los atributos directamente en el elemento desde el panel Fancy → Cursor.
Con la función de todo el sitio activada, el panel Custom Cursor de la barra lateral del bloque tiene los mismos campos de texto/imagen/tamaño/proporción, guardados como los atributos de arriba.
Selectores de segmentación de todo el sitio
Estos tres selectores se configuran una sola vez, para todo el sitio (consulta Ajustes del cursor personalizado) — añade la clase correspondiente a cualquier elemento con el que quieras activarlos:
| Selector por defecto | Añade esta clase a… |
|---|---|
.cursor-invert | Una sección oscura, para que el cursor cambie ahí a su esquema de color invertido |
.disable-cursor (los inputs y textareas ya están excluidos por defecto) | Un elemento donde deba mostrarse el cursor nativo del sistema en su lugar |
.disable-hover-cursor | Un enlace o botón que no deba disparar el efecto hover del cursor |
Confirma siempre los selectores reales del sitio en Ajustes del cursor personalizado antes de confiar en estos valores por defecto — son totalmente editables por sitio.
Vídeo explicativo
Problemas comunes
- No pasa nada al probarlo en el builder. El cursor personalizado nunca se carga dentro del lienzo de Bricks o Etch, por diseño — pruébalo en el front end, en un escritorio con ratón.
- El cursor desaparece por completo sobre un campo de formulario. Los inputs y textareas están excluidos del cursor personalizado por defecto, a propósito.
- Un atributo parece no hacer nada. Comprueba que no tenga prefijo
data-— estos son atributos HTML planos, no atributosdata-*.