# Página del estudiante

Aprende a crear una página de 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.

<div align="left"><figure><img src="/files/494a2926df884f9ddcbf773b95f9a144db8872a1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/5955b0a549708846a875798cb5c72e30b6a1ba27" alt=""><figcaption></figcaption></figure></div>

Los temas y ajustes personalizados te permiten adaptar el aspecto y la sensación de tu página de estudiante, creando un diseño pulido y atractivo en solo unos clics. Esta guía te mostrará cómo configurar esta página de forma eficiente, transformándola en un centro principal que refleje el estilo de tu curso y garantice una experiencia de aprendizaje fluida.

**¿Qué es una página de estudiante?**\
Dentro de la plataforma Salebot, la página de estudiante es un panel personalizado que actúa como el espacio de trabajo principal de tu curso. Reúne todas las herramientas que necesita un alumno, permitiéndole:

* Acceder a todo el contenido y los materiales del curso,
* Hacer seguimiento de su progreso a través de módulos y lecciones,
* Completar lecciones y entregar tareas,
* Interactuar con instructores o facilitadores.

Este entorno integrado está diseñado para simplificar el recorrido de aprendizaje, manteniendo a los estudiantes enfocados, organizados y motivados.

<figure><img src="/files/494a2926df884f9ddcbf773b95f9a144db8872a1" alt=""><figcaption></figcaption></figure>

**¿Por qué es importante la página de estudiante?**

La página de estudiante estructura y agiliza el proceso de aprendizaje. Permite a los estudiantes:

* Localizar rápidamente los materiales necesarios y retomar sus estudios exactamente desde el punto en que los dejaron.
* Hacer seguimiento fácilmente de su progreso, viendo qué tareas están completadas y cuáles siguen pendientes.
* Recibir comentarios del instructor, facilitando un recorrido de aprendizaje más personalizado y eficaz.

## Dónde configurar la página de estudiante

{% hint style="success" %}
El creador de cursos está disponible con el plan de suscripción “Businnes”.
{% endhint %}

Para empezar, ve a la sección “Cursos” en MaviBot.

<figure><img src="/files/1a0b65de588784ad07e894a29e25e70a78c8bf0d" alt=""><figcaption></figcaption></figure>

A continuación, selecciona el curso para el que quieres configurar la página de estudiante, y ve a su **ajustes.**

<figure><img src="/files/606d60838017748091d4fd1db179a5d0a76ee23d" alt=""><figcaption></figcaption></figure>

Entonces serás llevado a la página principal de ajustes del curso, donde debes abrir la**Página de estudiante**”.

<figure><img src="/files/5550b5e1ee8d8b777c94d07189e3e377e4421847" alt=""><figcaption></figcaption></figure>

Ahora, para empezar a personalizar la página de estudiante, localiza el icono de engranaje para abrir el menú de ajustes.

<figure><img src="/files/8fe408c962e673d27684f1bbd80ad794a9c0e3b5" alt=""><figcaption></figcaption></figure>

Cuando hagas clic en el icono de engranaje, se abrirá un menú con ajustes para el tema predeterminado (personalizado), tu propio tema (editable), así como ajustes adicionales y la opción de añadir botones personalizados.

<figure><img src="/files/021494c6a0156e493749d1fc79e8794aefd8d103" alt=""><figcaption></figcaption></figure>

## Tema principal

El tema principal de la página de estudiante consiste en temas preinstalados y listos para usar que te permiten personalizar la página en un par de clics.

<figure><img src="/files/7c36e1835b3158c4c7127a0160eb9b70d5439ef2" alt=""><figcaption></figcaption></figure>

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, se actualizan los colores de todos los elementos principales de la página, incluidos:

* Fondos (imágenes de portada, fondo de la página, barra de progreso, bloques de lección)
* Botones
* Relleno de la barra de progreso
* Bordes, contornos, etc.

**Paso 2: Elige el nivel de radio del borde**

**a) Radio cero** – todas las esquinas y los elementos de la página se verán cuadrados.

<figure><img src="/files/6bb3f64c8394deb04d73b1de0b390ee88d348b2f" alt=""><figcaption></figcaption></figure>

b) Radio medio – las esquinas y los elementos se verán redondeados o con forma ovalada.

<figure><img src="/files/77ee301a9eec2b32c61f8c87ebd8f30c5c5c8c05" alt=""><figcaption></figcaption></figure>

c) Radio máximo – todas las esquinas y los elementos de la página tendrán bordes totalmente redondeados.

<figure><img src="/files/38f0bbb72a6005410d2a860c8dc5b5e64aebe834" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
¡Excelente!

Ahora ya sabes cómo configurar rápidamente el tema principal de tu página de estudiante.

