Designer Visual

Last Updated dezembro 9, 2025

Breve Visão Geral

Personalizar ShoutOuts ficou muito mais fácil com a ajuda do Visual Designer. Crie designs bonitos sem a necessidade de CSS. Proporcionar controle fácil ao criar e projetar ShoutOuts, com recursos como:

  • Arrastar e soltar
  • Adicione botões, parágrafos, formas, imagens e vídeos
  • Gerenciar camadas de tela
  • Alterar alinhamento
  • Edição de texto avançado
  • Texto dinâmico
  • Suporte a vários idiomas

Para obter mais informações sobre o ShoutOuts, consulte o artigo dedicado ao ShoutOuts aqui!

Observação:

O Designer Visual não dá suporte:

  • Personalização usando CSS global ou personalizado
  • Sites de Frameset - o conteúdo não será extraído deles

O Designer Visual oferece suporte a:

  • Web Player - suporta SO
  • Mobile Player - suporta SO, SWT (limitado), Pesquisas, Lançadores
  • Desktop Player - suporta SO, SWT (limitado)
  • A acessibilidade é suportada (no nível da imagem e no nível do ShoutOut)

A fonte regular do Open Sans tem uma aparência diferente quando o item é reproduzido e não no Editor. Estamos trabalhando para corrigir isso.

Opções de Personalização

Abaixo estão mais detalhes sobre as opções disponíveis para personalizar ainda mais o ShoutOut usando as diferentes guias do Visual Designer:

Barra superior

Selecione Resolução de tela, Nível de zoom e Desfazer/Refazer para qualquer ação de edição (também suportada pelos Atalhos de teclado).

Adicionar e excluir objetos

Para adicionar novos itens ao seu ShoutOut, clique no ícone azul e adicione NOVO OBJETO, no canto inferior direito, escolha um objeto e arraste-o para o local desejado. Uma vez configurado, você pode editar a forma, o conteúdo, a localização e muito mais. Selecionar um objeto na árvore de objetos indicará esse objeto dentro do ShoutOut.

Ao adicionar uma imagem ou vídeo, você pode visualizá-lo no painel lateral. Para YouTube e Vimeo, não é necessário inserir links de incorporação, um link regular será incorporado automaticamente.

Para excluir um objeto do seu ShoutOut, selecione o objeto na tela de visualização do ShoutOut e clique no ícone da lixeira.

Como alternativa, selecione o objeto e clique no mesmo ícone no menu lateral.

Estilo

Ao selecionar um objeto específico dentro do ShoutOut (caixa de texto, imagem etc.), a guia Estilo fornece uma variedade de opções de formatação, específicas para esse objeto. Incluindo os seguintes recursos e muito mais:

  • Alterando a cor, a opacidade e o raio dos cantos do ShoutOut Canvas
  • Adicionando uma borda ao ShoutOut e ajustando a largura ou a borda
  • Direção do texto (esquerda para a direita por padrão)
  • Alterar o estilo da fonte, tamanho, cor e altura
  • Formatar o texto em negrito, itálico ou sublinhado
  • Ajustando o alinhamento do texto do centro, esquerda ou direita

Links: adicione um link ao texto do seu ShoutOut. Selecione o texto desejado, pressione o ícone URL na guia de estilo, insira o link e escolha onde deseja que ele seja aberto (Nova Janela, Esta Janela, Nova Guia).

Definir como formato padrão: se você criar um widget, por exemplo, um botão, e ativar esse recurso para ATIVAR, os próximos botões adicionados serão recriados no mesmo design.

Emoji: você pode inserir emojis no conteúdo do WalkMe. Basta adicioná-los aos widgets de texto ou botão e personalizar o tamanho deles, assim como faz com as fontes.

Para abrir o menu de emojis:

  • Windows: pressione Windows + Ponto
  • Mac OS: pressione Comando + Control + Espaço

Sombra: adicione uma sombra à tela do Shoutout.
Selecione entre: Nenhum, Soft, Regular e Retro Shadow.

Ação

Adicione uma ação que será acionada ao clicar no objeto ShoutOut. Novas ações — Play Shoutout, Play Survey, Play Action Bot, Open a Link — foram adicionadas.

Dica

Se você quiser ter um botão que vincule dinamicamente a outra página, vincule a um Smart Walk-Thru, use uma etapa de redirecionamento e use o BBCode para acessar a parte dinâmica do site, por exemplo, [var]location.origin[/var].

Ação de Abrir Ramificação (somente sistema desktop/dispositivo móvel)

A ação abre uma nova ramificação no mapa Smart Walk-Thru (nos balões clássicos, isso era feito via BBcode "trg"). Pode ser aplicado a um botão ou texto.

O recurso também inclui validações: se uma ramificação tiver uma etapa conectada a ela, o botão/texto que abre a ramificação não poderá ser excluído.

