Tema e identidade visual do seu site
Defina o logo, as cores, as fontes e o rodapé uma vez, aplique tudo a cada tela e sobrescreva nas telas que precisam ficar diferentes.
Um formulário conversacional deve parecer seu, e não da Tayon. A identidade visual que você define vale para o site inteiro de uma vez, e você pode sobrescrevê-la em telas específicas onde quiser algo diferente.
Tudo isso fica atrás de Configurações, no cabeçalho do Flow Designer.
#Defina uma vez, aplique em tudo
A aba Marca tem dois botões Aplicar a Todos os Painéis — um embaixo do logo, outro embaixo das cores. É essa a parte que as pessoas deixam passar.
Mudar uma cor em Marca define o padrão para as telas novas. Isso não mexe nas telas que já existem. Aplicar a Todos os Painéis é o que empurra a mudança para todas as telas que você já construiu.
- Abra Configurações no cabeçalho do designer.
- Vá até Marca.
- Defina o logo e as cores.
- Escolha Aplicar a Todos os Painéis embaixo de cada seção que você mudou.
- Salvar Alterações e depois Publicar.
#O que você pode definir
#Logo, favicon e imagem de compartilhamento
| Configuração | Para que serve |
|---|---|
| Logo | Exibido nas telas. Os tamanhos oferecidos são Pequeno (80px), Médio (120px), Grande (160px) e Extra Grande (200px). |
| Favicon | O ícone pequeno na aba do navegador. |
| Imagem de Compartilhamento Open Graph | A imagem que aparece quando alguém cola o seu link em um chat ou em um post. Tamanho recomendado: 1200 × 630 pixels. O título e a descrição ao lado dela vêm de Título do Site e Descrição, na aba Básico. |
#Cores
Sete cores cobrem o site inteiro:
- Fundo do Painel
- Cor do Título
- Cor do Subtítulo
- Cor do Texto
- Fundo do Botão
- Cor do Texto do Botão
- Cor do Texto dos Botões de Opção — o texto e o contorno dos botões de escolha. O fundo deles segue o Fundo do Botão.
#Fontes
Cinco espaços, cada um com família e tamanho próprios: Fonte do Título, Fonte do Subtítulo, Fonte do Parágrafo, Fonte do Botão e Fonte de Interação (o texto que as pessoas digitam). Cada uma é pré-visualizada na tipografia real enquanto você escolhe, então dá para ver a combinação antes de se comprometer.
Os tamanhos vão de Extra Pequeno até 2x Grande.
#Indicador de progresso
Ative Mostrar indicador de progresso e escolha um estilo:
| Estilo | O que o visitante vê |
|---|---|
| Barra de Progresso | Uma barra horizontal que vai enchendo. |
| Pontos | Um ponto por etapa. |
| Contador de Etapas | As palavras Etapa 3 de 8. |
Você também escolhe a Posição — Topo ou Rodapé — e a cor. Uma pré-visualização se atualiza conforme você mexe.
#Rodapé
Defina a cor de fundo do rodapé, a cor do texto e o alinhamento (Esquerda, Centro ou Direita), além do Texto de Copyright que fica nele.
Telas individuais podem esconder o rodapé — essa chave fica na própria tela, em Configurações nas propriedades dela, não aqui.
#Documentos legais
A aba Jurídico vincula ao site os Termos de Serviço, a Política de Privacidade e o Aviso Legal. Você escreve os documentos em outro lugar da Tayon e apenas os seleciona aqui; eles aparecem como links no rodapé automaticamente.
#Sobrescrever a identidade visual em uma tela
As configurações gerais do site são padrões. Qualquer tela pode ficar diferente:
- Abra a tela e vá até a aba Cores dela para mudar só as cores daquela tela.
- Use a aba Imagens dela para definir imagens que pertencem àquela tela.
Uma tela final de “obrigado” com fundo invertido é o motivo mais comum para fazer isso. Veja As abas de propriedades do painel.
#Lembre-se de publicar
As mudanças de identidade visual seguem a mesma regra de todo o resto: Salvar Alterações guarda, Publicar coloca na frente dos visitantes. Confira a página ao vivo depois, com Visualizar página na lista de sites.
Atualizado: