Custom cursor settings
En wp-admin: Fancy Animations → Cursor. Sustituye el puntero del sistema en el front end por un cursor personalizado, en todo el sitio. Una vez activado, cada elemento puede personalizar lo que muestra el cursor sobre él: ver Cursor personalizado (por elemento).
El interruptor On/Off de arriba a la derecha lo activa; está apagado en una instalación nueva. Las etiquetas debajo del título (Shape, Colors, Behavior, Where it applies) saltan a cada sección.
Vista previa en vivo. La columna lateral tiene una zona de prueba con un enlace de ejemplo, un botón de ejemplo, etiquetas de texto e imagen y una zona oscura con los colores invertidos. Mueve el ratón sobre ella para probar el cursor con tus ajustes actuales, antes de guardar.
En el sitio, el cursor personalizado nunca se ejecuta en dispositivos táctiles, por debajo del ancho de "Skip animations on screens narrower than", ni dentro de los lienzos del constructor de Bricks o Etch. Usa la vista previa en vivo de aquí, o el front end publicado con un ratón.
Míralo en acción: Custom cursor en fancyanimations.com.
Shape
| Ajuste | Opciones | Valor por defecto |
|---|---|---|
| Cursor style | Outline + dot, Outline only, Dot only | Outline + dot |
| Outline | Filled, Border, Dashed | Filled |
| Rotate dashes (solo Dashed) | On/off | Off |
| Size | 20–60 px | 45 px |
| Dot size | 5–20 px | 10 px |
| Roundness | 0–50 % (0 es un cuadrado, 50 un círculo) | 50 % |
Con Dot only no hay contorno: Outline, Size, Snap to links and buttons, Trail y las etiquetas de imagen y texto no aplican, y se muestran desactivadas con "Not used with Dot only". Con Outline only, Dot size está desactivado.
Colors
| Ajuste | Valor por defecto | Notas |
|---|---|---|
| Blend mode | Off | Mantiene el contraste sobre imágenes con mix-blend-mode |
| Force black & white (con Blend mode) | On | Anula los colores de abajo |
| Colors | Background #15120F, Dot #FF5B3A, Text #FFFFFF | Hex o una variable CSS |
| Invert on | .cursor-invert | Selectores donde se aplica el conjunto invertido |
| Inverted colors | Background #FFFFFF, Dot #FFFFFF, Text #15120F | Se usa sobre elementos que coinciden con "Invert on" |
Behavior
| Ajuste | Opciones | Valor por defecto |
|---|---|---|
| Snap to links and buttons | Se pega al enlace o botón bajo el puntero | Off |
| Trail | On/off | Off |
| Trail length (con Trail) | Light, Medium, Strong | Medium |
| Click feedback | Shrink, Ripple, Pulse, Ring | Shrink |
| Follow speed | 0.1–0.7 s; cuanto más bajo, más de cerca sigue al ratón | 0.3 s |
Where it applies
| Ajuste | Valor por defecto |
|---|---|
| Hide the cursor on | .disable-cursor, input, textarea |
| Disable hover effect on | .disable-hover-cursor |
Avanzado
Una sección colapsada con los valores por defecto para las etiquetas de imagen y texto por elemento (ver Cursor personalizado (por elemento)):
| Ajuste | Valor por defecto |
|---|---|
| Image label size | 200 px (50–600) |
| Image aspect ratio | 1 / 1 (ancho / alto, por ejemplo 16 / 9) |
| Image corner radius | 20 px |
| Text label size | 20 px |
Todos son editables: en un sitio concreto, comprueba los valores realmente configurados en vez de asumir los valores por defecto de arriba.
Problemas comunes
- No aparece nada al probar en el constructor. El cursor personalizado nunca se carga dentro del lienzo de Bricks o Etch, por diseño. Usa la vista previa en vivo de esta pantalla, o el front end publicado.
- El cursor desaparece sobre un campo de formulario. Los inputs y textareas están en "Hide the cursor on" por defecto.
- Una sección necesita un cursor más claro u oscuro que el resto del sitio. Añade la clase de "Invert on" a esa sección.
- Algunos ajustes aparecen en gris. El cursor style es Dot only (u Outline only, para Dot size): esos ajustes no se aplican a él.