---
title: "Diseñar onboardings"
description: "Crea onboardings significativos."
---

El constructor de onboarding para aplicaciones móviles sin código es una herramienta potente y personalizable que te ayudará a ofrecer a tus usuarios la mejor experiencia de onboarding. No necesitas ser desarrollador ni diseñador para obtener un gran resultado.

## Pantallas del onboarding \{#onboarding-screens\}

El flujo de onboarding consiste en varias pantallas que añades y diseñas.

Los usuarios pulsarán el botón para navegar entre ellas.

:::tip
Si algunos de tus usuarios necesitan un flujo ligeramente diferente (por ejemplo, en tu app de fitness puede que quieras mostrar imágenes de 'objetivo' distintas según el género del usuario), no necesitas crear onboardings separados.

En su lugar, puedes [ocultar algunas pantallas por defecto y mostrarlas solo en determinados escenarios](onboarding-user-engagement).
:::

## Elementos del onboarding \{#onboarding-elements\}

Los elementos del onboarding se muestran a la izquierda en el orden en que aparecen. Haz clic en **Add** en la parte superior derecha para añadir un nuevo elemento.

Estos son los grupos de elementos que puedes añadir:

- **Containers**: Los contenedores te permiten configurar un diseño flexible. Por ejemplo, si quieres añadir un texto en dos columnas, debes añadir **Columns** y luego arrastrar dos bloques de texto dentro de **Columns** en el panel izquierdo. O, si estás añadiendo un carrusel, tendrás que añadir imágenes a los elementos **Media** del interior.
- **Typography**: Añade bloques de texto con formato predefinido y configura su aspecto según tus necesidades.
- **Media & Display**: Además de imágenes y vídeos, puedes añadir gráficos animados que demuestren el valor de tu app y animen a los usuarios.

  Los **formatos de vídeo compatibles** son MP4 y WebM. El **tamaño máximo de archivo multimedia** es de 15 MB.

  Si quieres añadir un elemento animado no compatible (como Lottie), puedes convertirlo a vídeo (por ejemplo, con [esta herramienta](https://www.lottielab.com/lottie/lottie-to-video)) e insertarlo como vídeo.
- **Quiz**: Crea cuestionarios breves con opciones de texto e imagen para personalizar la experiencia de onboarding y conocer mejor a tus usuarios.
- **Inputs**: Recoge los datos de tus usuarios.
- **Buttons**: Los botones permiten a tus usuarios navegar entre pantallas, cerrar el onboarding o ir al paywall. También puedes añadir botones brillantes o con movimiento para captar la atención del usuario y convertir su instalación en una compra.
- **Loaders**: Los loaders animados mantienen a los usuarios comprometidos durante el proceso.
- **User engagement**: Añade testimonios, listas de correos de usuarios y cuentas atrás.

:::note
Como parte del grupo **Media & Display**, también puedes añadir código HTML personalizado si las opciones de personalización disponibles no son suficientes.

Sin embargo, los elementos HTML personalizados no se precargan ni se almacenan en caché, por lo que se recomienda usar **Raw HTML** solo para elementos pequeños y ligeros.
:::

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

### ID de elemento e ID de acción \{#element-id-and-action-id\}

Si quieres usar un botón para acciones personalizadas, asígnale un **action ID** y úsalo luego en tu código fuente. Los action IDs te permiten gestionar de la misma manera distintos botones que comparten el mismo action ID.

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

Si quieres procesar la entrada del usuario en un campo específico (p. ej., guardar su edad o correo electrónico), asígnale un **element ID** y úsalo luego en tu código fuente para asociar preguntas con respuestas. Los element IDs solo pueden usarse una vez en tu onboarding.

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

## Opciones de personalización \{#customization-options\}

En el constructor tienes las siguientes opciones de personalización:
- Pestaña **Styles**: Ajusta el aspecto del elemento.
  
  <img src="/assets/shared/img/design-onboarding1.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- Pestaña **Element**: Configura los atributos del elemento, como la visibilidad, las acciones al pulsar botones u otras propiedades no relacionadas con su apariencia.
  
  <img src="/assets/shared/img/design-onboarding2.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  
- Pestaña **Screen**: Configura los ajustes generales de la pantalla, como una cabecera o la visualización de un contador de pantallas.
  
  <img src="/assets/shared/img/design-onboarding3.png"
  style={{
  border: '1px solid #727272', /* border width and color */
  width: '700px', /* image width */
  display: 'block', /* for alignment */
  margin: '0 auto' /* center alignment */
  }}
  />
  

## Copiar pantallas y elementos \{#copy-screens-and-elements\}

Si has creado un onboarding y quieres reutilizar partes de él, o si quieres hacer pequeños cambios y ejecutar pruebas A/B, puedes copiar una o más pantallas de un onboarding a otro.

Para copiar pantallas, abre el constructor de onboarding y haz lo siguiente:
- Haz clic derecho en una pantalla individual y selecciona **Copy**
- Selecciona la pantalla deseada y pulsa `Ctrl+C` (Windows) o `⌘+C` (Mac)

También puedes copiar elementos individuales o bloques de texto, tanto dentro del mismo onboarding como entre onboardings distintos.

## Copiar pantallas de funnels web a app \{#copy-screens-from-web-to-app-funnels\}

Si usas funnels web a app creados en [FunnelFox](https://funnelfox.com/) y quieres usar pantallas de esos funnels en onboardings, puedes hacerlo fácilmente copiando pantallas en el constructor de funnels y pegándolas en el constructor de onboarding:

1. En el constructor de funnels de FunnelFox, haz clic derecho en una pantalla y selecciona **Copy**, o selecciona la pantalla y pulsa `Ctrl+C`/`⌘+C`.
2. Abre el constructor de onboarding.
3. Haz clic derecho en la pantalla donde quieras insertar la pantalla copiada y selecciona **Paste**, o selecciónala y pulsa `Ctrl+V`/`⌘+V`. La pantalla copiada se insertará debajo de la pantalla seleccionada.

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