Tematización
Breve descripción general
La tematización es una nueva función de WalkMe que te permite unificar el diseño en diferentes aplicaciones de WalkMe. Con la tematización puedes aplicar fácilmente un aspecto coherente a todos los elementos de WalkMe, utilizando una amplia gama de elementos de diseño predefinidos y personalizables, incluidos esquemas de colores, tipografía y diseños.
Cómo acceder
La tematización se encuentra en la consola y se puede acceder a ella
- En https://console.walkme.com/themes
- Mediante el panel lateral de la consola
Cómo activarla
Para activar la tematización mientras creas un nuevo sistema:
-
Haz clic en el sistema que acabas de crear
-
Navega hasta la Configuración de creación
-
Activa el interruptor Tematización
Para habilitar la tematización en un sistema existente que tenga menos de 100 elementos:
- Navega hasta el Centro de administración → Sistemas
- Haz clic en el sistema para el que deseas activar la Tematización
- Abre Configuración de creación
- Activa la tematización
Cómo usarla
Pantalla principal
Cuando accedas a Tematización por primera vez, en la pantalla principal verás todos los temas que ofrece WalkMe.
En el lado derecho de la pantalla, puedes ver la vista previa de cómo se ve este tema. Puedes desplazarte entre los diferentes tipos de elementos y ver cómo se ve cada uno de ellos en este tema.
Pasa el cursor sobre los diferentes elementos de la vista previa para ver qué heredan del tema. Por ejemplo, el marco que contiene la imagen de 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 Activa significa que este tema es el que se aplica actualmente al contenido del editor.
La etiqueta Publicado significa que este tema es el que se muestra actualmente a los usuarios en el entorno publicado.
Ten en cuenta que puede haber un caso en el que el tema activo y el tema publicado no sean los mismos.
Si estableces un tema como activo, podrás verlo en el editor. Sin embargo, para que el tema sea visible para los usuarios, primero debes publicarlo.
Para establecer un tema como activo:
- Haz clic en el menú Opciones
- Selecciona Establecer como activo
- Si aún no deseas publicar el tema, haz clic en Confirmar
- Para publicar también el tema, marca la casilla y luego haz clic en Confirmar
Edición de temas
Puedes editar los temas de WalkMe y guardar el resultado como un tema nuevo.
Para editar un tema, haz clic en el menú Opciones y selecciona Editar, o haz doble clic en el tema.
Aquí puedes cambiar los colores, la tipografía y las propiedades de los botones del tema.
Colores
- En la pestaña Colores, puedes cambiar el color de los diferentes elementos de diseño.
- Puedes ver exactamente qué está cambiando en la vista previa de la derecha.
- Al realizar cambios, verás una animación en la barra de navegación del elemento que muestra en qué elemento se puede ver este cambio
Tipografía
- En la pestaña Tipografía, puedes cambiar el tipo de fuente y el tamaño de todos los elementos de texto.
- Puedes cambiar la fuente principal y secundaria.
- Puedes seleccionar cuál de los dos deseas que hereden cada uno de los títulos y tipos de texto: primario o secundario
- Puedes ver dónde se utiliza actualmente cada uno de los elementos de texto.
Fuentes
Se admiten las siguientes fuentes:
-
Arial, Tahoma, Georgia, Courier, Próxima Nova, Poppins, Open Sans
También puedes:
-
Utiliza una fuente del sitio web
-
Sube una fuente personalizada
Utiliza la fuente del sitio web
La fuente del sitio web es una fuente que existe en el sitio donde estás jugando WalkMe. Para utilizar una fuente de sitio web:
-
Haz clic en Administrar fuentes
-
Haz clic en Usar fuente del sitio web
-
Asigna un nombre a esta fuente y haz clic en Guardar
-
Lo verás en la lista de fuentes, marcado como "Fuente de tu sitio web".
Carga una fuente
Para cargar una fuente que desees utilizar:
-
Haz clic en Administrar fuentes
-
Da un nombre a esta fuente
-
Haz clic en Cargar fuente junto a la variante de fuente
Botones
- Cambia el ancho del borde y el radio de esquina de los botones.
- Puedes elegir tener un borde de color y definir el grosor en cada uno de los lados.
- Los colores de relleno y texto se heredan automáticamente del tema: no puedes cambiarlos desde aquí, pero puedes cambiar el color que hereda el botón en la pestaña Color, y afectará al botón aquí
- Los botones de texto secundario 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 se puede cambiar el color del texto.
Cuando hayas terminado de editar, puedes guardar el tema como nuevo.
Los temas aparecerán en Mis temas personalizados.
A diferencia de los temas de WalkMe, los temas personalizados también se pueden renombrar, duplicar y eliminar.
Compartir temas
Si tienes habilitado el permiso Editar y compartir para Tematización en el Centro de administración, puedes vincular temas a varios sistemas a los que estás asignado. Para vincular el tema personalizado a otros sistemas:
- Haz clic en el menú Opciones
- Selecciona Enlace a otros sistemas (solo verás los sistemas que tienen Tematización activada)
Verás una lista de sistemas a los que estás asignado. No verás los sistemas a los que no te han sido asignados, incluso si tienes el permiso para Editar y Compartir.
Selecciona los sistemas que deseas vincular a este tema. Al vincular el tema, se creará este tema en estos sistemas. Al desvincular un tema de un sistema al que tienes acceso, se creará una copia de ese tema en ese sistema (estado del momento en que se desconectó).
Después de vincular el tema a los sistemas seleccionados, verás una indicación junto al tema que muestra a cuántos sistemas está vinculado este tema. Pasa el cursor sobre él para ver de qué sistemas se tratan.
Haz 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ás editando el tema que está vinculado a otros sistemas, se te pedirá que selecciones los sistemas en los que deseas que se reflejen los cambios.
Si duplicas un tema, los sistemas vinculados a este tema no se vincularán al duplicado.
Si deseas eliminar un tema que esté vinculado a varios sistemas, primero tendrás que 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.
Tematización para la barra de acciones
Para diseñar la barra de acciones desde la aplicación Tematización:
- Abre Tematización
- En el menú desplegable de sistemas, selecciona Sistemas globales → Lanzadores globales de IA
- Verás un tema predeterminado de WalkMe(X) y la vista previa de la barra de acciones en el lado derecho de la pantalla
Puedes utilizar cualquiera de los temas de WalkMe o personalizados para la barra de acciones.
Tematización para encuestas
Las encuestas emergentes heredarán el tema del sistema. Las encuestas de página completa se pueden diseñar individualmente desde la aplicación de Tematización.
Para diseñar la encuesta de página completa:
-
Abre Tematización
-
En el menú desplegable de sistemas, selecciona Global → Encuestas globales
-
Verás un tema predeterminado y la vista previa de la encuesta de página completa en el lado derecho de la pantalla
-
Puedes establecer colores, tipografía y estilo de botones
Tematización en el editor
La tematización se aplica a todo el contenido del editor. Ve a Personalizar estilo de contenido para ver cómo afecta a los globos y SmartTips.
Globos
En la pestaña Globo, puedes ver el tema activo aplicado a los globos.
Puedes cambiar el color del resaltador para que sea cualquiera de los colores del tema.
También puedes desvincular el tema si deseas que el contenido no se vea afectado por el tema.
Por ejemplo, si separas el color del resaltador del tema, seguirá siendo este color (en este caso: rosa Primario, Principal) incluso si cambias el tema en la consola.
Haz clic en Cambiar plantilla para ver todas las plantillas disponibles.
Para comprender mejor cómo los diferentes tipos de texto y colores del tema se conectan a diferentes plantillas, consulta la sección Mapeo: relación Tema-Plantilla a continuación.
Si deseas realizar cambios en una plantilla específica del tema, haz clic en el icono Editar.
Se abrirá la consola de CSS. Aquí puedes ajustar cualquiera de las propiedades del globo.
Puedes reemplazar el color primario con el secundario o cambiarlo completamente, por ejemplo, a blanco o negro.
Puedes encontrar las variables CSS que provienen del tema en el artículo CSS en Tematización.
Puedes guardar la plantilla editada como nueva y aparecerá en la pestaña de Plantillas de usuario.
En la pantalla de pasos de Smart Walk-Thru, puedes seleccionar el color de las partes de texto de los colores del tema. El estilo de tipografía no se puede cambiar a partir de aquí, ya que se ha heredado del tema.
También puedes cambiar una plantilla diferente.
SmartTips
En la pestaña SmartTip, puedes ver el tema activo aplicado a tus SmartTips.
Haz clic en Cambiar icono para seleccionar el icono que deseas que tenga el SmartTip.
Haz clic en Editar icono si deseas cambiar el color y el tamaño del icono. Puedes seleccionar cualquier color del tema.
También puedes cambiar el color de la punta en sí.
También puedes separar cualquiera de los valores del tema si desea que este elemento de diseño no se vea afectado por el tema.
Iniciadores
Al crear un iniciador, puedes elegir entre todas las plantillas disponibles en este tema.
En el menú desplegable Diseño, puedes definir los colores preferidos del tema.
También puedes desvincular el tema y definir un color que no esté relacionado con él.
Cuando separas el color del tema, verás un icono dedicado que lo ilustra.
Siempre se puede volver a conectar con el tema.
Después de crear el iniciador, puedes cambiar la plantilla en la pantalla Opciones del iniciador.
Puedes cambiar el texto de un iniciador local en la pestaña Interacción del iniciador. Para ello, marca la casilla que dice "Utiliza texto personalizado en lugar del texto de la plantilla predeterminada". Ahora puedes editar el texto que aparece a continuación.
Haz clic en Editar diseño para cambiar el estilo tipográfico o seleccionar diferentes colores del tema.
Encuestas
- Las encuestas están conectadas a temas por defecto
- Solo hay una plantilla disponible para las encuestas
Mapeo: relación tema-plantilla
- Todos los valores de texto y color (título 1, cuerpo 1, principal, secundario, etc.) funcionan de manera diferente en diferentes plantillas, incluso dentro de un tema.
- Por ejemplo, las plantillas Smart Walk-Thrus adjuntas aquí utilizan el mismo tema.
- Como puedes ver, las relaciones entre los valores son diferentes en diferentes plantillas
- Busca el mapeo de los colores y el texto en las imágenes adjuntas
Plantillas Smart Walk-Thru
Plantillas de iniciador
Plantillas SmartTip
Tematización en Visual Designer
Nuevas plantillas
Cuando creas un nuevo ShoutOut, verás las nuevas plantillas, todas ellas presentadas en el tema que has establecido como activo.
Si pasas el cursor sobre el icono Tematización situado junto al color, puedes ver qué tema se está utilizando actualmente.
Puedes elegir entre los colores del tema y los estilos tipográficos, o bien separarte del tema y definir un color o unas propiedades de fuente propias.
Botones
Puedes decidir a qué propiedades del botón deseas que se conecten o se desconecten del tema. Por ejemplo, puedes separar la fuente y elegir una propia y mantener el color del texto y el color de relleno asociados al tema.
Cambios en el editor
Antes
- Puedes seleccionar colores en el editor, editar el CSS de la plantilla y ver el CSS, guardar el diseño 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.
- Puedes editar la plantilla CSS de globo general.
Antes
- Puedes seleccionar colores para el texto, el fondo y el borde
Después
- Los colores provienen del tema y puedes cambiar el mapeo y desconectarte del tema
Antes
- Los iconos son imágenes: el color no se puede cambiar (el usuario solo puede seleccionar una imagen diferente)
- Los colores no se pueden cambiar con CSS
Después
- Los iconos son HTML.
- Los iconos están vinculados al tema y se ven afectados cuando se cambian los colores del tema.
- Puedes cambiar el mapeo y el tamaño del icono.
Antes
- No puedes cambiar la familia de fuentes
Después
- Puedes ver la tipografía aplicada al título y al cuerpo.
- El diseño está vinculado al tema.
Antes
- No se puede cambiar el texto del iniciador.
- Solo se puede crear una plantilla nueva con texto diferente.
Después
- Puedes cambiar el texto del iniciador local marcando la casilla "Usar texto personalizado"
- La galería se actualizó y ahora ofrece nuevas plantillas conectadas a temas
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 es compatible.
- Solo se admiten el menú Pro y el menú Pro Light.
- Solo se admiten globos de California. No se admiten globos clásicos
- Solo se admiten plantillas de diseño dinámico en el Diseñador visual
- Se admiten las siguientes fuentes:
- Arial, Tahoma, Georgia, Courier, Próxima Nova, Poppins, Open Sans
- La vista previa en la aplicación multilingüe funciona, pero no reflejará los colores reales
- No se admite la web móvil
- No se admite la copia de cuentas entre sistemas de tematización y no tematización.
❓Preguntas y respuestas
P: ¿Solo las personas con permisos de "Administrador" pueden acceder a los temas? ¿Están incluidos los gestores del sistema en el acceso o solo los administradores generales?
R: Hemos introducido un nuevo permiso: Editar tema. Este permiso está activado de forma predeterminada para Publisher, Content Manager, System Manager y Admin. Puedes crear roles personalizados y administrar este permiso según sea necesario.
P: ¿Tematización se superpone con algún CSS existente? ¿Cuál es la jerarquía para las empresas con cambios importantes de marca?
R: La jerarquía prioriza primero la tematización, seguida de CSS personalizado; CSS tiene la mayor influencia.
P: ¿El CSS creado como regla global invalidará la configuración del tema?
R: Así es.
P: ¿La tematización es específica del sistema o se puede extender a varios sistemas?
R: Actualmente, es por sistema. Existe un plan de ruta para permitir compartir temas entre sistemas.
P: ¿Se puede establecer una regla global para una fuente personalizada dentro del tema?
R: Todavía no. Esto está previsto para el próximo trimestre, pero hasta entonces puedes utilizar CSS para lograrlo.
P: ¿Hay alguna forma de ajustar la imagen del widget con Tematización?
R: No actualmente, pero está previsto que se realice en una actualización futura.
P: ¿Habrá más opciones para personalizar encuestas, como cambiar el ancho y el alto?
R: Pronto se lanzará una nueva aplicación de encuestas con más opciones de diseño. La encuesta actual está conectada a Tematización.
P: ¿Pueden los usuarios desconectarse de Tematización si no tienen ninguna?
R: Sí, pueden optar por no participar.
P: Si se activa la tematización en un sistema, ¿se actualizará el contenido existente de forma retroactiva?
R: Solo se admiten sistemas nuevos en esta etapa. En los sistemas existentes, los usuarios deben actualizar activamente el contenido, y esto solo ocurrirá parcialmente.
P: ¿Se puede actualizar el contenido existente con Tematización?
R: El contenido existente permanecerá sin cambios hasta que lo actualices activamente. La tematización está actualmente disponible para nuevos sistemas, y los sistemas existentes se pueden añadir a través del Centro de administración, pero deben tener <100 elementos.
P: ¿Se pueden añadir fuentes personalizadas a Tematización o se sigue necesitando CSS?
R: Todavía se hace a través de CSS, pero estará disponible pronto.
P: ¿Existe la opción de tener diferentes temas según el sistema?
R: Sí, el tema está basado en el sistema.
P: Si se edita el tema, ¿cambian las versiones publicadas?
R: No, es necesario publicar el tema actualizado.
P: ¿Se pueden activar varios temas al mismo tiempo?
R: Solo se puede activar un tema a la vez.
P: ¿Cada tema tiene su propio ID CSS único para CSS global en diferentes temas?
R: El objetivo no es requerir conocimientos de CSS para utilizar temas, pero el intercambio de temas entre sistemas estará disponible en una versión futura.
P: ¿Estará disponible la tematización para sistemas con un gran número de elementos?
R: Sí, está previsto que se incluya en una versión futura.
P: ¿Existe un plazo para que los sistemas existentes utilicen Tematización?
R: Estamos planeando el lanzamiento para el verano de 2025.
P: ¿Se puede aplicar la configuración de temas a varios sistemas o es específica de cada sistema?
R: Actualmente, la tematización se encuentra a nivel de sistema, pero introduciremos una función para compartir temas en una de las próximas versiones.
P: ¿Funcionará la tematización para TeachMe y ActionBot?
R: Será compatible con TeachMe y ActionBot en futuras actualizaciones.
P: ¿Qué ocurre con el contenido creado antes de un cambio de plantilla?
R: Sigue siendo el mismo a menos que se conecte a la nueva plantilla, en cuyo caso hereda las variables de tema.
P: Si se opta por la temática, ¿se puede dejar de usar más adelante y el contenido volverá a su diseño original?
R: El contenido no cambiará a menos que esté conectado a Tematización, y no es posible optar por no participar una vez activada.
P: ¿Cómo sabes si estás en el "nuevo" sistema o en el 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 o cargar nuevas fuentes propietarias para utilizarlas en WalkMe?
R: Esta función está prevista para futuras versiones.
P: ¿Habrá nuevos temas disponibles en el centro de datos canadiense?
R: Sí, estarán disponibles.
P: ¿Por qué podrían ser necesarios varios temas activos?
R: Se pueden utilizar diferentes esquemas de colores para varios propósitos, como los recursos de formación en naranja, los recursos de ayuda en azul y los errores en rojo. Aún puedes lograrlo dentro de un solo tema conectando diferentes plantillas a diferentes variables.