Uso de las nuevas opciones de altura y ancho de Divi para crear un diseño receptivo


Aunque por lo general no son lo primero que los visitantes notan acerca de su sitio web, las propiedades CSS de ancho y alto ayudan a mantener su sitio web unido y con un aspecto increíble. Y ahora, con las nuevas opciones de tamaño arrastrables de Divi, puedes controlar literalmente el ancho, el ancho máximo, la altura mínima, la altura y la altura máxima de cada elemento dentro del propio constructor. Esto le brinda la libertad de crear sitios web que respondan de manera óptima en diferentes tamaños de pantalla.

Ahora, todo esto suena genial, pero ¿cómo se traduce esto en un hermoso sitio web, prácticamente hablando? Eso es exactamente de lo que vamos a hablar en esta publicación. Primero, comenzaremos explicando la diferencia entre todas las propiedades de alto y ancho disponibles dentro de la configuración de Divi y luego las usaremos en diferentes escenarios para hacer que los diseños de nuestras páginas se comporten exactamente de la manera que queremos.

¡Hagámoslo!

(incrustar) https://www.youtube.com/watch?v=ft6PbYb2SI8 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Entender la diferencia entre propiedades

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

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

Anchura máxima – 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 Mientras permanece 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 un diseño receptivo? Para ayudar a explicar la diferencia, crearemos una comparación visual habilitando Visual Builder en una página nueva. Agregaremos una sección con una fila de una columna. Luego, inserte un módulo de texto con algo de contenido, un color de fondo y algo de relleno personalizado.

diseño de respuesta

Cambiar el ancho

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

diseño de respuesta

Cambiar 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 de ancho máximo. Demostremos eso muy rápido:

No excedido

diseño de respuesta

Excedido

diseño de respuesta

Además del ancho y el ancho máximo, también podrá 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 a partir 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, dominará la entrada de altura mínima.

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 excede el valor que se asignó a la altura.

Cambio de la altura mínima

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

diseño de respuesta

Cambiar la altura

Si está combinando una altura mínima y una altura, deberá asegurarse de que la altura sea mayor que la altura mínima. De lo contrario, se ignorará la altura. En los dos GIF siguientes, podrá ver la diferencia en tiempo real.

No excede

diseño de respuesta

Excede

diseño de respuesta

Cambiar la altura máxima

La altura máxima asume el control si supera la altura mínima pero es menor 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 de las filas

Una de las mejores prácticas en diseño web es decidir 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.

Cambio del ancho máximo global

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

diseño de respuesta

Cambiar el ancho máximo de una fila en particular

Con la nueva actualización de tamaño que se puede arrastrar, también tiene la oportunidad de definir individualmente un ancho máximo para las filas. Esto es excelente para las excepciones en las que tiene más sentido ir con un ancho máximo más alto.

diseño de respuesta

Dar a los módulos 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:

Usar el ecualizador de columna

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

diseño de respuesta

Asignar altura a cada módulo

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

diseño de respuesta

Alinear contenido dentro de un módulo

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

display: flex;
flex-wrap: wrap;
align-content: center;

diseño de respuesta

Elegir la altura o el ancho del elemento de diseño y convertir el desbordamiento en desplazamiento

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

diseño de respuesta

Luego, vaya a la configuración de visibilidad de su elemento y cambie el desbordamiento vertical en desplazamiento.

diseño de respuesta

Creación de una sección de héroe a pantalla completa en todos los tamaños de pantalla

¡Pasemos al siguiente y último consejo! ¿Quieres crear una sección de héroe a pantalla completa? Abra la sección de héroe en su página, vaya a la configuración de tamaño y cambie la altura. Es importante que utilice la unidad de ventana de altura para asegurarse de que todo siga respondiendo en todos los tamaños de pantalla.

  • Altura: 100vh

diseño de respuesta

¿Quieres alinear de forma centralizada el contenido en tu sección de héroe en pantalla completa? Agrega 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;

diseño de respuesta

Pensamientos finales

En esta publicación, hemos repasado las nuevas opciones de ancho y alto que vienen con la actualización de tamaño arrastrable de Divi. Le mostramos cómo funcionan y cómo puede usarlos para crear un diseño de página receptivo para cualquier tipo de sitio web que esté creando. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.