Texto en onboarding

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 para personalizar el contenido para cada usuario.

Añadir texto

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.
  1. Haz clic en el nuevo elemento para editar su contenido.
  2. (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.

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).

onboarding-text.gif

Añadir listas

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.
  1. 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.

onboarding-list.png

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.

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.

onboarding-url.gif

Personalización de texto y listas

Además del diseño de elemento 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.

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.
onboarding-customization.png

Fuentes

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

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.

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.