Introducción
En este tutorial detallado veremos cómo estilizar el bloque Cover de WordPress (Gutenberg) para aplicar una superposición (overlay) con degradado y conseguir que el texto sea legible y accesible sobre imágenes o videos de fondo. Cubriremos técnicas que se pueden aplicar desde el editor (ajustes del bloque) y soluciones CSS avanzadas (overlay con pseudo-elementos, mezcla de fondos, variables CSS, adaptaciones responsive), además de buenas prácticas de contraste y rendimiento.
Requisitos y contexto
- WordPress con editor de bloques (Gutenberg).
- Acceso para añadir CSS (Personalizar → CSS adicional, hoja de estilos del tema o enqueue de un archivo CSS).
- Imágenes de fondo optimizadas y preferiblemente en varios tamaños (srcset) para rendimiento.
Opciones rápidas desde el editor (sin código)
El bloque Cover incluye ajustes en la barra lateral para configurar color de fondo, imagen y una opción de “Dim” o “Opacidad” que funciona como una superposición básica. Si lo que buscas es una solución simple, puedes:
- Seleccionar la imagen o video de fondo en el bloque Cover.
- En la barra lateral, en “Color”, escoger un color de superposición o fondo y ajustar el control de opacidad/dim (si el tema lo permite).
- Ajustar el color del texto (claro u oscuro) para mejorar contraste.
Pero para un control fino (degradados, áreas de lectura, gradientes verticales/diagonales, texto con sombra, ajuste por dispositivo, etc.) conviene usar CSS personalizado. A continuación varias técnicas.
Técnicas CSS para overlay con degradado y texto legible
1) Degradado y imagen usando background-image en capas
Usar múltiples capas en background-image es la forma más simple y soportada por navegadores: el degradado va sobre la imagen y no requiere pseudo-elementos. Ideal cuando puedes identificar la imagen de fondo (o aplicar a un bloque con clase personalizada).
.wp-block-cover.cover-gradient {
/ Capa superior: degradado semitransparente. Capa inferior: imagen. /
background-image:
linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%),
url(/wp-content/uploads/cover-image.jpg)
background-size: cover
background-position: center
background-repeat: no-repeat
}
/ Aseguramos que el contenido esté por encima del overlay /
.wp-block-cover.cover-gradient .wp-block-cover__inner-container {
position: relative
z-index: 2
color: #ffffff
text-shadow: 0 2px 8px rgba(0,0,0,0.6)
}
2) Overlay con pseudo-elemento ::before (mayor control)
El pseudo-elemento ::before permite añadir el overlay sin modificar la propiedad background del bloque (útil si la imagen viene del editor) y facilita animaciones de transición o variaciones por estado. Añadimos el overlay como un elemento absoluto y elevamos el contenido con z-index.
/ Clase personalizada que aplicaremos al bloque Cover desde el editor /
.wp-block-cover.has-gradient-overlay {
position: relative / necesario para que ::before se coloque correctamente /
overflow: hidden
}
/ Overlay: ocupa todo el bloque /
.wp-block-cover.has-gradient-overlay::before {
content:
position: absolute
inset: 0 / top:0 right:0 bottom:0 left:0 /
z-index: 1
pointer-events: none / deja interactuar con botones / enlaces del contenido /
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%)
}
/ Contenido por encima del overlay /
.wp-block-cover.has-gradient-overlay .wp-block-cover__inner-container {
position: relative
z-index: 2
color: #fff
text-shadow: 0 3px 10px rgba(0,0,0,0.6)
}
3) Usar background-blend-mode para efectos de mezcla
background-blend-mode permite mezclar una capa de color/degradado con la imagen. Puede crear efectos interesantes, por ejemplo multiplicar para oscurecer o overlay para añadir contraste.
.wp-block-cover.blend-cover {
background-image:
linear-gradient(180deg, rgba(10,10,20,0.35), rgba(10,10,20,0.6)),
url(/wp-content/uploads/cover-image.jpg)
background-size: cover
background-position: center
background-blend-mode: multiply / prueba multiply, overlay, soft-light según efecto /
}
4) Variables CSS para theming y control desde editor
Usar variables facilita cambiar colores de overlay globalmente o desde theme.json si tu tema las expone. Ejemplo:
:root {
--cover-overlay-start: rgba(0,0,0,0.35)
--cover-overlay-end: rgba(0,0,0,0.65)
}
.wp-block-cover.var-cover {
background-image:
linear-gradient(180deg, var(--cover-overlay-start), var(--cover-overlay-end)),
url(/wp-content/uploads/cover-image.jpg)
}
Estilos para mantener el texto legible y accesible
No basta con aplicar un overlay: hay prácticas para mejorar la legibilidad del texto sobre el fondo.
- Color del texto: usa colores con suficiente contraste respecto al color resultante en el área donde está el texto.
- Sombra del texto: text-shadow mejora la lectura sobre fondos con textura.
- Bloque de lectura: si el texto está sobre secciones con mucho detalle, considera un fondo semitransparente detrás del texto (p. ej. un pequeño rectángulo con rgba).
- Tamaños y espaciado: aumenta el line-height y el tamaño de fuente en móviles para mantener legibilidad.
- Comprobación WCAG: valida contraste con herramientas (ej. WebAIM Contrast Checker).
Ejemplo: añadir una placa semitransparente detrás del texto
.wp-block-cover .wp-block-cover__inner-container .reading-panel {
display: inline-block
padding: 0.75rem 1rem
background: rgba(0,0,0,0.35)
border-radius: 6px
color: #fff
text-shadow: 0 2px 6px rgba(0,0,0,0.6)
}
Responsive y ajustes por dispositivo
En móviles puede ser necesario incrementar la opacidad del overlay para mantener contraste, porque las pantallas pequeñas muestran detalles con más densidad visual. Ejemplo de media queries:
/ Refuerza overlay en pantallas pequeñas /
@media (max-width: 768px) {
.wp-block-cover.has-gradient-overlay::before {
background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%)
}
.wp-block-cover .wp-block-cover__inner-container {
padding: 2rem 1rem
font-size: 1.05rem
}
}
Rendimiento y consideraciones de imágenes
- Optimiza las imágenes (WebP/AVIF si procede) y usa srcset cuando sea posible.
- Si usas background-image con rutas fijas, evita cargar versiones gigantes en móviles.
- Si la imagen es crítica, considera lazy-loading para secciones inferiores para portada normalmente la imagen se carga de forma prioritara.
Encolando CSS para el editor y el frontend (ejemplo PHP)
Para que el estilo afecte tanto al frontend como al editor, encola el CSS en ambos contextos. Ejemplo mínimo para functions.php:
function theme_enqueue_cover_styles() {
wp_enqueue_style(
theme-cover-styles,
get_stylesheet_directory_uri() . /css/cover-styles.css,
array(),
1.0
)
}
add_action(wp_enqueue_scripts, theme_enqueue_cover_styles)
add_action(enqueue_block_editor_assets, theme_enqueue_cover_styles)
Comprobación de accesibilidad (WCAG) y checklist
- Verificar relación de contraste entre texto y el color resultante de la imagen overlay. Se recomiendan 4.5:1 para texto normal y 3:1 para texto grande.
- Comprobar que los enlaces dentro del cover tengan foco visible y contraste.
- Evitar animaciones o cambios bruscos que afecten la lectura o provoquen problemas vestibulares.
- Probar en varios dispositivos (móvil, tablet, desktop) y en pantallas con alto brillo/oscuro.
Ejemplos prácticos resumidos y recomendaciones finales
- Si quieres un control rápido y simple: usa la configuración de color y opacidad del bloque Cover desde el editor.
- Si necesitas degradados avanzados, animaciones o control responsive: crea una clase personalizada en el bloque Cover (por ejemplo “has-gradient-overlay”) y aplica CSS con ::before.
- Prioriza contraste y legibilidad: usa text-shadow, placas semitransparentes para texto y comprueba con herramientas de contraste.
- Centraliza colores con variables CSS para facilitar cambios globales en tu tema.
Resumen técnico en una línea
Aplica un overlay con degradado (background-image o ::before), eleva el contenido con z-index, añade text-shadow y/o una placa semitransparente detrás del texto, y valida contraste para accesibilidad.
Leave a Reply