Adicione uma sobreposição de gradiente ao banner principal usando código personalizado.

Uma sobreposição de gradiente pode melhorar a aparência visual do seu banner principal e destacar o conteúdo colocado sobre ele — como um Título, Bloco de texto, ou Botão—mais fácil de ler.

Sobre o elemento Hero Banner

O Bandeira de herói elemento Em GemPages, é comum usar um elemento para criar uma seção grande e chamativa na parte superior da página. Geralmente, ele inclui uma imagem ou cor de fundo com o conteúdo exibido sobre ela.

Se o fundo do seu banner principal precisar de mais contraste ou de uma aparência mais refinada, você pode aplicar uma sobreposição de gradiente usando código personalizado.

Como adicionar uma sobreposição de gradiente usando código personalizado

Passo 1: Abra o painel de Código Personalizado

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 CSS

Cole o seguinte código no Código personalizado caixa.

ElementClass .hero-banner-bg:after {

  contente: "";

  posição: absoluta;

  topo: 0;

  esquerda: 0;

  direita: 0;

  inferior: 0;

  fundo: gradiente-linear(45deg, #253956, transparente) !importante;

}

Etapa 3: Substitua os valores de espaço reservado.

Antes de salvar o código, substitua os valores de espaço reservado pelas suas configurações preferidas.

• Substituir ElementoClasse

Classe Elemento é um espaço reservado para a classe real do seu elemento de Estandarte de Herói.

Substitua pela classe do seu Estandarte de Herói.

• Personalize o gradiente

A linha seguinte controla a aparência do gradiente:

fundo: gradiente-linear(45deg, #253956, transparente) !importante;

Você pode personalizar os seguintes valores:

Etapa 4: salve suas alterações

Após atualizar o código com o nome da classe e as configurações de gradiente de sua preferência, salve o Código Personalizado.

Visualize a página para garantir que a sobreposição de gradiente apareça conforme o esperado.