Personalização avançada da marca na central de ajuda

Logo, imagem de destaque, links do cabeçalho, cor da marca e e-mail de suporte estão em Personalizar a marca do seu portal. Este artigo trata do resto. Toda mudança é salva sozinha.

Favicon

O favicon é o pequeno ícone na aba do navegador. Em Identidade visual, clique em Enviar ao lado de Favicon e escolha um PNG ou WebP quadrado de 32 a 1024 pixels de largura, de até 256 KB. Ele aparece em todas as páginas públicas da sua central de ajuda, e Remover favicon tira ele de novo. Sem ele, a aba mostra a primeira letra do nome do portal na cor da sua marca. A sua central de ajuda nunca mostra o ícone do Deskwoot. Use um ícone simples, que dê para ler em 16 pixels.

Fonte da página, dos títulos e de leitura

Em Aparência, Fonte define a fonte de toda a central de ajuda: Padrão do sistema (a fonte do próprio dispositivo do visitante), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans ou Plus Jakarta Sans. O Deskwoot carrega a fonte para você, sem nada para hospedar ou enviar.

• Fonte dos títulos vale para os títulos das páginas e das seções. O padrão é Igual à fonte da página, e qualquer fonte de página pode ser escolhida.
• Fonte de leitura, em Identidade visual, vale só para o texto dos seus artigos. Literata é uma serifada tranquila, feita para leituras longas, e todas as fontes de página também aparecem.

Uma serifada no texto do artigo com uma sem serifa limpa no cabeçalho e nos menus fica parecendo um livro bem feito.

Claro, escuro ou automático

O Tema de cores tem 3 opções:

• Claro (o padrão): superfícies claras, texto escuro.
• Escuro: superfícies escuras, texto claro, para marcas que já são escuras.
• Automático (segue o dispositivo do visitante): escuro para quem usa o dispositivo no modo escuro e claro para todo o resto.

O tema vale para todas as páginas públicas: início, coleções, artigos, busca e a página de um endereço que não existe.

Suas próprias cores

Em Cores do tema você ajusta a paleta em vez de escrever CSS: Página, Cartões, Bordas, Texto, Suave (texto secundário) e Títulos, cada uma como valor hex. Há uma paleta para o Modo claro e outra para o Modo escuro. O tema Claro mostra a paleta clara, o Escuro a escura e o Automático as duas, então ali você define as cores de cada uma. Uma cor que você não muda mantém a padrão, e Redefinir traz uma paleta inteira de volta. A cor da sua marca continua nos links, botões e detalhes.

A imagem de destaque

Três configurações em Aparência definem como o texto fica sobre a sua imagem de destaque. Elas valem para a página inicial e para a faixa de imagem de todas as outras páginas.

• Texto sobre a imagem: Claro ou Escuro. Texto escuro combina com imagens claras; botões e chips sobre a imagem se ajustam a ele.
• Sombra sobre a imagem: Nenhuma, Leve (o padrão) ou Forte. Uma sombra mais forte mantém o texto legível em imagens cheias de detalhes.
• Recorte da imagem: Automático, Topo, Centro ou Base, a parte da imagem que fica à vista quando uma faixa mostra só um pedaço dela.

Cantos, cabeçalho e ícones das coleções

• Cantos: Retos, Suaves (o padrão) ou Redondos, para cartões, botões e pequenas etiquetas.
• Cabeçalho: Claro (o padrão) ou Cor da marca, a barra no topo de todas as páginas.
• Ícones das coleções: o que fica atrás do ícone de cada coleção na biblioteca. Imagem mostra um recorte da sua imagem de destaque, Cor da marca um tom da sua cor e Só o ícone o ícone sozinho. Sem imagem de destaque, Imagem mostra a cor da marca.

Páginas de artigo

Em Páginas de artigo você liga ou desliga cada parte em volta do texto, para toda a central de ajuda:

• Barra lateral de coleções nos artigos, veja Navegação entre artigos da central de ajuda.
• Nesta página: os subtítulos de um guia mais longo como links ao lado do texto, ou acima dele nos celulares.
• Este guia foi útil?: a pergunta no fim de cada guia, veja Feedback de artigos de ajuda.
• Anterior, próximo e Continue lendo: os links para o guia anterior e o seguinte e mais guias da coleção.

Títulos próprios das seções

Na aba Design, Títulos das seções deixa você dar nome às seções da página inicial: o título da biblioteca, o de Mais lidos, o de Ainda precisa de ajuda? e o texto abaixo dele. Com as abas de idioma (EN, DE, PT, HI) cada título ganha a própria tradução. Um campo vazio mantém o título padrão, que segue o idioma do visitante, e um título sem tradução mostra o seu texto em inglês.

