Si utilizas el tema Twenty Twenty-Five (TT5) en WordPress, es posible que hayas notado un espacio en blanco muy molesto justo encima del pie de página. Este hueco aparece especialmente cuando usas un fondo oscuro, resaltando todavía más esa separación que WordPress añade de forma automática entre los bloques.
La buena noticia: se puede eliminar completamente, y en este tutorial te enseño cómo hacerlo de manera fácil, rápida y sin romper el diseño del theme.
⭐ Resumen rápido para los que vienen con prisa
Solución inmediata (CSS):
/* Eliminar espacio blanco antes del footer en Twenty Twenty-Five */
.wp-site-blocks > *:last-child {
margin-bottom: 0 !important;
}
footer, .wp-block-template-part {
margin-top: 0 !important;
padding-top: 0 !important;
}
.wp-block-group {
margin-block-start: 0 !important;
padding-block-start: 0 !important;
}Añade esto en Apariencia → Editor del sitio → Estilos → Personalizar CSS, y el espacio desaparecerá en todo el sitio web.
🧩 ¿Por qué aparece este espacio blanco en Twenty Twenty-Five?
Desde la llegada del editor de bloques y las plantillas completas (Full Site Editing), WordPress añade:
- márgenes automáticos entre bloques,
- separación dinámica entre contenedores,
- un “espaciado global” predefinido para la experiencia visual.
Esto está bien para diseños limpios, pero en TT5 se vuelve muy evidente cuando:
- Usas un fondo negro o muy oscuro.
- El footer está pegado al último bloque.
- El tema aplica márgenes superiores al footer y al bloque contenedor final.
El resultado: ✨ una línea o franja clara muy visible justo antes del pie de página.
Por suerte, todo esto se soluciona con un pequeño ajuste.
🛠️ Método recomendado: eliminar el espacio blanco mediante CSS global
Esta es la solución más sencilla, estable y universal. No modifica plantillas y funciona para cualquier página, entrada o plantilla que estés usando.
👉 Paso 1: Abre el Editor del sitio
En tu WordPress ve a: Apariencia → Editor del sitio
👉 Paso 2: Entra en «Estilos»
En la barra lateral derecha haz clic en: Estilos → Personalizar CSS
👉 Paso 3: Añade este código
/* Eliminar espacio blanco antes del footer en Twenty Twenty-Five */
.wp-site-blocks > *:last-child {
margin-bottom: 0 !important;
}
footer, .wp-block-template-part {
margin-top: 0 !important;
padding-top: 0 !important;
}
.wp-block-group {
margin-block-start: 0 !important;
padding-block-start: 0 !important;
}👉 Paso 4: Guarda y comprueba
Al actualizar verás que el pie de página queda perfectamente pegado al contenido, sin saltos, sin líneas blancas y sin afectar el resto del diseño.
🎯 ¿Qué hace exactamente este código?
Para los más técnicos:
1. Elimina el margen que deja el último bloque de la página:
.wp-site-blocks > *:last-child {
margin-bottom: 0 !important;
}2. Corrige el margen superior del footer y de los template parts (partes de plantilla):
footer, .wp-block-template-part {
margin-top: 0 !important;
padding-top: 0 !important;
}3. Evita que los Group Blocks añadan un espaciado extra:
.wp-block-group {
margin-block-start: 0 !important;
padding-block-start: 0 !important;
}Resultado:
✔ Pie de página completamente unido al contenido.
✔ No más bordes blancos.
✔ Diseño limpio y controlado.
🧱 Alternativa: desactivar el “Espaciado entre bloques” (opcional)
WordPress incorpora una opción global que añade separación entre cada bloque.
Puedes reducirla desde: Editor del sitio → Estilos → Diseño → Bloques → Espaciado entre bloques
Ponlo en: 0 px
👉 Aun así, TT5 seguirá dejando margen antes del footer, por eso el CSS sigue siendo necesario.
📐 Opción avanzada: modificar plantillas específicas del sitio
Si quieres eliminar el espacio solo en ciertas páginas, puedes editar la plantilla:
- Editor del sitio → Plantillas
- Elige: Página / Entrada / Single
- Selecciona el bloque Post Content o el contenedor superior
- En la barra lateral → Espaciado → margen superior = 0
Este ajuste no es global, pero puede ser útil para páginas concretas.
❓ Preguntas Frecuentes (FAQs)
¿Esto afecta a móviles?
No. El CSS respeta la estructura responsiva de WordPress.
¿Se borrará si actualizo WordPress?
No. El CSS adicional se mantiene aunque actualices WordPress o el tema.
¿Puedo romper algo?
No. El código solo elimina márgenes superiores, sin alterar estilos del contenido.
¿Funciona también con Twenty Twenty-Four?
En gran parte sí, aunque ese tema gestiona el footer de forma un poco distinta.
🏁 Conclusión
El espacio blanco que aparece encima del pie de página en Twenty Twenty-Five es un problema muy común, especialmente en webs con diseño oscuro. Por suerte, se corrige con unas pocas líneas de CSS que puedes aplicar de forma global y permanente.
Con esta solución:
✔ eliminas el hueco en todas las páginas,
✔ mantienes el diseño,
✔ mejoras la estética,
✔ y evitas tocar plantillas o archivos del tema.
Deja una respuesta