Diseñar un diseño de cinco columnas con suficiente espacio para su contenido puede ser un desafío. Sin mencionar el mayor desafío de asegurarse de que se adapte bien a todos los tamaños de navegador. En este tutorial, le mostraré cómo maximizar el espacio necesario para que quepa el contenido dentro de un diseño de cinco columnas sin comprometer el diseño en pantallas más pequeñas (como tabletas y teléfonos inteligentes). Este diseño es ideal para exhibir productos, servicios y proyectos. Incluso agregaré algunas características de diseño adicionales para un poco de inspiración.
Empecemos.
Técnicas de respuesta utilizadas
Use un ancho de fila personalizado y un ancho de medianil
La clave para hacer que un diseño de cinco columnas responda es primero dar a las columnas suficiente espacio para contener el contenido. En el diseño de este tutorial, le daré a la fila que contiene las cinco columnas un ancho personalizado del 89 %. Luego, crearé aún más espacio configurando el ancho de medianera en 1, que básicamente elimina cualquier margen entre las columnas. Para este diseño, es importante usar un ancho personalizado del 89 % en lugar de establecer la fila en ancho completo porque puede establecer el ancho de medianil en 1 y aun así mantener un margen a cada lado de la fila. Verás lo que quiero decir.
Use unidades de longitud vw para el espaciado y el texto del encabezado
Otra clave para mantener las cosas receptivas en un diseño de cinco columnas es espaciar su contenido usando unidades de longitud vw. Y es importante ser coherente con el uso de vw en todo el espacio. Esto asegurará que las cosas se escalen de manera consistente en todos los tamaños de navegador sin que los elementos se rompan o salten mientras ajusta el ancho de su ventana. El uso de la unidad de longitud vw para el texto del encabezado también será clave para que el texto no se rompa en una nueva línea en las ventanas más pequeñas del navegador. Sin embargo, para el texto del encabezado, necesitaremos asignar una unidad px para tableta y teléfono inteligente para acomodar el texto que se reduce demasiado.
Parte 1: Primeros pasos
Todo lo que necesitas para este tutorial es el tema Divi . Usaremos Visual Builder junto con el diseño de la página de inicio de la firma de arquitectura.
Entonces, para comenzar, cree una nueva página, asigne un título a su página e implemente Visual Builder. Seleccione la opción «Elegir un diseño prefabricado». En la ventana emergente cargar desde la biblioteca, seleccione el paquete de diseño de diseño de interiores y luego cargue el diseño de la página de inicio de la firma de arquitectura en su página.
Parte 2: Creación de la sección de título
Para empezar, duplique la segunda sección que contiene las tres notas publicitarias.
Necesitamos dos secciones para este diseño porque la sección superior tendrá dos propósitos. Primero, llevará el título de nuestra sección a continuación. Y segundo, nos permitirá añadir un diseño único mediante un separador de secciones.
Continuemos.
En la sección original (no en el duplicado), elimine las tres notas publicitarias y cambie la estructura de columnas de la fila a una sola columna.
Luego, desplácese hacia abajo hasta la parte inferior del diseño hasta la última sección y copie el módulo de texto en la columna de la izquierda.
Luego péguelo dentro de la fila de una columna que acaba de crear y elimine todo el contenido de texto debajo del encabezado h2 para que solo quede «Construyamos algo».
Parte 3: Personalización de Blurbs para un diseño de cinco columnas
Ahora es el momento de visitar la sección que duplicamos con nuestros tres anuncios publicitarios originales dentro de la fila de 3 columnas. Primero, cambiemos la estructura de filas a un diseño de cinco columnas.
Abra la configuración de publicidad del módulo de publicidad en la primera columna y luego elimine la imagen que se utiliza como icono.
Luego, duplique el módulo de propaganda en la primera columna. Vamos a usar dos anuncios publicitarios por columna para este diseño porque necesitamos el anuncio publicitario superior para mantener nuestra imagen de fondo.
Abra la configuración de la publicidad superior en la primera columna y elimine el texto del cuerpo en el cuadro de contenido.
Agregue una imagen de fondo y un degradado al módulo superior de Blurb
Luego, proporcione a la misma publicidad una imagen de fondo y agregue un degradado para superponer la imagen de la siguiente manera:
Agregar imagen de fondo
Color de degradado de fondo a la izquierda: rgba(255,255,255,0)
Color de degradado de fondo a la derecha: rgba(18,18,18,0.65)
Posición de inicio: 50%
Colocar degradado encima de la imagen de fondo: SÍ
El degradado es necesario para ayudar a que el texto de nuestro título sea más legible con imágenes de fondo más claras.
Use unidades VW para el texto del título y el espaciado
Luego actualice la configuración de la pestaña de diseño de la siguiente manera:
Tamaño del texto del título: 2,7vw (computadora de escritorio), 46px (tableta), 36px (teléfono inteligente)
Espaciado entre letras del título: -3px
Margen personalizado: 1,5vw a la izquierda, 1,5vw a la derecha
Relleno personalizado: 35vw arriba, 2vw abajo, 1vw a la izquierda, 1vw a la derecha
Guardar ajustes.
El acolchado superior personalizado de 35vw es lo que crea el diseño único de imagen vertical larga. Al texto del título se le da un valor de 2.7vw para mantener el texto escalando consistentemente en diferentes anchos de navegador. El resto del espacio tendrá más sentido una vez que agreguemos más espacio a nuestra fila más adelante.
Personalización de la publicidad inferior
Luego abra la configuración del segundo módulo de publicidad debajo de la primera columna y elimine el texto del Título. Luego actualice lo siguiente:
Alineación del texto del cuerpo: Izquierda
Color del texto del cuerpo: #666666
Relleno personalizado: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha
Ahora que tenemos nuestros dos anuncios publicitarios diseñados en nuestra primera columna. Cópielos a ambos y péguelos en cada una de las columnas restantes. Primero deberá eliminar los módulos publicitarios originales en las columnas 2 y 3. Ahora su diseño debería verse así.
Parte 4: Personalización de la configuración de la sección
Ahora actualicemos la configuración de nuestra sección para que tenga un fondo blanco y una sombra de cuadro en la parte inferior que creará un espacio para que nuestra fila se superponga.
Color de fondo: #ffffff
Relleno personalizado: Superior predeterminado, 5vw Inferior, Izquierda predeterminada, Derecha predeterminada
Sombra del cuadro: ver captura de pantalla
Posición vertical de la sombra del cuadro: -200 px
Fuerza de desenfoque de la sombra del cuadro: 0 px
Color de la sombra: #121212
Parte 5: Personalización de la configuración de la fila
Ahora regresemos a nuestra fila y actualicemos la configuración de la siguiente manera:
Imagen de fondo: #ffffff
Alineación de filas: centro
Ancho personalizado: 89 %
Ancho de medianil: 1
Margen personalizado: -10vw
Relleno personalizado: 3vw arriba, 3vw abajo, 1,5vw izquierda, 1,5vw derecha
Sombra de cuadro: ver captura de pantalla
Intensidad de desenfoque de sombra de cuadro: 80 px
Como se mencionó anteriormente en el tutorial, el ancho personalizado y el ancho del medianil son esenciales para crear el espacio de contenido que necesitamos para un diseño de cinco columnas.
En este punto, la estructura básica del diseño está terminada. Así es como se ve el diseño hasta ahora.
Parte 6: Agregar los toques finales
Ahora podemos agregar algunos ajustes de diseño más para terminarlo.
Asombrando los Blurbs
Primero, escalonemos la altura de las imágenes de fondo de la publicidad disminuyendo el relleno de algunas. Abra la configuración del módulo de publicidad superior en la segunda fila y actualice el relleno de la siguiente manera:
Acolchado personalizado: 28vw Top
Y para la publicidad superior en la tercera columna, cambie el relleno superior a 30vw.
Agregue un divisor de sección para agregar textura a su fila de cinco columnas
Una técnica de diseño genial es agregar un divisor de sección superior a la sección directamente encima de la sección con nuestras cinco columnas. El fondo del divisor se mostrará en el fondo de la fila de cinco columnas aunque se superponga a la sección anterior. Para hacer esto, vaya a la sección que contiene el título «Construyamos algo» y dele un divisor de la siguiente manera:
Debido a que el color del divisor es el mismo color del fondo de la sección con una opacidad del 15 %, el divisor no es visible en la sección superior, pero se vuelve visible en la sección inferior y en la fila superpuesta. Y debido a que le dimos a la fila una sombra de cuadro, esto crea un diseño único.
Seguí adelante y actualicé algunas de las imágenes de fondo para tener una mejor idea de cómo se vería el diseño con diferentes imágenes.
Aquí está el diseño final.
Una de las mejores cosas del diseño de cinco columnas es que obtienes un buen diseño de dos columnas en la tableta.
Y así es como se ve en un teléfono inteligente.
Pensamientos finales
Me encanta explorar el poder de Divi para crear diseños receptivos. El desafío de un diseño de cinco columnas es que realmente no hay mucho espacio para el contenido a menos que utilice las técnicas correctas para espaciar su contenido adecuadamente para escalar bien en todos los tamaños de navegador. Espero que este diseño haya sido útil para presentar algunas posibilidades para usar un diseño de cinco columnas para su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!