Aprende a crear una página del estudiante que mejore la experiencia de aprendizaje.
La interfaz del estudiante es la base de tu curso. Un diseño limpio y fácil de usar mantiene a los estudiantes enfocados y motivados, convirtiendo a los visitantes ocasionales en alumnos comprometidos.
Los temas y ajustes personalizados te permiten adaptar la apariencia de tu página del estudiante, creando un diseño pulido y atractivo con solo unos clics. Esta guía te mostrará cómo configurar esta página de manera eficiente, transformándola en un centro central que refleje el estilo de tu curso y garantice una experiencia de aprendizaje fluida.
¿Qué es una página del estudiante?
Dentro de la plataforma Mavibot, la página del estudiante es un panel personalizado que actúa como el espacio de trabajo principal de tu curso. Consolida todas las herramientas que un alumno necesita, permitiéndole:
- Acceder a todo el contenido y materiales del curso,
- Monitorear su progreso a través de módulos y lecciones,
- Completar lecciones y enviar tareas,
- Interactuar con instructores o facilitadores.
Este entorno integrado está diseñado para optimizar el proceso de aprendizaje, manteniendo a los estudiantes enfocados, organizados y motivados.
¿Por qué es importante la página del estudiante?
La página del estudiante estructura y agiliza el proceso de aprendizaje. Permite a los estudiantes:
- Localizar rápidamente los materiales necesarios y reanudar sus estudios desde el punto exacto donde se detuvieron.
- Monitorear fácilmente su progreso, viendo qué tareas están completadas y cuáles están pendientes.
- Recibir comentarios del instructor, facilitando un viaje de aprendizaje más personalizado y efectivo.
Dónde configurar la página del estudiante
El constructor de cursos está disponible con el plan de suscripción "Business".
Para comenzar, ve a la sección "Cursos" en MaviBot.
A continuación, selecciona el curso para el cual deseas configurar la página del estudiante y ve a su configuración.
Luego serás llevado a la página principal de configuración del curso, donde debes abrir la pestaña "Página del estudiante".
Ahora, para comenzar a personalizar la página del estudiante, localiza el ícono de engranaje para abrir el menú de configuración.
Al hacer clic en el ícono de engranaje, se abrirá un menú con configuraciones para el tema predeterminado (personalizado), tu propio tema (editable), así como configuraciones adicionales y la opción de agregar botones personalizados.
Tema principal
El tema principal de la página del estudiante consiste en temas preinstalados y listos para usar que te permiten personalizar la página en solo un par de clics.
Paso 1: Elige un esquema de color para el Tema principal
Puedes elegir entre 7 temas claros y 2 temas oscuros.
Cuando se aplica un tema personalizado, los colores de todos los elementos principales de la página se actualizan, incluyendo:
- Fondos (imágenes de portada, fondo de página, barra de progreso, bloques de lecciones)
- Botones
- Relleno de la barra de progreso
- Bordes, contornos, etc.
Paso 2: Elige el nivel de radio de borde
a) Radio cero – todas las esquinas y elementos de la página aparecerán cuadrados.
b) Radio medio – las esquinas y elementos aparecerán redondeados u ovalados.
c) Radio máximo – todas las esquinas y elementos de la página tendrán bordes completamente redondeados.
¡Excelente!
Ahora sabes cómo configurar rápidamente el tema principal de tu página del estudiante.
Si deseas agregar botones adicionales, subir una imagen de portada personalizada o aplicar tu propio esquema de color único a la página, te recomendamos continuar con las siguientes secciones de este artículo.
Tema personalizado
Los ajustes en la pestaña "Tema personalizado" te permiten aplicar tus propios esquemas de color únicos y variados a los elementos de la página del estudiante.
Ten en cuenta
El tema principal y el tema personalizado se pueden usar juntos.
Por ejemplo, puedes usar los ajustes en la pestaña de Tema personalizado para aplicar colores solo a algunos elementos, mientras mantienes el resto de la página con el estilo del Tema principal seleccionado.
Color de fondo
Este ajuste cambia el color de fondo de toda la página, excluyendo elementos individuales.
Haz clic en el cuadrado para abrir la paleta de colores y seleccionar el color deseado.
Además de una amplia paleta de colores para cada elemento, también puedes ajustar la intensidad del color usando la escala de transparencia.
Color de superposición de fondo
Usa los ajustes de superposición de fondo para aplicar un color unificado a los contenedores visuales principales de la página:
a) La barra de progreso;
b) Bloques individuales de lecciones;
c) El área de la imagen de portada del curso.
Color de acento
Los ajustes de color de acento te permiten cambiar el esquema de color de los elementos principales resaltados en la página del estudiante, incluyendo:
a) botones de navegación de lecciones;
b) el relleno de la barra de progreso;
c) bordes, fondos de números de lecciones y elementos similares.
Color del texto de fondo de la página
Este ajuste te permite elegir un esquema de color atractivo para el texto mostrado en el fondo de la página.
Color del texto de superposición
Este ajuste te permite cambiar el color del texto para los elementos principales de la página del estudiante que aparecen sobre superposiciones de fondo.
Color del texto de acento
Usa este ajuste para definir el color del texto (fuente) para cualquier elemento que se encuentre sobre un fondo de color de acento, incluyendo cuadros de llamada y botones interactivos.
Configuraciones adicionales
En las configuraciones adicionales de la página del estudiante, puedes subir una imagen para usar como portada de la página.
Ten en cuenta
La imagen subida como portada de la página del estudiante desde tu dispositivo no debe superar los 15 MB de tamaño.
Paso 1: Subir una imagen
Puedes subir una imagen directamente desde tu computadora.
O subir una imagen a través de un enlace desde tu almacenamiento de archivos.
La ventaja de subir una imagen a través de un enlace desde el almacenamiento de archivos es que puedes usar una imagen de cualquier tamaño como portada.
Para más detalles sobre cómo usar el almacenamiento de archivos, consulta el artículo "Almacenamiento de archivos".
Paso 2: Altura de la portada
Después de subir la imagen, establece la altura adecuada de la portada en la página del estudiante.
Paso 3: Posición de la imagen
Puedes usar las opciones de posicionamiento predefinidas para alinear la imagen al centro, izquierda, derecha o abajo, o elegir configuraciones personalizadas.
Al mover el control circular, puedes posicionar la imagen exactamente como desees.
Paso 4: Tamaño de la imagen
El campo de tamaño de imagen acepta valores de contain / cover, así como valores numéricos en píxeles (px) y porcentajes (%).
1) valores contain/cover
2) valores numéricos
Paso 5: Repetición de la imagen
La imagen se puede repetir a lo largo del eje Y, es decir, verticalmente; a lo largo del eje X, es decir, horizontalmente o sin repetición.
Paso 6: Casillas de verificación
Para mejorar la experiencia del estudiante en su página personal, puedes habilitar la visualización de:
- la barra de progreso,
- el número de lecciones completadas, y
- el número de tareas aprobadas.
Si no deseas usar estos elementos en la página, puedes desactivar las casillas de verificación.
Botones
La página del estudiante incluye una función para agregar botones de llamada a la acción personalizados debajo de la barra de progreso. Puedes vincular estos botones a sitios web externos, documentos u otras páginas importantes.
Para agregar un botón, abre la pestaña correspondiente en la configuración de la página del estudiante.
Luego haz clic en "Agregar botón".
Se abrirá una ventana modal para la configuración del botón e ingresa un texto para el botón.
Ahora, especifica el enlace de destino (URL) para este botón.
Los colores del botón heredarán automáticamente la paleta del tema principal. Sin embargo, puedes anular esto estableciendo un color personalizado tanto para su fondo como para su texto.
Luego, haz clic en "Guardar".
El botón ahora está guardado y activo. Lo verás mostrado debajo de la barra de progreso en la página del estudiante.
Puedes agregar múltiples botones – para hacerlo, simplemente ve al menú de configuración y haz clic en "Agregar botón" debajo del existente.
Banners
Para promocionar recursos clave, puedes agregar banners cliqueables a la página del estudiante. Estos banners pueden enlazar a cualquier URL que especifiques, como un bot de mensajería, un grupo comunitario, un documento importante o un sitio web externo.
Procedamos con la configuración.
Paso 1: Acceder a la configuración de banners
En la configuración de la página del curso, localiza y expande la sección "Banners".
Para hacerlo, haz clic en la sección en el menú desplegable de configuración:
Paso 2: Sube una imagen.
Después de subirla, la imagen aparecerá en el campo de configuración.
Paso 3: Ve a la configuración de la imagen.
Para hacerlo, haz clic en el ícono de engranaje en la esquina superior izquierda de la imagen subida, y se abrirá una ventana modal de configuración:
Paso 4: Establece el enlace de destino
Ingresa la URL completa a la que los estudiantes serán redirigidos al hacer clic en el banner. Puede ser una página web, un bot de mensajería o cualquier otro recurso en línea.
Paso 5: Configura las dimensiones del banner
Establece el tamaño de visualización del banner ingresando valores para ancho y alto.
Importante: Ingresa solo valores numéricos en estos campos (por ejemplo,
300). No incluyas unidades comopxo%.
Paso 6: Guarda tu configuración
Haz clic en "Guardar" para aplicar todos los ajustes del banner.
¡Configuración completa!
Tu banner cliqueable ahora está activo. Aparecerá en el lado derecho de la página del estudiante, debajo de la barra de progreso (siempre que la función de banner esté habilitada).
Cómo agregar múltiples banners
Puedes agregar varios banners a una sola página. Para hacerlo, sube una imagen en la configuración y configúrala como se describió anteriormente.
Si haces clic en "Agregar imagen" debajo de una imagen ya subida, el nuevo banner aparecerá debajo del banner previamente agregado en la página del estudiante.
- Selecciona la opción de subir imagen debajo del banner agregado (el botón grande de subir en la parte inferior):
- La imagen se ha subido debajo del banner previamente agregado.
- En la página del estudiante, el banner aparecerá en la siguiente línea después del previamente agregado.
Si haces clic en el botón "+" a la derecha de una imagen ya subida, el nuevo banner aparecerá en la misma fila que el banner previamente agregado en la página del estudiante.
- Haz clic en el botón "+" a la derecha de la imagen subida en la configuración de la página.
La imagen recién subida se colocará a la derecha.
- En la página del estudiante, el banner se mostrará en la misma fila que el previamente subido.
Puedes agregar banners tanto en la misma fila como en filas posteriores al mismo tiempo.
¡Todo listo!
¡Ahora sabes cómo configurar completamente la página del estudiante!
Vista previa de la página
Después de configurar la página del estudiante, no olvides guardar tu progreso.
Después de guardar la configuración, haz clic en el botón "Vista previa".
A continuación, selecciona "Ir a la página del estudiante".
Serás llevado a la vista previa de la página del estudiante.
Mientras estás en modo de edición, el panel de vista previa te permite inspeccionar visualmente el diseño final. Puedes ver cómo todos los elementos—como la barra de progreso, banners, botones y bloques de lecciones—están posicionados y estilizados según tus configuraciones.
Ten en cuenta
La vista previa es solo para demostración visual. Los elementos en la vista previa de la página del estudiante no son cliqueables y no activan ninguna navegación o funcionalidad real.