Ya sabes que en Elegant Themes actualizan Divi con frecuencia y van mejorando muchas funcionalidades.

No en vano el tema Divi es el tema de WordPress más instalado del mundo.

Con las nuevas opciones de tamaño arrastrables de Divi, literalmente puedes controlar el ancho, el ancho máximo, la altura mínima, la altura máxima y la altura máxima de cada elemento dentro del propio constructor. Esto te da la libertad para editar para cualquier dispositivo (responsive) de forma sencilla.

Todo esto suena bien, pero ¿cómo se traduce esto en una web? Eso es exactamente de lo que vamos a hablar en este post. Comenzaremos explicando primero la diferencia entre todas las propiedades de altura y anchura disponibles dentro de la configuración de Divi y luego las usaremos en diferentes escenarios para hacer que nuestros diseños de página se comporten exactamente de la manera que queremos.

¡Vamos a ello!

Entendiendo la diferencia entre las distintas propiedades

Antes de utilizar el ancho y el ancho máximo en nuestros procesos de diseño diarios, es importante entender lo que hacen. Esto es lo que la explicación teórica es:

Ancho:  el ancho real de un elemento de diseño. Si esto es 100%, es tan ancho como el contenedor lo permite. El ancho generalmente se expresa usando %. Cuanto menor sea el porcentaje para el ancho, más estrecho será el elemento de diseño.

Ancho  máximo: el ancho máximo tiene poder sobre el ancho. Si el ancho de un módulo se establece en 100%, se adherirá a ese valor siempre y cuando se mantenga por debajo del valor de ancho máximo. Una vez que se alcanza el valor de ancho máximo, no lo excederá.

Pero, ¿cómo se traduce eso en diseño responsive? Para ayudar a explicar la diferencia, vamos a crear una comparación visual habilitando el Visual Builder en una página completamente nueva. Agregaremos una sección con una fila de una columna. Luego, insertamos un módulo de texto con algo de contenido, un color de fondo y un relleno personalizado.

Cambiando el ancho

Cuando cambia el ancho del módulo de texto al 80%, verá que el módulo de texto se reduce de tamaño. También se muestra la posibilidad de alinear el módulo como desee.

Cambiando el ancho máximo

Cuando cambia el ancho máximo, el valor asignado solo comenzará a aplicarse desde el momento en que el ancho real exceda el valor del ancho máximo. Vamos a demostrar que realmente rápido:

No excedido

Excedido

Además del ancho y el ancho máximo, también podrás encontrar la altura mínima, la altura y la altura máxima en la configuración de tamaño de cada elemento. Esto es lo que teóricamente puedes entender de estos términos:

Altura  mínima: la altura mínima que desea asignar a un elemento. Si este valor es mayor que la entrada de altura, la entrada de altura mínima dominará.

Altura:  esto define la altura real que desea asignar al elemento.

Altura máxima:  este valor se convierte en la nueva altura una vez que la altura supera el valor asignado a la altura.

Cambiando la altura mínima

Si cambias la altura mínima de un elemento, ese valor se convierte en la norma. Al probarlo, verás automáticamente la altura del cambio del módulo de texto en tiempo real.

Cambiando la altura

Si estás combinando una altura mínima y una altura, deberás asegurarte de que la altura sea mayor que la altura mínima. Si no, la altura será ignorada. En los dos GIF a continuación, podrás ver la diferencia en tiempo real.

No supera

Supera

Cambiando la altura máxima

La altura máxima se hace cargo si supera la altura mínima, pero es más pequeña que la altura. Si, por ejemplo, asignara un valor más alto a la altura mínima que a la altura máxima, la altura mínima dominaría.

Cambiar el ancho máximo para las filas

Una de las mejores prácticas en diseño web es decidir sobre un ancho máximo particular para todo su sitio web. Esto ayuda a que todo se vea receptivo en diferentes tamaños de pantalla. También ayuda a los diseñadores a crear wireframes precisos.

Cambiando el ancho máximo global

Puede o no saber que puede establecer un cierto ancho máximo predeterminado para su contenido en el Personalizador de temas yendo a la Configuración general y continuando a la Configuración de diseño. Mantener el ancho máximo persistente ayuda a potenciar la capacidad de respuesta.

Cambia el ancho máximo para una fila en particular

Con la nueva actualización de tamaño arrastrable, también tienes la oportunidad de definir individualmente un ancho máximo para filas. Esto es ideal para las excepciones donde tiene más sentido ir con un ancho máximo más alto.

Dando módulos a la misma altura

Otra técnica que debes tener en cuenta se centra en dar la misma altura a elementos similares. Esto es estéticamente agradable a la vista y ayuda a los visitantes a buscar contenido fácilmente. Hay dos formas comunes de abordar esto:

Usando el igualador de columnas

El primer método es uno que ha estado con Divi durante mucho tiempo. Si deseas crear la misma altura para cada una de las columnas de su fila, puedes habilitar el Igualador de columnas en la configuración de tamaño de su fila. Si estás utilizando colores de fondo de columna, notarás rápidamente la diferencia.

Asignar altura a cada módulo

Otra forma de abordarlo es asignando una altura predefinida a los módulos que estás agregando.

Alinear contenido dentro de un módulo

Una vez que hayas asignado una altura a todos los módulos, también puedes jugar con la alineación del contenido. Para hacerlo, puedes usar un relleno personalizado para determinar manualmente el espacio en blanco en un módulo, o usar unas pocas líneas de código CSS para alinear automáticamente el contenido.

display: flex;

flex-wrap: wrap;

align-content: center;

Eligiendo la altura o anchura del elemento de diseño y el desbordamiento de giro en desplazamiento

Otra cosa interesante que puede hacer con las nuevas opciones de tamaño arrastrables es convertir el desbordamiento en desplazamiento. Esto te ayudará fácilmente a ahorrar espacio en tus páginas y agregará interacción adicional. Hay dos pasos para esto; configura una altura para tu elemento y cambia el desbordamiento en la configuración de visibilidad. Comienza por cambiar la altura de tu módulo o elemento.

Luego, ve a la configuración de visibilidad de tu elemento y cambia el desbordamiento vertical en desplazamiento.

Creación de una sección de pantalla completa en todos los tamaños de pantalla

¡A la siguiente y última sugerencia! ¿Quieres crear una sección de pantalla completa? Abre la sección en tu página, ve a la configuración de tamaño y cambia la altura. Es importante que uses la unidad de ventana de altura para esto para asegurarte de que todo sigue respondiendo en todos los tamaños de pantalla.

• Altura: 100vh

¿Deseas alinear centralmente el contenido en tu sección de pantalla completa? Agregua también las siguientes líneas de código CSS personalizadas al elemento principal de tu sección:

display: flex;

flex-wrap: wrap;

align-content: center;

Conclusiones

En esta publicación, he revisado las nuevas opciones de ancho y altura que vienen con la actualización de tamaño arrastrable de Divi. Te he mostrado cómo funcionan y cómo puedes usarlos para crear un diseño de página responsive para cualquier tipo de sitio web que estés creando. Si tienes alguna pregunta o sugerencia, ¡deja un comentario en la sección de comentarios!

Si quieres aprender más sobre Divi y conseguir más regalos de Divi, apúntate a mi Curso de Divi y te ayudaré de primera mano.