Uso de nuevas opciones para la altura y el ancho de Div

Aunque generalmente no soy lo primero que los visitantes observan sobre su sitio, el ancho y la altura de las propiedades de CSS lo ayudan a mantener su sitio unido y se ve bien. Y ahora, con las nuevas opciones de dimensionamiento deslizante de la división, puede controlar literalmente el ancho de cada elemento, el ancho máximo, la altura mínima, la altura y la altura máxima dentro del constructor. Esto le brinda la libertad de crear sitios web que sean muy receptivos en diferentes tamaños de pantalla. Ahora, todo esto suena genial, pero ¿cómo se traduce esto en un sitio hermoso, prácticamente hablando? Esto es exactamente de lo que hablaremos en esta publicación. Comenzaremos primero explicando la diferencia entre todas las propiedades de la altura y el ancho disponibles en la configuración de DIV y luego las usaremos en diferentes escenarios para hacer que nuestras páginas sean exactamente como queramos.
¡Vamos a eso! Suscríbase a nuestro canal de YouTube Comprender la diferencia entre las propiedades antes de usar el ancho y el ancho máximos en nuestros procesos de diseño diario, es importante comprender lo que hacen. Esta es la explicación teórica: Ancho: el ancho real de un elemento de diseño. Si esto es 100%, es tan ancho como lo permite el contenedor. El ancho generalmente se expresa usando%. Cuanto menor sea el porcentaje, más estrecho es el elemento de diseño. Ancho máximo: el ancho máximo tiene potencia sobre el ancho. Si el ancho de un módulo se establece en 100%, se adherirá a ese valor siempre que permanezca por debajo del valor del ancho máximo. Una vez que se alcanza el valor del ancho máximo, no lo excederá.
Pero, ¿cómo se traduce esto a través del diseño receptivo? Para explicar la diferencia, crearemos una comparación visual activando Visual Builder en una nueva página. Agregaremos una sección con una fila con una columna. Luego, ingrese un módulo de texto con un determinado contenido, un color de fondo y un relleno personalizado. El verificador del ancho Al cambiar el ancho del módulo de texto al 80%, verá el módulo de texto reducido. La posibilidad de alinear el módulo que desee.

Cambiando el ancho máximo Al cambiar el ancho máximo, el valor asignado comenzará a aplicarse solo desde el momento en que el ancho real excede el valor del ancho máximo. Probemos que es muy rápido:

No ha sido desactualizado
SOBRE

Además del ancho y el ancho máximos, podrá encontrar la altura mínima, la altura y la altura máxima en la configuración de dimensionamiento de cada elemento. Esto es lo que en teoría puede comprender en estos términos: altura mínima: la altura mínima que desea asignar a un artículo. Si este valor es mayor que la altura de entrada, la entrada a la altura mínima dominará. Altura: esto define la altura real que desea asignar al artículo. Altura máxima: este valor se convierte en la nueva altura una vez que la altura excede el valor que se ha asignado a la altura.

Cambiando la altura mínima Si cambia la altura mínima de un elemento, ese valor se convierte en la norma. Cuando lo pruebe, verá automáticamente la altura del módulo de texto de tiempo real modificado.
Cambiando la altura Si combina una altura y altura mínima, deberá asegurarse 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á ver la diferencia en tiempo real. No supera

Cambiar la altura máxima La altura máxima se hace cargo si excede la altura mínima, pero es más pequeña que la altura. Si, por ejemplo, atribuyó un valor de la altura mínima que 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 el diseño web es elegir un cierto ancho máximo para todo su sitio web. Esto ayuda a mantener a todos receptivos en diferentes tamaños de pantalla. También ayuda a los diseñadores a crear marcos precisos.

Cambiar el ancho global máximo puede o no saber que puede establecer un cierto ancho predeterminado máximo para su contenido en la costumbre temática accediendo a la configuración general y continuando a la configuración de apariencia. Mantener el ancho máximo persistente ayuda a la capacidad de reacción.
Cambie el ancho máximo para una fila en particular con la nueva actualización de dimensionamiento deslizante, también tiene la posibilidad de definir 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.

Ofrecer módulos a la misma altura Otra técnica que debe recordar se centra en otorgar elementos similares a la misma altura. 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:

El uso del ecualizador de columna El primer método es uno que ha sido con mucho tiempo. Si desea crear la misma altura para cada una de las columnas en su turno, puede activar el ecualizador de la columna en la configuración de dimensionamiento de su turno. Si usa los colores de fondo de la columna, notará rápidamente la diferencia. Atacar el ataque de la diferencia. Altura de cada módulo Otra forma de acercarse es asignando una altura predefinida a los módulos que agregue.

Alineando el contenido en un módulo después de asignar una altura de todos los módulos, también puede jugar con la alineación de contenido. Para hacer esto, puede usar el relleno personalizado para determinar manualmente el espacio en blanco en un módulo, o puede usar algunas líneas de código CSS para alinear automáticamente el contenido.
Pantalla: Flex;

Flex-Wrap: envoltura;

Alinear con el contador: Centro;
Elegir la altura del elemento de diseño o el ancho y transformar el desbordamiento en desplazamiento, otra cosa interesante que puede hacer con las nuevas opciones de dimensionamiento deslizante es la transformación en el desplazamiento. Esto lo ayudará fácilmente a ahorrar espacio en sus páginas y agregar interacción adicional. Hay dos pasos a este respecto; Establezca una altura para su artículo y cambie la superación en la configuración de visibilidad. Comience cambiando la altura de su artículo.
Luego acceda a la configuración de visibilidad de su artículo y cambie su desbordamiento vertical en el desplazamiento.
¡Creando una sección de pantalla completa Hero en todos los tamaños de pantalla al siguiente y último consejo! ¿Le gustaría crear una sección de héroe de pantalla completa? Abra la sección Hero en su página, acceda a la configuración del tamaño y cambie la altura. Es importante usar la unidad de visualización en altura para garantizar que todo permanezca receptivo en todos los tamaños de pantalla. Alteza: 100 VH

¿Quieres alinear centralmente el contenido en la sección Hero en la pantalla completa? Agregue las siguientes líneas de código CSS personalizadas al elemento principal de su sección: Display: Flex;

Flex-Wrap: envoltura;

Alinear con el contador: Centro;
Pensamientos finales En esta publicación, hemos pasado por encima de las nuevas opciones de ancho y altura que vienen con la actualización de una dimensión deslizante. Le mostré cómo funciona y cómo puede usarlos para crear un diseño de página adaptable para cualquier tipo de sitio web que cree. 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.