Visão geral

Este artigo mostrará como você pode criar um Tema na UserGuiding.

• Primeiro, acesse seu painel da UserGuiding.
• Localize a seção Themes em Engagement no menu do lado esquerdo, clique e vá para a página correspondente.
• Aqui, você sempre pode encontrar os Temas existentes no modo de exibição de lista.
• Clique no botão + New Theme no canto superior direito para criar um novo Tema.

Importante: Se você não designar um Tema personalizado para seu conteúdo, o Tema padrão será utilizado.

General

Há cinco subseções de um Tema. Você pode começar decidindo como deve ser a aparência geral dos seus Guias.

• Escolha qualquer cor para seu plano de fundo e cenário e ajuste a opacidade deste último.
• Para o Indicador de Progresso da Etapa, adicione uma barra e/ou números.
• Pré-visualize seu Tema em andamento por meio do modal representativo e do Tooltip localizado no lado esquerdo da página.
• Ajuste a largura de seu conteúdo e estilize seus botões.

Typography

• Aqui você pode personalizar a cor, o tamanho e o alinhamento do texto. 
• Siga as alterações que você fizer, seja nos títulos ou no corpo do texto.
• Você também pode escolher uma das fontes integradas ou definir uma fonte personalizada. Você pode aprender mais sobre como definir uma fonte personalizada aqui.
  

Hotspots

Além dos Guias, você pode personalizar seus Hotspots e pré-visualizar a aparência deles.

• Decida que tipo de cor e estilo você deseja para os sinalizadores dos Hotspots e se deseja que eles sejam animados ou não.
• Carregue sua própria imagem como um beacon.
• Defina as condições para que os Tooltips de Hotspot apareçam e desapareçam na página.
• Você também pode traduzir o texto da opção de dispensa.

Banners

Você pode personalizar seus banners e visualizar a aparência deles na seção Banners.

• Decida o estilo que deseja para os banners e para os botões dentro deles, incluindo cores de fundo e borda, espessura da borda, arredondamento da caixa, estilo e cor do texto. Você também pode enviar sua fonte personalizada caso ela não esteja listada.
• É possível estilizar seus botões primários e secundários.

Language

Você pode decidir o que está escrito no tooltip e nos botões de entrada na seção de idioma.

Essa seção é muito útil ao criar vários Temas para oferecer suporte a Guias multilíngues. Você pode aprender sobre ela em detalhes neste artigo.

CSS

Aqui você pode atualizar o design nativo da UserGuiding para alguns materiais de onboarding com seu próprio estilo CSS.

Quando terminar de criar seu novo Tema, você poderá dar a ele um nome diferente, salvar e publicar as alterações. Por exemplo, criaremos um Tema para o site do nosso playground e o nomearemos de acordo.   

Como aplicar um Tema personalizado a seus Guias e Hotspots

Definição de Temas para Guias e Hotspots na extensão do Chrome

Enquanto estiver trabalhando na extensão do Chrome, você pode definir um Tema personalizado para um Guia antes ou depois de criar um Guia, conforme mostrado abaixo.

Antes de criar um Guia:

Depois de criar um Guia:

Não se esqueça de clicar no botão Publish Changes no seu painel para que suas alterações sejam publicadas.
​

Definição de Temas para Guias e Hotspots no seu painel

• Você pode usar as configurações avançadas do Guia/Hotspot para alterar o Tema, conforme mostrado abaixo.

Por que o Tema personalizado não está se aplicando completamente ao meu Guia/Hotspot?

Se você alterar a aparência de um Guia ou Hotspot manualmente enquanto estiver trabalhando na extensão do Chrome, eles serão considerados retoques.

E os retoques em etapas individuais podem anular o funcionamento do Tema designado para um Guia, e eles não se aterão completamente ao Guia.

Se você quiser aplicar suas alterações ao Guia de forma completa, precisará alterar o Tema do Guia, não o design passo a passo.