> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizar widgets en las pantallas de la Branded App

> Agrega y configura widgets como productos, botones, imágenes, galerías, texto, videos y códigos embebidos en las pantallas de la Branded App.

Los **widgets** te permiten personalizar las pantallas de una Branded App con varios tipos de contenido, incluyendo productos, botones, imágenes, galerías, texto, videos y códigos embebidos. Esta página cubre cómo agregar, editar y administrar widgets en las pantallas de la app.

## ¿Qué es una pantalla?

Las pantallas son como páginas en una Branded App que los miembros verán después de iniciar sesión en la app a través de la [pantalla de bienvenida](/es/articles/mobile-apps/branded-app/how-to-set-up-a-branded-app-welcome-screen-where-new-users-can-create-an-account) o la pantalla de inicio de sesión (después de ver el [carrusel de bienvenida](/es/articles/mobile-apps/branded-app/how-to-add-an-onboarding-carousel-to-your-branded-app), si esa función se ha agregado). Si un miembro ya tiene sesión iniciada, esto es lo primero que verá al volver a abrir la app. Puedes aprender más sobre pantallas personalizadas [aquí](/es/articles/mobile-apps/branded-app/how-to-create-custom-screens-for-your-branded-mobile-app).

Existen varios widgets que puedes usar para personalizar estas pantallas y mejorar la experiencia de tus clientes.

## Agregar un widget a una sección de pantalla

Para agregar una sección a una pantalla de la app:

1. Selecciona **Branded Mobile App** desde tu panel de Kajabi.
   Si ya completaste totalmente la [configuración de tu app](/es/articles/mobile-apps/branded-app/how-do-i-get-started-creating-my-own-branded-app), deberías ver la configuración de diseño de tu app.
2. Selecciona la pestaña **Design**.
3. Haz clic en **Customize**:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/46c020f7_35745526428571.png" alt="Design settings" />

4. Asegúrate de estar en el editor de **Widgets** y selecciona la pantalla correspondiente en el menú desplegable:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/d2c3c0be_37733449112475.png" alt="Widgets editor" />

### Widgets disponibles

* Los widgets de **Product** te permiten destacar cursos, coaching, y productos de tipo producto y community que los miembros poseen, incluso si no están incluidos en una [App Offer](/es/articles/mobile-apps/branded-app/how-to-create-app-offers-for-your-branded-app)
* **Button** se puede usar para enlazar a páginas, publicaciones de blog o URL
* **Image** puede agregar más personalización, además de funcionar como un botón que enlaza a páginas, blogs o URL
* **Gallery** te permite subir y mostrar múltiples imágenes en forma de galería
  * Se recomienda que las dimensiones de la imagen subida coincidan con la relación de aspecto seleccionada. Por ejemplo, 1260x720 para 7:4, 1080x1080 para 1:1, y 720x960 para 3:4
* Las secciones de **Text** se pueden agregar en toda la pantalla de inicio
* Los widgets de **Video** te permiten agregar videos directamente a la pantalla de inicio con imágenes de portada personalizables
* Los widgets de **Embed Code** te dan la oportunidad de pegar cualquier código HTML para mostrar contenido adicional

### Arrastrar y soltar widgets

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/3awr5006a1" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

El editor de widgets se abrirá en el lado derecho de la página, permitiéndote personalizar aún más el título, el texto, las imágenes, etc. del widget.

Una sección de tipo carrusel rotará automáticamente cada imagen o curso a la vista, mientras que una sección de desplazamiento horizontal permitirá a los miembros de la app desplazarse por las imágenes o cursos a su propio ritmo.

Para la mayoría de los widgets, puedes activar o desactivar el título de la sección y seleccionar la alineación deseada.

<Note>
  **Nota:**
  El widget de Product se puede usar para mostrar productos de curso, coaching, podcast y community. Si un producto mostrado no forma parte de una App Offer o no es propiedad del miembro, no aparecerá en su pantalla.
</Note>

## Editar una sección de pantalla

Personaliza los títulos de sección y el contenido de cada widget agregado a una pantalla.

**Para editar un widget en una pantalla:**

1. Selecciona **Branded Mobile App** desde tu panel de Kajabi.
   Si ya completaste totalmente la [configuración de tu app](/es/articles/mobile-apps/branded-app/how-do-i-get-started-creating-my-own-branded-app), deberías ver la configuración de diseño de tu app.
2. Selecciona la pestaña **Design**.
3. Haz clic en **Customize**:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/a9df43b5_35745549475483.png" alt="Design settings" />

4. Asegúrate de estar en el editor de **Widgets** y selecciona la pantalla correspondiente en el menú desplegable:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/fcb673d6_37733434304027.png" alt="Widgets editor" />

5. Selecciona la sección de widget que deseas editar en la pantalla de inicio:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/16f04e6d_37733449117083.png" alt="Select widget" />

Reordena las imágenes y productos que hayas agregado a un widget presionando y manteniendo los **seis puntos a la izquierda** de cada uno en el editor de widgets, y luego arrastrando y soltando según lo desees:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/382604ea958c6c1d53d405fcadf6fb0e.png" alt="Reorder widgets" />

Si cambias de opinión sobre incluir un widget, haz clic en el ícono **x** a la derecha para eliminarlo.

Cuando termines, haz clic en **Save & Publish** en la parte superior derecha para publicar las actualizaciones de pantalla en la app en producción.

### Reordenar secciones de pantalla

Cambia el orden de las secciones de pantalla en una página de la Branded App.

Para reordenar las secciones de pantalla, selecciona la sección de widget que deseas reorganizar y haz clic en la flecha hacia arriba o hacia abajo para moverla a la ubicación deseada:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/0ktr2iee6m" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

### Eliminar una sección de pantalla

Para eliminar una sección de pantalla, selecciona la sección de widget que deseas eliminar y haz clic en el ícono de papelera:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/d9912f92_35745549484443.png" alt="Delete widget" />
