Cómo personalizar la interfaz de usuario antigua de TeachMe
Breve descripción general
Enséñame Es una aplicación que te permite empaquetar tus experiencias de WalkMe en módulos de aprendizaje y cursos. Con TeachMe puedes crear varios cursos para tus usuarios y estructurarlos según un camino de aprendizaje. Nuestra interfaz de usuario actual de TeachMe (también conocida como Nueva TeachMe) tiene una experiencia de usuario optimizada que hace que el acceso a los cursos sea simple y rápido. Dicho esto, nuestra interfaz de usuario antigua de TeachMe sigue disponible por ahora para aquellos que desean ese control adicional sobre la experiencia del usuario.
Entonces, ¿de qué trata este artículo?
Aunque la antigua TeachMe se está eliminando gradualmente, sigue en uso y queremos asegurarnos de que tengas el soporte que necesitas para crear los cursos que deseas.
La interfaz de usuario antigua de TeachMe actualmente tiene más opciones de personalización para adaptar mejor los cursos a la marca de tu organización (aunque esto cambiará pronto). Este artículo detalla las personalizaciones de uso común que puedes utilizar para que TeachMe se adapte más a tus preferencias.
Cómo funciona
No todas las personalizaciones se pueden realizar por tu parte, por lo que si hay una personalización que necesitas o que no está en la lista aquí, ponte en contacto con tu Responsable de Éxito del Cliente.
A continuación se encuentran las personalizaciones de uso común para la interfaz de usuario anterior de TeachMe.
Ocultar la barra "WalkMe Education Center" de TeachMe.
Cuando se publique TeachMe, aparecerá automáticamente una barra lateral de TeachMe en la página del sitio web.
La barra lateral es una superposición, que a menudo cubre el contenido de la página (y no podemos tener eso, ¿no?).
Para ocultar la barra lateral:
- Ve al editor de WalkMe Personalizar CSS.
- Escribe el CSS:
#walkme-player-panel{display: none !important;} - Haz clic en Guardar.
Listo.
Crea un iniciador para abrir el menú TeachMe.
Si la barra lateral de TeachMe está oculta (véase arriba), se debe crear un iniciador para que los usuarios accedan al contenido de TeachMe. Esto se hace como cualquier otro iniciador y se puede colocar en un par de lugares:
Para añadir un iniciador de TeachMe en tu página:
- Sigue las instrucciones para Crear un lanzador en: Lanzadores: Guía para empezar.
- En el paso 4: elige tu acción: selecciona Abrir TeachMe Course Menu.
- Listo.
Vuelve a abrir TeachMe después de completar un recurso.
Si un recurso forma parte de la lección de TeachMe, una vez que el recurso se haya visto y salido, el menú del curso de TeachMe se volverá a abrir automáticamente.
Si el menú no se abre automáticamente después de cerrar un recurso, hay un error. Contacta con soporte.
Vuelve a abrir TeachMe después de completar un SWT o WT.
Si se utiliza un Walk-Thru o Smart Walk-Thru como parte del curso TeachMe, puedes solicitar que el menú del curso TeachMe se vuelva a abrir después de que se complete el Walk-Thru. Contacta con soporte.
Nota: esta es una configuración global que se aplicará a todos los Workflows (WT) y SubWorkflows (SWT) iniciados desde el menú TeachMe.
Cambiar el logotipo, el minilogo y la barra de separación superior en la parte superior del menú TeachMe.
De forma predeterminada, el reproductor antiguo de TeachMe muestra el logotipo de WalkMe y una barra de separación (que se muestra a continuación). Puedes cambiar esto y añadir tu propio logotipo. Nota: en nuestra Nueva plataforma de enseñanza TeachMe, esto no es un problema.
Para cambiar el logotipo:
- Ve al editor de WalkMe > Personalización > CSS.
- Escribe el CSS:
.walkme-contents .wm-profile .wm-picture-wrapper { border: none !important; border-radius: 0% !important; } .walkme-contents .wm-profile .wm-picture-wrapper .wm-picture { width: 86px !important; height: 86px !important; margin-top: 0px !important; margin-left: 0px !important; background: url (image-url-here) no-repeat center center !important; } |
3. Reemplazar la imagen alojada está vinculada.
4. Haz clic en Guardar.
Hecho.
Para eliminar la barra de separación superior:
- Ve al editor de WalkMe > Personalización > CSS.
- Escribe el CSS:
#walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .wm-profile { padding-top: 0 !important; border-top: none !important; |
3. Haz clic en Guardar.
Listo.
Para eliminar el logotipo de mini WalkMe:
- Ve al editor de WalkMe Personalización CSS.
- Escribe el CSS:
#walkme-title { display: none !important; } |
3. Clics Guarda .
Listo.
Cambiar imagen del curso
De forma predeterminada, los cursos de TeachMe muestran imágenes de WalkMe en todos los cursos.
Puedes cambiar:
- La imagen de un curso; o
- La imagen predeterminada de todos los cursos.
Nota: en el nuevo TeachMe, esto es tan fácil como 1, 2, 3.
Para cambiar una sola imagen de curso:
- Ve al editor de WalkMe >Personaliza > CSS.
- Escribe el CSS:
#walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .walkme-test .wm-course-main .wm-course-item-wrapper .wm-course-box #wm-course-image-####### { background-image: url( IMAGE URL ) !important; } |
- Reemplaza el ######## con el ID del curso seleccionado.
- Inserta el enlace a la imagen .
- Haz clic en Guardar .
Hecho.
1. Inicia sesión en TeachMe.
2. Ve a la página Cursos.
3. Haz clic en el curso para el que necesitas el ID.
4. El ID del curso es el número que se encuentra al final de la URL.
Ejemplo: https://teachme.walkme.com/#/course/1486517.
Para cambiar todas las imágenes del curso a una sola imagen:
- Ve al editor de WalkMe Personalizar CSS.
- Escribe el CSS:
#walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .walkme-test .wm-course-main .wm-course-item-wrapper .wm-course-box div.wm-course-image { background-image: url( IMAGE URL ) !important; } |
- Inserta el enlace a la imagen .
- Haz clic en Guardar .
Hecho.
Cambia el color de la barra de progreso
A medida que un alumno progresa en su curso, aparecerá una barra de progreso amarilla. Puedes cambiar el color para que coincida con tu marca.
Para cambiar el color de la barra de progreso:
- Ve al editor de WalkMe Personalización CSS.
- Escribe el CSS:
#walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .wm-profile .wm-current-action .wm-progress div.wm-course-uncompleted, #walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .wm-profile .wm-current-action .wm-progress div.wm-course-progress-uncompleted, .walkme-menu.walkme-teach-me .wm-course-progress-completed, .walkme-menu.walkme-teach-me * .wm-course-progress-completed, .wm-course-action .wm-date-progress-wrapper .wm-course-progress > div.wm-course-bar { background: #FFDA34 !important; } |
- Reemplaza el código hexadecimal .
- Haz clic en Guardar .
Hecho.
Cursos completados en gris en lugar de tachados.
De forma predeterminada, cuando un alumno ha completado un curso, TeachMe tachará el curso. Puedes cambiar esto para mostrar el curso en gris.
Para eliminar el tachado y aplicar el gris:
- Ve al editor de WalkMe Personalizar CSS.
- Escribe el CSS:
- Alternativamente, puedes reemplazar el código hexadecimal (en azul) con el color que desees para indicar que el curso está completo.
#walkme-teachme-menu .walkme-deployable.walkme-completed > span.wm-completed { padding-right: 16px !important; text-decoration: none !important; color: #555555 !important; } |
3. Haz clic en Guardar.
Hecho .