Añadir relleno a bloques de contenido y componentes en Adobe Captivate

El relleno crea espacio entre el contenido y sus bordes, lo que mejora la disposición visual y la alineación del proyecto. Se puede aplicar en el nivel de los bloques de contenido o dentro de los componentes para ayudar a mejorar la alineación y el espaciado, lo que contribuye a una mejor experiencia de visualización.

Ventajas del relleno

Crea un espaciado uniforme alrededor de los elementos, lo que garantiza un aspecto limpio y profesional.
Aumenta el espacio alrededor de los elementos interactivos, lo que facilita su selección y mejora la experiencia del usuario.

Cuándo utilizar el relleno: ळ

Ajuste el tamaño: si necesita aumentar el espacio alrededor de un elemento, considere la posibilidad de añadir o incrementar el relleno. Esto es especialmente útil para los elementos interactivos, donde el espacio adicional puede mejorar la accesibilidad.
Espacio entre bordes: el relleno añade espacio entre el contenido y el borde, lo que puede ayudar a garantizar una mejor alineación con otros elementos de la página.

Temas de esta página:

Relleno de bloques de contenido
Relleno de nivel de componente
Ejemplos de relleno para diferentes componentes
Diseños automáticos

Relleno de bloques de contenido

Añada relleno a todo un bloque de contenido desde los bordes y vea el comportamiento en diferentes ventanas.

Seleccione Propiedades visuales en la barra de herramientas derecha y expanda la sección Alineación y espaciado para ver los valores de relleno.

Relleno de bloques de contenido
Utilice el regulador Anchura del contenido para modificar el espaciado horizontal de cualquier bloque de contenido desde el lado izquierdo o derecho. Especifique el porcentaje de espaciado deseado con el regulador. A medida que ajuste el ancho, los valores de relleno se actualizarán automáticamente para reflejar los cambios.
Active Diseño automático para ajustar la anchura del contenido proporcionalmente en todas las ventanas gráficas de los dispositivos o desactívelo para ajustarlas manualmente. Obtenga más información sobre los diseños automáticos para diferentes ventanas.

Si la función Diseño automática está desactivada, se pueden establecer valores de relleno para todos los lados y ajustar la anchura del contenido de cada ventana gráfica de forma independiente. Esto significa que puede añadir una anchura de contenido para una ventana sin que esto afecte a las demás.

Relleno de bloques de contenido para la vista de tableta con la opción Diseño automático desactivada

Nota:

El relleno horizontal de los bloques de contenido se establece en forma de porcentaje debido a que la anchura del proyecto es fija. El relleno vertical se define en píxeles para incluir contenido de desplazamiento largo.

Relleno de nivel de componente

Incorpore relleno para cada elemento dentro de un bloque de contenido, incluidas imágenes, texto, elementos interactivos, tarjetas y objetos de widget. El relleno de los componentes dentro de un bloque de contenido puede añadirse de dos formas:

Relleno uniforme: añada relleno a los cuatro lados simultáneamente.

Relleno no uniforme: añada relleno a cada lado individualmente. Esta opción se selecciona de forma predeterminada.

A continuación, se muestra un ejemplo de relleno uniforme de 50 px en los cuatro lados dentro del bloque de texto.

Al pasar el cursor sobre los bordes de cualquier componente, se muestran controles de color rosa que se pueden arrastrar para ajustar el espaciado. Para que el relleno sea uniforme en todos los lados, mantenga pulsada la tecla Mayús mientras arrastra los controles.

Ejemplos de relleno para diferentes componentes

A continuación, se muestran algunos ejemplos de relleno para varios componentes en un proyecto con una dimensión de 1366 x 768 px:

Añada relleno a cualquier bloque de texto para crear espacio entre el contenido y sus contornos. En cada componente de texto (título, subtítulo o cuerpo de texto), utilice los controles de color rosa para arrastrar e introducir el relleno directamente en el lienzo. También puede seleccionar el componente de texto e introducir los valores de relleno en la sección Alineación y espaciado de Propiedades visuales.

En el ejemplo se muestra cómo añadir relleno a un bloque de texto de varias columnas dentro del componente de cuerpo, en concreto, mediante la aplicación de un relleno de 100 px en la parte inferior.

Seleccione la imagen y arrastre los controles de color rosa situados cerca de los bordes de la imagen. También puede introducir valores de relleno en la sección Alineación y espaciado del menú Propiedades visuales.

En el ejemplo, se muestra un relleno inferior de 60 píxeles desde el contorno de un contenedor de imagen:

Puede añadir relleno a las imágenes de una cuadrícula de imágenes, dentro de widgets, tarjetas, caracteres e imágenes en diapositivas de preguntas, pero no a las imágenes de fondo.

Este es un ejemplo de cómo añadir relleno dentro de un componente de botón interactivo. Añada un componente de botón y seleccione el botón dentro de su bloque de contenido. Utilice los controles de color rosa para arrastrar y añadir espaciado o introduzca los valores de relleno en la sección Alineación y espaciado.

Nota:

Los componentes interactivos Grupo de botones de opción y Lista desplegable no admiten relleno.

Añada relleno a cualquier componente dentro de un widget, como texto para encabezados, subtítulos, imágenes, tarjetas e iconos. En este ejemplo de widget de ficha, puede seleccionar cualquier componente dentro del widget y utilizar los controles de color rosa para ajustar el relleno.

O bien seleccione un componente y añada relleno desde Alineación y espaciado en Propiedades visuales. En este ejemplo, se añade un relleno de 30 px al icono de volteo dentro de la tarjeta. Del mismo modo, puede seleccionar cualquier texto o imagen dentro de cada tarjeta y añadir relleno a sus contornos.

Incorpore relleno en todos los componentes de las diapositivas de preguntas, incluidos el texto, las imágenes y los botones interactivos. La adición de espacios entre las opciones de las diapositivas de preguntas facilita la selección y mejora la estética general de la pregunta. Este es un ejemplo de pregunta de opción múltiple con relleno dentro de las opciones de imagen.

Diseños automáticos

Si la función Diseño automático está activada, el relleno se ajusta proporcionalmente a las ventanas de los dispositivos para los bloques de contenido y los componentes, con valores que responden a los equipos de sobremesa, tabletas y móviles en función de las dimensiones del proyecto. Obtenga más información sobre cómo cambiar las dimensiones del proyecto en Adobe Captivate.

Comportamiento de la función Diseño automático cuando está activada

Cuando la función Diseño automático está activada, el relleno se ajusta proporcionalmente en los distintos dispositivos, modificando automáticamente los valores de cada ventana. En un proyecto con una resolución de 1366 x 768 px, un relleno de 50 px en el escritorio se ajusta a 28 px en una tableta y a 16 px en un móvil sin alterar la relación de aspecto.

Imagen que muestra la vista de escritorio cuando se activa la función Diseño automático — Vista de escritorio con la función Diseño automático activada

Comportamiento de la función Diseño automático cuando está desactivada

A continuación, se muestra un ejemplo en el que la función Diseño automático está desactivada para un tamaño de proyecto de 1366 x 768 px. En este caso, el usuario puede añadir manualmente los valores de relleno para cada puerto de visualización con el fin de obtener la mejor experiencia de visualización.

Vista de escritorio (relleno 50 px):