Num tema clássico, as cores alteravam-se no personalizador. Um tema de blocos não tem lá a secção Cores: está tudo no editor do site, em Estilos. Pode mudar o aspeto todo com um clique, trocar só a paleta, alterar uma cor da paleta ou dar outra cor a um único bloco.
Estas opções são parecidas, mas não funcionam da mesma maneira. Se as usar pela ordem errada, perde as suas alterações. Se der a um bloco uma cor personalizada em vez de uma cor da paleta, a próxima mudança de paleta passa-lhe ao lado. A seguir explico o que faz cada opção e quando a usar.
Verifiquei tudo no WordPress 7.1.4, com os meus temas Makani Pro e Kanoa Pro. Alguns painéis mudaram de sítio no WordPress 7, por isso os guias mais antigos podem remeter para botões que já não existem.
A resposta curta
- Um aspeto novo com um clique: Apresentação → Editor → Estilos → Pesquisar estilos. Escolha um estilo em cima ou uma paleta em Variações de cor e guarde.
- As suas próprias cores: Estilos → Cores → Editar paleta. Clique numa cor em Tema, escreva um novo código hex e guarde. Tudo o que usa essa cor muda com ela.
- Um só bloco: selecione-o e, no separador Bloco da barra lateral, abra Tipografia → Cor para o texto ou Fundo → Cor para o fundo. Escolha uma cor da paleta do tema.
Estilos, paletas e conjuntos tipográficos: qual é a diferença
Um tema de blocos pode trazer variações do design já prontas. Cada uma é um pequeno ficheiro JSON na pasta styles do tema, e o WordPress organiza-as conforme o que alteram:
| O que escolhe | Onde se encontra | O que altera | Exemplo |
|---|---|---|---|
| Estilo | Pesquisar estilos, fila de cima | Cores, tipos de letra e tudo o mais que o autor do tema definiu, como o espaçamento ou os estilos de blocos | Makani Pro: Ink |
| Paleta (variação de cor) | Pesquisar estilos → Variações de cor; Cores → Editar paleta → Paletas | Só as cores | Makani Pro: 9 paletas, Kanoa Pro: 19 |
| Conjunto tipográfico (variação tipográfica) | Pesquisar estilos → Tipografia; Tipografia → Conjuntos tipográficos | Só os tipos de letra | Makani Pro: Mono e Regular |
Este último ponto confunde muita gente. A página de um tema pode prometer «20 estilos», mas, se todos só alterarem as cores, o WordPress mostra-os como paletas e a fila de estilos no topo fica vazia. É o caso do meu Kanoa Pro: todos os 20 estilos são paletas. Não falta nada, estão uma secção mais abaixo.
1. Mudar para um estilo ou uma paleta já prontos
- Vá a Apresentação → Editor e clique em Estilos.
- Clique em Pesquisar estilos.
- Clique num estilo da fila de cima para um aspeto completamente novo, ou numa paleta em Variações de cor para mudar só as cores. A pré-visualização à direita muda logo.
- Ainda nada foi guardado. Clique em Rever 1 alteração… em baixo, à esquerda, e depois em Guardar.
Primeiro o estilo, depois a paleta
Verifiquei o que cada clique mantém e o que substitui:
- Um estilo substitui tudo o que definiu em Estilos: a paleta, os tipos de letra, as cores das ligações e dos botões. Só o seu CSS adicional fica.
- Uma paleta substitui só as cores: a paleta e as cores que definiu para ligações, botões e títulos. Os tipos de letra ficam, incluindo os do estilo que escolheu antes.
- Por omissão, na fila de cima, traz de volta o design original do tema e descarta as suas alterações, tal como um estilo.
Por isso, trabalhe por esta ordem: estilo, depois paleta, depois as suas próprias alterações. Se mudar alguma coisa primeiro, o clique seguinte num estilo ou numa paleta deita essas alterações fora. Enquanto não guardar, ainda pode sair do editor sem guardar. Depois de guardar, a versão anterior fica nas Revisões. Mais sobre isto em como repor os estilos de um tema de blocos.
2. Alterar uma cor da paleta
A paleta de um tema de blocos é uma lista curta de cores com nome. O Makani Pro tem seis: Background, Surface, Primary, Secondary, Line e Accent. Os modelos e os padrões do tema não contêm códigos de cor, apontam para esses nomes. Altere a cor Accent uma vez e todos os botões que a usam mudam com ela.
- Vá a Estilos → Cores e clique em Editar paleta.
- Em Tema, clique numa cor. Para saber qual é qual, abra ⋮ junto a Tema e escolha Mostrar detalhes: aparecem os nomes e os códigos hex.
- Escreva o novo código no campo Hex ou arraste o seletor. No menu junto a Hex, pode mudar para RGB ou HSL.
- Clique em Rever 1 alteração… e em Guardar.
Por baixo das cores do tema está Personalizado, com um botão +. As cores que acrescentar aí aparecem em todos os seletores de cor, mas não alteram o design enquanto não as escolher para um bloco. Mais abaixo, em Paletas, estão as paletas prontas do tema, as mesmas de Pesquisar estilos. Escolher uma delas substitui as cores que acabou de editar.
3. Texto, fundo, ligações e botões
Muitos guias ainda mandam procurar a cor do texto e do fundo em Cores. No WordPress 7.1, estão noutros painéis:
- Fundo do site: Estilos → Fundo → Cor.
- Texto principal: Estilos → Tipografia → Texto → Cor.
- Ligação, Legendas para surdos, Botão e Título: Estilos → Cores, em Elementos. Os títulos podem ter uma só cor para todos os níveis ou cores próprias de H1 a H6.
- Um tipo de bloco em todo o site, por exemplo todas as citações: Estilos → Blocos, escolha o bloco e depois as cores dele.
Em todos estes casos, escolha uma cor da paleta e não uma personalizada. A secção 5 explica porquê.
4. Alterar a cor de um só bloco
Para mudar a cor de uma secção, por exemplo um grupo com uma oferta, selecione esse bloco e abra o separador Bloco da barra lateral. No WordPress 7.1, as cores do bloco também estão divididas:
- a cor do texto está em Tipografia → Cor;
- a cor de fundo está em Fundo → Cor, ao lado de Imagem e Gradiente.
Clique em Cor e aparece a paleta do tema. A amostra com um visto é a cor atual. A amostra grande no topo abre um seletor para qualquer outra cor.
5. Porque é que as cores da paleta são melhores do que as personalizadas
Quando escolhe uma amostra da paleta, o WordPress não guarda a cor em si. Guarda o nome, por exemplo «Surface». Quando escolhe uma cor personalizada, guarda o código, por exemplo #F3E3D3. A diferença nota-se no dia em que muda a paleta.
Na página de teste em baixo, a primeira secção usa Surface e Accent, a segunda um bege personalizado. Com a paleta predefinida, ambas ficam bem. Depois mudei para a paleta escura Midnight. A primeira secção acompanhou a mudança. A segunda manteve o fundo bege, mas recebeu a nova cor de texto clara, e o texto quase desapareceu.
Por isso, dentro dos blocos, use as cores da paleta. Se um bloco precisar mesmo de uma cor extra, pode usar uma cor personalizada; basta verificar esse bloco depois de cada mudança de paleta. Para corrigir um bloco que já tem uma cor personalizada, selecione-o, abra a cor dele e clique numa amostra.
Porque é que uma atualização do tema não mudou a sua paleta
Quando escolhe um estilo ou uma paleta já prontos, o WordPress copia as cores para os estilos do seu site. Verifiquei: depois de um clique na paleta Ocean no Makani Pro, os estilos guardados tinham os seis códigos de cor, e não uma referência à Ocean. Se o autor do tema ajustar a Ocean numa atualização, o seu site fica com a versão antiga. Para ter a nova, abra Pesquisar estilos, clique outra vez na paleta e guarde.
Acrescentar uma paleta própria (para programadores)
Uma paleta é um ficheiro JSON na pasta styles do tema. Se só tiver cores, o WordPress mostra-a em Variações de cor. Inclua todas as cores da paleta do tema com os mesmos slugs: uma paleta substitui a paleta do tema por inteiro, e um slug que deixe de fora perde a cor em todo o lado.
{
"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
"version": 3,
"title": "Harbor",
"settings": {
"color": {
"palette": [
{ "slug": "background", "name": "Background", "color": "#F4F7F9" },
{ "slug": "surface", "name": "Surface", "color": "#E6EDF2" },
{ "slug": "primary", "name": "Primary", "color": "#13212C" },
{ "slug": "secondary", "name": "Secondary", "color": "#5A6B78" },
{ "slug": "line", "name": "Line", "color": "#D5DEE5" },
{ "slug": "accent", "name": "Accent", "color": "#0F6E8C" }
]
}
}
}Coloque o ficheiro num tema filho ou no seu próprio tema. Um ficheiro acrescentado ao tema de outra pessoa desaparece na atualização seguinte. Se preferir não escrever JSON, o plugin Create Block Theme consegue transformar os seus estilos atuais numa nova variação de estilo.
Perguntas
Onde está a secção Cores do personalizador?
Os temas de blocos não a têm. Com eles, o WordPress retira Personalizar do menu Apresentação, a não ser que algum plugin ainda o use. As cores estão em Apresentação → Editor → Estilos.
Porque é que não vejo Pesquisar estilos?
O tema não traz estilos, paletas nem conjuntos tipográficos. Mesmo assim, pode alterar todas as cores da paleta dele em Cores → Editar paleta.
Uma paleta nova vai alterar os meus artigos?
Só as cores, e só onde usam cores da paleta. O texto, as imagens e o layout ficam como estão. Os blocos com cores personalizadas mantêm-nas.
Uma atualização do tema repõe as minhas cores?
Não. As suas cores ficam guardadas na base de dados, à parte dos ficheiros do tema. Aqui explico onde ficam e como as repor.
Temas com muitas paletas
Se gosta de experimentar cores, comece por um tema que tenha muitas. O Makani Pro tem nove paletas, o estilo Ink e dois conjuntos tipográficos. O Kanoa Pro tem 20 paletas, de Arctic Frost a Warm Sunset. O Lei PRO é escuro de origem e tem mais 11 paletas, de Warm Ivory a Midnight. Para mais designs escuros, veja 5 temas de blocos escuros para um portfólio WordPress. E se quiser uma paleta feita para a sua marca, posso configurá-la por si.
