Agregar superposición a una imagen usando el elemento Banner principal

Acerca del efecto de superposición en las imágenes

El efecto de superposición añade una capa semitransparente sobre una imagen. Es especialmente útil para mejorar el contraste entre la imagen de fondo y cualquier texto o elemento que se coloque sobre ella. 

Dentro de GemPages, puedes agregar una superposición a tu imagen para lograr un diseño elegante y profesional que llame la atención sobre el contenido clave de tu página.

Agregar superposición a una imagen usando el elemento Banner principal

Para agregar una superposición a su imagen usando el Banner en GemPages, siga estos pasos:

Paso 1: Agrega un banner de héroe a tu página

• Acceda al Panel de Control de GemPages > Páginas, localiza tu página de destino para abrir el editor.
• En la barra lateral izquierda, ingrese Banner En la barra de búsqueda. Luego, arrastra y suelta un elemento de Banner de Héroe en la posición que prefieras.

Paso 2: Agrega una imagen al Banner del Héroe

• Haga clic en el elemento para abrir su configuración. 
• En la barra lateral izquierda, busque el Fondo bajo la pestaña Configuración pestaña y haga clic en el cuadro junto a la Imagen .

• Desde aquí, puedes elegir una imagen de tu galería o cargar una nueva para usarla como fondo para el elemento. 
• Ajuste la escala, la posición, la repetición y la fijación de la imagen. También puede configurar Precarga a Sí para optimizar LCP.

Paso 3: Habilite la superposición para la imagen

Una vez que haya terminado de configurar su imagen, haga clic en Mostrar más para mostrar todo Fondo .

Haga clic en el cuadro junto a Overlay Opción para abrir el panel de configuración.

Desde aquí, puede seleccionar el color de superposición y ajustar la opacidad.

• Color: Elige un color sólido para superponerlo sobre tu imagen. Puedes introducir un código de color hexadecimal (p. ej., #121212) o usar el selector de color para seleccionar uno visualmente.

• Opacidad: Ajuste el control deslizante de opacidad o ingrese un número exacto para controlar qué tan visible es la superposición. 0 significa que la superposición es completamente transparente (invisible), mientras que 100 significa que cubre completamente la imagen de fondo.

Por ejemplo, , Opacidad = 20 aplicará una superposición sutil y semitransparente.

Preguntas Frecuentes

1. ¿Por qué debería usar una superposición en mi imagen de fondo?

La superposición mejora la legibilidad del texto al añadir contraste entre la imagen de fondo y el texto. Además, crea un estilo visual más profesional y consistente, especialmente para banners de héroe o secciones promocionales.

2. ¿Cuál es el mejor color de superposición para utilizar?

Depende de la imagen de fondo y del color del texto:

• Utilice superposiciones oscuras (por ejemplo, #000000 or #121212) cuando su texto es claro (blanco, crema, etc.).
• Utilice superposiciones de luz (por ejemplo, #FFFFFF con baja opacidad) cuando el texto es oscuro.

3. ¿Qué nivel de opacidad debo establecer para obtener mejores resultados?

Nosotros recomendamos:

• 15–30% de opacidad para un efecto sutil
• 30–50% de opacidad si la imagen de fondo está ocupada o es colorida

Ajuste el control deslizante mientras obtiene una vista previa para ver qué funciona mejor para su contenido.

4. ¿Puedo utilizar superposiciones de degradado?

Por el momento, GemPages V7 solo admite una superposición de color sólido En fondos de imagen. Para efectos de degradado, considera editar tu imagen en una herramienta de diseño (p. ej., Figma o Canva) antes de subirla.

5. ¿Por qué no se muestra la superposición en mi Banner de héroe?

Si el efecto de superposición no se muestra en su imagen, verifique lo siguiente:

• Asegúrese de que se haya agregado una imagen en Fondo > Imagen.
• Asegúrese de que el color y la opacidad de la superposición no estén configurados como completamente transparentes (por ejemplo,#000000 con opacidad 0).

6. ¿La superposición se aplica a los fondos de vídeo?

Sí. En GemPages v7, el efecto de superposición funciona tanto para fondos de imagen como de video en el elemento Hero Banner.

Los ajustes son los mismos:

• Puede seleccionar un color de superposición.
• Ajuste la opacidad para controlar qué parte del video se muestra.