La pestaña Design del panel derecho controla el aspecto visual de cada elemento. Las propiedades disponibles dependen del tipo de elemento, pero la mayoría comparte opciones de estilo comunes.

Olvídate de la pestaña Design por completo.

Dile al Editor de IA que “le dé al paywall un aspecto oscuro y premium” y rediseñará todos los elementos a la vez: rellenos, esquinas, tipografía y espaciado.

Explore the AI Editor›

Visibilidad

El botón Visibility determina si el elemento aparece en pantalla.

• Show (predeterminado): El elemento es visible cuando se abre la pantalla.
• Conditional: El elemento solo es visible cuando se cumplen condiciones específicas. Consulta Visibilidad condicional para más información.
• Hide: El elemento está oculto hasta que una acción Show element lo muestre. Úsalo para eliminar temporalmente un elemento del flow sin borrarlo.

Relleno

La sección Fill establece el fondo de un elemento. Para rellenar toda la pantalla, configura el fondo de pantalla en su lugar.

Un relleno se compone de una o más capas. Cada capa puede ser de uno de los siguientes tipos:

• Color sólido : Usa el selector de color o introduce un valor hexadecimal. Ajusta la opacidad para que el fondo sea semitransparente.
• Degradado : Dos o más puntos de color. Arrastra los puntos para ajustar la transición y establece el ángulo con el control deslizante Direction. Para cambiar un punto, edita su fila en Stops. Para añadir un punto, haz clic en la barra de degradado o en junto a Stops. El control deslizante en la fila de la capa cambia la opacidad de todos los puntos a la vez.
• Imagen o Vídeo : Una imagen o vídeo como fondo.

Para gestionar las capas:

• Para añadir una capa, haz clic en junto a Fill.
• Para cambiar el tipo de capa, haz clic en su muestra y selecciona un tipo.
• Para cambiar el orden de las capas, arrastra sus filas.
• Para eliminar una capa, haz clic en en su fila.

La capa superior cubre las que están debajo, por lo que una capa semitransparente sobre una imagen le aplica un tinte. Los campos de entrada y los selectores de fecha/hora solo muestran la capa inferior.

Para reutilizar una capa en otros elementos o crear una versión oscura, guárdala como estilo de color. Para reutilizar una imagen junto con su tinte, crea un estilo único de varias capas.

Borde

Los bordes están desactivados por defecto. Haz clic en junto a Border en el panel derecho para añadir uno. Para eliminar un borde, haz clic en junto al encabezado Border.

Cuando hay un borde, configura:

• Color: Usa el selector de color o introduce un valor hexadecimal. Para aplicar un estilo de color, selecciónalo desde la pestaña Styles. Un borde ignora las capas de imagen y vídeo de un estilo.
• Width: El grosor del borde en píxeles.

Esquinas

La sección Corners controla el radio del borde (esquinas redondeadas).

• Control deslizante de radio: Establece el mismo radio para las cuatro esquinas
• Activar por esquina : Actívalo para definir un radio distinto en cada esquina individual

Efectos

Haz clic en el botón de más junto a Effects para añadir uno o más efectos visuales:

• Drop shadow: Una sombra detrás del elemento
• Inner shadow: Una sombra dentro de los límites del elemento
• Layer blur: Desenfoca el elemento y sus elementos secundarios

Puedes combinar varios efectos en el mismo elemento. Activa o desactiva su visibilidad para deshabilitar temporalmente un efecto.

Animación

Haz clic en el botón junto a Animation para añadir un efecto animado. El builder agrega una animación Pulse, que escala rítmicamente el elemento hacia arriba y hacia abajo para captar la atención. Para usar un efecto diferente, selecciónalo en Type.

Tipos de animación

Cada tipo tiene su propia configuración. Los ajustes de temporización son los mismos para todos los tipos.

