Añadir una Superposición de Degradado a un Banner de Hero mediante Código Personalizado

Una superposición de degradado puede mejorar la apariencia visual de su Banner de Hero y hacer que el contenido colocado encima —como un Encabezado, un Bloque de Texto, o un Botón— resulte más fácil de leer.

Acerca del elemento Banner de Hero

El elemento Banner de Hero de GemPages se utiliza habitualmente para crear una sección grande y llamativa en la parte superior de una página. Por lo general, incluye una imagen o un color de fondo con contenido mostrado encima.

Si el fondo de su Banner de Hero necesita más contraste o un aspecto más cuidado, puede aplicar una superposición de degradado mediante Código personalizado.

Cómo añadir una superposición de degradado mediante Código personalizado

Paso 1: Abrir el panel de Código personalizado

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: Pegar el código CSS

Pegue el siguiente código en el cuadro de Código Personalizado.

ElementClass .hero-banner-bg:after {

  content: "";

  position: absolute;

  Top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(45deg, #253956, transparent) !important;

}

Paso 3: Reemplazar los valores de marcador de posición

Antes de guardar el código, reemplace los valores de marcador de posición por los ajustes que prefiera.

• Reemplace ElementClass

ElementClass es un marcador de posición para la clase real de su elemento Banner de Hero.

Reemplácelo por la clase de su Banner de Hero.

• Personaliza el degradado

La siguiente línea controla la apariencia del degradado:

background: linear-gradient(45deg, #253956, transparent) !important;

Puede personalizar los siguientes valores:

Paso 4: Guardar los cambios

Después de actualizar el código con el nombre de clase y los ajustes de degradado que prefiera, guarde el Código personalizado.

Previsualice su página para asegurarse de que la superposición de degradado aparezca como se espera.