Aplique a identidade visual do site

A aba Identidade visual define a aparência global do site publicado: cores, fontes, logotipo, ícone e animações. As escolhas desta aba são aplicadas ao site inteiro, e o visitante vê exatamente o que você configurar depois que o site é publicado de novo.

Abra Épico Site → Configurações e escolha a aba Identidade visual.

Cores da marca

O painel trabalha com sementes de cor. Você escolhe uma cor principal e o site deriva automaticamente as escalas que garantem coerência visual em todo o layout.

• Cor de destaque (semente da marca) é a cor principal, a partir da qual toda a escala cromática do site é derivada. O padrão de fábrica é um azul. Este é o único campo de cor obrigatório.
• Marca secundária e Marca terciária são opcionais. Deixe em branco para o sistema derivar automaticamente uma cor complementar e uma tríade a partir da cor principal.
• Cor de fundo é opcional. Em branco, o site usa os fundos claro e escuro padrão, com texto ajustado para facilitar a leitura.
• Cor do texto é opcional. Em branco, o site usa preto e branco.

Texto sobre as cores da marca

Logo abaixo da cor de destaque, da marca secundária e da marca terciária, o campo Texto sobre esta cor define a cor do texto nos botões, faixas e seções que usam aquela cor como fundo.

• Automático é o padrão. O site usa texto branco sempre que o branco fica legível sobre a cor, com contraste de pelo menos 4,5:1, e texto preto nos demais casos. Assim o texto atende ao mínimo de acessibilidade com qualquer cor escolhida.
• Branco e Preto fixam a cor do texto, independente da cor de fundo. Use quando preferir outra combinação para a sua marca.

Se a escolha manual ficar abaixo de 4,5:1, o painel mostra um aviso com o contraste medido depois de salvar. O aviso não impede o salvamento, mas texto com pouco contraste é mais difícil de ler. Para voltar ao ajuste automático, escolha Automático e salve.

No seletor de cores, o botão Padrão devolve a cor de fábrica do campo. Se você limpar a cor de destaque sem escolher outra, o painel restaura o padrão ao salvar.

Tipografia

A opção Personalidade tipográfica troca, de uma vez, as fontes de título, texto, subtítulo e legenda. As personalidades disponíveis são:

Personalidade	Característica
Tecnológico	Geométrica e precisa, com títulos largos em caixa alta
Inventivo	Fonte de display expressiva no título e leitura neutra no corpo
Institucional	Serifada clássica, de tom sóbrio e formal
Dinâmico	Títulos condensados em itálico, com muito contraste de largura
Humanista	Serifada suave, de traço orgânico e acolhedor
Mínimo contemporâneo	Neutra e compacta, sem ornamento
Cultural premium	Serifada itálica no título, com corpo sem serifa
Jornalístico	Serifada no título e sem serifa no corpo, como em jornal
Casual	Traço solto, próximo da escrita à mão
Épico clássico	Slab serif leve no título com corpo sem serifa
Personalizado	Você escolhe a fonte de cada papel tipográfico

Três opções complementam a personalidade:

• Peso do título escolhe o peso da fonte dos títulos, de extraleve a ultranegrito. Só vale para títulos. Um peso que a família escolhida não oferece é recusado ao salvar.
• Tamanho do título principal ajusta o título das páginas em três degraus: menor, padrão e maior. A mudança é limitada de propósito para preservar a hierarquia de leitura e o layout.
• Tamanho do texto dos posts aumenta o corpo dos posts em passos de 10%, até 150% do padrão. Títulos e texto do artigo ampliam juntos. Menus, botões e o restante do site mantêm o tamanho original.

Fontes personalizadas

Quando a personalidade é Personalizado, quatro seletores aparecem para escolher a Fonte dos títulos, a Fonte do texto, a Fonte dos subtítulos e a Fonte das legendas. As listas trazem as fontes do catálogo Épico e as fontes instaladas na Biblioteca de Fontes do WordPress. O link Gerenciar fontes na Biblioteca de Fontes do WordPress abre a biblioteca para você instalar novas fontes no site. As listas são filtradas por papel, então uma fonte de destaque pode aparecer nos títulos e não no texto.

1. Escolha Personalizado em Personalidade tipográfica.
2. Abra a Biblioteca de Fontes e instale a família que pretende usar.
3. Volte ao painel e escolha a fonte de cada papel. Confira se a fonte dos títulos oferece o peso selecionado em Peso do título.
4. Salve e aguarde a publicação. As fontes são servidas pelo próprio site.

A Biblioteca de Fontes fornece as famílias disponíveis. A escolha que vale no site publicado é a destes quatro campos do painel Épico Site.

Peso da fonte

Com Personalizado escolhido, o grupo Peso da fonte aparece abaixo das fontes personalizadas, com quatro seletores: Peso do título, Peso do texto, Peso do subtítulo e Peso das legendas. Cada um lista só os pesos que a fonte escolhida para aquele papel realmente tem, com nomes como Ultraleve, Leve, Normal, Médio, Negrito e Ultranegrito. A opção Padrão mantém o peso recomendado do papel.

• Se você mudar a fonte de um papel, a lista de pesos daquele papel se atualiza na hora.
• Se a fonte tem um peso só, o seletor não aparece, porque não há o que escolher. Quando nenhuma das quatro fontes tem mais de um peso, o grupo inteiro fica oculto.
• Para ter mais opções, instale na Biblioteca de Fontes uma família com vários pesos ou uma fonte variável.
• Um peso que a fonte não oferece nunca é aplicado. Nesse caso o site usa o peso padrão do papel.

Salve e aguarde a publicação para ver o resultado no site.

Identidade e comportamento

• Logotipo recebe a versão principal da marca, usada no cabeçalho e no rodapé. Envie a imagem no tamanho original, porque recortes de miniatura podem esconder parte do logo.
• Logotipo (modo escuro) recebe uma versão clara opcional da marca. Ela aparece no cabeçalho e no rodapé enquanto o site está em modo escuro ou quando o bloco usa o papel visual Escuro. Vazio mantém o logotipo principal. Cada cabeçalho e rodapé pode escolher o próprio logo. Veja Monte o cabeçalho e o rodapé do site.
• Ícone do site é a marca pequena da aba do navegador e da tela de início do celular. É um elemento diferente do logotipo. Envie um PNG, JPEG ou WebP quadrado com pelo menos 512 pixels de cada lado. Imagens que não são quadradas são recortadas pelo centro.
• Ativar animações liga microanimações, efeitos de hover e transições suaves. Vem ligado por padrão. A preferência de reduzir movimento do aparelho continua sendo respeitada.

Quando a alteração aparece no site

Salve com o botão Salvar e aguarde a publicação indicada na barra superior do WordPress. As mudanças de identidade visual aparecem no site publicado depois dessa nova publicação, que costuma levar um ou dois minutos.