Cómo diseñar una “vitrina” con cinco columnas receptivas con div Div

Diseñar cinco columnas con suficiente espacio para su contenido puede ser un desafío. Sin mencionar el mayor desafío de asegurarse de que se ajuste maravillosamente a todos los tamaños del navegador. En este tutorial, le mostraré cómo maximizar el espacio necesario para adaptarse al contenido en cinco columnas, sin comprometer el tamaño más pequeño de la pantalla (como la tableta y el teléfono inteligente). Este diseño es ideal para presentar productos, servicios y proyectos. Incluso lanzaré algunas características de diseño de bonificación para una pequeña inspiración.
Vamos a empezar. Tirar del ojo



Las técnicas receptivas utilizadas usan un ancho de línea personalizado y un ancho de la clave para que cinco columnas sean receptivas es dar a las columnas suficiente espacio para contener contenido. Al diseñar este tutorial, daré la fila que contiene las cinco columnas un ancho personalizado al 89%. Luego crearé aún más espacio estableciendo el ancho de la canaleta en 1, lo que prácticamente elimina cualquier margen entre las columnas. Para este diseño, es importante usar un ancho personalizado del 89% en lugar de establecer un ancho completo, ya que puede establecer el ancho de canalones en 1 y mantener un margen a cada lado de la fila. Verás a qué me refiero.
Use unidades de longitud VW para espaciar y envíe un mensaje de texto al título Otra clave para mantener la sensibilidad de las cosas en un aspecto de cinco columnas es el espacio de su contenido utilizando unidades de longitud VW. Y es importante estar de acuerdo con el uso de VW en todo su espacio. Esto asegurará que mantenga constantes las dimensiones de su navegador sin hacer que los elementos se rompan o saltarán mientras se ajusta el ancho de la ventana. El uso de la unidad de longitud VW para el texto del encabezado también será la clave para que el texto no se divida en una nueva línea en las ventanas del navegador más pequeña. Sin embargo, para el texto del encabezado, necesitaremos asignar una unidad PX para la tableta y el teléfono inteligente para adaptarse al texto que se encoge demasiado. Utilizaremos Visual Builder junto con el aspecto de la página de inicio de la compañía de arquitectura. Entonces, para comenzar, crear una nueva página, dar un título a su página e implementar Visual Builder. Seleccione la opción “Elija un aspecto prefabricado”. En la ventana emergente emergente de la biblioteca, seleccione el paquete de diseño interior y luego cargue el inicio del inicio con la compañía arquitectónica en su página.
Parte 2: Creación de la sección de título para empezar, copie la segunda sección que contiene las tres borrachas.

Necesitamos dos secciones para este diseño, porque la sección superior tendrá dos objetivos. En primer lugar, tendrá el título de nuestra sección a continuación. Y en segundo lugar, nos permitirá agregar un diseño único usando un separador de sección. Continuemos. En la sección original (no el duplicado), borre las tres borrachas y cambie la estructura de la fila en una sola columna. Luego, corra hacia abajo hasta la parte inferior de la apariencia a la última sección y copie el módulo de texto desde la columna izquierda.

Luego, pegue en la fila que acaba de crear y elimine todo el contenido del texto bajo el título H2, para que solo quede para “construir algo”.

Parte 3: Personalización de borrones para cinco columnas ahora es el momento de visitar la sección que copié con los tres borrones originales dentro de la fila con 3 columnas. En primer lugar, para cambiar la estructura de la fila en cinco columnas.

Abra la configuración de la propaganda del módulo de propaganda en la primera columna y luego elimine la imagen utilizada como un icono.

Luego copie el módulo de propaganda desde la primera columna. Usaremos dos borrones en la columna para este diseño, porque necesitamos la propaganda superior para mantener nuestra imagen de fondo.

Abra la configuración para la propaganda superior en la primera columna y elimine el texto del cuerpo en el cuadro de contenido.

Agregue una imagen de fondo y un gradiente al módulo blurbi hacia arriba, luego le dé a la misma imagen de fondo un fondo y agregue un gradiente para superponer la imagen de la siguiente manera: Agregue una imagen de fondo del gradiente de fondo: RGBA (255,255,255, 0) el color correcto de El gradiente de fondo: RGBA (18,18,18,0,65) Posición inicial: 50% Coloque el gradiente sobre la imagen de fondo: El Dagradient es necesario para ayudar a que nuestro título se vuelva más legible con imágenes de fondo más abierto. Use las unidades VW para el texto y el espacio del título

