Tematização no Editor e nos aplicativos WalkMe

Last Updated janeiro 6, 2026

Breve Visão Geral

A tematização traz as configurações de design do Console para o Editor WalkMe e os aplicativos WalkMe. Você pode visualizar e ajustar como o tema se aplica a cada item, desconectar elementos individuais quando necessário e projetar aplicativos WalkMe, como Pesquisas e a Barra de Ações, diretamente do aplicativo Tematização.

Theming: Getting Started Guide

Como Funciona

Tematização no Editor WalkMe

Observação

A tematização só é suportada no menu Pro.

A tematização é aplicada a todo o conteúdo do editor. Acesse Personalizar o estilo de conteúdo para ver como isso afeta seus balões e SmartTips.

Balões

Na guia Balões, você pode ver o tema ativo aplicado aos balões.

Você pode alterar a cor do realçador para ser qualquer uma das cores do tema.

Você também pode se desvincular do tema se quiser que seu conteúdo não seja afetado pelo tema.

Por exemplo, se você separar a cor do realçador do tema, ela permanecerá dessa cor (neste caso, rosa Primário, Principal), mesmo se você alterar o tema no console.

Clique em Alterar modelo para ver todos os modelos disponíveis.

Para entender melhor como diferentes tipos de texto e cores do tema estão conectados a diferentes modelos, consulte a seção Mapeamento: Relação Tema-Modelo abaixo.

Se você quiser fazer alterações em um modelo específico do tema, clique no ícone Editar.

O console CSS será aberto. Aqui você pode ajustar qualquer uma das propriedades do balão.

Você pode substituir a cor primária pela secundária ou alterá-la completamente - por exemplo, para preto ou branco.

Você pode encontrar as variáveis CSS provenientes do tema no artigo CSS em Tematização.

Observação

O CSS inserido no CSS global, modelo de balão ou balão local, substituirá o tema.

Você pode salvar o modelo editado como novo e ele aparecerá na guia Modelos de Usuário.

Novo!

Todas as etapas conectadas a este modelo serão alteradas.

Na tela Smart Walk-Thru, você pode selecionar a cor das partes do texto nas cores do tema. O estilo de tipografia não pode ser alterado a partir daqui, pois é herdado do tema.

Você também pode alterar um modelo diferente.

SmartTips

Na guia SmartTip, você pode ver o tema ativo aplicado às suas SmartTips.

Clique em Alterar ícone para selecionar o ícone que deseja que o SmartTip tenha.

Clique no ícone Editar se quiser alterar a cor e o tamanho do ícone. Você pode selecionar qualquer cor do tema.

Você também pode alterar a cor da ponta em si.

Você também pode separar qualquer um dos valores do tema, se quiser que esse elemento de design não seja afetado pelo tema.

Lançadores

Ao criar um inicializador, você pode escolher entre todos os modelos disponíveis neste tema.

No menu suspenso Design, você pode definir as cores preferidas do tema.

Você também pode se desconectar do tema e definir uma cor não relacionada a ele.

Quando você separa a cor do tema, você verá um ícone dedicado ilustrando a cor.

Você sempre pode se conectar de volta ao tema.

Depois de criar o lançador, você pode alterar o modelo na tela Opções do Lançador.

Você sabia?

Você pode alterar o texto de um inicializador local na guia Interação do inicializador. Para fazer isso, marque a caixa "Usar texto personalizado em vez do texto do modelo padrão". Agora você pode editar o texto abaixo.

Clique em Editar design para alterar o estilo de tipografia ou selecionar cores diferentes do tema.

Pesquisas

  • As pesquisas estão conectadas a temas por padrão
  • Apenas um modelo está disponível para pesquisas

Alterações no Editor

Balão Global

Antes

  • Você pode selecionar cores no editor, editar o CSS do modelo e ver o CSS, salvar o design CSS como modelo

Depois

  • A edição de cor e tipografia é feita no tema
  • Novos modelos conectados ao tema serão fornecidos ao usuário
  • Você pode editar o modelo de balão global CSS

Dica da SmartTip

Antes

  • Você pode selecionar cores para texto, plano de fundo, borda

Depois

  • As cores vêm do tema e você pode alterar o mapeamento e se desconectar do tema

Ícone SmartTip

Antes

  • Os ícones são imagens - a cor não pode ser alterada (o usuário só pode selecionar uma imagem diferente)
  • As cores não podem ser alteradas com CSS

Depois

  • Os ícones são HTML
  • Os ícones estão vinculados ao tema e são afetados quando as cores do tema são alteradas

  • Você pode alterar o mapeamento e o tamanho do ícone

Balão Local

Antes

  • Você não pode alterar a família de fontes

Depois

  • Você pode ver a tipografia aplicada ao título e ao corpo do texto.
  • O design está anexado ao tema

Lançador Local

Antes

  • Você não pode alterar o texto do inicializador.
  • Você só pode criar um novo modelo com texto diferente

Depois

  • Você pode alterar o texto do inicializador local marcando a caixa "Usar texto personalizado"

  • A galeria foi atualizada e agora oferece novos modelos conectados ao tema

Tematização no Visual Designer

Novos modelos

Ao criar um novo ShoutOut, você verá os novos modelos, todos apresentados no tema que você configurou como ativo.

Ao passar o mouse sobre o ícone de Tematização ao lado da cor, você pode ver qual tema está sendo usado atualmente.

Você pode escolher entre as cores do tema e os estilos de tipografia, ou desligar-se do tema e definir suas próprias propriedades de cor ou fonte.

Botões

Você pode decidir quais propriedades do botão deseja estar conectado ou separado do tema. Por exemplo, você pode separar a fonte e escolher uma fonte própria, além de manter a cor do texto e a cor do preenchimento conectadas ao tema.

Tematização para a Barra de Ação

Para projetar sua Barra de Ações no aplicativo Tematização:

  • Abrir Tematização
  • No menu suspenso Sistemas, selecione Sistemas GlobaisLançadores Globais de IA

  • Você verá um tema padrão WalkMe(X) e a pré-visualização da Barra de Ação no lado direito da tela

Você pode usar qualquer um dos temas WalkMe ou personalizados para a Barra de Ações.

Você pode projetar o ícone da Barra de Ações usando o recurso de cor gradiente.

Tematização para Pesquisas

As pesquisas popup herdarão o tema do sistema. Pesquisas de página inteira podem ser projetadas individualmente no aplicativo Theming.

Para criar sua pesquisa de página inteira:

  • Abrir Tematização

  • No menu suspenso dos sistemas, selecione GlobalPesquisas Globais

  • Você verá um tema padrão e a pré-visualização da pesquisa de página inteira no lado direito da tela

  • Você pode definir cores, tipografia e estilo de botões

Was this article helpful?

Thanks for your feedback!

Faça parte de algo maior.

Interaja com colegas, tire dúvidas e compartilhe ideias.

Explore nossa comunidade
×