Botão X

Mostrar ou ocultar o botão X no seu ShoutOut.

Sobreposição de tela

Você pode decidir ter uma sobreposição de tela por trás do seu ShoutOut e definir a cor e a opacidade da mesma. Ativar a sobreposição de tela escurecerá ou colorirá a tela atrás e fará com que o ShoutOut se destaque.

Layout

Selecione onde o ShoutOut aparece na tela, arrastando-o pela tela de visualização, escolhendo uma das configurações de posição padrão no menu lateral ou definindo uma posição personalizada.

Observação

Os valores devem estar entre -25% e 25% (os pixels são calculados em conformidade). A limitação foi definida para que os usuários não pudessem posicionar o ShoutOut fora da tela.

Tamanho

Ajuste o tamanho do ShoutOut manualmente (na tela de visualização do Shoutout) ou selecionando as propriedades de largura e altura desejadas no menu lateral.

OBSERVAÇÃO: os modelos marcados com uma estrela na Galeria de Temas ShoutOut usam o Layout Dinâmico e têm um menu lateral diferente. Para alterar o tamanho desse ShoutOut, ative a opção Tamanho Avançado para Ativado.

Configurações

Ajuste as configurações do ShoutOut clicando no ícone de engrenagem no canto inferior esquerdo.

Traduzindo Rich Text no Editor Visual

Se você quiser traduzir o texto enriquecido no novo Visual Designer para ShoutOuts (não o clássico ShoutOuts), o processo necessário para essa tradução varia ligeiramente do que normalmente é esperado. Consulte as instruções abaixo para saber como traduzir uma parte deste texto:

Etapa 1: baixe o arquivo .xliff do idioma associado da guia Exportação de Texto e Vários Idiomas:

Etapa 2: ao contrário de um campo normal, onde se espera que introduzamos um <target>*text* </target> para as traduções, os campos Rich Text são construídos de forma ligeiramente diferente e, como resultado, exigem um método específico:

  • Consulte o texto original –
    • <trans-unit id=”Type=SO_RCH_TXT, Id=eb49a45d-7f5e-4603-8e57-fe573fbf4cc6″>
    • O que posso fazer em Visualização e Marcação?

  • Copie a estrutura inteira e modifique apenas a parte em negrito:
    • <target><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>texto traduzido vai aqui</strong></p>]]></target>

Etapa 3: o resultado final de um campo inteiro contendo o texto original e o texto traduzido deve ser parecido com o exemplo abaixo:

  • <trans-unit id=”Type=SO_RCH_TXT, Id=eb49a45d-7f5e-4603-8e57-fe573fbf4cc6″>
    <source><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>O que posso fazer em View e Markup?</strong></p>]]></source>
    <target><![CDATA[<p><strong style=”color: rgb(0, 95, 135); font-family: Arial; font-size: 26px;”>Test?</strong></p>]]></target>

Etapa 4: salve o arquivo atualizado na pasta atual em que está localizado e importe-o novamente para a seção de vários idiomas no idioma relevante – nenhum erro deve ocorrer se a sintaxe de formatação for idêntica e apenas o contêiner tiver sido modificado.

Atalhos de teclado

Use esses atalhos para otimizar seu tempo ao trabalhar com o Designer Visual.

Descrição Mac Atalho Atalho do Windows
Inserir link ou editar link Comando + K Control + K
Negrito Command + B Control + B
Itálico Comando + I Control + I
Sublinhado Command + U Control + U
Excluir um item quando selecionado Excluir Excluir
Copiar a formatação do texto ou forma selecionada Comando + Opção + C Control + Option + C
Cole a formatação do texto ou forma selecionada Comando + Opção + V Control + Option + V
Duplicate Command + D Control+D
Enviar para trás Comando + Seta para cima Control + Seta para cima
Trazer para a frente Comando + Seta para cima Control + Seta para cima
Enviar para Voltar Comando + Shift + Seta para baixo Control + Shift + Seta para baixo
Traga à Frente Comando + Shift + Seta para cima Control + Shift + Seta para cima
Refazer Command + Y Control + Y
Desfazer Comando + Z Control + Z

Notas técnicas

  • O Visual Designer não oferece suporte à personalização usando CSS global ou personalizado
  • Sites Frameset não são suportados – o conteúdo não será extraído deles
  • BBcode não suportado
  • A largura do Visual Designer ShoutOut não pode exceder 1000px
  • Quando você atualiza um modelo ShoutOut, as alterações se aplicam apenas aos novos ShoutOuts criados a partir desse modelo
    • Os ShoutOuts existentes que foram criados anteriormente usando o modelo não são atualizados automaticamente
    • Você pode usar a Tematização para aplicar atualizações de design aos ShoutOuts existentes

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
×