Rodapé em outros idiomas

Com Usar um rodapé personalizado, em Rodapé personalizado, você monta até 4 colunas de links e uma linha de copyright ou aviso legal. As abas de Idiomas do rodapé dão a cada título de coluna e a cada texto de link uma versão em alemão, português ou hindi. Sem tradução, aparece em inglês.

Custom CSS

Para o que as configurações não alcançam, adicione Custom CSS (avançado) na aba Design. Ele vale só para a sua central de ajuda pública, nunca para o painel, e vence os estilos do próprio Deskwoot sem !important.

• Ao salvar, regras @import, endereços javascript: e partes arriscadas parecidas são removidas.
• Até 20.000 caracteres, bastante para ajustes de marca.
• Os elementos têm atributos data-hc fixos (por exemplo [data-hc="article"] ou [data-hc="category-grid"]), que funcionam melhor como seletores do que nomes de classe.

HTML próprio de cabeçalho e rodapé (Enterprise)

No Enterprise, quando a sua central de ajuda já roda no seu próprio domínio ativo, você pode colar o cabeçalho do seu site como HTML do cabeçalho personalizado. Ele passa a substituir o cabeçalho da central de ajuda, e nas páginas internas a busca e a escolha de idioma vão para a faixa de imagem logo abaixo. O seu HTML de rodapé substitui do mesmo jeito o rodapé de todas as páginas.

Os dois são limpos ao salvar: scripts, manipuladores de eventos, blocos <style>, iframes, formulários e endereços javascript: são removidos. Classes e estilos inline ficam, para você terminar o visual com Custom CSS.

Histórico

Cada vez que você muda a cor da marca, o título da página, o subtítulo, os links do cabeçalho, o Custom CSS, as seções da página inicial e os títulos delas, o texto, a sombra ou o recorte da imagem de destaque, os cantos, o cabeçalho, os ícones das coleções ou as partes das páginas de artigo, o Deskwoot guarda o estado anterior. O painel Histórico na aba Design mostra quem mudou o quê, e um clique traz de volta um visual anterior. Logo, imagem de destaque, favicon, fontes, tema, cores do tema e HTML próprio de cabeçalho ou rodapé não entram nesse histórico.

Perguntas frequentes

Quais opções precisam do plano Enterprise?

A marca própria e o HTML próprio de cabeçalho e rodapé, que também precisa de um domínio personalizado ativo. Todo o resto deste guia vem com a central de ajuda a partir do Startup.

Posso usar uma fonte nos títulos e outra nos artigos?

Sim. Fonte vale para toda a central de ajuda, Fonte dos títulos para os títulos das páginas e das seções e Fonte de leitura só para o texto dos artigos, por exemplo Instrument Sans com Literata.

Posso mudar as cores do tema claro?

Sim. Cores do tema tem uma paleta de Modo claro ao lado da de Modo escuro. No Automático você define as duas.

Minha imagem de destaque é clara e o título fica difícil de ler. O que ajuda?

Coloque Texto sobre a imagem em Escuro, ou mantenha o texto claro e escolha Forte em Sombra sobre a imagem. O Recorte da imagem leva a parte mais calma da imagem para trás do texto.

Posso esconder "Este guia foi útil?" ou "Nesta página"?

Sim. Desligue em Configurações > Páginas de artigo. A mudança vale para todos os artigos da central de ajuda.

A minha central de ajuda vai mostrar o favicon do Deskwoot?

Não. Sem favicon próprio, a aba do navegador mostra a primeira letra do nome do portal na cor da sua marca.

Uso as configurações ou Custom CSS?

Primeiro as configurações: não precisam de código e continuam funcionando quando a central de ajuda muda. Use Custom CSS só para o que as configurações não oferecem.

Posso colocar a navegação do meu site na central de ajuda?

Sim, no Enterprise com um domínio personalizado ativo, como HTML do cabeçalho personalizado. Sem isso, os links do cabeçalho na aba Configurações colocam links para o seu site no cabeçalho normal.

Posso desfazer uma mudança de design?

As mudanças na cor da marca, no título da página, no subtítulo, nos links do cabeçalho, no Custom CSS, nas seções da página inicial e nos títulos delas, no texto, na sombra e no recorte da imagem de destaque, nos cantos, no cabeçalho, nos ícones das coleções e nas partes das páginas de artigo voltam pelo painel Histórico na aba Design. Fontes, tema, cores do tema, favicon, imagens e HTML próprio de cabeçalho ou rodapé não.