Como personalizar a antiga UI TeachMe

Last Updated dezembro 9, 2025

Breve Visão Geral

Ensina-me WalkMe é um aplicativo que permite empacotar suas experiências do WalkMe em módulos e cursos de aprendizagem. Com TeachMe, você pode criar vários cursos para seus usuários e estruturá-los ao longo de um caminho de aprendizagem. A interface do usuário TeachMe (Novo TeachMe) atual oferece uma experiência simplificada para o aluno, tornando o acesso aos cursos simples e rápido! Dito isto, nossa antiga interface do usuário TeachMe ainda está disponível para aqueles que desejam esse controle extra sobre a experiência do usuário.

Então, sobre o que é este artigo?

Embora o antigo TeachMe esteja sendo descontinuado, ele ainda está em uso e queremos ter certeza de que você tem o suporte necessário para criar os cursos desejados.

A antiga interface do usuário TeachMe atualmente tem mais opções de personalização para atender melhor seus cursos à marca da sua organização (embora isso mude em breve!). Este artigo detalha personalizações comumente usadas que você pode usar para tornar o TeachMe mais parecido com você.

Observação

As personalizações antigas do TeachMe usavam CSS.

Como Funciona

Nem todas as personalizações podem ser feitas pelo cliente, portanto, se houver uma personalização que você precisa ou que não está listada aqui, entre em contato com o Gerente de Sucesso do Cliente.

Abaixo você encontra a personalização comumente usada para o antigo TeachMe UI.

Ocultar a barra TeachMe "Centro de Educação WalkMe"

Quando TeachMe for publicado, uma barra lateral TeachMe será exibida automaticamente na página do site.

A barra lateral é uma sobreposição, que geralmente cobre o conteúdo da página (e não podemos ter isso, não é?).

Para ocultar a barra lateral:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no CSS:
    #walkme-player-panel{display: none !important;}
  3. Clique em Salvar.

Feito.

Criar um Lançador para abrir o menu TeachMe

Se a barra lateral TeachMe estiver oculta (veja acima), um inicializador deve ser criado para que os usuários acessem o conteúdo TeachMe. Isso é feito como qualquer outro lançador e pode ser colocado em alguns lugares:

Para adicionar um inicializador TeachMe à sua página:

  1. Siga as instruções para Criar um Lançador em Lançadores: Guia de Introdução.
    1. Na etapa 4: escolha sua ação - selecione Abrir Menu do Curso TeachMe.
  2. Feito.

Reabra o TeachMe depois que um recurso for concluído

Se um recurso fizer parte da lição TeachMe, depois que o recurso tiver sido visualizado e fechado, o menu do curso TeachMe será reaberto automaticamente.

Se o menu não abrir automaticamente após o fechamento de um recurso, há um erro. Entre em contato com o Suporte.

Reabra o TeachMe depois que um SWT ou WT for concluído

Se um Walk-Thru ou Smart Walk-Thru for usado como parte do curso TeachMe, você pode solicitar que o menu do curso TeachMe seja reaberto após a conclusão do Walk-Thru. Entre em contato com o suporte.

Observação: essa é uma configuração global que será aplicada a todos os WT e SWTs iniciados no menu TeachMe.

Alterando o logotipo, o mini-logotipo e a barra de separação superior na parte superior do menu TeachMe

Por padrão, o antigo TeachMe player exibe o logotipo WalkMe e uma barra de separação (veja abaixo). Você pode alterar isso e adicionar seu próprio logotipo. Observação: no nosso Novo TeachMe, isso não é um problema.

Para alterar o logotipo:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no CSS:

.walkme-contents .wm-profile .wm-picture-wrapper {

border: none !important;

border-radius: 0% !important;

}

.walkme-contents .wm-profile .wm-picture-wrapper .wm-picture {

largura: 86px !important;

altura: 86px !important;

margin-top: 0px !important;

margin-left: 0px !important;

background: url (image-url-here) no-repeat center !important;

}

3. Substituir a imagem hospedada está vinculada .

4. Clique em Salvar.

Feito .

Para remover a barra de separação superior:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no CSS:

#walkme-teachme-menu.walkme-teach-me #walkme-main #walkme-tabs-wrapper .wm-profile {

padding-top: 0 !important;

border-top: none !important;

3. Clique em Salvar.

Feito.

Para remover o logotipo do mini WalkMe:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no CSS:

#walkme-title {

display: none !important;

}

3. Clique Salvar .

Feito.

Alterar imagem do curso

Por padrão, os cursos TeachMe exibem imagens do WalkMe em todos os cursos.

Você pode alterar:

  1. A imagem de um curso; ou
  2. A imagem padrão de todos os cursos.

Observação: no novo TeachMe, isso é tão fácil quanto 1, 2, 3.

Para alterar uma única imagem do curso:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no 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;

}

  1. Substitua o ### pelo ID do curso selecionado.
  2. Insira o link da imagem .
  3. Clique em Salvar .

Feito .

Para encontrar o ID do curso, clique aqui.

1. Faça login no TeachMe.

2. Vá para a página dos Cursos.

3. Clique no curso para o qual você precisa do ID.

4. O ID do curso é o número no final do URL.

Por exemplo: https://teachme.walkme.com/#/course/1486517

Para alterar todas as imagens do curso para uma única imagem:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no 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;

}

  1. Insira o link da imagem .
  2. Clique em Salvar .

Feito .

Alterar a cor da barra de progresso

À medida que o aluno progride no curso, uma barra de progresso amarela será exibida. Você pode alterar a cor para combinar com a sua marca.

Para alterar a cor da barra de progresso:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no 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;

}

  1. Substitua o código hexadecimal .
  2. Clique em Salvar .

Feito .

Cursos concluídos em cinza em vez de serem desativados

Por padrão, quando um aluno concluir um curso, o TeachMe encerrará o curso. Você pode alterar isso para escurecer o percurso.

Para remover a greve e o cinza:

  1. Vá para o editor WalkMe Personalizar >> CSS.
  2. Digite no CSS:
  • Como alternativa, você pode substituir o código hexadecimal (em azul) pela cor que deseja indicar que o curso está completo.

#walkme-teachme-menu .walkme-deployable.walkme-completed > span.wm-completed {

padding-right: 16px !important;

text-decoration: none !important;

cor: #555555 !important;

}

3. Clique em Salvar.

Feito .

Was this article helpful?

Thanks for your feedback!
×