Aunque por lo general no son lo primero que los visitantes notan sobre 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 Divi y sus nuevas opciones de tamaño arrastrables, 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 da la libertad de crear sitios web que respondan muy bien en diferentes tamaños de pantalla.
Ahora, todo esto suena genial, pero ¿cómo se traduce esto en un hermoso sitio web, en términos prácticos? Eso es exactamente de lo que vamos a hablar en este post. Comenzaremos explicando primero 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 nuestros diseños de página se comporten exactamente como queremos.
¡Hagámoslo!
Suscríbete a nuestro canal de Youtube
Antes de usar ancho y ancho máximo en nuestros procesos de diseño diarios, es importante entender 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 de 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 que 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 un diseño receptivo? Para ayudar a explicar la diferencia, vamos a crear 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.
Cambiar el ancho
Cuando cambia el ancho del módulo de texto al 80%, verá que el tamaño del módulo de texto se reduce. También aparece la posibilidad de alinear el módulo como quieras.
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 del ancho máximo. Demostremos eso realmente rápido:
No excedido
Excedido
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 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 que se asignó a la altura.
Cambiar 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 el cambio de altura del módulo de texto en tiempo real.
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. Si no, la altura será ignorada. En los dos GIF a continuación, podrá ver la diferencia en tiempo real.
no excede
supera
Cambiar la altura máxima
La altura máxima toma el control si excede la altura mínima pero es más pequeña que la altura. Si, por ejemplo, asigna un valor más alto a la altura mínima que a la altura máxima, la altura mínima dominará.
Cambiar el ancho máximo de las filas
Una de las mejores prácticas en el 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.
Cambiar el 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 la Configuración general y continuando con la Configuración de diseño. Mantener el ancho máximo persistente ayuda a potenciar la capacidad de respuesta.
Cambiar el ancho máximo para una fila en particular
Con la nueva actualización de tamaño arrastrable , 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.
Dar a los módulos la misma altura
Otra técnica que debes tener en cuenta se centra en dar a elementos similares 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:
Uso del ecualizador de columnas
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 de su fila, puede habilitar el ecualizador de columnas en la configuración de tamaño de su fila. Si está utilizando colores de fondo de columna, notará rápidamente la diferencia.
Asignación de altura a cada módulo
Otra forma de abordarlo es asignando una altura predefinida a los módulos que está agregando.
Alineación de 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 relleno personalizado para determinar manualmente el espacio en blanco en un módulo, o usar algunas líneas de código CSS para alinear automáticamente el contenido.
|
01
02
03
|
display: flex;flex-wrap: wrap;align-content: center; |
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 lo ayudará fácilmente a ahorrar espacio en sus páginas y agregar interacción adicional. Hay dos pasos para esto; configurando una altura para su elemento y cambiando el desbordamiento en la configuración de visibilidad. Comience cambiando la altura de su elemento.
Luego, vaya a la configuración de visibilidad de su elemento y cambie el desbordamiento vertical a desplazamiento.
Creación de una sección de héroe a pantalla completa en todos los tamaños de pantalla
¡Vamos 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 gráfica de altura para asegurarse de que todo siga respondiendo en todos los tamaños de pantalla.
- Altura: 100vh
¿Quiere alinear centralmente el contenido en su sección principal de pantalla completa? Agregue las siguientes líneas de código CSS personalizadas al elemento principal de su sección también:
|
01
02
03
|
display: flex;flex-wrap: wrap;align-content: center; |
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 regalos de Divi, 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 los beneficios de este contenido gratuito.