Si quieres añadir botones extra, subir una imagen de portada personalizada o aplicar a la página tu propio esquema de color único, te recomendamos continuar con las siguientes secciones de este artículo.
{% endhint %}

## 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 de estudiante.

<figure><img src="/files/86edf31cabf026b2851dfd40b59192a97725e85d" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Tenga en cuenta

El tema principal y el tema personalizado pueden usarse juntos.

Por ejemplo, puedes usar los ajustes de la pestaña Tema personalizado para aplicar colores solo a unos pocos elementos, mientras mantienes el resto de la página con el estilo del tema principal seleccionado.
{% endhint %}

#### Color de fondo

Este ajuste cambia el color de fondo de toda la página, excluyendo los elementos individuales.

<figure><img src="/files/13eb5b37ab602d3074da4b767fe881ef9597a467" alt=""><figcaption></figcaption></figure>

Haz clic en el cuadrado para abrir la paleta de colores y seleccionar el color deseado.

<figure><img src="/files/7920131bb29691e879c0ce45827ce32e6b10902e" alt=""><figcaption></figcaption></figure>

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 del fondo

Usa los ajustes de superposición del fondo para aplicar un color unificado a los contenedores visuales principales de la página:

a) La barra de progreso;

b) Bloques de lección individuales,;

c) El área de la imagen de portada del curso.

<figure><img src="/files/83980a9003ae0eeb2dacd99746a3188d4a739670" alt=""><figcaption></figcaption></figure>

#### Color de acento

Los ajustes de color de acento te permiten cambiar el esquema de color de los principales elementos destacados de la página de estudiante, incluidos:

a) los botones de navegación de lecciones;

b) el relleno de la barra de progreso;

c) los bordes, los fondos de los números de lección y elementos similares.

<figure><img src="/files/7b4f679e0e28e8ef027b20b0eb62535d983ccb30" alt=""><figcaption></figcaption></figure>

#### Color del texto del fondo de la página

Este ajuste te permite elegir un esquema de color atractivo para el texto que se muestra sobre el fondo de la página.

<figure><img src="/files/118356d85a9cbde35be2f682f59c79d7df8b267d" alt=""><figcaption></figcaption></figure>

#### Color del texto de superposición

Este ajuste te permite cambiar el color del texto de los elementos principales de la página de estudiante que aparecen sobre superposiciones de fondo.

<figure><img src="/files/93d92c27d5acce14acb4d64ae55ceb8a8c98507a" alt=""><figcaption></figcaption></figure>

#### Color del texto de acento

Usa este ajuste para definir el color del texto (fuente) de cualquier elemento que esté sobre un fondo de color de acento, incluidos los cuadros de llamada y los botones interactivos.

<figure><img src="/files/3cb361828e81783163e66c88ec5d6dbd2ecb39f4" alt=""><figcaption></figcaption></figure>

#### Ajustes adicionales

En los ajustes adicionales de la página de estudiante, puedes subir una imagen para usarla como portada de la página.

<figure><img src="/files/b135cc504548218a3cc10099cbab1f411e6d56d7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Tenga en cuenta

La imagen subida como portada de la página de estudiante desde tu dispositivo no debe superar los 15 MB de tamaño.
{% endhint %}

Paso 1: Subir una imagen

Puedes subir una imagen directamente desde tu computadora.

<figure><img src="/files/6708b272c6bee71061bec45ffd4795c716b598dc" alt=""><figcaption></figcaption></figure>

O subir una imagen mediante un enlace desde tu almacenamiento de archivos.

<figure><img src="/files/36a9b747a169517f41664b8ea4f327799a280fe9" alt=""><figcaption></figcaption></figure>

La ventaja de subir una imagen mediante un enlace desde el almacenamiento de archivos es que puedes usar una imagen de cualquier tamaño como portada.

{% hint style="info" %}
Para obtener más detalles sobre cómo usar el almacenamiento de archivos, consulta el artículo "[Almacenamiento de archivos](/doc/es/chatbot/cloud.md)".
{% endhint %}

Paso 2: Altura de la portada

Después de subir la imagen, establece la altura adecuada de la portada en la página de estudiante.

<figure><img src="/files/1367c4f1afc1731ebe54ef2077b4cc53fceac20a" alt=""><figcaption><p>Altura: 260px</p></figcaption></figure>

<figure><img src="/files/a2ccc5874177fe53d529ade79890053aaea80234" alt=""><figcaption><p>Altura: 400px</p></figcaption></figure>

Paso 3: Posición de la imagen

<figure><img src="/files/00abb9bf5f40924b923f08cac7b0905e6d7902ee" alt=""><figcaption></figcaption></figure>

Puedes usar la **opciones preestablecidas de posicionamiento** para alinear la imagen al c**entro, izquierda, derecha o abajo**, o elige **configuración personalizada.**

