Tema

A página Tema é onde você escolhe a aparência do seu site público: as cores, as fontes, os botões e o arredondamento dos cantos que os visitantes veem em todas as páginas. Você a encontra na barra lateral do painel, em Tema. Ela funciona como os editores de páginas e de navegação: uma galeria de temas e um editor visual em que você clica na parte da página que quer mudar.

Quem pode usar

Editar o tema é restrito aos administradores. Cada ação (ativar, clonar, salvar e restaurar) confere a função de administrador, então moderadores e sócios não podem fazer alterações aqui.

O que há na página

A página Tema é uma galeria. Seus temas personalizados aparecem como cartões com uma prévia das cores, e a Biblioteca padrão de temas prontos para usar fica logo abaixo. A linha abaixo do título informa qual tema está ativo no momento (ela mostra "Padrão da plataforma" até você ativar um tema seu).

Clicar em Editar num tema abre o editor visual dele: uma página inicial de clube de exemplo desenhada com as cores e as fontes do seu tema. Clique em qualquer parte da página (a barra de navegação, um título, o texto, um cartão, um botão, os selos de status ou o rodapé) e as configurações dela se abrem numa gaveta de configurações à direita, a mesma gaveta que os editores de páginas e de navegação usam. O editor visual continua funcionando por trás dela, então clicar em outra região leva a gaveta para essa região; Esc ou o ✕ a fecha. Numa tela estreita, a gaveta ocupa a tela toda e os campos ficam numa única coluna. As abas acima do editor visual levam a Todas as configurações do tema (todas as configurações de cor, fonte, botão, cantos, espaçamento e cartões reunidas num só lugar), ao Guia de estilo (todas as seções que você pode adicionar a uma página, desenhadas no tema que você está editando) e a JSON (avançado), para exportar e importar. Um Histórico de versões com todas as alterações salvas fica no fim da página.

Na galeria, Suas fontes lista as fontes que o seu clube enviou (Pro).

Uma dica do Assistente Helix também fica perto do topo. Descreva uma mudança em linguagem simples (por exemplo, "Troque a cor primária para azul-marinho e a de destaque para dourado") e o assistente faz a mudança por você.

Passo a passo

Começar com um tema pronto

1. Navegue pela Biblioteca padrão, em que cada tema aparece com uma prévia das cores.
2. Clique em Usar como está para tornar aquele tema o tema ativo do seu site na hora.
3. Ou clique em Clonar e personalizar para copiá-lo para Seus temas personalizados e abrir o editor visual dele.

Criar um tema do zero

1. Em Seus temas personalizados, clique em + Novo tema personalizado.
2. Dê um nome a ele (por exemplo, "Equipe de base") e clique em Criar e editar: o editor visual se abre.

Personalizar no editor visual

1. Abra um tema pelo botão Editar dele.
2. Clique na parte da página de exemplo que você quer mudar: a barra de navegação, um título, o texto, um cartão, um botão, os selos de status ou o rodapé. As configurações dela aparecem na gaveta à direita.
3. Escolha as cores no seletor, cole um valor hexadecimal ou clique num ponto da linha de paleta abaixo de cada seletor. Ela guarda as cores da sua marca e as cores personalizadas, para que uma variante de botão possa reaproveitar uma cor salva com um clique. Escolha as fontes na lista com pesquisa; defina os tamanhos e os pesos dos títulos e o arredondamento dos cantos. O editor visual se atualiza enquanto você digita.
4. Use a opção Computador / Celular para conferir os dois tamanhos de tela, e a linha Adicionar a este tema (acima do editor visual e no fim da gaveta) para adicionar cores personalizadas ou variantes de botão.
5. Clique em Salvar tema no botão flutuante de salvar (no canto superior direito) quando estiver satisfeito. Ele fica em cinza até você mudar alguma coisa, então uma versão só é registrada quando há algo para registrar.

Escolher as fontes

1. Clique num título ou no texto do editor visual, ou abra Todas as configurações do tema, e clique num campo de fonte.
2. A lista mostra só as fontes que carregam no seu site para todos os visitantes: as fontes do sistema, cerca de vinte fontes de licença aberta que hospedamos para você e as fontes que o seu clube enviou. Cada nome aparece na própria fonte. Digite para filtrar a lista e clique numa fonte para escolhê-la.
3. Se o seu tema foi configurado com uma fonte que não está na lista, ela aparece primeiro, marcada como Não carregada. Ela continua funcionando como sempre: os visitantes que têm essa fonte instalada a veem, e todos os outros veem a alternativa. Escolha uma fonte da lista quando quiser que todos vejam a mesma coisa.
4. Para voltar à fonte padrão, escolha Padrão do tema no topo da lista. O campo é limpo e o seu site usa a fonte padrão do ClubHelix (Inter, ou Source Serif 4 para a fonte serifada). Na próxima vez que você abrir o tema, o campo mostra o nome dessa fonte.

Definir espaçamento, cartões e texto que se adapta à tela

