¿Alguna vez has querido que un bloque en tu sitio de WordPress se adapte perfectamente a la altura del dispositivo de quien lo visita?
Te entiendo.
Cuando un bloque se queda corto o se alarga innecesariamente, el diseño pierde fuerza.
Y tú, que cuidas cada píxel de tu página como si fuera una obra de arte, no puedes permitirlo.
Hoy te voy a enseñar cómo hacer que cualquier bloque de WordPress ocupe el 100% de la altura de la pantalla, sin importar si el visitante usa un móvil, una tablet o un monitor ultrapanorámico.
No necesitas ser desarrollador, pero sí tener algo de curiosidad y estar dispuesto a experimentar.
Vamos paso a paso. 🧩
🧰 ¿Por qué querrías hacer esto?
Porque el diseño web no se trata solo de lo que se ve, sino de cómo se siente.
Cuando un visitante aterriza en tu página y el contenido se ajusta como un guante a su dispositivo, siente que el sitio está hecho a su medida.
Además, puedes crear efectos de impacto visual que captan la atención desde el primer segundo.
Piensa en una sección de bienvenida que ocupa toda la pantalla.
Un formulario centrado, una imagen a pantalla completa o un llamado a la acción irresistible.
Todo eso solo es posible si dominas este truco. 🎯
⚙️ Entendiendo la «altura del dispositivo»
Antes de meter mano al código o al editor, necesitas comprender un concepto: 100vh.
Este valor en CSS significa “100% del viewport height”, o sea, la altura visible de la ventana del navegador.
En teoría, con esto bastaría para hacer que un bloque ocupe toda la altura disponible.
Pero (¡y aquí viene el giro!) hay matices.
En móviles, por ejemplo, los navegadores suelen ocultar o mostrar la barra de navegación, lo que afecta la medida de 100vh.
Así que no es tan simple como parece.
Pero no te preocupes, vamos a dominarlo juntos. 💪
🛠️ Método 1: Usar el editor de bloques de WordPress con clases personalizadas
Si estás usando el editor por bloques (Gutenberg), puedes añadir clases personalizadas a cualquier bloque.
Haz esto:
- Selecciona el bloque que quieres ajustar.
- En la barra lateral derecha, busca el apartado “Avanzado”.
- Escribe una clase personalizada, por ejemplo:
pantalla-completa.
Ahora vamos a darle estilo con un poco de CSS:
.pantalla-completa {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Esto hará que el bloque:
- Ocupa toda la altura del dispositivo 🧱
- Centre su contenido tanto vertical como horizontalmente 🎯
✨ Consejo extra: si quieres ajustar el relleno interno (padding), usa unidades relativas como 5vh en lugar de píxeles fijos.
📱 Método 2: CSS moderno con svh y lvh (para navegadores móviles)
En dispositivos móviles modernos, 100vh puede no ser del todo preciso.
Por eso, hay nuevas unidades que resuelven este dilema:
svh: Small Viewport Height (altura más pequeña, con barras visibles)lvh: Large Viewport Height (altura completa, con barras ocultas)
Puedes usarlas así:
.pantalla-completa {
height: 100lvh;
}
🔍 Esto requiere soporte en navegadores modernos (y la mayoría ya lo tiene).
💡 ¿Por qué es útil?
Porque asegura que el contenido no se vea cortado o con scroll innecesario en móviles.
🧩 Método 3: Si usas Elementor (¡o algún otro maquetador!)
Elementor y otros constructores visuales tienen opciones directas para esto.
Haz esto en Elementor:
- Selecciona la sección que quieres ajustar.
- Ve a la pestaña Layout.
- En “Height” elige “Min Height”.
- Pon
100vhen el campo.
Si quieres ir más allá, puedes activar “Stretch Section” y jugar con la alineación del contenido.
📌 No olvides revisar cómo se comporta en la vista móvil. A veces, hace falta ajustes de espaciado adicionales.
💻 Método 4: Para los valientes — usando JavaScript
A veces, necesitas una solución quirúrgica.
JavaScript puede ayudarte cuando CSS no basta.
Aquí tienes un ejemplo minimalista:
function ajustarAltura() {
let alto = window.innerHeight;
document.querySelector('.pantalla-completa').style.height = alto + 'px';
}
window.addEventListener('load', ajustarAltura);
window.addEventListener('resize', ajustarAltura);
Este script detecta la altura real del navegador y la aplica al bloque con clase .pantalla-completa.
📎 Es útil cuando los cambios de orientación o barras dinámicas afectan el diseño.
🔒 Precaución: si usas esta técnica, asegúrate de no bloquear el scroll del cuerpo (body) o puedes romper la navegación.
🧪 Extra: Combina varias técnicas para máxima compatibilidad
No tienes que elegir un solo método.
Puedes mezclar CSS y JavaScript, usar 100vh como fallback y añadir svh o lvh cuando sea necesario:
.pantalla-completa {
height: 100vh;
height: 100svh;
height: 100lvh;
}
🎩 Así te aseguras de que en cualquier navegador, en cualquier dispositivo, el bloque se vea como tú lo diseñaste.
👁️ Consideraciones de diseño y accesibilidad
No todo es técnica.
Tu bloque a pantalla completa debe ser también legible, navegable y coherente con el resto de tu sitio.
✅ Usa contraste suficiente entre fondo y texto.
✅ Asegúrate de que haya una forma clara de desplazarse hacia abajo.
✅ Añade indicadores visuales como una flecha, un botón o una animación sutil.
🌈 Lo importante es que el usuario sepa que hay más contenido más allá del primer bloque.
🧭 Últimos consejos para que tu diseño brille
- Prueba tu bloque en diferentes dispositivos antes de publicarlo. Usa Chrome DevTools o tu propio móvil.
- Si usas temas como Astra o Blocksy, desactiva los márgenes automáticos para evitar que arruinen el efecto.
- Guarda tus estilos en el personalizador de WordPress o en el archivo
style.cssde tu tema hijo.
✨ Y sobre todo: ¡no tengas miedo de experimentar!
🚀 Conclusión: Domina la altura total, domina la primera impresión
Un bloque que se adapta perfectamente a la pantalla transmite profesionalismo, confianza y modernidad.
En este mundo saturado de contenidos, tu diseño es tu carta de presentación.
Y ahora ya sabes cómo hacer que tu primer bloque brille desde el primer segundo.
Porque en la web, como en la vida, las primeras impresiones cuentan.
¿Listo para llevar tu WordPress al siguiente nivel? 💥
