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

Los elementos de texto te ayudan a crear conversaciones claras y personalizadas con tus usuarios. Añade títulos, párrafos o listas con un solo clic, dales estilo para que se adapten a tu marca y usa [variables dinámicas](onboarding-variables) para personalizar el contenido para cada usuario.

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

Puedes añadir varios elementos de texto a las pantallas de tu onboarding. Para añadir elementos de texto:
1. Haz clic en **Add** en la parte superior izquierda.
2. Ve a **Typography** y elige uno:
- **Title**: titulares principales o títulos de pantalla que captan la atención al instante.
- **Subtitle**: una línea de apoyo breve que amplía el título.
- **Text**: texto de cuerpo para descripciones de funciones, avisos legales o frases inspiradoras.
- **Rich text**: formato mixto para preguntas frecuentes, términos de servicio o cualquier texto que necesite enlaces y énfasis.
3. Haz clic en el nuevo elemento para editar su contenido.
4. (Opcional) Selecciona cualquier parte del texto para abrir un tooltip de personalización rápida: negrita, cursiva, enlaces, color de texto o restablecer estilos.

Para editar un elemento de texto existente, simplemente haz clic en él y realiza los cambios en modo WYSIWYG.

:::tip
Si necesitas usar el mismo elemento de texto en varias pantallas, puedes copiarlo y pegarlo: selecciona el elemento y pulsa Ctrl+C (o ⌘+C en Mac), navega a otra pantalla, selecciona el elemento después del cual quieres pegar y pulsa Ctrl+V (o ⌘+V en Mac).
:::

  <img src="/assets/shared/img/onboarding-text.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Añadir listas \{#add-lists\}

Puedes añadir listas numeradas y con viñetas:
1. Haz clic en **Add** en la parte superior izquierda.
2. Ve a **Typography** y elige uno:
- **Numbered list**: perfecta para guías paso a paso.
- **Bullet list**: destaca beneficios o características clave sin implicar un orden.
3. Ve a la pestaña **Element** de la derecha para editar los elementos de la lista o subir una imagen como marcador de elemento.

Para editar un elemento de lista existente, haz clic en él y realiza los cambios en la pestaña **Element**.

  <img src="/assets/shared/img/onboarding-list.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Añadir enlaces externos \{#add-external-links\}

Para añadir un enlace externo:

1. Haz clic en **Add** en la parte superior izquierda.
2. En la sección **Typography**, selecciona **Title**, **Subtitle**, **Text** o **Rich text**.
3. Introduce tu texto.
4. Selecciona el texto que quieres convertir en enlace.
5. Haz clic en el icono **Link** en el menú de personalización rápida que aparece sobre el texto.
6. Pega la URL externa.
7. Haz clic en **✓** para aplicar el enlace.

:::info
En versiones del SDK de Adapty anteriores a la 3.15.1, los enlaces externos en los onboardings se abren en el navegador predeterminado del dispositivo.

A partir del SDK de Adapty v3.15.1, los enlaces externos se abren de forma predeterminada en un navegador dentro de la app, lo que permite a los usuarios permanecer en tu app sin cambiar a otra aplicación. Si lo necesitas, puedes [personalizar este comportamiento](ios-present-onboardings#customize-how-links-open-in-onboardings).
:::

  <img src="/assets/shared/img/onboarding-url.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Personalización de texto y listas \{#text--list-customization\}

Además del [diseño de elemento](onboarding-layout#element-layout) básico, puedes personalizar la apariencia del texto y las listas:

1. Selecciona el elemento en la parte izquierda.
2. Ve a **Styles** en el menú de la derecha.
3. Según el tipo de elemento, puedes ajustar las siguientes opciones:
    - **Text**: color del párrafo, fuente, alineación y altura de línea, color de los enlaces, fuente y decoración.
    - **List**: color del texto y del marcador de texto, fuente, ancho, alto y redondez de la imagen del marcador.

:::tip
Para ir más rápido:
- Después de personalizar un elemento de texto, puedes hacer clic en **Apply styles to all paragraphs** para aplicar los mismos estilos en todas las pantallas del onboarding de una sola vez.
- Para cambiar la fuente de todos los elementos de texto de una pantalla concreta, selecciona la pantalla y ve a **Styles > Text** en el menú de la derecha.
:::

  <img src="/assets/shared/img/onboarding-customization.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Fuentes \{#fonts\}

En el constructor de onboarding puedes elegir entre una gran variedad de fuentes.

:::info
La carga de fuentes personalizadas aún no está disponible.
:::

Puedes configurar las fuentes de forma global para todo el onboarding o de forma individual para cada elemento:

- Para establecer la fuente principal que se usará en el onboarding:
  1. Selecciona cualquier pantalla en la parte izquierda.
  2. Cambia a la pestaña **Styles** y selecciona una **Font**.
  3. Todos los elementos de todas las pantallas heredarán la fuente que hayas seleccionado.
- Para establecer una fuente para un único elemento:
  1. Selecciona el elemento.
  2. Cambia a la pestaña **Styles** y selecciona una **Font**.
  3. La fuente seleccionada se usará para ese elemento aunque cambies la fuente principal.

:::note
No puedes usar SF Pro porque no es adecuada para aplicaciones multiplataforma, pero te recomendamos usar Inter en su lugar, ya que son bastante similares.
:::