--- title: "Foco" slug: "spotlight" updated: 2026-10-26T08:23:21Z published: 2026-10-26T08:23:21Z canonical: "docs.document360.com/spotlight" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Foco El elemento Foco permite atraer la atención del espectador hacia un área específica de un escalón atenuando todo lo que esté fuera de la región definida del foco. Todas las áreas fuera de la región del foco se atenuarán. Actualmente, el nivel de brillo del área atenuada no puede ajustarse. --- ## Foco para escenarios del mundo real | Escenario | Configuración recomendada | | --- | --- | | Guiando a un usuario para que haga clic en un botón específico en una demo de producto | Forma rectangular, dimensionada para cubrir el botón | | Resaltar un icono o indicador de estado | Forma de círculo, dimensionada al icono | | Llamar la atención sobre un menú de navegación o un elemento en la barra lateral | Forma rectangular, cubriendo la región del menú | | Centrarse en un campo de formación durante una guía de incorporación | Forma rectangular, alineada con el área de entrada | --- ## Añadir un elemento de foco ### Añade el foco a una guía paso a paso 1. Ve al paso al que quieres añadir un foco. 2. En el panel derecho, desplázate hasta la sección **Añadir elementos** . 3. Haz clic **en Spotlight**. Si uno o más elementos spotlight ya se han añadido, haz clic **en Añadir nuevo** para insertar otro. 4. Utiliza el **icono de ojo** en la parte superior derecha del panel de Spotlight para activar la visibilidad del spotlight para el usuario final. Los focos ocultos no serán visibles en la Flo publicada, pero pueden volver a ser visibles en cualquier momento. 5. Activa el interruptor **Ocultar otros elementos** para ocultar temporalmente todos los demás elementos en el paso actual mientras configuras el spotlight. Los demás elementos quedan ocultos temporalmente y no se eliminan. 6. En el campo **Nombre** , introduce una etiqueta descriptiva para el elemento de destacado. 7. **En Shape**, elige una forma del desplegable: - **Rectángulo** : ideal para resaltar botones, campos de formularios, paneles o regiones horizontales de la interfaz. - **Círculo** : adecuado para iconos, avatares o componentes circulares de la interfaz. 8. Haz clic **en Aplicar** para guardar el elemento de destacado. ![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Spotlight-guide.png) --- ### Añadir vídeo explicativo de foco / vídeo interactivo 1. Ve al paso al que quieres añadir un foco. 2. En el panel derecho, desplázate hasta la sección **Añadir elementos** . 3. Haz clic **en Spotlight**. Si uno o más elementos spotlight ya se han añadido, haz clic **en Añadir nuevo** para insertar otro. 4. Utiliza el **icono de ojo** en la parte superior derecha del panel de Spotlight para activar la visibilidad del spotlight para el usuario final. Los focos ocultos no serán visibles en la Flo publicada, pero pueden volver a ser visibles en cualquier momento. 5. Activa el interruptor **Ocultar otros elementos** para ocultar temporalmente todos los demás elementos en el paso actual mientras configuras el spotlight. Los demás elementos quedan ocultos temporalmente y no se eliminan. 6. En el campo **Nombre** , introduzca una etiqueta descriptiva para el elemento foco (por ejemplo, `Spotlight - Submit Button`, `Spotlight - Navigation Menu`). 7. En el campo **de hora de inicio** , introduzca la marca de tiempo en la que debe aparecer el foco de luz. 8. En el campo **Fin del tiempo** , introduce la marca de tiempo en la que el foco debe desaparecer. 9. Para seleccionar un fotograma exacto, utiliza la opción **Seleccionar fotograma exacto (15 fps** ). Utiliza los botones de flecha para navegar fotograma por fotograma o introduce un número de fotograma directamente. Haz clic en **Seleccionar** para confirmar o **Cancelar** para descartar. 10. **En Shape**, elige una forma del desplegable: - **Rectángulo** : ideal para resaltar botones, campos de formularios, paneles o regiones horizontales de la interfaz. - **Círculo** : adecuado para iconos, avatares o componentes circulares de la interfaz. 11. Haz clic **en Aplicar** para guardar el elemento de destacado. ![Add spotlight to explainer video or interactive video](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Spotlight-video-demo.png) --- ## Gestión de elementos de foco Una vez añadidos, los elementos de foco se listan en el **panel de Enfoque**, cada uno mostrando el nombre del foco y el paso al que se aplica. - **Añadir otro foco** - Haz clic **en Añadir nuevo** en la parte superior del panel para configurar un elemento adicional de referencia. - **Editar un foco** - Haz clic en cualquier foco en la lista para abrir su panel de configuración, donde se pueden modificar el nombre, el paso y la forma. Haz clic **en Aplicar** para guardar cambios, **Cancelar** para volver al panel de Enfoque o en el **icono Eliminar** para eliminarlo. - **Elimina un foco** - Pasa el cursor sobre un foco en la lista para revelar el **menú de tres puntos**. Haz clic en él y **selecciona Eliminar** para eliminar permanentemente el elemento de destacado. ![User interface displaying spotlight options with timestamps and delete functionality.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Manage-spotlight.png) --- ## Mejores prácticas - **Usa nombres descriptivos** : etiqueta claramente cada foco para facilitar su identificación y gestión, especialmente cuando se aplican varios focos en diferentes pasos. - **Ocultar en lugar de borrar** - Desactivar temporalmente los focos que no sean necesarios en lugar de eliminarlos. Esto preserva la configuración para uso futuro. - **Redimensiona y recoloca después de aplicar:** asegúrate de que el foco cubra con precisión el área deseada en el lienzo. - **Usa los focos con moderación** - Evita aplicarlos en demasiados pasos consecutivos para mantener su efectividad. - **Previsualización después de aplicar** - Verifica que la región atenuada no oculte otros contenidos esenciales en pantalla.