Informativo: Bloco Hero

Conteúdo

O Hero é a faixa grande do topo de uma página: uma imagem (ou vídeo) de fundo com um título, um texto curto e um botão por cima. Ele costuma ser o primeiro bloco da página inicial, para causar uma boa primeira impressão e levar o visitante a uma ação, como pedir orçamento.

Um Hero pode ter vários slides. Cada slide tem a sua própria imagem e os seus textos, e eles se revezam no mesmo lugar.

Para acrescentar, mover ou remover blocos numa página, veja a página “Editor de páginas”. Em cada figura, os círculos vermelhos numerados mostram a parte da tela que está sendo explicada. O número do círculo é o mesmo número da lista logo abaixo da figura.

Como o Hero aparece no site

Figura 1 — Um Hero com dois slides, no site.

1. Chapéu — uma frase bem curta, em letras pequenas, acima do título. Serve para dizer o assunto, como “Móveis e projetos”.
2. Título — a frase principal, em letras grandes. Quando o Hero é o primeiro bloco da página inicial, o título do primeiro slide também é o título principal da página para o Google.
3. Subtítulo — um texto curto que completa o título.
4. Botão — leva o visitante para outra página, como a de contato. Só aparece quando o texto e o endereço do botão estão preenchidos.
5. Imagem ou vídeo de fundo — ocupa a faixa inteira. Fica um pouco escurecida para o texto ser lido com facilidade. Se o slide não tiver nenhum texto nem botão, a imagem aparece sem escurecer.
6. Setas — passam para o slide anterior ou o próximo.
7. Marcadores — um tracinho para cada slide; o colorido é o que está aparecendo. Clicar num tracinho mostra aquele slide.
8. Contador — qual slide está aparecendo e quantos existem, como “1 / 2”.

Setas, marcadores e contador só aparecem quando o Hero tem dois slides ou mais.

Opções do bloco

Ao escolher o Hero no editor de páginas, o painel mostra as opções que valem para o bloco inteiro e a lista de slides.

Figura 2 — Opções gerais do Hero.

1. Altura — o tamanho da faixa: Média (a usada quando nada é escolhido), Baixa ou Alta (quase tela cheia).
2. Alinhamento do texto — À esquerda (padrão) ou Centralizado.
3. Trocar de slide — se os slides passam sozinhos: Não trocar sozinho (padrão), a cada 5, 8 ou 12 segundos. A troca para enquanto o visitante está com o mouse sobre o Hero, quando a aba do navegador não está à vista e em aparelhos configurados para reduzir movimentos na tela.
4. Slides — a lista de slides e, no canto, quantos existem do máximo de 8.
5. Slide — cada linha é um slide, com o número e o chapéu (ou o primeiro texto preenchido). Clicar abre os campos do slide (Figura 3).
6. Adicionar — cria um slide novo no fim da lista.

Um Hero sem nenhum slide não aparece no site. Na prévia do editor, ele aparece como um aviso “Nenhum slide no hero”.

Campos de um slide

Figura 3 — Um slide aberto para editar.

1. Cabeçalho do slide — o número do slide e o chapéu. Clicar abre ou fecha o slide.
2. Setas — ↑ e ↓ mudam a ordem dos slides. O primeiro da lista é o primeiro a aparecer.
3. X — tira o slide do Hero. A imagem continua guardada na Mídia.
4. Imagem ou vídeo de fundo — escolha uma imagem ou um vídeo da Mídia (Biblioteca) ou envie um novo (Enviar arquivo). Remover tira o arquivo só deste slide. Prefira imagens largas, deitadas. O texto alternativo da imagem, preenchido na Mídia, é usado pelo site.
5. Chapéu — a frase curta acima do título (Figura 1, item 1).
6. Título — a frase principal (Figura 1, item 2).
7. Texto do botão — o que vai escrito no botão, como “Pedir orçamento”.
8. Endereço do botão — para onde o botão leva: uma página do site (como /contato) ou o endereço completo de outro site.
9. Subtítulo — o texto curto abaixo do título (Figura 1, item 3).

Todos os campos são opcionais. O que ficar vazio simplesmente não aparece. Também dá para editar os textos clicando direto neles na prévia.

Dicas

• Use títulos curtos: duas linhas, no máximo, ficam melhores em celular.
• Escolha imagens com a parte importante longe do texto, já que o texto fica por cima.
• Prefira poucos slides (de 1 a 3). Muita troca cansa o visitante.
• Preencha o texto alternativo das imagens na Mídia.

Controle de Mudanças

Notas adicionais

As imagens usam as telas reais do NetCorp em um ambiente de demonstração. Os textos e as imagens de fundo (marcadas como “Imagem de exemplo”) são fictícios, não dados de um cliente. Os números vermelhos foram acrescentados às figuras e não aparecem no site nem no painel.

Contato de suporte: a preencher.

Referências

• NetCorp — bloco Hero do site e editor de páginas do painel.
• Modelo de página Informativo e blocos de conteúdo da base de conhecimento.