Reduza a opacidade do fundo de um banner principal usando código personalizado.

Sobre o elemento Hero Banner

O Elemento do banner do herói Em GemPages, é comum usar um elemento `<div>` para criar uma grande seção visual na parte superior da página. Geralmente, ele inclui uma imagem ou cor de fundo, juntamente com conteúdo como um título, descrição, botão ou outros elementos de texto.

Se o fundo do seu banner de herói estiver muito forte e dificultar a leitura do texto, você pode usar Código personalizado Reduzir a opacidade do fundo e criar um melhor contraste para o conteúdo dentro dele.

Como usar código personalizado para reduzir a opacidade do fundo de um banner de destaque.

Passo 1: Abra o painel de Código Personalizado do elemento Banner Principal.

No editor GemPages, localize o Bandeira de herói elemento que você deseja personalizar.

Em seguida, Clique com o botão direito do mouse no elemento Estandarte do Herói. e selecione Código personalizado.

Passo 2: Cole o código personalizado no banner do herói.

Cole o seguinte código CSS no Código personalizado caixa:

ElementClass .hero-banner-bg {

  opacidade: 0.7! importante;

}

Passo 3: Substituir Classe Elemento com a classe real do seu Estandarte de Herói

No código acima, Classe Elemento é apenas um marcador. Você precisa substituí-lo pela classe real do elemento do seu Estandarte de Herói.

Seu código final deve seguir esta estrutura:

.sua-classe-de-elemento .hero-banner-bg {

  opacidade: 0.7! importante;

}

O que faz opacidade: 0.7 significa?

O opacidade Essa propriedade controla o grau de transparência do fundo do banner principal.

Ele aceita valores de 0 a 1:

• 1 = totalmente visível, sem transparência
• 0.9 = ligeiramente transparente
• 0.7 = moderadamente transparente
• 0.5 = meio transparente
• 0 = totalmente transparente

Neste exemplo:

opacidade: 0.7;

O fundo do banner do herói ainda estará visível, mas terá uma aparência mais suave e menos dominante. Isso ajuda o texto colocado sobre ele a se destacar com mais clareza.

Exemplos de valores de opacidade:

Você pode ajustar o valor da opacidade dependendo do resultado desejado:

• opacidade: 0.9; → o fundo permanece quase totalmente visível
• opacidade: 0.7; → uma opção equilibrada para melhorar a legibilidade do texto
• opacidade: 0.5; → o fundo fica visivelmente mais claro
• opacidade: 0.3; → o fundo fica muito desvanecido

Se o texto dentro do seu Estandarte de Herói ainda estiver difícil de ler, tente diminuir ainda mais o valor.