Escolher um modelo e o seu aspeto
Pré-visualiza modelos e define as cores, os tipos de letra, as opções e o logótipo do teu site.
Para proprietários e administradores de equipas · 11 passos
Do que precisas primeiro
- A tua equipa tem uma subscrição de site. A administração de uma equipa gratuita mostra Obter um site em vez de Modelo.
- És o proprietário ou um administrador da equipa.
Passos
Passo 1: Abre o Modelo
No menu à esquerda, carrega em Modelo.
Deves ver: uma página com o título Modelo, com um cartão por modelo. O que o teu site usa está marcado como Em uso. Se o teu site ainda não tiver modelo, cada cartão mostra Escolher — ao carregares, escolhes esse modelo, com a primeira paleta, e abres o Aspeto.
Passo 2: Pré-visualiza um modelo
No cartão de um modelo, carrega em Pré-visualizar.
Deves ver: o teu próprio site, nesse modelo, por baixo de uma barra que diz Pré-visualização. Só os administradores da tua equipa a podem abrir. Carrega em Voltar à administração quando terminares.
Passo 3: Abre o Aspeto
De volta à página Modelo, carrega em Aspeto no canto superior direito.
Deves ver: uma página com o título Aspeto — o formulário de um lado e uma imagem ao vivo do teu site ao lado (por baixo, num ecrã estreito).
Passo 4: Escolhe uma paleta
Em Paleta, escolhe uma das predefinições do modelo.
Deves ver: a predefinição destacada e a imagem do teu site nas cores dela. Uma predefinição define as cinco cores e os dois tipos de letra de uma vez.
Passo 5: Muda uma cor
Em Cores, escreve um código de cor como
#7dd3fcem Principal, Destaque, Realce, Fundo ou Texto — ou carrega no quadrado ao lado para escolher uma.Deves ver: a imagem do teu site a mudar e Personalizada destacada em Paleta. Cada cor mostra a predefinição do modelo; Repor volta a pô-la.
Passo 6: Dá cores próprias ao texto e às superfícies
Em Texto e superfícies, carrega em Escolhe uma cor ao lado de Títulos, Legendas, Cartões, Linhas, Ligações e etiquetas, Botão ou Texto do botão e depois escreve um código de cor ou carrega no quadrado ao lado. Cada uma começa em Auto, que segue as tuas cinco cores como o teu modelo faz; Usar Auto volta a pô-la assim.
Deves ver: a imagem do teu site a mudar e, por baixo de cada cor que tem palavras, um número como 7,2:1 · fácil de ler — o quanto se destaca do teu fundo e dos teus cartões. Abaixo de 4,5:1 (3:1 nos títulos) diz difícil de ler, mostra a cor que os visitantes vão ver em vez dela e oferece Tornar legível, que põe essa cor no campo.
Passo 7: Escolhe os tipos de letra
Em Tipografia, abre Tipo de letra dos títulos ou Tipo de letra do corpo e escolhe um tipo de letra. Cada tipo de letra aparece escrito nele próprio e arrumado num grupo — Display pesado, Condensado, Técnico, Sans limpo, Serifado, Manuscrito, Monoespaçado — e podes escrever um nome para o encontrar.
Deves ver: a imagem do teu site nesse tipo de letra. Mudar um tipo de letra também torna a paleta Personalizada.
Passo 8: Adiciona o teu logótipo
Em Logótipo, carrega em Escolher imagem ao lado de Logótipo de texto, Logótipo quadrado ou Favicon (passa a dizer Substituir depois de definires um). Na caixa Inserir imagem, escolhe uma imagem ou envia uma — JPEG, PNG, WebP ou AVIF, até 5 MB — e carrega em Inserir. Um logótipo não precisa de texto alternativo.
- Logótipo quadrado aparece na navegação do teu site, no topo da página inicial e no teu plantel.
- Logótipo de texto é opcional: o nome da tua equipa como imagem, de qualquer formato. Quando defines um, substitui o logótipo quadrado e o nome na navegação e no topo da página inicial.
- Favicon é o pequeno ícone no separador do navegador.
Os teus logótipos nunca são cortados nem alterados. Cada imagem aparece inteira, e um fundo transparente continua transparente. É por isso que o logótipo quadrado e o favicon têm de ser quadrados, com pelo menos 256 × 256 píxeis — uma imagem com outro formato é recusada quando guardas, com uma mensagem a indicar o tamanho dela. Um logótipo que escolheste antes desta regra continua a aparecer até o mudares.
Deves ver: o nome da imagem ao lado do espaço. Uma predefinição nunca os altera.
Passo 9: Define as opções do modelo
Mais abaixo, em Opções do Broadcast, escolhe Hero layout (Image behind the text ou Image beside the text) e Card edges (Cut corners ou Square corners). Os outros modelos mostram aqui as suas próprias opções: no Neon Grid, Motion é Full motion ou Calm (tudo parado), e Hero glow é Bright (o topo da tua página inicial passa da cor de fundo para a cor de destaque) ou Escuro (para um cinzento escuro misturado a partir da tua cor principal e da cor de destaque, para um aspeto mais escuro); no Crosshair, Hero layout é Split (o teu texto à esquerda, a tua imagem à direita com a próxima partida por cima) ou Full-width image; no Faceoff, Hero alignment é Centered ou Left, e Home roster é Scattered (os cartões dos teus jogadores à volta de um grande «Meet the squad») ou Grid; no Clutch, Hero layout é Bento (a tua secção principal ao lado de um painel de notícias recentes) ou Full width, e Corners é Rounded ou Square; no Varsity, Fundo é Pinstripe (uma risca diagonal suave por trá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 (as tuas fotos tingidas com a tua cor principal) ou Natural (com as cores delas), e Panels é Offset (blocos escuros colocados atrás das tuas fotos e secções) ou Flat.
Deves ver: a imagem do teu site a mudar de disposição.
Passo 10: Guarda
Carrega em Guardar no fundo do formulário.
Deves ver: «Aspeto guardado». Os visitantes ainda não o veem — as alterações guardadas ficam no teu rascunho até publicares.
Passo 11: Publica o teu site
Carrega em Publicar no menu à esquerda e publica — vê Publicar o teu site.
Deves ver: Aspeto na lista de alterações antes de publicares e o teu site com o novo aspeto depois.
Como saber se resultou
- A página Modelo marca o teu modelo como Em uso.
- Depois de publicares, o teu site mostra as tuas cores, tipos de letra e logótipo — inteiro, nunca cortado.
- Cada cor que tem palavras diz fácil de ler, ou aceitaste o tom legível que os visitantes veem em vez dela.
Algo não parece estar bem?
Mudei as cores, mas o meu site continua igual
Ao guardares, ficam no teu rascunho. Carrega em Publicar no menu e publica (passo 11).
Uma cor diz «difícil de ler»
As palavras nessa cor não se destacam o suficiente do teu fundo ou dos teus cartões para toda a gente as conseguir ler — o texto normal precisa de 4,5:1 e os títulos de 3:1. Os teus visitantes nunca veem a cor difícil de ler: o teu site mostra o tom legível mais próximo, e o formulário indica-o. Carrega em Tornar legível para usar esse tom, ou escolhe o teu até dizer fácil de ler. Uma cor deixada em Auto é ajustada da mesma forma sem perguntar. Ao publicares também aparece um aviso, mas nunca te impede de publicar.
O meu site é difícil de ler numa cor em todo o lado
Dá a cada tipo de texto a sua própria cor em Texto e superfícies (passo 6): por exemplo, Títulos a vermelho, Texto cinzento-claro para os parágrafos e uma cor de Cartões um pouco mais clara para os painéis se destacarem da página. Para dar cores diferentes a partes inteiras de uma página — uma loja clara num site escuro, uma faixa com a tua cor de destaque — vê Dar cores próprias a partes do teu site.
Mudar de modelo apaga o meu conteúdo?
Não. O teu conteúdo pertence ao teu site, não ao modelo: as tuas cores e tipos de letra passam para o novo modelo onde ele os usa, as opções próprias dele voltam às predefinições e uma secção que ele não consegue mostrar fica escondida, não é apagada. A caixa que abre antes de uma mudança indica estas três coisas, e podes cancelá-la. Se o teu site ainda tiver as cores e os tipos de letra predefinidos da plataforma — nunca escolheste uma paleta nem mudaste uma cor — é usada a primeira paleta do novo modelo, para o teu site ficar parecido com a imagem do modelo; a caixa indica-o em Cores e tipos de letra. Há sete modelos: Broadcast, um aspeto de dia de jogo; Neon Grid, um aspeto preto e néon com uma grelha animada e um gradiente brilhante por trás da secção principal, o teu logótipo a flutuar por cima, contadores de estatísticas e uma parede de vídeos; Crosshair, um aspeto preto e técnico com painéis emoldurados, etiquetas entre parênteses retos, um grande logótipo de texto no rodapé e fotos em destaque; Faceoff, um aspeto azul-escuro e ciano-gelo em que o teu logótipo fica frente a frente com o do adversário em cada cartão de partida, com uma grande secção principal e o teu plantel espalhado à volta de um título gigante; Clutch, um aspeto claro com cartões brancos arredondados, títulos largos em maiúsculas e uma cor viva, com a tua próxima partida na secção principal e, num ecrã largo, no topo de todas as páginas; Varsity, um aspeto universitário com faixas azul-marinho, um dourado, as tuas melhores classificações em torneios acima do plantel e as tuas partidas numa tabela de calendário; e Redline, um vermelho sobre quase preto com as tuas fotos tingidas com a tua cor principal (vermelho por predefinição), botões quadrados e as tuas partidas em linhas com foto e os dois logótipos frente a frente com um VS. Os títulos do Clutch usam Archivo Expanded, que podes escolher em qualquer modelo em Display pesado. Num computador ou tablet, o botão Junta-te ao nosso Discord do Faceoff no topo de todas as páginas só aparece depois de adicionares a ligação do teu Discord em Redes sociais (Adicionar as tuas redes sociais). Todos os modelos mostram a tua transmissão em direto da mesma forma: uma contagem decrescente no dia, o leitor da Twitch no topo da tua página inicial enquanto estás em direto e uma barra Em direto em todas as outras páginas (Agendar uma transmissão).
Diz «Este site mudou desde que o abriste»
Outro administrador guardou primeiro e nada do que fizeste foi guardado. Carrega em Recarregar e volta a fazer a alteração.
Diz «Este logótipo tem … Envia uma imagem quadrada»
O logótipo quadrado e o favicon têm de ser quadrados — com a mesma largura e altura — e ter pelo menos 256 × 256 píxeis, porque nunca os cortamos. A mensagem indica o tamanho da tua imagem. Cria uma versão quadrada (acrescenta espaço vazio e transparente à volta de um logótipo largo), envia-a e volta a guardar. Um logótipo que não seja quadrado vai para Logótipo de texto.
Diz «Este logótipo não tem tamanho registado»
Não sabemos o tamanho dessa imagem, por isso não conseguimos verificar se é quadrada. Envia-a outra vez, escolhe a nova cópia e guarda.
Os campos e o botão Guardar estão a cinzento
A subscrição da tua equipa expirou, por isso as páginas do site ficam só de leitura até voltar a estar ativa. Renova-a — vê Gerir a faturação.
Artigos relacionados
Continuas com dúvidas? Contacta o suporte ou envia um email para support@spawnfront.com — diz-nos em que página estás e o número do passo.