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.

Diseño de pantalla

Puedes ajustar una pantalla de dos formas:

• Usando los ajustes de estilo de pantalla
• Usando contenedores

Ajustes de estilo de pantalla

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.

Contenedores

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.

Diseño de elementos

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

Personalización del fondo de pantalla

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.