Skip to main content
Las pantallas personalizadas te permiten dar forma a cada página de una Branded App, desde un panel de inicio hasta un escaparate de productos. Personaliza las pantallas con widgets para mejorar la navegación, destacar productos e interactuar con los miembros mediante contenido adaptado.

¿Qué pantallas puedo crear?

En una Branded App, las pantallas funcionan como páginas individuales que muestran contenido, guían a los usuarios o proporcionan funciones interactivas. Al crear y personalizar pantallas, puedes mejorar la navegación, mostrar productos y ofrecer experiencias únicas adaptadas a tu audiencia. Aquí tienes algunas ideas para comenzar:
  • Pantalla de inicio: usa la pantalla de inicio de la app para dar la bienvenida a miembros y visitantes, destacar y recomendar cursos, proporcionar información valiosa sobre tu negocio, y más.
  • Páginas personalizadas de oferta de productos: muestra productos y servicios en una página personalizada.
  • Presentación/Sobre ti: crea una página personalizada que destaque quién eres y tu misión.
  • Recursos adicionales: proporciona información y recursos para ayudar a los clientes mientras interactúan con tu negocio.
Al aprovechar las pantallas personalizadas, puedes adaptar la experiencia de la app para atender mejor a tu audiencia, mejorar la interacción y aumentar la usabilidad.

Agregar una pantalla

  1. Selecciona Branded Mobile App desde tu panel de Kajabi. Deberías ver la configuración de diseño de tu app si ya completaste totalmente la configuración de tu app.
  2. Selecciona la pestaña Design.
  3. Haz clic en Customize.
  4. Haz clic en Screens para ver las pantallas existentes y crear otras.
  5. Selecciona + New screen.
  6. Ingresa el título de la pantalla.
  7. Selecciona el ícono que se mostrará para la pantalla.
  8. Luego, haz clic en Save & Publish:
BMA multiple screens 1.jpg BMA multiple screens 2.jpg La pantalla recién creada mostrará inicialmente un botón Add Widgets para comenzar a construir la pantalla personalizada.

Crear pantallas “other” (otras)

Además de las pantallas principales, puedes crear pantallas “other” (otras) que funcionan como páginas ocultas o de uso futuro dentro de la Branded App. Estas pantallas se pueden usar de varias maneras, como construir contenido que planeas publicar más adelante, o crear espacios dedicados que no sean directamente accesibles a través de la navegación principal de la app. Para crear una pantalla “other”, sigue el mismo proceso que al crear una pantalla, y luego mueve la pantalla a la sección Other screens: BMA multiple screens 2.jpg Así puedes usar las pantallas “other” de manera efectiva:
  1. Crear páginas de aterrizaje ocultas: construye una página de aterrizaje que solo sea accesible mediante un enlace de botón. Una vez que el usuario haga clic en el botón, será dirigido a esta pantalla, ofreciéndole una experiencia única que no es visible desde la navegación principal de la app.
  2. Agregar widgets a otras pantallas: puedes personalizar estas otras pantallas con todos los widgets disponibles (como imágenes o botones). Usa estas pantallas para mostrar promociones específicas u ofertas personalizadas, y dirige a los usuarios hacia ellas mediante botones o acciones colocados estratégicamente.
  3. Utilizar pantallas “other” como imanes de leads: crea pantallas que aporten valor, como vistas previas gratuitas o contenido exclusivo, y dirige a los usuarios hacia ellas mediante enlaces de botón o acciones de widgets de galería. Este enfoque te permite captar leads o generar interacción sin hacer que el contenido sea visible permanentemente en la navegación de la app.
  4. Planificación de contenido futuro: si estás preparando pantallas, puedes comenzar a construir el contenido en pantallas “other” ahora y luego moverlas a la navegación principal cuando estés listo para lanzarlas.
Al usar las pantallas “other” estratégicamente, puedes ampliar la flexibilidad y funcionalidad de la app, lo que te permite probar, planificar y ofrecer contenido personalizado a tu propio ritmo, manteniendo la experiencia del usuario fluida y atractiva.

Personalizar una pantalla

Una vez que hayas creado una pantalla, personalízala con widgets para mejorar su funcionalidad.

Widgets de pantalla disponibles

Product Widget: muestra cursos destacados, acceso a community o productos digitales. Button Widget: agrega botones de llamado a la acción que dirigen a los usuarios a otras pantallas, sitios web o recursos. Image Widget: sube elementos visuales que pueden ser estáticos o enlazar a contenido adicional. Gallery Widget: muestra múltiples imágenes en formato de presentación de diapositivas o cuadrícula. Text Widget: inserta secciones de texto para descripciones, mensajes de bienvenida o anuncios importantes. Video Widget: integra videos con imágenes de vista previa personalizables para interactuar con los usuarios. Embed Widget: te da la oportunidad de pegar cualquier código HTML para mostrar contenido adicional.
Nota: Recomendamos los siguientes criterios para el contenido multimedia: la resolución de video no debe exceder 1280x720 px o 720x1280 px si es vertical, y los archivos de imagen no deben superar los 2MB.

Editar el contenido de una pantalla

Para modificar una pantalla existente:
  1. Selecciona la Screen que deseas editar en la pestaña Screens.
  2. Haz clic en Add Widgets para abrir el editor.
  3. Agrega o ajusta widgets arrastrándolos y soltándolos en el diseño de la pantalla.
  4. Configura cada widget actualizando texto, imágenes, enlaces o videos según sea necesario.
  5. Haz clic en Save & Publish para que los cambios se activen en la app:
BMA multiple screens 1.jpg BMA multiple screens 2.jpg

Reordenar y administrar pantallas

Reordenar pantallas

Arrastra y suelta las pantallas en el panel para ajustar su orden. Esto determina cómo aparecen en la navegación de la app: BMA multiple screens 1.jpg

Eliminar pantallas

Haz clic en el ícono X junto a una pantalla para quitarla de la app: BMA multiple screens 1.jpg

Personalizar la navegación

Cambia el orden de las pestañas de navegación inferior, personaliza los nombres e íconos de navegación, y personaliza las pantallas que se muestran en las pestañas de navegación.

Reordenar pestañas de navegación

  1. Selecciona Branded Mobile App desde tu panel de Kajabi. Deberías ver la configuración de diseño de tu app si ya completaste totalmente la configuración de tu app.
  2. Selecciona la pestaña Design.
  3. Haz clic en Customize.
  4. Selecciona la pestaña Screens en la esquina superior izquierda.
  5. Luego, en Navigation Menu, arrastra y suelta las pantallas que quieras mostrar en las pestañas de navegación inferior.
  6. Haz clic en Save & Publish para que los cambios se activen en la app:
BMA multiple screens 1.jpg

Renombrar y personalizar los íconos de las pestañas de navegación

  1. Selecciona Branded Mobile App desde tu panel de Kajabi. Deberías ver la configuración de diseño de tu app si ya completaste totalmente la configuración de tu app.
  2. Selecciona la pestaña Design.
  3. Haz clic en Customize.
  4. Selecciona la pestaña Screens en la esquina superior izquierda.
  5. Luego, en Navigation Menu, selecciona la pantalla que quieras personalizar.
  6. A la derecha, puedes ingresar un título de pestaña personalizado y seleccionar el ícono deseado de la biblioteca de íconos de Kajabi:
BMA multiple screens 1.jpg