En el mundo del aprendizaje en línea, la facilidad de navegación juega 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.
Estas tarjetas permiten a los visitantes encontrar rápidamente los programas que les interesan y navegar fácilmente a las páginas del curso 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 agregar listas de lecciones a la página del sitio web: simplemente selecciona el curso requerido en la sección y se mostrarán todas las lecciones.
Cómo agregar la sección "Tarjetas de curso"
Para agregar 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 agregar la sección a tu sitio web:
La sección se agregará a tu sitio web y se abrirá el menú de configuración de contenido para ti:
Sección de contenido
Configurar el contenido de la sección Tarjetas de curso consiste en seleccionar un curso (o varios) que ya se haya creado en el proyecto para mostrarlo en el sitio web y personalizar los elementos de la tarjeta.
Cómo crear cursos en la plataforma Mavibot se describe en la sección “Cursos en línea”.
Elegir un curso
Elige los cursos que te gustaría mostrar en tu sitio web:
Para hacerlo, 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 configuraste en la configuración del curso.
Personalización
Después de haber seleccionado los cursos necesarios, procede a personalizar los elementos de la tarjeta:
- Sombra
Para las tarjetas de curso en la sección, puedes ajustar la intensidad de la sombra:
a) sin sombra:
b) sombra ligera:
c) sombra fuerte:
Configuración de color de los elementos de la tarjeta
Personaliza la apariencia de la tarjeta ajustando los colores de varios elementos. También puedes agregar efectos interactivos al pasar el cursor.
- Color del texto: Cambia el color del texto principal en la tarjeta (excluyendo 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):
Habilita los efectos al pasar el cursor para cambiar dinámicamente el color de estos elementos cuando el usuario mueve 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".
Para la configuración de fondo y visualización, consulta el artículo "Configuración global de secciones".
Cómo agregar el bloque "Lecciones"
Para agregar un bloque que muestre la lista de lecciones del curso, cambia al modo de edición del sitio web y pasa el cursor sobre el área de trabajo, luego haz clic en "+":
Se abre un menú a la derecha con las secciones disponibles del sitio, donde debes encontrar el bloque "Lecciones":
Haz clic en "Tarjetas de curso", y luego se abrirá un menú para configurar el contenido del bloque:
Solo necesitas seleccionar el curso requerido, que ya se haya creado en Mavibot, en el menú desplegable y hacer clic en "Guardar".
Luego ve a la configuración para personalizar el contenido del bloque:
Personalización
Al hacer clic en el botón "Configuración" y pasar el cursor sobre la sección, se abren las opciones para personalizar el contenido y el bloque en sí:
¿Qué configuraciones están disponibles?
- Estilo de la lista de lecciones
Por defecto, el estilo de la lista de lecciones se muestra en un formato nuevo. Si es necesario, puedes establecer una versión más concisa del formato clásico:
- Estilo de numeración
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:
- Iconos de lecciones
Se muestran si agregaste una vista previa dentro de la lección en la configuración del curso.
Cómo agregar iconos
Paso 1. Ve a la configuración de la lección:
Para hacerlo, ve al modo de configuración del curso y busca la pestaña Lecciones:
Luego, haz clic en "Editar", después de lo cual se abrirá la página de la lección para editar.
Paso 2. Abre la configuración de la página de la lección.
Ve a la sección "General" en la configuración de la página de la lección:
Paso 3. Sube la vista previa de la lección
Expande la lista de configuraciones de imagen en la configuración de información básica:
Sube una imagen para la vista previa de la lección:
Guarda la configuración.
¡Hecho! Ahora las vistas previas de las lecciones se mostrarán como iconos en la sección Lecciones del sitio web.
- Patrón de fondo
Añade volumen y singularidad a tus tarjetas de lección:
- Redondeo de elementos
El valor se establece en píxeles y redondea las esquinas de las tarjetas de lección.
- Estilo de la tarjeta de lección
Ayuda a organizar las tarjetas de lección en una fila o en una fila con o sin separación.
- Color de fondo y texto
Hay una amplia paleta de colores disponible para establecer el color de fondo de la tarjeta y el color de la fuente en la tarjeta de lección:
Ahora sabes cómo agregar listas de lecciones a tu sitio web y personalizar el contenido de la sección.
Para la configuración de fondo y visualización, consulta el artículo "Configuración global de secciones".