Blog

Sección altura completo en Divi

Blog

Sección altura completo en Divi

Sección altura completo en Divi

Anto Fernandez

¿Cómo creo una sección que ocupe el alto total de mi pantalla (Full Screen) en Divi?

En este post te vamos enseñar cómo crear secciones que ocupen 100% de la altura de tu pantalla. Ideal para crear webs muy visuales, landing con call to action potentes y páginas webs donde las imágenes sean las protagonistas.

Nuestra sección se adaptará a cualquier pantalla. Da igual si lo están viendo en un móvil, en una pantalla grande o un portátil.

Este es el efecto que vamos a conseguir:

Como ves, a pesar de que cambiemos el tamaño de nuestra ventana, las dos secciones siempre ocupan la altura total de nuestro dispositivo y las filas se mantienen alineadas verticalmente.

Diseño Full Screen

¿Cómo conseguimos que la sección se adapte siempre a la altura de nuestro dispositivo?

Es simple, para ello vamos a utilizar una unidad de medida poco conocida llamada vh (Viewport Height). Esta unidad es relativa. Es decir, 100vh corresponde al 100% de altura de nuestro dispositivo. Si su navegador se escala o utiliza un dispositivo más pequeño, 100vh siempre va a ser la altura total.

Este sería el primer paso:

Creando una sección con una altura del 100%

Como ves además hemos añadido un valor a la propiedad “Min Height” de 500px. Con ello nos aseguramos que aunque la ventana sea menor de 500px de altura nuestra sección va medir al menos 500px. Esto es muy útil para evitar que el contenido se colapse en dispositivos pequeños como móviles en posición horizontal.

¿Cómo alineamos nuestro contenido en el centro de la pantalla?

Por defecto nuestra fila estará posicionada en la parte superior de la pantalla. Vamos a centrarla. Para ello no vamos a utilizar márgenes ni paddings. Esta sería una solución fácil, pero incompleta, ya que el contenido no estaría centrado ni se adaptará bien en cada dispositivo. Ahora te muestro como hacerlo.

Alinear una fila en el centro de una sección de Divi

Para conseguir que nuestra fila siempre esté en el centro vamos a editar los siguiente valores. Cambiamos la posición de la fila a “Absolute” y “Location” en el centro. Este cambio creará que la posición del elemento siempre sea el centro de la sección. Si quieres conocer más acerca de la propiedad Position de CSS te recomiendo este post de Mozilla.

Fila centrada en una sección de Divi

Consejos para tu sección full screen en Divi

  • Este tipo de diseño es perfecto para páginas con poca información o poco texto.
  • Puedes utilizar otra imagen para el fondo en dispositivos móviles. Se adaptará mejor.
  • Utiliza degradados también como fondo para mejorar la legibilidad.
  • Combina secciones con un color de fondo sólido o degradado para conseguir más dinamismo.

¿Qué te ha parecido este post? ¿Te parece interesante para tus proyectos de Divi? Cuéntanos en los comentarios y suscríbete a nuestra lista para recibir trucos y consejos como este en tu inbox.

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Fuente responsive en Divi

Fuente responsive en Divi

¿Fuentes responsive en Divi? ¿Es posible? YES!! Además con cualquier tipografía. Hoy te queremos hablar de fuente responsive en Divi. Vamos a ver cómo podemos adaptarla al tamaño de nuestra pantalla. Tanto si el usuario ve la web desde diferentes dispositivos o reduce...

Texto sobre imagen en Divi

Texto sobre imagen en Divi

Hoy queremos compartir contigo un pequeño truco para mejorar la legibilidad de las imágenes que tienen un texto sobre cualquier imagen en Divi. Este tutorial está en nuestra categoría Divi Basics y está escrito para usuarios que están comenzando con Divi. Aunque te...

Cambiar el color de los enlaces del menú de Divi

Cambiar el color de los enlaces del menú de Divi

Todos sabemos que Divi es un tema de Wordpress muy potente y versátil. Con un montón de opciones de personalización. Pero en muchas ocasiones es necesario usar CSS para ciertos detalles importantes. Esto ocurre por ejemplo con los enlaces del menú. Podemos cambiar el...

Cambiar el orden de las columnas de Divi en móvil

Cambiar el orden de las columnas de Divi en móvil

Divi es un constructor genial con un montón de opciones disponibles que nos va a permitir trabajar en cualquier proyecto web. Pero en ocasiones es necesario utilizar algo de CSS si queremos conseguir el mejor resultado. En el ejemplo de este post vamos a ver como...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Select currency
Euro
$ Dólar de los Estados Unidos (US)

¡Consigue 5€ gratis!

Regístrate y obtén un cupón descuento.

 Registrarme