Temas e identidade visual do clube

Seus temas personalizados e a biblioteca padrão ficam lado a lado como cartões com amostras de cor. Use um tema da biblioteca como está com um clique, clone e personalize para criar o seu ou comece um tema do zero. Um tema clonado sempre pode voltar ao original da biblioteca.

Quer um site inteiro para começar, e não só um visual? Veja os modelos de site para clube prontos na galeria de modelos.

O editor de temas é uma página inicial de clube de exemplo desenhada com o seu tema: clique na barra de navegação, em um título, um cartão, um botão ou no rodapé, e as configurações dele abrem ao lado. Escolha cores em um seletor de amostras ou cole um valor hexadecimal. Uma linha de paleta embaixo de cada seletor guarda as cores da sua marca, então uma variação de botão pode reaproveitar uma cor salva com um clique.

Escolha fontes em uma lista pesquisável das fontes que o seu site oferece, defina tamanhos e pesos dos títulos e o arredondamento dos cantos, e alterne entre a visualização de computador e celular enquanto trabalha. Variáveis personalizadas, e a exportação e importação em JSON, estão lá quando você precisar.

Escolha entre vinte famílias de fontes de licença aberta, servidas pelos nossos próprios servidores, além das fontes do sistema, para que a fonte escolhida seja a fonte que todo visitante vê, em qualquer celular. Padrão do tema volta um campo para a fonte padrão.

No plano Pro, envie as fontes do seu clube como arquivos WOFF2, com até 500 KB cada e uma por peso, depois de confirmar que o clube tem licença para usá-las em um site. Se mudar para um plano inferior, elas são guardadas, mas não são usadas; voltam quando você volta ao Pro.

Defina o espaço entre as seções (Compacto, Padrão, Confortável ou Amplo), uma sombra e uma borda para os cartões de conteúdo e um tamanho mínimo e máximo para títulos e texto, para que a tipografia se ajuste suavemente do celular ao computador.

A aba Guia de estilo mostra cada tipo de seção que você pode adicionar a uma página no tema que está editando, incluindo as mudanças ainda não salvas, para você ver o site inteiro antes de salvar.

Escolha como o topo de cada página é organizado: logo à esquerda e links à direita, logo centralizado com links abaixo, links centralizados com botões à direita ou menu dividido em volta de um logo centralizado. Dê a ele um fundo na sua cor principal, claro, escuro, ou claro com um filete colorido. Depois escolha um dos quatro rodapés: em colunas, centralizado e compacto, em colunas com uma faixa de patrocinadores ou uma única linha minimalista.

O editor de navegação mostra a prévia de cada opção enquanto você escolhe. No celular, todos os layouts mantêm a linha compacta padrão, então o botão do menu está sempre onde o polegar espera.

Qualquer seção na coluna principal de uma página pode receber um estilo: destaque para o banner de abertura, uma faixa de destaque na cor da sua marca, uma coluna estreita para textos longos, duas colunas ou uma imagem em largura total. Os estilos só são ativados no seu site na primeira vez que um administrador escolhe um, então nada muda em um site existente até você decidir, e o seletor avisa em palavras simples quando um estilo pode deixar o texto mais difícil de ler.

No plano Pro, Tema → CSS personalizado aceita uma folha de estilo para o site inteiro com até 20 KB, e qualquer seção da coluna principal pode ter até 2 KB só dela. Cada regra é verificada quando você salva e de novo toda vez que a página é servida, e o editor lista o que removeu e por quê.

Os limites impedem que uma folha de estilo quebre o site ou vá além dele. Ela não pode importar outras folhas de estilo nem carregar fontes da web, só pode usar imagens que você mesmo enviou, não pode fixar sobreposições fixas ou “grudadas” por cima da página e vale somente para o site público, nunca para as telas do painel. Se mudar para um plano inferior, seu CSS é guardado, mas não aparece; ele volta quando você retorna ao Pro.

A identidade visual acompanha você em todo lugar: o site público, os e-mails automáticos e o portal do sócio usam o logo e a identidade visual do clube automaticamente. Os botões seguem as cores da sua marca até você mudar o estilo deles de propósito, então trocar a cor principal muda o visual do site inteiro de uma vez. São as cores do seu clube como tema do site, sem precisar de um designer na diretoria.

Um histórico de versões registra cada mudança salva e restaura qualquer visual anterior com um clique, e os menus têm o seu próprio histórico de versões, então uma mudança na navegação pode ser desfeita do mesmo jeito. E uma verificação de legibilidade integrada impede você de salvar um texto que não passa no contraste de acessibilidade com o fundo da página. Assim, uma mudança de visual empolgada nunca deixa a tabela de jogos ilegível.

O Assistente Helix pode mudar o estilo do site a partir de um pedido em linguagem simples, como “use as cores da nossa camisa”, com uma prévia completa antes de salvar qualquer coisa.