<figure><img src="/files/a2516e182f007e46010ee592ce5d8cab736a4264" alt=""><figcaption></figcaption></figure>

Moviendo el control circular, puedes colocar la imagen exactamente como quieras.

Paso 4: Tamaño de la imagen

<figure><img src="/files/8b5564054d26f4ee4207b9d64c22f008f1ef1583" alt=""><figcaption></figcaption></figure>

El **el campo de tamaño de imagen** acepta valores de c**ontain / cover**, así como **valores numéricos en píxeles (px)** y **porcentajes (%)**.

1\) valores contain/cover

<figure><img src="/files/0497d36cb16445ce266b3217c259ab5704416844" alt=""><figcaption></figcaption></figure>

2\) valores numéricos

<figure><img src="/files/5cf238882aabad37c6e724e090a0eea62b084b0a" alt=""><figcaption></figcaption></figure>

Paso 5: Repetición de la imagen

La imagen puede repetirse a lo largo del **eje Y**, es decir, **verticalmente;** a lo largo del **eje X**, es decir, **horizontalmente** o sin repetición.

<figure><img src="/files/9ca3235ebf2f8e0c230b7f87ca14ddb1b351f15c" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/b350b1ef59600faabd5335ed8d8fd72b7b362f65" alt=""><figcaption></figcaption></figure>

Si no quieres usar estos elementos en la página, puedes **desactivar las casillas de verificación.**

## Botones

La página de estudiante incluye una función para añadir botones personalizados de llamada a la acción debajo de la barra de progreso. Puedes vincular estos botones a sitios web externos, documentos u otras páginas importantes.

<figure><img src="/files/cacb39ddefbc224480e00434490bb48e217474be" alt=""><figcaption></figcaption></figure>

Para añadir un botón, abre la pestaña correspondiente en los **ajustes de la página de estudiante.**

<figure><img src="/files/57b1de7fe6fdbb48db97b531572b01374bafd3dd" alt=""><figcaption></figcaption></figure>

Luego haz clic en "**Añadir botón"**.

Entonces se abrirá una ventana modal para la configuración del botón e introduce un texto para el botón.

<figure><img src="/files/0716526581f00ed140340312a9853449e31fabd0" alt=""><figcaption></figcaption></figure>

Ahora, especifica el enlace de destino (URL) para este botón.

<figure><img src="/files/09eee37e41d485674d1232c16b50d4cb0bbce858" alt=""><figcaption></figcaption></figure>

Los colores del botón heredarán automáticamente la paleta del tema principal. Sin embargo, puedes sobrescribir esto estableciendo un color personalizado tanto para su fondo como para su texto.

<figure><img src="/files/5ad7719c71b9b73f30557760db5e91356478a1b2" alt=""><figcaption></figcaption></figure>

Luego, haz clic en "Guardar".

<figure><img src="/files/3441949a73a3c23e62cab0d4613d727d88ff9680" alt=""><figcaption></figcaption></figure>

El botón ya está guardado y activo. Lo verás mostrado debajo de la barra de progreso en la página de estudiante.

<figure><img src="/files/9c43abe90c18879bbfa446af8ec7b687cf631081" alt=""><figcaption></figcaption></figure>

Puedes añadir varios botones; para ello, simplemente ve al menú de ajustes y haz clic en "Añadir botón" debajo del existente.

<figure><img src="/files/235f17c79453974d18daeebc45aece2d73f565ca" alt=""><figcaption></figcaption></figure>

## Banners&#x20;

<figure><img src="/files/44b32e5ded3a1ec8a2b907588d5ea8f79a32f14b" alt=""><figcaption></figcaption></figure>

Para promocionar recursos clave, puedes añadir banners clicables a la página de estudiante. Estos banners pueden enlazar a cualquier URL que especifiques, como un bot de mensajería, un grupo de la comunidad, un documento importante o un sitio web externo.

Sigamos con la configuración.

**Paso 1: Acceder a los ajustes del banner**

En los ajustes de la página del curso, localiza y despliega **"Banners"** sección.

<figure><img src="/files/0716526581f00ed140340312a9853449e31fabd0" alt=""><figcaption></figcaption></figure>

Para hacerlo, haz clic en la sección del menú desplegable de ajustes.:

<figure><img src="/files/0a11646e46abf3d6c597a1ce400f500f5c983817" alt=""><figcaption></figcaption></figure>

Paso 2: Sube una imagen.

<figure><img src="/files/3c6477f47eb64275ebb9cc9ec6e3327fce966246" alt="" width="563"><figcaption></figcaption></figure>

Después de subirla, la imagen aparecerá en el campo de ajustes.

Paso 3: Ve a los ajustes de la imagen.

