Cómo reducir la opacidad del fondo de un Banner de Hero con Código personalizado

Acerca del elemento Banner de Hero

El elemento Banner de Hero de GemPages se utiliza habitualmente para crear una sección visual de gran tamaño en la parte superior de una página. Por lo general, incluye una imagen o un color de fondo, junto con contenido como un encabezado, una descripción, un botón u otros elementos de texto.

Si el fondo de su Banner de Hero se ve demasiado intenso y dificulta la lectura del texto, puede utilizar el Código Personalizado para reducir la opacidad del fondo y crear un mejor contraste con el contenido que hay sobre él.

Cómo usar el Código personalizado para reducir la opacidad del fondo de un Banner de Hero

Paso 1: Abra el panel de Código personalizado del elemento Banner de Hero

En el editor de GemPages, localice el elemento Banner de Hero que desea personalizar.

A continuación, haga clic con el botón derecho en el elemento Banner de Hero y seleccione Código Personalizado.

Paso 2: Pegue el código personalizado en el Banner de Hero

Pegue el siguiente código CSS en el cuadro de Código Personalizado:

ElementClass .hero-banner-bg {

  opacity: 0.7 !important;

}

Paso 3: Reemplace ElementClass por la clase real de su Banner de Hero

En el código anterior, ElementClass es solo un marcador de posición. Debe reemplazarlo por la clase real de su elemento Banner de Hero.

Su código final debe seguir esta estructura:

.su-clase-de-elemento .hero-banner-bg {

  opacity: 0.7 !important;

}

¿Qué opacidad: 0.7 significa?

El opacidad controla el nivel de transparencia con el que se muestra el fondo del Banner de Hero.

Acepta valores de 0 a 1:

• 1 = totalmente visible, sin transparencia
• 0.9 = ligeramente transparente
• 0.7 = moderadamente transparente
• 0.5 = medio transparente
• 0 = totalmente transparente

En este ejemplo:

opacidad: 0.7;

el fondo del Banner de Hero seguirá siendo visible, pero se verá más suave y menos dominante. Esto ayuda a que el texto colocado encima destaque con mayor claridad.

Ejemplos de valores de opacidad:

Puede ajustar el valor de opacidad según el resultado que desee:

• opacidad: 0.9; → el fondo permanece casi totalmente visible
• opacidad: 0.7; → una opción equilibrada para mejorar la legibilidad del texto
• opacidad: 0.5; → el fondo se vuelve notablemente más claro
• opacidad: 0.3; → el fondo se vuelve muy tenue

Si el texto dentro de su Banner de Hero sigue siendo difícil de leer, pruebe a reducir aún más el valor.