O que é um Estandarte de Herói?
Um banner principal é uma grande seção visual colocada na parte superior de uma página da web, geralmente apresentando um título, uma imagem de fundo ou vídeo e um botão de chamada para ação.
Sobre o elemento Hero Banner
O processo de Elemento do banner do herói permite que você crie uma seção impressionante de largura total no topo da sua página da web que captura a atenção dos visitantes com visuais impressionantes. Além disso, você pode sobrepor elementos como títulos, blocos de texto e CTAs para tornar seu banner ainda mais envolvente.
Como criar um banner principal no Shopify usando o GemPages
Siga estas etapas para adicionar um elemento Hero Banner à sua página criada com o GemPages.
- De Painel GemPages, localize a página de destino para abrir o editor.
- De acordo com o relatório barra lateral esquerdanavegue até o Media seção e arraste e solte o Bandeira de herói elemento para o local desejado.
- (Opcional) Arraste outros elementos (por exemplo, título, botão, etc.) para o banner para maior impacto.
- Clique no Banner do Herói para revelar seu painel de configuração, que inclui Configurações e Avançado Guias.
Configurar a guia Configurações
traçado
Escolha o layout e o alinhamento do conteúdo:
- Posição horizontal: Esquerda, Centro ou Direita
- Posição vertical: Superior, Central, Inferior ou Expandido (preenche toda a altura)
Contexto
Você pode definir o plano de fundo do banner usando uma das três fontes:
- Cor
- Imagem
- Vídeo
Cor de fundo
Selecione uma cor na paleta ou insira um código hexadecimal na caixa para definir sua cor de fundo preferida para o banner.
Fundo da imagem
Há três opções para você alterar a fonte da imagem do banner:
- Carregar imagem: Esta opção permite que você selecione uma imagem do seu computador para fazer upload.
- Entrada de link: Esta opção permite que você insira o link da imagem para alterar a fonte da imagem do Hero Banner.
- Navegar na galeria: Você pode escolher uma imagem da galeria, que contém todas as imagens enviadas.
Dica: Para uma melhor exibição, você pode consultar a dica de ferramenta mostrada na Imagem guia, sob o Fonte do banner seção, para encontrar as dimensões mais ideais* para a imagem carregada no banner Hero:
| Desktop | 1920 × 800 px |
| Mobile | 375×200 px ou 375×400 px |
| Tablet | 1024 × 500 px |
Para criar seu Banner de Herói em diferentes telas, confira Este artigo.
Fundo de vídeo
Ao configurar um vídeo de fundo para o seu banner, você pode escolher uma das seguintes fontes de vídeo:
YouTube: Você pode usar um vídeo do YouTube como plano de fundo. Essa opção é compatível tanto com vídeos do YouTube Shorts quanto com vídeos padrão do YouTube, oferecendo flexibilidade na escolha do conteúdo.
Para ajudar o GemPages a exibir o vídeo corretamente, recomendamos que você forneça as dimensões do vídeo. Essas informações permitem que o GemPages calcule o nível de zoom e garanta que o vídeo se ajuste perfeitamente ao banner. As dimensões de vídeo mais comuns incluem:
- 1600:900
- 400:300
- 2100:900
- 100:100
- 900:1600
Hospedagem de vídeo: Se preferir hospedar o vídeo você mesmo, escolha a opção Hospedagem de vídeo. Faça o upload do seu vídeo para o Shopify e, em seguida, cole o link do vídeo no campo indicado. Weblink campo para usá-lo como plano de fundo.
Observação: Observe que o resultado precisa ser verificado na página ao vivo. Para obter instruções passo a passo sobre como enviar o vídeo para o Shopify, consulte Este artigo.
Ligar o “Vídeo em loop” alterne para que o vídeo reinicie do início quando chegar ao fim.
Sobreposição
Clique Mostre mais, então aperte Adicionar ... para configurar:
- Cor: Escolha uma cor de sobreposição
- Opacidade: Ajustar transparência (valores mais baixos = mais transparente)
Dimensões:
Escolha como o banner será dimensionado:
- Como fonte de banner:Ajusta-se automaticamente com base nas dimensões da imagem
- Molduras por Medida: Definir largura e altura manualmente
Conteúdo
Configurar:
- Largura: Defina a largura máxima para o conteúdo interno
- Acolchoamento: Adicionar espaçamento dentro do banner
- Alinhar: Alinhar o conteúdo horizontalmente (esquerda, centro, direita)
Shape
Personalize o formato usando:
- Fronteira: Adicionar estilos de borda
- Corner: Ajuste a redondeza dos cantos
- Shadow: Aplique efeitos de sombra para profundidade
Efeito
- Efeito de pairar: Adicionar estilo de foco interativo
- Pergaminho paralaxe (somente para imagem): Adiciona profundidade com movimento em camadas conforme os usuários rolam
de vidrio
Depois de ativar a opção LIGADO, você pode configurar a seção Link:
Após clicar: Escolha no menu suspenso para decidir o que acontece depois que os visitantes clicam no seu banner principal: abrir página, rolar para, abrir pop-up, enviar e-mail ou fazer chamada telefônica.
Por exemplo, se você escolher o Vá para opção, clique no Adicionar ... para selecionar a seção de destino na lista.
SEO
Na seção SEO, você pode adicionar o texto alternativo e o título da imagem para melhorar o SEO da página.
Alinhar
Alinhe a seção do Banner do Herói: Esquerdo, Centralização de, ou Certo.
Configurar a guia Avançado
Para uma personalização mais avançada, navegue até o Avançado aba e siga as instruções em Este artigo.
Perguntas Frequentes
1. Como adiciono texto a uma imagem usando o elemento Hero Banner?
Após adicionar o Banner de Herói à sua página, basta arrastar e soltar um elemento de Título ou Texto no banner. Você pode então editar o texto, ajustar seu estilo e posicioná-lo onde quiser, sobre o fundo da imagem.
2. Posso usar um fundo de vídeo no Hero Banner?
Sim. Você pode usar um link do YouTube ou um vídeo hospedado na Shopify. Basta colar o link nas configurações da Fonte de Vídeo. Opcionalmente, ative a opção "Vídeo em loop" para reprodução contínua.
3. Posso criar uma apresentação de slides com o elemento Hero Banner?
O elemento Hero Banner também é usado para criar uma apresentação de slides na sua página da web. Ao misturar o Bandeira de herói com o carrossel elemento, você pode facilmente criar uma apresentação de slides impressionante que capture a atenção do cliente. Para saber como fazer isso, confira este vídeo instrutivo.
4. Por que meu texto ou botão não está aparecendo no celular?
Certifique-se de que o elemento não esteja oculto no celular. Na aba Avançado, verifique as configurações de Visibilidade para confirmar se ele está habilitado em todos os tamanhos de tela.
5. Como alinho o texto ou botão dentro do Hero Banner?
Use o Conteúdo > Alinhar configuração para posicionar os elementos à esquerda, no centro ou à direita. Você também pode usar a Acolchoamento e Largura controles para posicionamento preciso.
6. Como faço para deixar minha página inicial em tela cheia para os visitantes?
7. Por que meu banner de herói aparece mais acima ou na posição errada na página?
8. Como adiciono texto alternativo a um banner de herói?
Para adicionar texto alternativo a um Estandarte de Herói, clique no elemento Estandarte de Herói para abrir o painel de configurações. Em seguida, selecione SEO Na seção, insira seu texto no Texto alternativo da imagem campo. Este texto alternativo ajuda a melhorar a acessibilidade e o SEO, descrevendo a imagem do banner para mecanismos de busca e leitores de tela.
9. Posso adicionar um botão "Comprar agora" a um banner de herói?
Não, o banner principal não suporta botões de finalização de compra dinâmicos (Comprar agora). Esses botões exigem dados do produto, portanto, estão disponíveis apenas dentro de elementos de Produto ou Lista de Produtos. Se você deseja um efeito semelhante, pode adicionar um botão comum no banner principal e vinculá-lo a uma página de produto.
Obrigado por seus comentários