Blog

Sección alto completo en Divi

Blog

Sección alto completo en Divi

Sección alto completo en Divi

¿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. Presta atención y aprende como crear una sección alto completo en Divi.

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:

Sección alto completo en Divi

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.

Sección alto completo en 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 alto completo en Divi

Cuando diseñes una sección alto completo en Divi, considera estos consejos para optimizar su impacto y funcionalidad:

  1. Adapta el contenido a la estructura: Este tipo de diseño es ideal para páginas que requieren una presentación impactante pero tienen poca información o texto. Aprovecha al máximo el espacio para transmitir tu mensaje de manera clara y concisa.
  2. Personaliza para dispositivos móviles: Para garantizar una experiencia óptima en dispositivos móviles, considera utilizar una imagen diferente como fondo en comparación con la versión de escritorio. Esto ayudará a que el diseño se adapte mejor a las dimensiones de pantalla más pequeñas.
  3. Juega con los fondos: Además de imágenes, considera utilizar degradados como fondo para mejorar la legibilidad del texto y añadir profundidad visual. Experimenta con diferentes combinaciones de colores para encontrar la que mejor se ajuste al estilo de tu sitio.
  4. Añade dinamismo con colores: Para crear un diseño más dinámico, combina secciones con fondos sólidos o degradados con otras secciones que utilicen imágenes o contenido multimedia. Esta variedad visual ayudará a captar la atención de tus visitantes y a guiarlos a través del contenido de manera fluida.

¿Qué opinas de estos consejos? ¿Te parecen útiles para tus proyectos en Divi? ¡Déjanos tus comentarios y únete a nuestra lista para recibir más trucos y consejos directamente en tu correo electrónico!

Sección alto completo en Divi | Destaca

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 *

-30% use the cupon SummerSale24

X

¡Consigue 5€ gratis!

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

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