Adicionar sobreposição em uma imagem usando o elemento Hero Banner

Sobre o efeito de sobreposição em imagens

O efeito de sobreposição adiciona uma camada semitransparente sobre uma imagem. É particularmente útil para melhorar o contraste entre a imagem de fundo e qualquer texto ou elemento colocado sobre ela. 

No GemPages, você pode adicionar uma sobreposição à sua imagem para obter um design elegante e profissional que chame a atenção para o conteúdo principal da sua página.

Adicionar sobreposição em uma imagem usando o elemento Hero Banner

Para adicionar uma sobreposição à sua imagem usando o Bandeira de herói elemento no GemPages, siga estas etapas:

Etapa 1: adicione um banner de herói à sua página

• Acessar o Painel GemPages > PÁGINAS, localize sua página de destino para abrir o editor.
• Na barra lateral esquerda, digite Bandeira de herói na barra de pesquisa. Em seguida, arraste e solte um elemento do Banner de Herói na posição desejada.

Etapa 2: adicione uma imagem ao banner do herói

• Clique no elemento para abrir suas configurações. 
• Na barra lateral esquerda, encontre o Contexto seção sob o Configurações guia e clique na caixa ao lado da Imagem opção.

• A partir daqui, você pode escolher uma imagem da sua galeria ou carregar uma nova para usar como plano de fundo para o elemento. 
• Ajuste a escala, posição, repetição e fixação da imagem. Você também pode definir a pré-carga para Sim para otimizar o LCP.

Etapa 3: Habilite a sobreposição para a imagem

Depois de terminar de configurar sua imagem, clique em Mostre mais para exibir tudo Contexto configurações.

Clique na caixa ao lado do Sobreposição opção para abrir o painel de configurações.

A partir daqui, você pode selecionar a cor de sobreposição e ajustar a opacidade.

• Cor: Escolha uma cor sólida para sobrepor à sua imagem. Você pode inserir um código de cor hexadecimal (ex.: #121212) ou usar o seletor de cores para selecionar uma cor visualmente.

• Opacidade: Ajuste o controle deslizante de opacidade ou insira um número exato para controlar a visibilidade da sobreposição. 0 significa que a sobreposição é totalmente transparente (invisível), enquanto 100 significa que cobre completamente a imagem de fundo.

Por exemploOpacidade = 20 aplicará uma sobreposição sutil e semitransparente.

Perguntas Frequentes

1. Por que devo usar uma sobreposição na minha imagem de fundo?

A sobreposição ajuda a melhorar a legibilidade do texto, adicionando contraste entre a imagem de fundo e o texto. Também cria um estilo visual mais profissional e consistente, especialmente para banners de destaque ou seções promocionais.

2. Qual é a melhor cor de sobreposição para usar?

Depende da imagem de fundo e da cor do texto:

• Use sobreposições escuras (por exemplo, #000000 or #121212) quando seu texto for claro (branco, creme, etc.).
• Use sobreposições leves (por exemplo, #FFFFFF com baixa opacidade) quando seu texto estiver escuro.

3. Qual nível de opacidade devo definir para obter melhores resultados?

Nós recomendamos:

• 15–30% de opacidade para um efeito sutil
• 30–50% de opacidade se a imagem de fundo for movimentada ou colorida

Ajuste o controle deslizante durante a pré-visualização para ver o que funciona melhor para seu conteúdo.

4. Posso usar sobreposições de gradiente?

No momento, o GemPages V7 suporta apenas um sobreposição de cor sólida em fundos de imagem. Para efeitos de gradiente, considere editar sua imagem em uma ferramenta de design (por exemplo, Figma, Canva) antes de enviá-la.

5. Por que a sobreposição não está aparecendo no meu Banner de Herói?

Se o efeito de sobreposição não for exibido na sua imagem, verifique o seguinte:

• Certifique-se de que uma imagem foi adicionada em Contexto > Imagem.
• Certifique-se de que a cor e a opacidade da sobreposição não estejam definidas como totalmente transparentes (por exemplo,#000000 com opacidade 0).

6. A sobreposição se aplica a fundos de vídeo?

Sim. Travas deslizantes portáteis No GemPages v7, o efeito de sobreposição funciona tanto para fundos de imagem quanto de vídeo no elemento Hero Banner.

As configurações são as mesmas:

• Você pode selecionar uma cor de sobreposição.
• Ajuste a opacidade para controlar a quantidade de vídeo que aparece.