Imagem de início¶
Onde: menu Imagem de início da administração. Quem: os administradores e os editores.
Para ler antes de começar
Antes de compor uma imagem de início, é importante entender para que ela serve: ela se dirige às pessoas que descobrem o site pela primeira vez, e deve lhes dar uma primeira impressão positiva e imediata.
Recomendamos fortemente que você leia primeiro a seção A imagem de início: criar uma primeira impressão positiva da página “Filosofia e princípios de concepção do site”. Você vai saber então que mensagem, que imagem e que tom escolher.
A imagem de início é a grande imagem do topo da página inicial, com o texto dela por cima. Você define aqui a imagem, o texto e a formatação dele, uma pré-visualização ao vivo mostra o resultado antes de salvar, e um botão Ver na página inicial permite vê-la em condições reais antes de publicá-la.
Você pode criar várias imagens de início: a cada visita, o site mostra uma ao acaso. É prático para ir alternando as mensagens (uma imagem por atividade, por estação do ano…).
1 Visualização da imagem: o resultado ao vivo, como ele vai aparecer no site. 2 Texto da imagem: a mensagem escrita sobre a imagem. 3 Ajustes do texto: tamanho, espaçamento entre linhas, cor, alinhamentos, contorno. 4 Ajustes da imagem: espelho, alinhamento para as telas pequenas. 5 Ver na página inicial: abre a página inicial do site com esta imagem, para avaliá-la em condições reais, mesmo enquanto ela está como rascunho. 6 Publicar ou Atualizar: salva a imagem de início.
Entender em um minuto¶
- Uma imagem de início = uma imagem + um texto + a formatação dele.
- Várias podem estar publicadas ao mesmo tempo: o site mostra uma ao acaso sempre que a página é exibida.
- Para retirar uma imagem de início do site, coloque-a na lixeira ou volte-a para rascunho.
- Uma imagem como rascunho (ou pendente de revisão) nunca é mostrada aos visitantes: só as imagens publicadas são sorteadas. Para vê-la de verdade antes de publicá-la, use o botão Ver na página inicial (veja mais abaixo).
A lista¶
O menu Imagem de início abre a lista das imagens de início. Um clique em uma delas a abre para edição; o botão Adicionar (ou Adicionar Imagem de início) cria uma nova. Embaixo de cada linha, o link Ver na página inicial abre a página inicial do site com essa imagem (veja Ver a imagem na página inicial).
O campo Título da ficha não é usado: as imagens de início só se distinguem pelo conteúdo delas.
Criar ou modificar uma imagem de início¶
- Clique em Adicionar (imagem nova) ou em uma imagem existente.
- Defina a imagem e o texto (veja abaixo) com a ajuda da pré-visualização.
- Salve com Salvar rascunho e depois clique em Ver na página inicial para avaliar o resultado em condições reais.
- Quando a imagem agradar a você, clique em Publicar (ou Atualizar).
A pré-visualização é atualizada à medida que você ajusta; nada é salvo antes de você clicar em Publicar ou Atualizar.
Visualização da imagem¶
Clique na área de pré-visualização para escolher a imagem na biblioteca de mídia, ou envie uma nova.
O tamanho certo da imagem
Tamanho recomendado: 1050 x 400 px. Uma imagem com outras dimensões corre o risco de ser cortada ou de parecer desfocada: verifique a pré-visualização.
Nas telas pequenas (celular), a imagem é reduzida, mas o texto dela também: o layout continua igual, em tamanho menor. Abaixo de 1000 px de largura, a altura diminui na mesma proporção (mínimo de 250 px).
Texto da imagem¶
O editor de texto escreve a mensagem que aparece sobre a imagem. Ele funciona como o editor de texto habitual: negrito, itálico, quebras de linha.
Uma quebra de linha no editor é uma quebra de linha na imagem.
Inserir um ícone¶
Para colocar um ícone no texto, posicione o cursor no lugar desejado, clique em Inserir um
ícone (embaixo do campo Texto da imagem), procure o ícone e clique nele: o código dele, no
formato [icon name="…"], é inserido no cursor e a pré-visualização é atualizada na hora.
Ajustes do texto¶
| Ajuste | O que ele faz |
|---|---|
| Tamanho do texto | Tamanho das letras, em pixels. 35 por padrão. O texto é reduzido na mesma proporção nas telas pequenas. |
| Espaçamento entre linhas do texto | Espaço entre as linhas. 0 por padrão (linhas apertadas); cada ponto a mais afasta um pouco mais as linhas. |
| Cor do texto | Cor das letras. Branco (#FFFFFF) por padrão. |
| Alinhamento vertical do texto | superior, centralizado ou inferior da imagem. |
| Alinhamento horizontal do texto | esquerda, centro (por padrão) ou direita. |
| Exibir um contorno | Interruptor, ativado por padrão. Acrescenta uma borda em volta das letras e dos ícones, para que fiquem legíveis sobre uma imagem clara ou carregada. |
| Cor do contorno | Cor da borda. Só aparece se Exibir um contorno estiver ativado. |
| Estilo do contorno | suave (por padrão): contorno esfumado, em halo; cheio: contorno nítido. Só aparece se Exibir um contorno estiver ativado. |
| Espessura do contorno | De 1 a 5 px (2 por padrão). Só aparece se Exibir um contorno estiver ativado. |
Um texto legível
Texto branco com um contorno escuro fica legível em quase todas as imagens. Para um texto escuro, escolha um contorno claro.
Ajustes da imagem¶
| Ajuste | O que ele faz |
|---|---|
| Espelhar a imagem | sim: a imagem é invertida da esquerda para a direita. Útil para deslocar um personagem ou o tema sem modificar a imagem. |
| Alinhamento horizontal da imagem (na versão para celular) | Em uma tela pequena, a imagem é mais estreita do que a tela e o enquadramento dela é cortado nas margens. Escolha a parte que permanece: esquerda, centro ou direita. |
Exibição em celular (pré-visualização)¶
O interruptor Exibição em celular não salva nada: ele muda o tamanho da pré-visualização para simular um celular (320 px de largura). Use-o para verificar se o texto cabe e se a imagem está bem enquadrada em uma tela pequena, antes de publicar.
Ver a imagem na página inicial¶
Uma imagem como rascunho não é mostrada aos visitantes: você não pode, portanto, vê-la no site sem publicá-la. O botão Ver na página inicial resolve esse problema: ele abre a página inicial, em uma nova aba, com a imagem em que você está trabalhando, como os visitantes a veriam, com o verdadeiro layout do site (o menu, as cores, o tamanho da tela). É a melhor maneira de verificar se o texto está legível antes de publicar.
Ele está em dois lugares:
- na caixa Pré-visualização, no topo da coluna da direita da tela de edição (5 na captura);
- embaixo de cada imagem da lista, com o link Ver na página inicial.
Salve primeiro
O site mostra a imagem como ela está salva, não como ela está na tela. Para uma imagem nova, salve primeiro o rascunho (o botão só aparece depois); para uma imagem existente, clique em Atualizar ou Salvar rascunho antes de abrir a pré-visualização, senão você vai ver a versão antiga.
Só você vê esta pré-visualização
A pré-visualização só é visível para você, logado e com o direito de modificar a imagem. Os visitantes continuam vendo as imagens publicadas, sorteadas ao acaso. Este botão não publica nada.
Onde a imagem aparece¶
A imagem de início aparece onde a página inicial colocou o bloco da imagem de início: essa preparação já está feita no seu site. Nenhuma imagem aparece se nenhuma imagem de início estiver publicada.
Perguntas frequentes¶
A minha imagem não aparece na página inicial. Verifique se ela está publicada (e não como rascunho nem pendente de revisão): só as imagens publicadas são mostradas aos visitantes. Para ver uma imagem que ainda não está publicada, use Ver na página inicial. Depois recarregue a página com Ctrl + F5 (no Mac: Cmd + Shift + R).
A página inicial mostra uma imagem diferente a cada visita. É de propósito: com várias imagens de início publicadas, o site escolhe uma ao acaso. Para manter só uma, coloque as outras na lixeira.
O texto está difícil de ler. Ative Exibir um contorno, ou mude a cor do texto ou do contorno. Verifique também com Exibição em celular.
O texto fica cortado no celular. Reduza o tamanho do texto, ou encurte-o. Verifique com Exibição em celular.
Posso colocar um link ou um botão na imagem? Não: a imagem de início só contém imagem e texto.