--- title: "Estilo de elementos" description: "Configura la apariencia visual de los elementos: relleno, bordes, efectos, tipografía, estados y estilos de proyecto." --- La pestaña **Design** del panel derecho controla la apariencia visual de cada elemento. Las propiedades disponibles dependen del tipo de elemento, aunque la mayoría comparte opciones de estilo comunes. ## Tamaño y espacio \{#size-and-space\} :::link Artículo principal: [Posicionamiento de elementos](manage-paywall-ui-elements) ::: ### Visibilidad \{#visibility\} El botón **Visibility** determina si el elemento aparece en pantalla. * Show **Show** (predeterminado): El elemento siempre es visible. * Conditional **Conditional**: El elemento solo es visible cuando se cumplen determinadas condiciones. Consulta [Visibilidad condicional](onboarding-element-visibility) para más información. * Hide **Hide**: El elemento siempre está oculto. Úsalo para eliminar temporalmente un elemento del flow sin borrarlo. ### Tamaño \{#sizing\} Cada elemento tiene controles de **Width** (anchura) y **Height** (altura) con tres modos: * **Fill**: Se expande para ocupar todo el espacio disponible en el elemento padre * **Hug**: Se contrae para ajustarse al contenido del elemento * **Fixed**: Establece un valor exacto en píxeles para las dimensiones ### Espaciado \{#spacing\} La sección **Spacing** muestra un modelo de caja con dos capas: * **Margin**: El espacio entre el elemento y sus vecinos. No sobrepasa los límites del contenedor padre, independientemente del valor asignado. * **Padding**: El espacio entre el borde del elemento y su contenido. Establece el valor de cada lado de forma individual. :::note Los elementos de texto solo tienen margin. Las pantallas solo tienen padding. Ambos están disponibles para los contenedores y otros elementos con contenido hijo. ::: ## Relleno \{#fill\} La sección **Fill** controla el fondo del elemento. Hay cuatro tipos de relleno disponibles: color sólido, degradado, imagen y vídeo. Usa esta propiedad para establecer la imagen o vídeo principal de toda la pantalla. * **Color sólido** Solid color. Usa el selector de color, introduce un valor hexadecimal o asigna un [estilo de color del proyecto](#color-styles). Ajusta la **opacidad** para que el fondo sea semitransparente. * **Degradado** Gradient. Añade un relleno degradado con dos o más paradas de color. Arrastra las paradas para ajustar la transición y cambia el ángulo del degradado para controlar su dirección. * **Image** Image o **Video** Video. Establece una [imagen / vídeo](custom-media) como fondo del elemento. ## Borde \{#border\} Los bordes están desactivados por defecto. Haz clic en Plus junto a **Border** en el panel derecho para añadir uno. Para eliminar un borde, haz clic en Close junto al encabezado **Border**. Cuando hay un borde, configura: * **Color**: Usa el selector de color, introduce un valor hexadecimal o asigna un [estilo de color del proyecto](#color-styles). Ajusta la **opacidad** para que el borde sea semitransparente. * **Width**: El grosor del borde en píxeles. ## Esquinas \{#corners\} 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** Por esquina: Actívalo para definir un radio distinto en cada esquina individual ## Efectos \{#effects\} Haz clic en el botón más Plus 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 * **Background blur**: Desenfoca el fondo * **Layer blur**: Desenfoca el elemento y sus hijos Puedes apilar varios efectos en el mismo elemento. Activa o desactiva su visibilidad Show para desactivar un efecto temporalmente. ## Animación \{#animation\} Haz clic en el botón Plus 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 \{#preview-the-animation\} 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** 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](paywall-layout-and-products#screen-actions) de la pantalla (el icono de tres puntos junto a la capa de la pantalla) y elige **Play Animation**. ## Apariencia \{#appearance\} * **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) \{#typography-properties-text-elements\} Los elementos de texto muestran una sección de **Typography** con los siguientes controles: ### Fuente \{#font\} :::link Ver también: [Fuentes personalizadas](using-custom-fonts-in-paywall-builder) ::: Haz clic en el menú desplegable de fuente Font select para abrir el selector de fuentes. Tiene dos pestañas: * **Styles**: Muestra los [estilos de texto](#text-styles) 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. ### Tamaño y grosor \{#size-and-weight\} * **Weight**: Selecciona un grosor de fuente en el desplegable * **Size**: Selecciona un tamaño en el desplegable o escribe un valor personalizado ### Color \{#color\} Haz clic en la muestra de color para abrir el selector de color. Escribe un valor hexadecimal, usa la paleta o selecciona uno de los [estilos reutilizables](#reusable-styles). Ajusta el control deslizante de opacidad para hacer el texto semitransparente. ### Alineación \{#alignment\} Dos grupos de controles de alineación: * **Horizontal**: Izquierda Align left, Centro Align center, o Derecha Align right * **Vertical**: Arriba Align top, Centro Align middle, o Abajo Align bottom ### Decoración \{#decoration\} * **None** None: Sin decoración (predeterminado) * **Underline** Underline: Añade un subrayado al texto * **Strikethrough** Strikethrough: Añade una línea tachada ### Truncación \{#truncation\} 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. :::note Cuando seleccionas un elemento de texto, aparece también una **barra de herramientas inline** encima de él en el canvas. Esta barra ofrece acceso rápido a la fuente, el peso, el tamaño y la alineación sin necesidad de desplazarte por el panel derecho. ::: ## Configuración por estado (elementos interactivos) \{#state-specific-settings-interactive-elements\} 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 \{#selectable-states\} :::link Artículo principal: [Elementos seleccionables](flow-selectable-elements) ::: Los elementos que pertenecen a un grupo seleccionable (opciones de quiz, productos, pestañas, toggles de prueba) 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 relleno, color de borde y color de 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** Settings y añade un **Disabled state**. El estado **Disabled** está basado en condiciones. Selecciónalo y haz clic en **Set conditions** 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 \{#input-states\} 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](builder-loaders-and-progress-bars#step-states)** — tres estados por paso: **Completed**, **Current** y **Upcoming**. - **[Puntos del carrusel](builder-containers#dots)** — dos variantes de color: **Color** para los puntos inactivos y **Active Color** para el punto de la diapositiva actual. ## Estilos reutilizables \{#reusable-styles\} El panel **Styles** Styles en la barra lateral izquierda te permite definir estilos reutilizables que se aplican en todo tu flow. Hay dos tipos de estilos disponibles: estilos de texto y estilos de color. Necesitas usar estilos de color para activar el soporte del modo oscuro. ### Estilos de texto \{#text-styles\} :::link Artículo principal: [Contenido de texto](onboarding-text) ::: Los estilos de texto almacenan un conjunto completo de ajustes tipográficos: familia de fuente, peso, tamaño, interlineado, alineación y decoración. Cada plantilla de flow incluye presets predeterminados, y puedes crear estilos personalizados. Para crear un estilo de texto: 1. Abre el panel **Styles** Styles y selecciona la pestaña **Text**. 2. Haz clic en **Plus Create style**. 3. Escribe un nombre y configura los ajustes de tipografía. 4. Haz clic en **Create**. Para aplicar un estilo de texto, selecciona un elemento de texto y elige el estilo en el desplegable de fuente de la sección **Typography**. ### Estilos de color \{#color-styles\} Los estilos de color son colores con nombre que puedes referenciar en todo tu flow. Cada estilo de color tiene un nombre (como "Primary text" o "Brand"), un valor hexadecimal y un contador de uso que muestra cuántos elementos lo referencian. Para crear un estilo de color: 1. Abre el panel **Styles** Styles y selecciona la pestaña **Colors**. 2. Haz clic en **Plus Create style**. 3. Escribe un nombre y elige un color. Cuando actualizas un estilo de color, todos los elementos que lo referencian se actualizan automáticamente. ### Modo oscuro \{#dark-mode\} :::link Artículo principal: [Modo oscuro](paywall-dark-mode) ::: Si es necesario, puedes añadir dos variantes a cada estilo de color: una para el modo claro Light mode y otra para el modo oscuro Dark mode. El SDK aplica automáticamente la variante correcta según el esquema de colores actual del dispositivo. Para previsualizar el modo oscuro en el builder, usa el **selector de tema** Dark mode en la [barra de herramientas inferior](builder-ui#view-controls-bottom-toolbar).