O Hero é um banner grande com uma imagem ou um vídeo por trás do texto e dos botões. Fica na página inicial e é muitas vezes a primeira coisa que os clientes veem.
Adicionar um hero
- Abra o construtor e escolha Página inicial no separador Páginas.
- No separador Secções, clique em Adicionar nova secção e escolha Hero no grupo Conteúdo.
- Escolha a sua média, escreva o texto e clique em Publicar.
O hero só está disponível na página inicial, e pode adicionar um por página. Para o mover, copiar ou ocultar, veja Secções e blocos
Média e altura
- Modo: Único mostra uma imagem ou um vídeo. Dividido mostra dois, definidos em Média 1 e Média 2. Ficam lado a lado quando a Direção do conteúdo é Vertical, e um por cima do outro quando é Horizontal. Nos telemóveis ficam sempre empilhados.
- Média 1 e Média 2: uma imagem ou um vídeo da sua biblioteca de média. Um vídeo reproduz-se sem som, em ciclo, como fundo em movimento.
- Altura: Pequeno, Médio, Grande, Ecrã inteiro (ocupa o ecrã), Imagem (segue a forma da primeira imagem, para nada ser cortado) ou Personalizado. Com Personalizado, a Altura personalizada define a altura como uma parte da altura do ecrã. Os novos heros começam em Imagem.
Texto e botões por cima
Selecione o hero e clique em Adicionar novo bloco para adicionar conteúdo sobre a média: até 2 blocos de Texto, 2 de Botão, 2 de Grupo e 2 de Separador. As configurações próprias de cada um estão em Blocos Grupo, Texto, Botão e Separador: como funcionam as configurações dos componentes de disposição?
Em Disposição, posiciona este conteúdo:
- Direção: Vertical empilha os blocos, Horizontal coloca-os lado a lado. Com Horizontal, Empilhar verticalmente no telemóvel empilha-os nos telemóveis.
- Posição e Alinhamento: movem o conteúdo para cima ou para baixo e para a esquerda ou para a direita, por exemplo em baixo à esquerda ou ao centro. Espaço entre afasta os blocos uns dos outros.
- Largura do conteúdo: Página mantém o conteúdo dentro da largura da página, Completo deixa-o chegar às margens do ecrã. A média ocupa sempre toda a largura.
O Espaçamento entre blocos (em Espaçamento) define o espaço entre eles, e o Preenchimento interior o espaço à volta deles.
Cores e sobreposição
- Esquema de cores: as cores do texto e dos botões do hero. Veja Esquemas de cores.
- Sobreposição de média: acrescenta uma camada de cor por cima da média para o texto se ler melhor. Depois defina a Cor da sobreposição e o Estilo da sobreposição: Sólido cobre a média por igual, Gradiente vai esbatendo a cor. A Direção do gradiente (Para cima ou Baixo) define para que lado esbate.
O separador CSS personalizado permite-lhe adicionar o seu próprio CSS só a este hero.
Tarefas comuns
- Cabeçalho por cima do hero: ative Cabeçalho transparente nas configurações do cabeçalho. Só funciona quando o hero está logo por baixo do cabeçalho. Veja Configurações do cabeçalho.
- Título e botão centrados: Direção Vertical, e depois Posição e Alinhamento ao Centro.
- Texto branco numa foto clara: ative a Sobreposição de média com uma Cor da sobreposição escura e o estilo Gradiente.
Bom saber
- Se um vídeo do hero não se mexer, verifique Reprodução automática de vídeos no separador de configurações Automatizações. Quando está desativada, os vídeos de fundo ficam parados. Veja Configurações de automatizações.
- Se o tamanho da primeira imagem não for conhecido, a altura Imagem usa Médio.
- Precisa de um banner noutra página? O hero é só para a página inicial, mas a secção Imagem funciona em qualquer página. Veja Secções de texto, imagem e separador.