Tutorial WordPress: Diseñar un hero con texto centrado y overlay con CSS

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo diseñar un hero para WordPress con el texto perfectamente centrado y un overlay (capa de superposición) usando CSS. Incluye estructura HTML recomendada para un tema o plantilla, snippets de CSS reutilizables, variantes para overlay (pseudo-elemento y elemento real), consideraciones de accesibilidad, rendimiento y adaptabilidad móvil, y ejemplos de integración con WordPress (PHP).

Antes de empezar: requisitos y buenas prácticas

Conocimientos básicos de WordPress (temas, plantillas y la función get_the_post_thumbnail_url()).
Acceso a editar archivos del tema (template-parts, page templates o header.php) o uso de un bloque HTML personalizado en Gutenberg.
Imágenes optimizadas y tamaños adecuados para web. Preferir formatos modernos (WebP) si es posible.
Contraste suficiente entre texto y fondo. Si el fondo es muy variable, usar un overlay para garantizar legibilidad.
En dispositivos móviles, evitar hero que ocupe el 100% de altura sin control usar min-height y media queries para manejar la UX.

Estructura HTML recomendada (semántica y accesible)

Una estructura simple, flexible y compatible con WordPress: sección que actúa como banner, una capa de contenido centrada y opcional elemento overlay (si no usas pseudo-elementos).


  
  
 
  
    Título principal centrado
    Subtítulo o descripción breve
    Llamada a la acción

CSS base: layout, centrado y fondo

Explicación de las decisiones: usea display: grid o flex para centrar position: relative en el hero para permitir overlays background-size: cover para cubrir el área background-position para centrar la imagen.

/ Hero base /
.hero{
  position: relative
  min-height: 60vh            / ajustable: 60-100vh según diseño /
  display: grid
  place-items: center         / centra contenido horizontal y vertical /
  overflow: hidden
  background-color: #111      / color de fondo por si no hay imagen /
  background-size: cover
  background-position: center
  background-repeat: no-repeat
}

/ Contenido centrado /
.hero__content{
  position: relative          / sobre el overlay /
  z-index: 3                  / asegurar por encima del overlay /
  text-align: center
  padding: 2rem
  color: #fff
  max-width: 1100px
}

/ Tipografía responsiva /
.hero__title{
  margin: 0 0 0.5rem 0
  font-size: clamp(1.8rem, 4vw, 3.5rem) / escalado fluido /
  line-height: 1.05
  letter-spacing: -0.02em
}

.hero__subtitle{
  margin: 0 0 1.25rem 0
  font-size: clamp(1rem, 2.2vw, 1.25rem)
  opacity: 0.95
}

/ Botón/CTA simple /
.hero__cta{
  display: inline-block
  padding: 0.65rem 1.1rem
  background: rgba(255,255,255,0.12)
  color: #fff
  text-decoration: none
  border-radius: 6px
  transition: background .18s ease, transform .12s ease
}
.hero__cta:hover{
  background: rgba(255,255,255,0.18)
  transform: translateY(-2px)
}

Overlay: dos enfoques (pseudo-elemento y elemento real)

Usar un overlay es la forma más simple de controlar contraste sin editar la imagen: puedes usar un pseudo-elemento (::before) o un elemento .hero__overlay. Cada método tiene pros y contras:

::before: menos HTML, ideal si el overlay es siempre igual.
.hero__overlay: más control desde JS/HTML, accesible para cambios dinámicos.

Opción A — Overlay con pseudo-elemento (recomendada)

/ Overlay usando pseudo-elemento /
.hero::before{
  content: 
  position: absolute
  inset: 0                       / top:0 right:0 bottom:0 left:0 /
  z-index: 2
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.55) 100%
  )
  pointer-events: none           / no interfiere con clicks /
}
/ Variante sutil /
.hero--light::before{
  background: rgba(255,255,255,0.15)
  mix-blend-mode: overlay
}

Opción B — Overlay con elemento HTML

/ Overlay si tienes  /
.hero__overlay{
  position: absolute
  inset: 0
  z-index: 2
  background: rgba(0,0,0,0.45)
  pointer-events: none
}

Fondo dinámico en WordPress (ejemplo PHP)

Ejemplo para usar la imagen destacada del post/página como fondo del hero en un template de WordPress. Coloca esto en el template donde quieras renderizar el hero.


)>
  
    
    
      
    
    Ver contenido

Accesibilidad y SEO

Si la imagen transmite información importante, proporciónala también en el HTML (por ejemplo un elemento ltimggt con alt). Si la imagen es puramente decorativa, usar background-image aria-hidden y dejar alt vacío en cualquier img fallback.
Asegura contraste WCAG: usa overlay más oscuro si el texto no alcanza el contraste mínimo. Herramientas como Lighthouse lo verifican.
No uses texto en imágenes: mantén el título y subtítulo como texto real (mejor SEO y accesibilidad).
Si el hero ocupa mucha altura, ofrece una ancla o botón de bajar para que usuarios móviles no tengan que desplazarse con incertidumbre.

Rendimiento y carga de imágenes

Optimiza imágenes (compresión) y ofrece varias resoluciones con srcset si se usa ltimggt en lugar de background-image.
Si necesitas lazy-loading, background-image no se puede lazy-load nativamente para deferred loading usa un ltimg loading=lazygt visible o una técnica de JavaScript que aplique la imagen cuando el elemento entre en viewport.
Prefiere formatos modernos (WebP, AVIF) con fallbacks para navegadores antiguos.

Responsive: ajustes y media queries

Algunas recomendaciones prácticas:

En móviles, reducir min-height y tamaño de fuente para que el contenido no ocupe demasiada pantalla:

@media (max-width: 720px){
  .hero{
    min-height: 45vh
    padding: 2rem 1rem
  }
  .hero__title{
    font-size: clamp(1.4rem, 6vw, 2.2rem)
  }
  .hero__content{ padding: 1rem }
}

Variantes y mejoras avanzadas

Overlay radial para centrar foco en el título: background: radial-gradient(circle at center, rgba(0,0,0,0.18), rgba(0,0,0,0.6))
Animaciones sutiles: fade-in del contenido con prefers-reduced-motion en cuenta.
Compatibilidad con Gutenberg: el bloque Cover ya ofrece overlay y centrado si trabajas con bloques, se puede replicar el CSS para personalizar estilos globales.
Si la imagen incluye personas o texto, considera usar una versión recortada para mobile (object-position diferente o imagen alternativa).

Checklist final antes de publicar

¿Imágenes optimizadas y con fallback?
¿Contraste del texto cumple WCAG mínimo?
¿Contenido del hero está marcado como texto (no texto en imagen)?
¿Va a funcionar el hero correctamente en móviles (altura, fuente, legibilidad)?
¿Se ha probado la carga en navegadores lentos y con conexión móvil?

Con estas pautas y ejemplos tienes todo lo necesario para implementar un hero en WordPress con texto centrado y overlay, tanto si prefieres la solución puramente CSS (pseudo-elemento) como una versión controlada desde HTML/PHP. Ajusta colores, opacidades y tamaños según tu diseño, y recuerda priorizar legibilidad y rendimiento.

SushiHost