Escolha um template e o visual dele
Veja a prévia dos templates e defina cores, fontes, opções de layout e logo do site.
Para donos e admins de times · 11 passos
Do que você precisa antes
- Seu time tem uma assinatura de site. No admin de um time gratuito, aparece Obter um site em vez de Template.
- Você é o dono ou um admin do time.
Passos
Passo 1: Abra a página Template
No menu à esquerda, toque em Template.
Você deve ver: uma página com o título Template, com um card para cada template. O que seu site usa está marcado como Em uso. Se seu site ainda não tem template, cada card mostra Escolher — tocar nele escolhe esse template, com a primeira paleta dele, e abre Aparência.
Passo 2: Veja a prévia de um template
No card de um template, toque em Prévia.
Você deve ver: seu próprio site, nesse template, abaixo de uma barra que diz Prévia. Só os admins do seu time podem abrir essa prévia. Toque em Voltar ao admin quando terminar.
Passo 3: Abra Aparência
De volta à página Template, toque em Aparência no canto superior direito.
Você deve ver: uma página com o título Aparência — o formulário de um lado e uma imagem ao vivo do seu site ao lado (abaixo, em telas estreitas).
Passo 4: Escolha uma paleta
Em Paleta, escolha um dos presets do template.
Você deve ver: o preset destacado e a imagem do seu site nas cores dele. Um preset define as cinco cores e as duas fontes de uma vez.
Passo 5: Mude uma cor
Em Cores, digite um código de cor como
#7dd3fcem Principal, Destaque, Realce, Fundo ou Texto — ou toque no quadrado ao lado para escolher uma.Você deve ver: a imagem do seu site mudar e Personalizada destacado em Paleta. Cada cor mostra o padrão do template; Redefinir volta essa cor para o padrão.
Passo 6: Dê cores próprias ao texto e às superfícies
Em Texto e superfícies, toque em Escolha uma cor ao lado de Títulos, Legendas, Cards, Linhas, Links e rótulos, Botão ou Texto do botão e depois digite um código de cor ou toque no quadrado ao lado. Cada uma começa em Automático, que segue suas cinco cores do jeito que seu template faz; Usar automático volta para esse modo.
Você deve ver: a imagem do seu site mudar e, embaixo de cada cor usada em textos, um número como 7,2:1 · fácil de ler — o quanto ela se destaca do seu fundo e dos seus cards. Abaixo de 4,5:1 (3:1 para títulos), aparece difícil de ler, junto com a cor que os visitantes vão ver no lugar, e a opção Deixar legível, que coloca essa cor no campo.
Passo 7: Escolha suas fontes
Em Tipografia, abra Fonte dos títulos ou Fonte do texto e escolha uma fonte. Cada fonte aparece escrita nela mesma e fica em um grupo — Heavy display, Condensed, Tech, Clean sans, Serif, Handwritten, Monospace — e você pode digitar um nome para encontrá-la.
Você deve ver: a imagem do seu site nessa fonte. Mudar uma fonte também deixa a paleta como Personalizada.
Passo 8: Adicione seu logo
Em Logo, toque em Escolher imagem ao lado de Logotipo, Logo quadrado ou Favicon (o botão vira Substituir depois que uma imagem é definida). Na caixa Inserir imagem, escolha uma imagem ou envie uma — JPEG, PNG, WebP ou AVIF, até 5 MB — e toque em Inserir. Um logo não precisa de texto alternativo.
- Logo quadrado aparece na navegação do seu site, no topo da página inicial e no seu elenco.
- Logotipo é opcional: o nome do seu time como imagem, em qualquer formato. Quando você define um, ele substitui o logo quadrado e o nome na navegação e no topo da página inicial.
- Favicon é o ícone pequeno na aba do navegador.
Seus logos nunca são cortados nem alterados. Toda imagem aparece inteira, e um fundo transparente continua transparente. Por isso o logo quadrado e o favicon precisam ser quadrados, com pelo menos 256 × 256 pixels — uma imagem de outro formato é recusada quando você salva, com uma mensagem dizendo o tamanho dela. Um logo escolhido antes dessa regra continua aparecendo até você trocá-lo.
Você deve ver: o nome da imagem ao lado do espaço. Um preset nunca muda essas imagens.
Passo 9: Defina as opções do template
Mais abaixo, em Opções do Broadcast, escolha Hero layout (Image behind the text ou Image beside the text) e Card edges (Cut corners ou Square corners). Outros templates mostram as próprias opções aqui: no Neon Grid, Motion é Full motion ou Calm (tudo parado), e Hero glow é Bright (o topo da sua página inicial vai da sua cor de fundo para a sua cor de destaque) ou Escuro (para um cinza escuro misturado da sua cor principal com a de destaque, para um visual mais escuro); no Crosshair, Hero layout é Split (seu texto à esquerda, sua imagem à direita com sua próxima partida por cima) ou Full-width image; no Faceoff, Hero alignment é Centered ou Left, e Home roster é Scattered (os cards dos seus jogadores em volta de um grande "Meet the squad") ou Grid; no Clutch, Hero layout é Bento (seu hero ao lado de um painel de últimas notícias) ou Full width, e Corners é Rounded ou Square; no Varsity, Fundo é Pinstripe (uma listra diagonal suave atrás de todas as páginas) ou Simples, e Hero size é Full (uma foto alta com o menu por cima) ou Banner (uma mais baixa); no Redline, Photo tint é Duotone (suas fotos tingidas com sua cor principal) ou Natural (as cores originais delas), e Panels é Offset (blocos escuros atrás das suas fotos e seções) ou Flat.
Você deve ver: a imagem do seu site mudar de layout.
Passo 10: Salve
Toque em Salvar no fim do formulário.
Você deve ver: "Aparência salva". Os visitantes ainda não veem — as alterações salvas ficam no seu rascunho até você publicar.
Passo 11: Publique seu site
Toque em Publicar no menu à esquerda e publique — veja Publique seu site.
Você deve ver: Aparência na lista de alterações antes de publicar e seu site com o novo visual depois.
Como saber se deu certo
- A página Template marca seu template como Em uso.
- Depois de publicar, seu site mostra suas cores, fontes e logo — inteiro, nunca cortado.
- Toda cor usada em textos diz fácil de ler, ou você aceitou o tom legível que os visitantes veem no lugar.
Algo parece errado?
Mudei minhas cores, mas meu site continua igual
Salvar guarda as alterações no seu rascunho. Toque em Publicar no menu e publique (passo 11).
Uma cor diz "difícil de ler"
O texto nessa cor não se destaca o bastante do seu fundo ou dos seus cards para todo mundo conseguir ler — texto normal precisa de 4,5:1 e títulos, de 3:1. Seus visitantes nunca veem a cor difícil de ler: seu site mostra o tom legível mais próximo no lugar, e o formulário mostra qual é. Toque em Deixar legível para usar esse tom ou escolha sua própria cor até aparecer fácil de ler. Uma cor em Automático é ajustada do mesmo jeito, sem perguntar. Publicar também mostra um aviso, mas nunca impede que você publique.
Meu site fica difícil de ler com uma cor só em tudo
Dê a cada tipo de texto sua própria cor em Texto e superfícies (passo 6): por exemplo, Títulos em vermelho, Texto cinza-claro para os parágrafos e uma cor de Cards um pouco mais clara para os painéis se destacarem da página. Para colorir partes inteiras de uma página de outro jeito — uma loja clara num site escuro, uma faixa na sua cor de destaque — veja Dê cores próprias a partes do seu site.
Trocar de template apaga meu conteúdo?
Não. Seu conteúdo pertence ao seu site, não ao template: suas cores e fontes são mantidas onde o novo template as usa, as opções próprias dele voltam ao padrão, e uma seção que ele não consegue mostrar fica oculta, não é apagada. A caixa que abre antes da troca lista essas três coisas, e você pode cancelar. Se seu site ainda tem as cores e fontes padrão da plataforma — você nunca escolheu uma paleta nem mudou uma cor — a primeira paleta do novo template é usada no lugar, para seu site ficar parecido com a imagem do template; a caixa avisa isso em Cores e fontes. São sete templates: Broadcast, um visual de dia de jogo; Neon Grid, um visual preto e neon com uma grade animada e um degradê brilhante atrás do hero, seu logo flutuando por cima, contadores e um mural de vídeos; Crosshair, um visual preto e técnico com painéis emoldurados, rótulos entre colchetes, um grande logotipo no rodapé e fotos em destaque; Faceoff, um visual azul-escuro e ciano-gelo em que seu logo encara o do adversário em todo card de partida, com um hero grande e seu elenco espalhado em volta de um título gigante; Clutch, um visual claro com cards brancos arredondados, títulos largos em maiúsculas e uma cor vibrante, sua próxima partida no hero e, em telas largas, no topo de todas as páginas; Varsity, um visual universitário com faixas azul-marinho, um dourado, suas melhores colocações em torneios acima do elenco e suas partidas como uma tabela de jogos; e Redline, um vermelho sobre quase preto, com suas fotos tingidas na sua cor principal (vermelho por padrão), botões quadrados e suas partidas como linhas com foto e os dois logos em volta de um VS. Os títulos do Clutch usam Archivo Expanded, que você pode escolher em qualquer template em Heavy display. No computador ou tablet, o botão Entre no nosso Discord do Faceoff, no topo de todas as páginas, só aparece quando você adiciona o link do seu Discord em Redes sociais (Adicione suas redes sociais). Todo template mostra sua transmissão ao vivo do mesmo jeito: uma contagem regressiva no dia, o player da Twitch no topo da sua página inicial enquanto você está ao vivo e uma barra Ao vivo em todas as outras páginas (Agende uma transmissão).
Aparece "Este site mudou desde que você o abriu"
Outro admin salvou antes, e nada seu foi salvo. Toque em Recarregar e faça sua alteração de novo.
Aparece "Este logo tem … Envie uma imagem quadrada"
O logo quadrado e o favicon precisam ser quadrados — mesma largura e altura — e ter pelo menos 256 × 256 pixels, porque nunca os cortamos. A mensagem diz o tamanho da sua imagem. Faça uma versão quadrada (adicione espaço vazio e transparente em volta de um logo largo), envie e salve de novo. Um logo que não é quadrado vai em Logotipo.
Aparece "Este logo não tem tamanho registrado"
Não sabemos o tamanho dessa imagem, então não conseguimos conferir se ela é quadrada. Envie de novo, escolha a nova cópia e salve.
Os campos e o botão Salvar estão cinza
A assinatura do seu time venceu, então as páginas do site ficam somente leitura até ela voltar a ficar ativa. Renove — veja Gerencie a cobrança.
Artigos relacionados
Ainda com dúvidas? Fale com o suporte ou mande um e-mail para support@spawnfront.com — diga em qual página você está e o número do passo.