<figure><img src="/files/64130a03209db0623b98e1ad445ef65eebbe3907" alt=""><figcaption></figcaption></figure>

Para hacerlo, haz clic en el icono de engranaje en la esquina superior izquierda de la imagen subida, y se abrirá una ventana modal de ajustes:

<figure><img src="/files/e86a97adeb5e91ba822ca8fadda7c7b1ce1f73b8" alt=""><figcaption></figcaption></figure>

**Paso 4: Establece el enlace de destino**\
Introduce la URL completa a la que serán redirigidos los estudiantes 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 introduciendo valores para el ancho y la altura.

> **Importante:** Introduce solo valores numéricos en estos campos (por ejemplo, `300`). No incluyas unidades como `px` o `%`.

**Paso 6: Guarda tu configuración**\
Haz clic en **"Guardar"** para aplicar todos los ajustes del banner.

**¡Configuración completa!**\
Tu banner clicable ya está activo. Aparecerá en el lado derecho de la página de estudiante, debajo de la barra de progreso (siempre que la función de banners esté habilitada).

### Cómo añadir varios banners

Puedes añadir varios banners a una sola página. Para ello, sube una imagen en los ajustes y configúrala como se describe arriba.

Si haces clic en "Añadir imagen" debajo de una imagen ya subida, el nuevo banner aparecerá debajo del banner añadido previamente en la página del estudiante.

1. Selecciona la opción de carga de imagen debajo del banner añadido (el botón grande de carga en la parte inferior):

<figure><img src="/files/971c2415d0a57373fe4d51a4eb660221152caece" alt=""><figcaption></figcaption></figure>

2. La imagen se ha subido debajo del banner añadido previamente.

<figure><img src="/files/0ce2150454624f7afd89e32bba8bd37aff9782ba" alt=""><figcaption></figcaption></figure>

3. En la página del estudiante, el banner aparecerá en la siguiente línea después del añadido previamente.

<figure><img src="/files/8838190e31569b59df74da09f37c980a4ea62f1e" alt=""><figcaption></figcaption></figure>

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 añadido previamente en la página del estudiante.

1. Haz clic en el botón "+" a la derecha de la imagen subida en los ajustes de la página.

<figure><img src="/files/8a04709d0f7b9936c03e8a582917e157f3c95a3b" alt=""><figcaption></figcaption></figure>

La imagen recién subida se colocará a la derecha.

<figure><img src="/files/ac1fd9442f5df2c3c12fb58148f1e99611c75f56" alt="" width="563"><figcaption></figcaption></figure>

2. En la página del estudiante, el banner se mostrará en la misma fila que el subido previamente.

<figure><img src="/files/0e87d2d6893e5918034df148317226b4ba86b772" alt=""><figcaption></figcaption></figure>

Puedes añadir banners tanto en la misma fila como en filas posteriores al mismo tiempo.

<figure><img src="/files/6f078c2ec654480467028b6aeadf3d22ff5ed595" alt=""><figcaption><p>Página de estudiante</p></figcaption></figure>

<figure><img src="/files/aa15ed8a09a21e40850aae8c18ab200c50f4f14c" alt=""><figcaption><p>Ajustes del banner</p></figcaption></figure>

{% hint style="success" %}
¡Todo listo!\
Ahora ya sabes cómo configurar por completo la página del estudiante.
{% endhint %}

## Vista previa de la página

Después de configurar la página del estudiante, no olvides guardar tus cambios.

<figure><img src="/files/d19fb21d4985d24d9f252c1ee085d097352d184e" alt=""><figcaption></figcaption></figure>

Después de guardar los ajustes, haz clic en el botón "Vista previa".

<figure><img src="/files/c772914ae18df5cf17baf0b8e3d9c49f040085dd" alt=""><figcaption></figcaption></figure>

A continuación, selecciona "Ir a la página de estudiante".

<figure><img src="/files/390b0fd5a95f4e5cd0c791f1bc892d2eba4af9e1" alt=""><figcaption></figcaption></figure>

Serás llevado a la vista previa de la página de estudiante.

<figure><img src="/files/040afaf4e4ee77f15161f6fd042bf0ec791e6994" alt=""><figcaption></figcaption></figure>

Mientras estás en modo edición, el panel de vista previa te permite inspeccionar visualmente el diseño final. Puedes ver cómo se posicionan y se estilizan todos los elementos, como la barra de progreso, los banners, los botones y los bloques de lección, según tus configuraciones.

{% hint style="warning" %}

## Tenga en cuenta

La vista previa es solo para **demostración visual**. Los elementos de la vista previa de la página de estudiante **no son clicables** y no activan ninguna navegación o funcionalidad real.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/es/lms/builder/student_page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.