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 siempre es visible.
• Conditional: El elemento solo es visible cuando se cumplen condiciones específicas. Consulta Visibilidad condicional para más información.
• Hide: El elemento siempre está oculto. Ú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. Por ahora, Pulse es la única animación disponible: el elemento se escala hacia arriba y hacia abajo rítmicamente para captar la atención.

Configura la animación Pulse con los siguientes parámetros:

Parámetro	Descripción
Scale amount (%)	Cuánto crece el elemento respecto a su tamaño original
Duration (ms)	Duración de un ciclo de animación
Delay between loops (ms)	Pausa entre repeticiones
Shadow color	Color del efecto de sombra pulsante
Shadow size (px)	Tamaño de la sombra pulsante

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

Truncación

Activa la truncación para cortar el texto que supere el ajuste de Máx. líneas. Esto es útil cuando trabajas con varios idiomas: si una cadena traducida es más larga que el original, la truncación evita que rompa el diseño.

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.