Luego actualice la configuración de la hoja de diseño de la siguiente manera: Título Tamaño del texto: 2.7VW (escritorio), 46px (tableta), 36px (teléfono inteligente) Cartas de título: -3px Margen personalizado: 1.5VW izquierda, 1.5VW Right Personalized: 35VW UP, 2VW Abajo, 1 VW a la izquierda, 1 VW derecha guarda la configuración. El revestimiento superior personalizado de 35VW es el que crea un diseño de imagen vertical largo único. El texto del título recibe un valor de 2.7VW para mantener la escala de texto constantemente en diferentes anchos del navegador. El resto del espacio tendrá más sentido una vez que agregemos más espacio en nuestro turno más tarde.

Personalización de la propaganda inferior y luego abra la configuración del segundo módulo de desenfoque debajo de la primera columna y elimine el texto del título. Luego actualice lo siguiente: Alineación del texto del cuerpo: Texto del cuerpo izquierdo Color: # 666666 Fining personalizado: 2VW hacia arriba, 2VW hacia abajo, 2 VW a la izquierda, 2 VW a la derecha

Ahora que tenemos las dos borrones diseñadas en nuestra primera columna. Copie ambos y péguelos a cada una de las columnas restantes. Primero primero tendrá que eliminar los módulos de propaganda originales en las columnas 2 y 3. Ahora, su diseño debería verse así. Parte 4: Personalizar la configuración de la sección Ahora actualice nuestra configuración de sección para tener un fondo blanco y una sombra de la caja en La parte inferior, que creará un espacio para nuestro turno para superponer.

Color de fondo: #FFFFFFF Fraida personalizada: Predeterminado hacia arriba, 5VW abajo, Predeterminado izquierdo, Caja derecha Sombra: Consulte Captura de pantalla Sombra Publicación vertical: -200px Potencia de la sombra de la caja: 0 PX Color de sombra: # 121212

Parte 5: Personalización de la configuración ordinaria ahora para regresar en nuestro turno y actualizar la configuración de la siguiente manera: Imagen de fondo: #FFFFF Fila Alineación: Centro de tierra personalizado: 89% LUGAB ANCHO: 1 Margen personalizado: -10VW ENLINEO PERSONALIZADO: 3VW arriba, 3VW Abajo, 1.5VW a la izquierda, 1.5VW Box Right Box Shadow: Vea la captura de pantalla El poder de la sombra de la caja: 80 PX

Como se mencionó anteriormente en el tutorial, el ancho personalizado y el ancho de la canaleta son esenciales para crear el espacio de contenido que necesitamos para cinco columnas.

En este momento, se completa la estructura básica del diseño. Así es como se ve el diseño hasta ahora.
Parte 6: Agregar los últimos toques Ahora podemos agregar otros cambios de diseño para completar. Al escandalizar las borrones primero, debemos elevar la altura de las imágenes de fondo, disminuyendo el revestimiento de algunos. Abra la configuración del módulo de la propaganda superior en segundo lugar y actualice el revestimiento de la siguiente manera: Reinicio personalizado: 28VW superior y para el desenfoque superior en la tercera columna, cambie el relleno superior a 30 VW. Agregue un divisor de sección para agregar la textura a su turno con cinco columnas, una técnica de diseño interesante es agregar un separador de sección superior a la sección sobre la sección con las cinco columnas. El fondo del divisor se mostrará en el fondo de la fila con cinco columnas, incluso si se superpone a la sección anterior. Para hacer esto, vaya a la sección que contiene el título “construir algo” y darle un separador de la siguiente manera: Debido a que el color del divisor es del mismo color 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 a continuación y en la fila superpuesta. Y debido a que di la sombra de la línea, esto crea un diseño único. Continué y actualicé algunas de las imágenes de fondo para tener una mejor idea de cómo sería el diseño con diferentes imágenes. Aquí está el diseño final.

Una de las cosas maravillosas de la aparición en cinco columnas es que obtienes un buen aspecto en dos columnas en la tableta.
Así es como se ve en su teléfono inteligente.