1. Abra Todas as configurações do tema.
2. Em Espaçamento e cartões, escolha o Espaço entre seções das suas páginas (Compacto, Padrão, Confortável ou Amplo) e uma Sombra, uma Borda e uma Linha da borda para os cartões de conteúdo (as caixas que mostram eventos, links, pessoas e itens parecidos). Você também pode definir as configurações dos cartões pelo editor visual: clique num cartão e procure em Cartões.
3. Em Títulos, preencha Menor (celulares) e Maior (desktops) para que um título se adapte suavemente à largura da tela. Use px ou rem, como 1.75rem e 3rem. Tamanho do texto tem o mesmo par.
4. Deixe uma configuração em Padrão (como agora), ou deixe uma faixa de tamanho em branco, e o seu site fica exatamente como está hoje.

Conferir tudo no Guia de estilo

1. Clique na aba Guia de estilo.
2. Todos os tipos de seção que você pode adicionar a uma página aparecem com conteúdo de exemplo, nas cores, fontes, espaçamentos e estilos de cartão que você está editando, incluindo as mudanças ainda não salvas.
3. Volte para outra aba, mude alguma coisa e olhe de novo. Quando estiver satisfeito, clique em Salvar tema.

Enviar a sua própria fonte (Pro)

1. Tenha a fonte em arquivo WOFF2, um arquivo por peso (por exemplo, Regular e Negrito). Arquivos TTF, OTF e WOFF não são aceitos, então converta-os antes. Cada arquivo pode ter até 500 KB.
2. Na galeria de Temas, encontre Suas fontes. Escolha o arquivo, digite o Nome da fonte que você quer ver na lista de fontes e escolha o Peso e o Estilo.
3. Marque a caixa para confirmar que o seu clube tem licença para usar a fonte num site e clique em Enviar fonte.
4. Abra um tema e escolha a fonte na lista, em Suas fontes enviadas. Envie cada peso com o mesmo nome de fonte para que o texto em negrito use o seu arquivo de negrito.
5. Para remover uma fonte, clique em Excluir ao lado dela. O texto que a usava passa para a próxima fonte do seu tema.

Ativar o seu tema

1. Na galeria, clique em Ativar num tema personalizado (ou em Usar como está na biblioteca). Você também pode ativar pelo cabeçalho do editor.
2. O botão mostra Ativo quando o tema está no ar no seu site.

Desfazer uma alteração

• No Histórico de versões, no fim do editor, cada linha mostra quando uma versão foi salva, quem a salvou e quantas configurações ela mudou (por exemplo, "3 tokens alterados", com os nomes). Clique em Restaurar numa versão anterior e confirme para trazê-la de volta.
• Uma restauração é salva como uma versão nova, então nada no histórico é sobrescrito. Se o tema estiver ativo, o seu site público muda na hora.
• Uma restauração é verificada como um salvamento. Se uma versão antiga tiver um valor de cor ou fonte que não é mais permitido, ou um texto difícil demais de ler sobre o fundo, você verá uma mensagem dizendo o que corrigir, e nada muda.
• Num tema clonado, Redefinir para o padrão de origem (no cabeçalho do editor) o devolve ao tema da biblioteca de onde ele veio.
• Descartar, no botão de salvar, joga fora as edições não salvas.

Referência de campos

Dicas e perguntas frequentes

• Quem é responsável pela licença de uma fonte? O seu clube. Antes de enviar uma fonte, confira se a licença permite o uso num site. Muitas fontes compradas para uso no computador não permitem. As fontes da lista integrada são todas de licença aberta, então você pode usá-las à vontade.

• Por que a minha fonte não está na lista? A lista mostra só as fontes que todos os visitantes vão ver. No plano Pro, você pode enviar as suas; nos outros, escolha a mais parecida na lista.

• O que acontece com as fontes enviadas se deixarmos o plano Pro? Elas são mantidas, mas o seu site deixa de usá-las até vocês voltarem ao Pro. Você ainda pode excluí-las.

• Por que uma versão antiga não é restaurada? Ela tem um valor que não aceitamos mais, geralmente uma cor ou fonte que poderia quebrar a página, ou um texto abaixo do contraste mínimo. Restaure outra versão, ou mude essa configuração e salve.

• Por que as minhas cores não são salvas? Para manter o texto legível, o texto precisa ter contraste de pelo menos 4,5:1 com o fundo da página (WCAG AA). Se estiver baixo demais, você verá uma mensagem pedindo para ajustar a cor do Texto ou do Fundo da página.

• Nada mudou? Salvar um tema idêntico é ignorado de propósito, para que os números de versão reflitam só edições reais.

• Os botões seguem a sua marca. Os botões primário, secundário, de destaque e da barra de navegação acompanham automaticamente as cores da sua marca até você personalizar as cores deles diretamente; depois disso, eles mantêm as próprias cores.

• Precisa de mais do que cores e fontes? No plano Pro, o CSS personalizado (com link ao lado do tema ativo) permite adicionar o seu próprio CSS ao site público.

• Vá mais rápido com o Helix. Clique em Abrir o assistente e descreva as suas cores e fontes em linguagem simples.

• O tema controla o estilo geral do site; para o logo e a identidade do clube, veja Identidade visual. Para montar o site em si, veja Páginas e Navegação.