Tematización
Breve descripción general
La tematización es una nueva funcionalidad de WalkMe que permite unificar el diseño en diferentes aplicaciones de WalkMe. Con la tematización, puede aplicar fácilmente un aspecto y sensación coherentes a todos sus elementos de WalkMe, utilizando una amplia gama de elementos de diseño predefinidos y personalizables, incluyendo esquemas de color, tipografía y diseños.
Cómo acceder
La tematización se encuentra en la consola y se puede acceder
- En https://console.walkme.com/themes
- A través del panel lateral de la consola
Cómo habilitar
Para habilitar la tematización al crear un nuevo sistema:
-
Haga clic en el sistema que acaba de crear
-
Diríjase a la configuración de construcción
-
Active el interruptor de tematización
Para habilitar la tematización en un sistema existente que tenga menos de 100 elementos:
- Navegue hasta el Centro de administración → sistemas
- Haga clic en el sistema para el que desea habilitar la tematización
- Abra la configuración de construcción
- Utilice el interruptor para habilitar la tematización
Cómo utilizar
Pantalla principal
Cuando acceda a Tematización por primera vez, en la pantalla principal verá todos los temas ofrecidos por WalkMe.
En el lado derecho de la pantalla, puede ver una vista previa del aspecto de este tema. Puede navegar entre diferentes tipos de elementos y ver cómo se ve cada uno de ellos en este tema.
Pase el cursor sobre diferentes elementos de la vista previa para ver qué heredan del tema. Por ejemplo, el marco que contiene la imagen en este ShoutOut hereda el color (Fondo, Principal), y el título del texto hereda la tipografía Título (Grande) y el color Texto, Principal.
Temas activos y publicados
La etiqueta Activo significa que este tema es actualmente el que se aplica al contenido de su editor.
La etiqueta Publicado significa que este tema es actualmente el que se muestra a sus usuarios en el entorno publicado.
Tenga en cuenta que puede darse el caso de que el tema activo y el tema publicado no sean el mismo.
Si establece un tema como activo, podrá verlo en el editor. Sin embargo, para que el tema sea visible para sus usuarios, necesita publicarlo primero.
Para establecer un tema como activo:
- Haga clic en el menú Opciones
- Seleccione Establecer como activo
- Si no desea publicar el tema aún, haga clic en Confirmar
- Para publicar también el tema, marque la casilla y luego haga clic en Confirmar
Edición de temas
Puede editar los temas de WalkMe y guardar el resultado como un nuevo tema.
Para editar un tema, haga clic en el menú Opciones y seleccione Editar, o haga doble clic en el tema.
Aquí puede cambiar los colores, la tipografía y las propiedades de los botones del tema.
Colores
- En la pestaña Colores, puede cambiar el color de diferentes elementos de diseño
- Puede ver exactamente qué está cambiando en la vista previa de la derecha
- Al realizar cambios, verá una animación en la barra de navegación de elementos que muestra en qué elemento puede ver este cambio
Tipografía
- En la pestaña Tipografía, puede cambiar el tipo y tamaño de fuente para todos los elementos de texto
- Puede cambiar la fuente primaria y secundaria
- Puede seleccionar cuál de las dos desea que herede cada uno de los títulos y tipos de texto - primaria o secundaria
- Puede ver dónde se utiliza actualmente cada uno de los elementos de texto
Fuentes
Admitimos las siguientes fuentes:
-
Arial, tahoma, Georgia, courier, proxima Nova, poppins, open sans
No obstante, si fuera necesario, usted puede utilizar una fuente del sitio web donde esté ejecutando WalkMe. Lo que anteriormente solo podía realizarse mediante CSS, ahora puede efectuarse fácilmente en Theming. Para utilizar una fuente de sitio web:
-
Haga clic en Gestionar fuentes
-
Haga clic en Utilizar fuente del sitio web
-
Asigne un nombre a esta fuente y haga clic en Guardar
-
La verá en la lista de fuentes, marcada como "Su fuente de sitio web"
Botones
- Modifique el ancho del borde y el radio de las esquinas de sus botones
- Puede optar por tener un borde coloreado y establecer el grosor en cada uno de los lados
- Los colores de relleno y texto se heredan automáticamente del tema - no puede modificarlos desde aquí, pero puede cambiar el color que el botón hereda en la pestaña Color, y esto afectará al botón aquí
- Los botones de texto secundarios no tienen color de relleno (son transparentes) por defecto (por ejemplo, el botón Atrás en este ShoutOut)
- Los botones adicionales heredan la mayoría de sus propiedades del tema
- Solo puede cambiar el color del texto
Una vez finalizada la edición, puede guardar el tema como nuevo.
Sus temas aparecerán bajo Mis temas personalizados.
A diferencia de los temas de WalkMe, sus temas personalizados también pueden ser renombrados, duplicados y eliminados.
Compartir temas
Si tiene habilitado el permiso Editar y Compartir para Theming en el Centro de Administración, puede vincular temas a múltiples sistemas a los que esté asignado.
Para vincular su tema personalizado a otros sistemas, haga clic en el menú Opciones y seleccione Vincular a otros sistemas.
Verá una lista de sistemas a los que está asignado. Seleccione a qué sistemas desea vincular este tema. Vincular el tema creará este tema en estos sistemas.
También puede seleccionar para qué sistemas desea establecer este tema como Activo. Si desea que sus usuarios finales vean este tema, deberá publicarlo para cada sistema.
Después de vincular el tema a los sistemas seleccionados, podrá ver una indicación junto al tema que muestra a cuántos sistemas está vinculado este tema.
Pase el cursor sobre él para ver cuáles son esos sistemas.
Haga clic en Leer más para ver la lista completa. Los usuarios sin el permiso de Editar y Compartir también verán esta indicación.
Si está editando el tema que está vinculado a otros sistemas, se le solicitará que seleccione en qué sistemas desea que se reflejen los cambios.
Si duplica un tema, los sistemas vinculados a este tema no se vincularán al duplicado.
Si desea eliminar un tema que está vinculado a múltiples sistemas, primero deberá desvincular los sistemas. Este tema se eliminará, pero se crearán duplicados en todos los demás sistemas vinculados. Esto se hace para garantizar que no se eliminen temas por error de diferentes sistemas.
Theming para la Barra de acción
Para diseñar su Barra de acción desde la aplicación Theming:
- Abra theming
- En el menú desplegable de sistemas, seleccione Sistemas globales → Lanzadores de IA globales
- Verá un tema predeterminado WalkMe(X) y la vista previa de la Barra de acción en el lado derecho de la pantalla
Puede utilizar cualquiera de los temas de WalkMe o personalizados para su Barra de acción.
No todos los componentes de la Barra de acción se muestran en la vista previa. Si desea comprender mejor la relación entre el tema y los componentes de la aplicación, consulte las imágenes a continuación.
Theming en el editor
Theming se aplica a todo el contenido de su editor. Vaya a Personalizar estilo de contenido para ver cómo afecta a sus globos y SmartTips.
Globos
En la pestaña Globo, puede ver el tema activo aplicado a sus globos.
Se puede modificar el color del resaltador para que sea cualquiera de los colores del tema.
También es posible desvincularse del tema si se desea que el contenido no se vea afectado por el mismo.
Por ejemplo, si se desvincula el color del resaltador del tema, este permanecerá en dicho color (en este caso, rosa Primario, Principal) incluso si se modifica el tema en la consola.
Haga clic en Cambiar plantilla para visualizar todas las plantillas disponibles.
Para comprender mejor cómo los diferentes tipos de texto y color del tema están vinculados a distintas plantillas, consulte la sección Mapeo: Relación Tema-Plantilla a continuación.
Si desea realizar modificaciones en una plantilla específica del tema, haga clic en el icono Editar.
Se abrirá la consola de CSS. Aquí podrá ajustar cualquiera de las propiedades del globo.
Es posible reemplazar el color primario por el secundario, o cambiarlo completamente, por ejemplo, a negro o blanco.
Puede encontrar las variables de CSS provenientes del tema en el artículo CSS en Tematización.
Puede guardar la plantilla editada como nueva, y aparecerá en la pestaña Plantillas de Usuario.
En la pantalla de pasos de Recorrido Guiado Inteligente, puede seleccionar el color de las partes del texto entre los colores del tema. El estilo tipográfico no se puede cambiar desde aquí, ya que se hereda del tema.
También puede cambiar a una plantilla diferente.
Consejos Inteligentes
En la pestaña Consejo Inteligente, puede ver el tema activo aplicado a sus Consejos Inteligentes.
Haga clic en Cambiar icono para seleccionar el icono que desea que tenga su Consejo Inteligente.
Haga clic en Editar icono si desea cambiar el color y el tamaño del icono. Puede seleccionar cualquier color del tema.
También puede cambiar el color del consejo en sí.
Asimismo, puede desvincular cualquiera de los valores del tema si desea que este elemento de diseño no se vea afectado por el tema.
Lanzadores
Al crear un lanzador, puede elegir entre todas las plantillas disponibles en este tema.
En el menú desplegable Diseño, puede establecer los colores preferidos del tema.
También puede desvincularse del tema y establecer un color no relacionado con él.
Cuando desvincule el color del tema, verá un icono dedicado que lo ilustra.
Siempre puede volver a conectarse al tema.
Después de crear el lanzador, puede cambiar la plantilla en la pantalla Opciones del Lanzador.
Puede cambiar el texto de un lanzador local en la pestaña Interacción del lanzador. Para hacerlo, marque la casilla que dice "Usar texto personalizado en lugar del texto predeterminado de la plantilla". Ahora puede editar el texto de visualización a continuación.
Haga clic en Editar diseño para cambiar el estilo tipográfico o seleccionar diferentes colores del tema.
Encuestas
- Las encuestas están conectadas a los temas por defecto
- Solo una plantilla está disponible para las encuestas
Mapeo: relación tema-plantilla
- Todos los valores de texto y color (Título 1, Cuerpo 1, Primario, Secundario, etc.) funcionan de manera diferente en distintas plantillas, incluso dentro de un mismo tema
- Por ejemplo, las plantillas de Recorridos Guiados Inteligentes adjuntas aquí están utilizando el mismo tema
- Como puede observar, las relaciones entre los valores son diferentes en distintas plantillas
- Encuentre el mapeo de los colores y el texto en las imágenes adjuntas
Plantillas de Recorridos Guiados Inteligentes
Plantillas de lanzadores
Plantillas de Consejos Inteligentes
Tematización en el Diseñador Visual
Nuevas plantillas
Cuando cree un nuevo Anuncio, verá las nuevas plantillas, todas ellas presentadas en el tema que ahora tiene establecido como activo.
Al pasar el cursor sobre el icono de Tematización junto al color, puede ver qué tema se está utilizando actualmente.
Puede elegir entre los colores del tema y los estilos tipográficos, o desvincularse del tema y establecer un color o propiedades de fuente propios.
Botones
Puede decidir qué propiedades del botón desea que estén conectadas o desvinculadas del tema. Por ejemplo, puede desvincular la fuente y elegir una propia, y mantener el color del texto y el color de relleno conectados al tema.
Cambios en el editor
Antes
- Usted puede seleccionar colores en el editor, editar el CSS de la plantilla y ver el CSS, guardar el diseño de CSS como plantilla
Después
- La edición de color y tipografía se realiza en el tema
- Se proporcionarán al usuario nuevas plantillas conectadas al tema
- Usted puede editar la plantilla global de globo CSS
Antes
- Usted puede seleccionar colores para texto, fondo y borde
Después
- Los colores provienen del tema y usted puede cambiar la asignación y desconectarse del tema
Antes
- Los íconos son imágenes - el color no puede ser cambiado (el usuario solo puede seleccionar una imagen diferente)
- Los colores no pueden ser cambiados con CSS
Después
- Los íconos son HTML
- Los íconos están vinculados al tema y se ven afectados cuando se cambian los colores del tema
- Usted puede cambiar la asignación y el tamaño del ícono
Antes
- Usted no puede cambiar la familia de fuentes
Después
- Usted puede ver la tipografía aplicada del título y el cuerpo
- El diseño está vinculado al tema
Antes
- Usted no puede cambiar el texto del lanzador
- Usted solo puede crear una nueva plantilla con texto diferente
Después
- Usted puede cambiar el texto del lanzador local marcando la casilla “Usar texto personalizado”
- La galería ha sido actualizada y ahora ofrece nuevas plantillas conectadas al tema
Notas técnicas
- Solo los roles de Administrador y Gestor de contenido tienen permisos de edición y publicación. Todos los demás roles solo tienen permisos para ver los temas
- El menú de widgets aún no está soportado
- Solo el menú Pro y el menú Pro Light están soportados
- Solo se admiten los globos California - los globos clásicos no están soportados
- Solo se admiten plantillas de diseño dinámico en el Diseñador Visual
- Se admiten las siguientes fuentes:
- Arial, Tahoma, Georgia, Courier, Proxima Nova, Poppins, Open Sans
- La vista previa en la aplicación multilingüe funciona, pero no reflejará los colores reales
- El web móvil no está soportado
- No se admite la copia de cuentas entre sistemas con y sin Tematización
❓Preguntas y respuestas
P: ¿Solo aquellos con permisos de “Administrador” pueden acceder a los temas? ¿Se incluyen los gestores de sistema en el acceso o solo los administradores generales?
R: Hemos introducido un nuevo permiso—Editar Tema. Este permiso está habilitado por defecto para Editor, Gestor de Contenido, Gestor de Sistema y Administrador. Usted puede crear roles personalizados y gestionar este permiso según sea necesario.
P: ¿La Tematización se superpone a algún CSS existente? ¿Cuál es la jerarquía para las empresas con fuertes ediciones de marca?
R: La jerarquía prioriza primero la Tematización, seguida por CSS personalizados—CSS tiene la influencia más fuerte.
P: ¿CSS construido como una regla global anulará la configuración del Tema?
R: Correcto.
P: ¿La Tematización es específica del sistema o puede extenderse a través de múltiples sistemas?
R: Actualmente, es por sistema. Existe un plan en la hoja de ruta para permitir compartir temas entre sistemas.
P: ¿Se puede establecer una regla global para una fuente personalizada dentro del tema?
R: Aún no. Esto está planeado para el próximo trimestre, pero usted puede usar CSS para lograr esto hasta entonces.
P: ¿Hay alguna manera de ajustar la imagen del widget con la Tematización?
R: No actualmente, pero está planeado para una actualización futura.
P: ¿Habrá más opciones para personalizar Encuestas, como cambiar el ancho y el alto?
R: Pronto llegará una nueva aplicación de Encuestas con más opciones de diseño. La Encuesta actual está conectada a la Tematización.
P: ¿Pueden los usuarios desconectarse de la Tematización si no tienen ninguna?
R: Sí, pueden optar por no participar.
P: Si la Tematización se activa en un sistema, ¿actualizará el contenido existente retroactivamente?
R: Solo los nuevos sistemas son compatibles en esta etapa. Para los sistemas existentes, los usuarios deben actualizar activamente el contenido, y esto solo ocurrirá parcialmente.
P: ¿Se puede actualizar el contenido existente con la Tematización?
R: El contenido existente permanecerá sin cambios hasta que usted lo actualice activamente. La Tematización está actualmente disponible para nuevos sistemas, y los sistemas existentes pueden agregarse a través del Centro de Administración, pero deben tener <100 elementos.
P: ¿Se pueden agregar fuentes personalizadas a la Tematización, o aún se requiere CSS?
R: Todavía se hace a través de CSS, pero estará disponible pronto.
P: ¿Existe la opción de tener diferentes temas basados en el sistema?
R: Sí, el tema está basado en el sistema.
P: Si se edita el tema, ¿cambiará las compilaciones publicadas?
R: No, es necesario publicar el tema actualizado.
P: ¿Pueden estar activos múltiples temas al mismo tiempo?
R: Solo un tema puede estar activo a la vez.
P: ¿Cada tema tiene su propio ID de CSS único para CSS global en diferentes temas?
R: El objetivo no es requerir conocimiento de CSS para utilizar temas, pero compartir temas entre sistemas estará disponible en una futura versión.
P: ¿Estará alguna vez disponible el Theming para sistemas con un gran número de elementos?
R: Sí, esto está planificado para una futura versión.
P: ¿Existe un cronograma para que los sistemas existentes utilicen el Theming?
R: Estamos planificando para la versión del verano de 2025.
P: ¿La configuración del Theming se puede aplicar a múltiples sistemas o es específica para cada sistema?
R: Actualmente, el Theming está a nivel de sistema, pero introduciremos una función para compartir temas en una de las próximas versiones.
P: ¿Funcionará el Theming para TeachMe y ActionBot?
R: Será compatible con TeachMe y ActionBot en futuras actualizaciones.
P: ¿Qué sucede con el contenido creado antes de un cambio de plantilla?
R: Permanece igual a menos que esté conectado a la nueva plantilla, en cuyo caso hereda las variables del tema.
P: Si se opta por el Theming, ¿se puede optar por salir posteriormente, y el contenido volverá a su diseño original?
R: El contenido no cambiará a menos que esté conectado al Theming, y no es posible optar por salir una vez habilitado.
P: ¿Cómo se sabe si se está en el sistema “nuevo” frente al sistema antiguo?
R: Los sistemas con menos de 100 elementos y que no utilizan globos clásicos como plantilla predeterminada se consideran “nuevos.”
P: ¿Se pueden descargar/cargar nuevas fuentes propietarias para su uso en WalkMe?
R: Esta función está planificada para futuras versiones.
P: ¿Estarán disponibles los nuevos temas en el Centro de Datos de Canadá?
R: Sí, estarán disponibles.
P: ¿Por qué podrían ser necesarios múltiples temas activos?
R: Se pueden utilizar diferentes esquemas de colores para diversos propósitos, como recursos de capacitación en naranja, recursos de ayuda en azul y errores en rojo. Aún se puede lograr esto dentro de un solo tema conectando diferentes plantillas a diferentes variables.