---
title: "Añadir y estilizar texto y listas en el Flow Builder"
description: "Añade y estiliza títulos, subtítulos, párrafos y listas en el Flow Builder de Adapty, y personaliza el texto para crear experiencias de usuario acordes a tu marca."
---

Añade títulos, párrafos o listas con un solo clic, estilízalos para que coincidan con tu marca y usa [variables dinámicas](onboarding-variables) para personalizar el contenido para cada usuario.
## Configurar estilos de texto \{#set-up-text-styles\}

El panel **Styles** incluye estilos de texto preconfigurados: H1, H2, H3, Button Label, Body, Caption y Small Label. Haz clic en cualquier estilo para editar su familia tipográfica, grosor, tamaño, alineación, decoración y otras propiedades.

Cuando [añades un elemento de texto](#add-text), puedes elegir entre los estilos que hayas configurado aquí.

:::important
Los cambios en un estilo se aplican a todos los elementos de texto que lo usen, en todas las pantallas.
:::

Para crear un nuevo estilo:

1. Haz clic en Palette para abrir el panel **Styles**.
2. En la pestaña **Text**, haz clic en **Create style**.

3. Escribe un nombre y configura la tipografía: familia de fuente, peso, alineación y [otras propiedades](#typography-properties).

    :::warning
   Las [fuentes personalizadas](using-custom-fonts-in-flow-builder) se comportan de forma diferente a las fuentes integradas. Lee la guía: algunos controles no aplican y cada variante de fuente necesita su propio archivo.    
   :::

   

4. Haz clic en **Create**.
## Añadir texto \{#add-text\}

Para añadir un elemento de texto:
1. Haz clic en **+** en la parte superior izquierda. Selecciona **Text**. Elige uno de los [estilos de texto](#set-up-text-styles) que estaban preconfigurados o que hayas definido tú.

2. Haz clic en el nuevo elemento y edita su contenido en la sección **Content** del panel **Design** a la derecha.
3. Si es necesario, ajusta las [propiedades de tipografía](#typography-properties) en el panel **Design**. O bien, selecciona el texto en la vista previa para abrir un tooltip de personalización rápida de estilos.
4. Opcionalmente, en los paneles **Design** e **Interaction**, también puedes aplicar cualquier otra configuración disponible para los componentes del flow. Para más detalles, consulta [Estilos y apariencia](builder-styling).
:::tip
Si necesitas usar el mismo elemento de texto en varias pantallas, cópialo y pégalo: selecciona el elemento, pulsa Ctrl+C (o ⌘+C en Mac), navega a otra pantalla y pulsa Ctrl+V (o ⌘+V en Mac) para pegarlo.
:::

### Cambiar el estilo de partes del texto \{#change-styling-for-parts-of-text\}

:::warning
El formato **Bold** e **Italic** no tiene efecto en textos que usan [fuentes personalizadas](using-custom-fonts-in-flow-builder). Para aplicar variantes de una fuente personalizada, sube cada variante como un archivo de fuente independiente y selecciónala desde el desplegable **Font family**.
:::

Para cambiar el estilo solo de algunas partes de un elemento de texto:

1. Selecciona una parte de un elemento de texto en la sección **Content**.
2. En el tooltip que aparece, cambia el color del texto, aplica formato de negrita, subrayado, cursiva o tachado, o añade una URL.

La vista previa se actualiza de inmediato.

## Añadir un precio anterior \{#add-an-old-price\}

El elemento Precio Anterior muestra un precio "antes" inflado junto al precio real de un producto, de modo que el descuento sea visible de un vistazo. Muestra el precio del producto multiplicado por un factor que tú eliges y lo tacha automáticamente.

No editas el contenido del elemento directamente. El valor se calcula a partir del precio del producto en el store en tiempo de ejecución, por lo que la moneda siempre coincide con el precio real.

Para añadir un precio anterior:

1. Haz clic en **+** en la parte superior izquierda. Selecciona **Text** y luego **Old Price**.

2. En el panel **Layers**, arrastra el elemento dentro de una tarjeta de producto. El elemento también funciona dentro de tarjetas de producto guardadas como componentes reutilizables.

   :::important
   El elemento Old Price debe estar dentro de una tarjeta de producto, ya que el precio se toma del producto de esa tarjeta. Fuera de una tarjeta de producto, el builder muestra el marcador de posición "Old price" en lugar de un precio.
   :::
3. En el panel **Design**, en la sección **Price**, establece el **Multiplier**. Adapty multiplica el precio del producto por este valor. Por ejemplo, con el multiplicador predeterminado de 2, un producto de $12.99 muestra un $25.98 tachado.

   

4. Si es necesario, ajusta las [propiedades de tipografía](#typography-properties). El elemento admite el mismo estilo que el texto normal.

:::tip
Para tachar el precio real de otro producto —por ejemplo, el precio mensual en una tarjeta anual— construye la fila de precio con elementos de texto y variables. Consulta [Mostrar un precio tachado con un distintivo de descuento](strikethrough-price).
:::
## Propiedades tipográficas \{#typography-properties\}

Todos los elementos de texto y estilos de texto comparten el mismo conjunto de controles tipográficos:

- **Font family**: Elige un tipo de letra: una fuente integrada o una [fuente personalizada](using-custom-fonts-in-flow-builder).

    :::warning
    Los distintos dispositivos incluyen fuentes diferentes, o pueden renderizar la misma fuente de forma distinta. Si la fuente no está presente en el dispositivo, el sistema usará una fuente predeterminada (SF Pro / Roboto). Para mostrar la misma fuente de forma consistente en todos los dispositivos, sube una [fuente personalizada](using-custom-fonts-in-flow-builder).
    :::

- **Weight**: Establece el grosor de la fuente.
:::warning
El **Weight**, **Bold** e **Italic** no se aplican a las [fuentes personalizadas](using-custom-fonts-in-flow-builder), ya sea que estén configurados en el panel **Styles**, en la sección de tipografía del panel **Design**, en la barra de herramientas en línea o en el tooltip de formato de parte de texto. Para aplicar variantes de una fuente personalizada, sube cada variante como un archivo de fuente independiente y selecciona la correcta en el desplegable **Font**.
:::
- **Size**: Establece el tamaño de la fuente en píxeles.
- **Color**: Establece el color del texto.
- **Line height**: Establece el espaciado entre líneas o déjalo en **Auto**.
- **Alignment**: Establece la alineación horizontal (izquierda, centro, derecha) y vertical (arriba, centro, abajo).
- **Decoration**: Aplica subrayado o tachado.
- **Truncate**: Limita el número de líneas que se muestran. El texto que supere ese límite se truncará. Útil cuando la longitud del contenido varía por variables dinámicas o localización.
## Añadir enlaces \{#add-links\}

Los flows admiten dos formas de convertir texto en enlaces clicables. Elige según el papel que desempeña el texto:

- **Enlace en línea** — para una URL dentro de texto continuo, como una referencia "Más información" incrustada en un párrafo. Siempre se abre en el navegador integrado de la app.
- **Una acción Open URL** — para elementos interactivos independientes, como un botón de Términos de servicio. Puede abrirse en el navegador integrado o en el externo.
### Enlace en línea \{#inline-link\}

Para convertir parte de un elemento de texto en un enlace:

1. Selecciona el texto en la sección **Content**.
2. En el tooltip de formato, haz clic en el icono de enlace.
3. Pega la URL de destino en la ventana emergente.

### Acción de abrir URL \{#open-url-action\}

:::link
Artículo principal: [Acciones](onboarding-actions#open-url)
:::

Para convertir un botón completo en un enlace:

1. Añade un [Button](builder-elements#buttons) — o usa el preset **Links**, una fila predefinida con los botones Restore / Terms of Service / Privacy Policy.

    

2. Selecciona el botón en el panel **Layers** y abre la pestaña **Interactions** en el panel derecho.
3. Establece el destino para la acción [**Open URL**](onboarding-actions#open-url).

    :::important
    Una acción Open URL vacía [bloquea la previsualización y la publicación](builder-save-publish#troubleshooting).
    :::

    

   
## Añadir texto condicional \{#add-conditional-text\}

El texto condicional cambia lo que muestra un elemento de texto según una condición. Por ejemplo, un encabezado puede mostrar un mensaje cuando el usuario selecciona el plan anual y otro diferente para el plan mensual. El texto condicional funciona igual que la [visibilidad condicional](onboarding-element-visibility), pero en lugar de mostrar u ocultar el elemento, intercambia su contenido.

Para configurar el texto condicional:

1. Selecciona un elemento de texto en el canvas.
2. En el panel **Design**, en la sección **Content**, selecciona **Conditional**.

3. Construye la condición **if**. Elige una propiedad de la pestaña **Custom**, **Products** o **Elements**, establece el operador e introduce el valor que debe coincidir. Para más detalles sobre los tipos de propiedades, consulta [Visibilidad condicional](onboarding-element-visibility).
4. En **then**, introduce el texto que se mostrará cuando la condición sea verdadera. El formato de texto enriquecido funciona igual que para el [texto normal](#change-styling-for-parts-of-text). Para insertar una [variable](onboarding-variables), haz clic en **{ } Add variable**.
5. En **else**, introduce el texto alternativo que se mostrará cuando ninguna condición coincida.
6. (Opcional) Haz clic en **+ Add else/if** para añadir más condiciones, cada una con su propio texto.
:::tip
Para editar el texto condicional en otro idioma, cambia el idioma activo en la parte inferior del editor. Añade primero los idiomas en el panel **Localizations** — consulta [Añadir idioma en Flow Builder](add-paywall-locale-in-adapty-paywall-builder).
:::

## Agregar listas \{#add-lists\}

:::note
Los elementos de lista son contenedores formados por componentes de elementos individuales. Para listas simples con viñetas o numeradas dentro de texto continuo, usa un elemento de texto y aplica el formato deseado desde el panel **Design**.
:::

1. Haz clic en **+** en la parte superior izquierda. Selecciona **List** y elige una de las plantillas de lista.

2. Ve al panel **Design** de la derecha para editar los elementos de la lista o subir una imagen como marcador de elemento.