---
title: "Diseño de onboarding"
description: "Constructor de onboarding de Adapty: contenedores para el diseño, ajuste del espaciado y estilo de los elementos."
---

El constructor de onboarding sin código para aplicaciones móviles ofrece dos capas de diseño:
- Diseño de pantalla: padding global y cuadrícula mediante contenedores.
- Diseño de elementos: espaciado, posición, bordes y sombras por elemento.

:::tip
Para reordenar pantallas o elementos, simplemente arrástralos y suéltalos en el panel izquierdo.
:::

## Diseño de pantalla \{#screen-layout\}
Puedes ajustar una pantalla de dos formas:
- [Usando los ajustes de estilo de pantalla](#screen-style-settings)
- [Usando contenedores](#containers)

### Ajustes de estilo de pantalla \{#screen-style-settings\}
Para reducir o aumentar la distancia entre los elementos y el borde de la pantalla:
1. Selecciona la pantalla en el panel izquierdo.
2. Ve a la pestaña **Styles** en la parte derecha.
3. Establece el padding superior, inferior y horizontal en la sección **Padding**.

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

### Contenedores \{#containers\}
Es posible que quieras añadir texto e imágenes en paralelo, galerías deslizables o ventanas emergentes modales. Los contenedores lo facilitan, ya que te permiten crear columnas, filas, carruseles y superposiciones centradas.

Para añadir un contenedor:
1. Haz clic en **Add** en la parte superior izquierda.
2. Ve a **Containers** y elige uno:
- **Columns**: Divide la pantalla en secciones verticales para contenido en paralelo (p. ej., diseños de dos columnas con texto o imagen más texto).
- **Rows**: Alinea los elementos en una banda horizontal con espaciado uniforme.
- **Carousel**: Permite a los usuarios deslizarse por una serie de tarjetas.
- **Popup**: Muestra contenido en una superposición centrada sobre la página.
3. Crea los elementos que quieras añadir y arrástralos al contenedor desde el menú izquierdo.

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

## Diseño de elementos \{#element-layout\}
Para ajustar cada elemento de forma individual:
1. Selecciona el elemento en el panel izquierdo.
2. Ve a **Styles** en el menú derecho.
3. En la sección **Container**, establece:
- **Offset**: Desplaza el elemento horizontalmente o verticalmente.
- **Position**: Define el punto de anclaje del elemento:
  - **In content**: Flujo normal del documento.
  - **Attached**: Posición fija: permanece visible en el viewport (p. ej., botón fijo en la parte inferior).
  - **Attached on scroll**: Se fija después de desplazarse hasta él (comportamiento sticky).
- **Padding**: Define el espacio interior entre el contenido del elemento y su borde.
- **Background**: Aplica un color sólido detrás del elemento. Asegúrate de que el fondo del elemento coincida con el [fondo de la pantalla](#screen-background-customization) (p. ej., usa gris o negro para onboardings con pantallas mayoritariamente oscuras).
- **Roundness**: Determina el radio de las esquinas del elemento.
- **Border**: Añade un contorno alrededor del elemento y especifica su grosor.
- **Border Color**: Especifica el color del borde del elemento.
- **Add shadows**: Añade una sombra con offset, desenfoque/expansión y color configurables.

:::note
Además de estos ajustes básicos de diseño de elementos, puedes personalizar aún más la apariencia de elementos específicos como [multimedia](onboarding-media#media-customization), [texto](onboarding-text#text--list-customization), [botones](onboarding-buttons#button-customization), [cuestionarios](onboarding-quizzes#quiz-customization) y otros usando la pestaña **Styles** del elemento.
:::

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

## Personalización del fondo de pantalla \{#screen-background-customization\}

El fondo no solo afecta al diseño de tu onboarding, sino también a la pantalla de carga hasta que el onboarding se cargue por completo.

Puedes rellenar el fondo de tu onboarding con un color o subir una imagen o vídeo:

1. Selecciona la pantalla en el panel izquierdo.
2. Ve a la pestaña **Styles** en la parte derecha.
3. En la sección **Background**, selecciona un color de fondo o haz clic en el área de carga para subir una imagen o vídeo.

Para los archivos multimedia, sigue los requisitos de [formatos y tamaño compatibles](onboarding-media#supported-formats-and-size).

:::tip
Para que las transiciones entre pantallas sean suaves, elige un color de fondo que coincida con el diseño general de tu onboarding (p. ej., usa gris o negro para onboardings con pantallas mayoritariamente oscuras) o personaliza la [pantalla de inicio](ios-present-onboardings#add-smooth-transitions-between-the-splash-screen-and-onboarding).
:::