# Sección de curso en línea

En el mundo del aprendizaje en línea, la facilidad de navegación desempeña un papel clave para atraer y retener usuarios. Las tarjetas de curso personalizables son una excelente manera de hacer que tu sitio web sea más interactivo e informativo.

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

Estas tarjetas permiten a los visitantes encontrar rápidamente los programas que les interesan y navegar fácilmente a las páginas de los cursos con solo un botón. En este artículo, veremos cómo configurar una sección de tarjetas de curso personalizables para mejorar la usabilidad de tu sitio web y ayudar a los usuarios a alcanzar sus objetivos educativos más rápido.

En lugar de usar tarjetas didácticas en línea, puedes añadir listas de lecciones a la página del sitio web: solo selecciona el curso requerido en la sección y se mostrarán todas las lecciones.

## Cómo añadir la sección "Tarjetas de curso"

Para añadir la sección "Tarjetas de curso", haz clic en el "+" en el modo de edición de tu sitio web.

Luego busca la sección "Tarjetas de curso" en el menú que se abre y haz clic en ella para añadir la sección a tu sitio web:

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

La sección se añadirá a tu sitio web y se abrirá para ti el menú de configuración del contenido:

<figure><img src="/files/71815c7f58975a65d161e76f5e27e56a43f1a0c8" alt=""><figcaption></figcaption></figure>

### Sección de contenido

La configuración del contenido de la sección Tarjetas de curso consiste en seleccionar uno o varios cursos que ya se hayan creado en el proyecto para mostrarlos en el sitio web y personalizar los elementos de la tarjeta.&#x20;

{% hint style="info" %}
Cómo crear cursos en la plataforma Salebot se describe en la sección “[Cursos en línea”](broken://pages/b351f91f9696706dc20b818e365f20a369d83df4).
{% endhint %}

#### Elegir un curso

Elige los cursos que te gustaría mostrar en tu sitio web:

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

Para ello, marca la casilla con el nombre del curso requerido.

A su vez, los cursos seleccionados se mostrarán inmediatamente en la página de tu sitio web con la portada que hayas configurado en los ajustes del curso.

#### Personalización

Después de haber seleccionado los cursos necesarios, procede a personalizar los elementos de la tarjeta:

<figure><img src="/files/34511640aeb16579af4ac4ede06cd58eb2d52b45" alt=""><figcaption></figcaption></figure>

* Sombra

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

Para las tarjetas de curso en la sección, puedes ajustar la intensidad de la sombra:

a) sin sombra:

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

b) sombra ligera:

<figure><img src="/files/2abb5107883a8ac70f3bc777d243fbd09e8fb04b" alt=""><figcaption></figcaption></figure>

c) sombra intensa:

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

#### Configuración del color de los elementos de la tarjeta

Personaliza la apariencia de la tarjeta ajustando los colores de varios elementos. También puedes añadir efectos interactivos al pasar el cursor.

* **Color del texto:** Cambia el color principal del texto en la tarjeta (excluidos los botones).
* **Fondo de la tarjeta:** Establece el color de fondo de la tarjeta.
* **Color del borde:** Define el color del contorno o marco de la tarjeta.
* **Texto del botón:** Establece el color del texto dentro del botón (estado estático).
* **Fondo del botón:** Establece el color de fondo del botón.

**Efectos interactivos al pasar el cursor (sección opcional):**

Activa los efectos al pasar el cursor para cambiar dinámicamente el color de estos elementos cuando un usuario mueva el cursor sobre la tarjeta.

Ahora sabes cómo mostrar los cursos disponibles en tu sitio de MaviBot usando la sección "Tarjetas de curso".

{% hint style="info" %}
Para la configuración del fondo y la visualización, consulta el artículo [«Configuración global de la sección»](/doc/es/websites/sitios/blocks/settings.md).
{% endhint %}

## Cómo añadir el bloque "Lecciones"

Para añadir un bloque para mostrar la lista de lecciones del curso, cambia al modo de edición del sitio web, coloca el cursor sobre el área de trabajo y luego haz clic en "+":

Se abre un menú a la derecha con las secciones disponibles del sitio, donde debes encontrar el bloque "Lecciones":

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

Haz clic en "Tarjetas de curso" y luego se abrirá un menú para configurar el contenido del bloque:

<figure><img src="/files/4209f396877d898b8b2d8f15637e833b176c3757" alt=""><figcaption></figcaption></figure>

Solo necesitas seleccionar el curso requerido, que ya se haya creado en Salebot, en el menú desplegable y hacer clic en "Guardar".

Luego ve a ajustes para personalizar el contenido del bloque:

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

### Personalización

Cuando haces clic en el botón "Ajustes" y pasas el cursor sobre la sección, se abren los ajustes para personalizar el contenido y el propio bloque:

<figure><img src="/files/4c353e9e601f04a9abf2b5409679ea0bd0a6fa3b" alt=""><figcaption></figcaption></figure>

**¿Qué ajustes están disponibles?**

1. Estilo de la lista de lecciones

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

De forma predeterminada, el estilo de la lista de lecciones se muestra en un nuevo formato. Si es necesario, puedes establecer una versión más concisa del formato clásico:

<figure><img src="/files/18eab3818584a1f95e1e1c88b6a71034a3d37a67" alt=""><figcaption><p>Estilo clásico</p></figcaption></figure>

2. Estilo de numeración

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

El estilo de numeración está disponible para un nuevo estilo de visualización de las lecciones del curso. La numeración cambia en la propia tarjeta de la lección:

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

3. Iconos de lecciones

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

**Se muestran si añadiste una vista previa dentro de la propia lección en los ajustes del curso.**

#### **Cómo añadir iconos**

Paso 1. Ve a los ajustes de la lección:

Para ello, ve al modo de configuración del curso y busca la pestaña Lecciones:

<figure><img src="/files/70ee41abadc48db948ce02eed5ec033691308762" alt=""><figcaption></figcaption></figure>

A continuación, haz clic en "Editar", tras lo cual la página de la lección se abrirá para su edición.

Paso 2. Abre los ajustes de la página de la lección.

<figure><img src="/files/68ebf771af3041049d5700dcc4149d9b4ef07a7d" alt=""><figcaption></figcaption></figure>

Ve a la sección "General" en los ajustes de la página de la lección:

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

Paso 3. Sube la vista previa de la lección

Expande la lista de ajustes de imagen en la configuración de la información básica:

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

Sube una imagen para la vista previa de la lección:

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

Guarda los ajustes.

{% hint style="success" %}
¡Hecho! Ahora las vistas previas de las lecciones se mostrarán como iconos en la sección Lecciones del sitio web.
{% endhint %}

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

3. Patrón de fondo

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

Añade volumen y singularidad a tus tarjetas de lección:

<figure><img src="/files/2c181533c6cbac6f8f1a509a568ce4548c42093c" alt=""><figcaption></figcaption></figure>

4. Redondeo de elementos

El valor se establece en píxeles y redondea las esquinas de las tarjetas de lección.

5. Estilo de la tarjeta de lección

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

Ayuda a organizar las tarjetas de lección en una sola fila o en una fila con o sin guionamiento.

6. Color de fondo y de texto

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

Hay disponible una amplia paleta de colores para establecer el color de fondo de la tarjeta y el color de la fuente en la tarjeta de lección:

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

Ahora sabes cómo añadir listas de lecciones a tu sitio web y personalizar el contenido de la sección.

{% hint style="info" %}
Para la configuración del fondo y la visualización, consulta el artículo [«Configuración global de la sección»](/doc/es/websites/sitios/blocks/settings.md).
{% 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/websites/sitios/blocks/course.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.