Há um momento que se repete de forma fiável em quase todos os projetos de site: o azul tem de ficar um pouco mais escuro. O que num site bem montado demora um minuto torna-se, num site que foi crescendo, numa caça ao longo de quarenta páginas. A diferença nasce logo no início.
Onde estão as definições centrais
No editor do Elementor clica no menu de hambúrguer em cima à esquerda e escolhe Definições do site. Aí encontra, entre outras coisas, as Cores globais e os Tipos de letra globais.
O que aqui guardar fica depois disponível em cada seletor de cor e em cada definição de tipografia como valor predefinido com nome. Se num widget escolher essa predefinição em vez de um valor fixo, ele fica permanentemente ligado a ela. Se mais tarde alterar a predefinição, o widget altera-se com ela.
É esse todo o truque. E mesmo assim é quase sempre saltado, porque no início é mais rápido escrever simplesmente um valor de cor à mão.
Quantas cores fazem sentido
O Elementor cria quatro cores padrão. Nos meus projetos trabalho com seis a oito — mais quase nunca é preciso, e menos fica apertado.
Uma divisão que se tem revelado boa:
- Primária — a sua cor principal, para botões e destaques.
- Secundária — a segunda cor da marca, usada com parcimónia.
- Texto — a cor da letra do texto corrido. Raramente preto puro; um cinzento muito escuro é mais agradável de ler.
- Título — muitas vezes a mesma do texto, por vezes um tom mais escura.
- Fundo — o fundo da página.
- Superfície — um tom ligeiramente destacado para cartões e áreas realçadas.
- Contorno — para linhas e separadores.
- Acento — para indicações ou avisos, caso sejam precisos.
Atribua nomes falantes. „Primária“ e „Superfície clara“ dizem-lhe alguma coisa daqui a um ano; „Cor 5“ não.
Uma palavra sobre o contraste
Verifique se a cor do texto tem contraste suficiente face à cor de fundo antes de a fixar. Para texto normal, uma relação de pelo menos 4,5 para 1 vale como limite inferior. Há ferramentas de verificação gratuitas para isso, que demoram segundos.
Isto não é uma formalidade. Texto cinzento-claro sobre fundo branco fica elegante no seu monitor calibrado e, num telemóvel à luz do sol, é simplesmente ilegível. E como os requisitos de acessibilidade para sites se vão tornando cada vez mais vinculativos, é também o lado em que quer estar.
Definir a tipografia centralmente
Em Tipos de letra globais define a família da letra, o tamanho, o corte, a altura de linha e o espaçamento entre carateres para os papéis de texto recorrentes — primário, secundário, texto, acento — e em Estilo do tema adicionalmente os valores padrão para H1 a H6 e para o texto corrido.
Duas recomendações saídas da prática:
Duas famílias de letra chegam. Uma para os títulos, uma para o texto corrido. Cada uma adicional custa tempo de carregamento e torna a imagem inquieta. Muitas vezes basta até uma única família em dois cortes.
Não esquecer a altura de linha. Para texto corrido, um valor à volta de 1,6 fica normalmente bem; os títulos suportam nitidamente menos, cerca de 1,2. O espaçamento entre linhas decide mais sobre a legibilidade do que o tamanho da letra — sobre isso em detalhe: definir corretamente o espaçamento entre linhas no Elementor.
O erro mais frequente
Tem este aspeto: alguém cria cores globais — e depois, ainda assim, escreve à mão o valor da cor no widget, porque o seletor de cor estava aberto.
A cor está certa, o resultado parece idêntico e a ligação não existe. Na próxima mudança de cor é precisamente esse widget que fica para trás.
Preste atenção a escolher no seletor de cor o valor global, reconhecível pelo pequeno símbolo do globo, e não o valor de cor livre ao lado. A mesma distinção vale para a tipografia.
Quando o site já está feito
Converter à posteriori é trabalho de paciência, mas compensa. Não avance página a página, mas sim por tipo de elemento: primeiro todos os botões, depois todos os títulos, depois as superfícies. Assim o olhar mantém-se no mesmo padrão e avança nitidamente mais depressa.
Aproveite a ocasião para arrumar. Normalmente descobre-se que um site com supostas quatro cores contém, na realidade, onze tons de azul ligeiramente diferentes.
Elementor Pro: as cores e fontes globais existem nas duas versões. O Pro alarga isso ao cabeçalho, ao rodapé, aos popups e aos layouts de artigo — aí valem então também as mesmas predefinições. Ver o Elementor Pro
Porque é que o esforço compensa
Uma hora no início poupa-lhe dias mais tarde. Já assumi projetos de clientes em que uma mudança de cor teria demorado três dias, porque cada cor estava colada individualmente a cada widget. Num projeto bem montado, a mesma mudança é uma alteração num só sítio.
Como estruturar um site desde o início para que se mantenha alterável é um dos pontos centrais da minha formação de Elementor.
Etiquetas