Tipo	Qué hace	Configuración
Pulse	El elemento aumenta de tamaño y vuelve a su escala original.	Scale amount (%): cuánto crece el elemento.
Radial fill waves	Una copia rellena de la forma del elemento surge desde detrás y se desvanece.	Scale amount (%): cuánto crece cada onda respecto al elemento. Wave size (px): hasta dónde llega cada onda más allá del borde del elemento. Wave color. Button pulse: también escala el elemento con cada onda, según el valor de Pulse amount (%).
Radial outline waves	Igual que Radial fill waves, pero cada onda es un contorno.	Igual que Radial fill waves.
Glow	Un halo suave se expande alrededor del elemento y se desvanece.	Glow size (px): hasta dónde llega el halo en su punto más brillante. Glow color.
Shake	El elemento se mueve hacia la izquierda y hacia la derecha.	Distance (px): cuánto se desplaza el elemento hacia cada lado.
Wiggle	El elemento se inclina hacia la izquierda y hacia la derecha.	Angle (°): cuánto se inclina el elemento hacia cada lado.
Bounce	El elemento salta hacia arriba y baja de nuevo.	Height (px): qué tan alto salta el elemento.
Breathe	El elemento se desvanece y reaparece.	Fade amount (%): cuánto se desvanece el elemento en su punto más tenue.
Color shift	El relleno del elemento cambia a otro color y vuelve al original.	Shift color.
Border flash	Un borde se ilumina en el contorno del elemento y se desvanece. Mientras está activo, reemplaza el borde propio del elemento.	Flash width (px): qué tan ancho es el borde en su punto más brillante. Crece hacia adentro desde el borde. Flash color.
Shimmer	Una banda de luz se desliza sobre el relleno del elemento.	Shimmer width (%): qué tan ancha es la banda, como proporción del elemento. Shimmer angle (°): la dirección del barrido, como el ángulo de un gradiente. 90° va de izquierda a derecha. Shimmer color.

Algunos tipos dependen del diseño o el relleno del elemento. El builder muestra una nota en la configuración de Animation cuando el elemento no cumple estas condiciones, y el flow se publica sin la animación:

• Radial fill waves y Radial outline waves: El elemento necesita un ancho y alto fijos y sin margen.
• Color shift: El elemento necesita un relleno de color sólido o sin relleno.
• Shimmer: El elemento necesita un relleno de color sólido.

Ajustes de temporización

Parámetro	Descripción
Duration (ms)	Duración de un ciclo de animación
Delay between loops (ms)	Pausa entre repeticiones
Show after delay (ms)	Pausa antes del primer ciclo
Easing	Cómo la animación acelera y desacelera: Linear, Ease In, Ease Out, Ease In Out, Elastic (sobrepasa y se estabiliza) o Bounce (aterriza con varios rebotes). Un nuevo Pulse usa una curva predefinida, mostrada como Custom.

Vista previa de la animación

El builder muestra pantallas estáticas por defecto: las animaciones permanecen quietas hasta que las actives. Hay dos formas de hacerlo:

• Haz clic en el botón Toggle animations que aparece encima de la vista previa del dispositivo. Activa o desactiva las animaciones de la pantalla; una vez activadas, se reproducen de forma continua hasta que vuelvas a hacer clic. El botón solo aparece cuando la pantalla activa contiene al menos una animación.
• Abre el menú contextual de la pantalla (el icono de tres puntos junto a la capa de la pantalla) y elige Play Animation.

Apariencia

• Opacity: Va del 0% (transparente) al 100% (opaco)
• Rotation: Introduce un valor en grados para rotar el elemento

Propiedades de tipografía (elementos de texto)

Los elementos de texto muestran una sección de Typography con los siguientes controles:

Fuente

Haz clic en el desplegable de fuentes para abrir el selector de fuentes. Tiene dos pestañas:

• Styles: Muestra los estilos de texto guardados en tu proyecto. Selecciona un estilo para aplicar toda su configuración tipográfica de una vez.
• Fonts: Muestra todas las familias de fuentes disponibles. Busca o desplázate para encontrar la que necesitas. Las fuentes integradas pueden mostrarse de forma diferente según el dispositivo — para un renderizado consistente, sube una fuente personalizada.

Para guardar la configuración tipográfica actual como un nuevo estilo de texto, haz clic en junto a las pestañas. El elemento usará entonces el nuevo estilo.

Tamaño y grosor

• Weight: Selecciona un grosor de fuente en el desplegable
• Size: Selecciona un tamaño en el desplegable o escribe un valor personalizado

Color

Haz clic en la muestra de color e introduce un valor hexadecimal o usa la paleta. Para aplicar un estilo de color en su lugar, selecciónalo desde la pestaña Styles. El texto solo muestra las capas de color sólido de un estilo.

Alineación

Dos grupos de controles de alineación:

• Horizontal: Izquierda , Centro , o Derecha
• Vertical: Arriba , Centro , o Abajo

Decoración

• None : Sin decoración (predeterminado)
• Underline : Añade un subrayado al texto
• Strikethrough : Añade una línea tachada

Limitar líneas y reducción automática

Para evitar que el texto rompa el diseño, activa Limit lines y establece el valor de Max Lines. El texto que supere ese número de líneas se recortará con puntos suspensivos (…).

Para ajustar el texto largo en lugar de recortarlo, activa Auto shrink. El texto se reduce hasta encajar dentro del límite de líneas o de la altura fija, en todos los idiomas. Úsalo cuando una traducción sea más larga que el original, como en el título de una tarjeta de producto o en la etiqueta de un botón.

• Auto shrink está disponible cuando Limit lines está activado, o cuando el texto tiene una altura Fixed y un diseño Fixed size.
• El texto se reduce hasta un mínimo del 10% de su tamaño de fuente. El texto que sigue sin caber se recorta.
• El tamaño de fuente que hayas establecido no cambia. La vista previa muestra el tamaño que tendrá el texto en el dispositivo.

Configuración por estado (elementos interactivos)

Los elementos interactivos admiten varios estados visuales. Al seleccionar uno de estos elementos, aparece una sección States en el panel derecho. Cambia entre estados para configurar distintas propiedades visuales en cada uno.

Cada estado puede sobrescribir cualquier propiedad visual: relleno, borde, color de tipografía, opacidad y más.

Estados seleccionables

Los elementos que pertenecen a un grupo seleccionable (opciones de quiz, productos, pestañas, interruptores y casillas de verificación) ofrecen dos estados por defecto:

• Default: La apariencia normal del elemento
• Selected: La apariencia cuando el usuario ha seleccionado esta opción. Sobreescribe propiedades como el relleno, el color del borde y el color del texto para resaltar la opción activa

Para aplicar estilos a un elemento seleccionable cuando no es interactivo, añade un tercer estado manualmente. Abre States settings y añade un Disabled state.

El estado Disabled está basado en condiciones. Selecciónalo y haz clic en Set conditions para definir cuándo el elemento queda deshabilitado en tiempo de ejecución, por ejemplo cuando un campo obligatorio está vacío.

Estados de input

Los campos de input ofrecen estados adicionales:

• Default: Apariencia normal, sin foco
• Active: El campo tiene el foco y está listo para recibir texto
• Invalid: El valor introducido no supera la validación
• Disabled: El campo no es interactivo

Otros elementos con estados

Algunos elementos exponen estilos específicos de estado fuera del patrón estándar Default / Selected / Disabled:

• Pasos del indicador de progreso — tres estados por paso: Completed, Current y Upcoming.
• Puntos del carrusel — dos variantes de color: Color para los puntos inactivos y Active Color para el punto de la diapositiva actual.

Estilos reutilizables

Para mantener la coherencia de propiedades de texto y color en todo un flow, guárdalas como estilos reutilizables. Al editar un estilo, todos los elementos y pantallas que lo usen se actualizarán automáticamente.