Crear una apariencia diagonal para el contenido de su página puede ser un poco difícil de lograr, especialmente en el diseño web receptivo. Pero con Divi Builder, descubrí que en realidad podría ser divertido. Con la combinación correcta de secciones, espaciado de columnas y unidades de longitud VW, puede agregar una apariencia diagonal a cualquier división. Y, sorprendentemente, esta técnica de diseño se adaptará maravillosamente a diferentes tamaños del navegador. En este tutorial, le mostraré cómo crear una apariencia de contenido diagonal (módulos) que se vea muy bien y se ajuste maravillosamente al tamaño de la ventana del navegador.
Vamos a empezar. Escurrir el bulto

El plan de ataque en cada sección que crea en la división tiene la opción de agregar esas maravillosas secciones para agregar hermosos elementos de diseño de transición entre secciones. Esto le permitirá crear fácilmente separadores de diagnóstico para separar sus secciones. Suficientemente simple. El desafío viene cuando desea usar estas secciones para agregar un marco diagonal a su contenido. Debe asegurarse de que el diseño de diagnóstico permanezca consistente sin romper la simetría o la visibilidad del contenido. La clave de este diseño es el uso constante de la unidad de longitud VW para disminuir nuestros separadores y ahorrar nuestros módulos en cada columna. La unidad de longitud VW es relativa al ancho de la ventana / ventana del navegador. Si lo necesita, no dude en obtener más información sobre el uso de unidades con la longitud de la división cuando tiene una oportunidad.
Una vez que nos hemos sentado en el tamaño y el ángulo de las secciones, debemos aplicar el llenado de cada columna de forma incremental, de modo que nuestros módulos coincidan con la progresión diagonal de los separadores. Cualquier imagen o contenido que agregue a cada columna debe tener el mismo tamaño / cantidad para mantener las cosas alineadas y visibles. Crear la sección de encabezado Esta primera sección es bastante simple. El elemento de diseño principal que quiero resaltar es la altura de la sección inferior de la sección 20VW. Esta altura servirá como una dimensión estándar para todos nuestros separadores de secciones a lo largo del diseño. Es importante mantener el mismo tamaño para mantener el diseño diagonal simétrico y paralelo en todo momento. Para crear la primera sección, agregar una nueva página, darle un título e implementar el Visual Builder. Agregue una sección normal con una fila con una columna (o simplemente use la que se muestra de forma predeterminada). Antes de agregar un módulo, actualice la configuración de la sección para tener una imagen de fondo y una superposición. Imagen de fondo: [Ingrese la imagen 1920 x 1080] Color izquierdo del gradiente de fondo: RGBA (87.113.113.0.89) Right -Color Fondo: RGBA (68.112.0.9)
Luego agregue algunos rellenos personalizados con la unidad de longitud VW:

Revestimiento personalizado: 30 VW hacia arriba, 40 VW Down
Guarde la configuración. Ahora agregue un módulo de texto a su turno con una columna con el siguiente contenido:

Diseño diagonal

Servicios creativos
Actualizar la configuración de diseño de la siguiente manera: Fuente Texto: Poppins Texto Texto: 2VW (Escritorio), 20 PX (tableta) Orientación de texto: Centro de texto Color: Abierto Título de título: Poppins Título Font Peso: Semi Dare The Style Font Style: TT Text: TT Texto Encabezado de tamaño: 4VW (escritorio), 30 px (tableta) La distancia entre las letras: 0.2EM El valor de la longitud del espacio entre las letras será hermoso con el valor del tamaño de la fuente VW.

En el módulo de texto, agregue un módulo de botón con la siguiente configuración: Botón de alineación: Color Color Color: Abra estilos personalizados para el botón: Sí Botón Tamaño del botón Botón: 16 PX A LA BOTÓN: 50 PX Botón de fuente: Poppins Reinicio personalizado: 0.2em arriba, 0.2em hacia abajo, 1.5em a la izquierda, 1.5em derecha guarda configuraciones.
Ahora que tenemos todos los elementos de la sección del encabezado en su lugar, regresamos a la configuración de la sección y agregamos el divisor inferior que comenzará nuestro diseño diagonal. Divisores: debajo de divisor estilo: ver captura de pantalla divisor de color: #ffffffff divisor altura: 20VW flip divisor: vertical

Guarde la configuración.

Creando la segunda sección para la siguiente sección, esto no es nada elegante o complicado. Simplemente agregue una nueva sección habitual con una fila con una columna. Asegúrese de que la sección tenga el siguiente llenado personalizado: revestimiento personalizado: 15 VW hacia arriba, 15 VW hacia abajo y luego agregue un módulo de texto en una fila con el siguiente contenido falso:

sobre nosotros

Tu contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo.
Su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo.

Actualice la configuración de diseño de la siguiente manera:
Texto de la fuente: Poppins Rúbrica 2 Fuente: Poppins Título 2 Peso Font: Semi Bold 2 Estilo de fuente: TT Rúbrica 2 Dimensión de texto: 4VW Ancho: 70% (escritorio), 80% (tableta), 100% (teléfono inteligente)
Creando la segunda sección: un aspecto diagonal para imágenes para la siguiente sección, crearemos una sección diagonal con 4 imágenes. Tenga en cuenta que, para que este diseño funcione correctamente, debe determinarse con los valores de la unidad de longitud VW y usar imágenes del mismo tamaño en todo momento. Agregue una nueva sección habitual con una estructura de fila de cuatro columnas. Luego agregue un módulo de imagen a la columna izquierda. Actualice el módulo con la siguiente configuración:
Actualización en Lightbox: Sí
Superposición de la imagen: activado el color del icono superpuesto: #fffffffff superponiendo color: rgba (87.113.113.0.69) Fuerza el ancho completo: sí, muestra el espacio debajo de la imagen: no

Una vez que haya agregado una sola imagen con la configuración, copie el módulo de imagen para crear las otras tres imágenes y colóquelas en cada columna. De esta manera, no tiene que actualizar la configuración para cada uno. Luego suba nuevas imágenes para cada una. Asegúrese de que sus imágenes tengan exactamente las mismas dimensiones (600 x 850 x 850). Ahora actualizaremos la configuración de línea para crear un aspecto de ancho completo y llenar las imágenes con relleno personalizado.
Actualice la configuración de la fila de la siguiente manera: Haga que esta fila se complete el ancho: Sí, use el ancho personalizado del canal: Sí, el ancho del canal: 1 trenza personalizada: 0 px hacia arriba, 0 px izquierda, 0 px columna derecha 1 revestimiento personalizado: 15VW Top (escritorio), 0px Top (tableta) Columna 2 Reinicio personalizado: 10 VW Top (Desktop), 0px Top (Tableta) Columna 3 Reinicio personalizado: Top de 5 VW (Escritorio), 0PX Top (Tablet) Observe cómo las primeras tres columnas tienen una Revestimiento personalizado de arriba que disminuye gradualmente para crear la apariencia diagonal de la imagen.

Guarde la configuración.


Con nuestras imágenes en su lugar, para agregar nuestras secciones para completar el diseño. Acceda a la configuración de la sección y actualiza lo siguiente: divisores: SUS Divisor Estilo: consulte Divisor de captura de pantalla: #FFFFFF LA ALTA DEL DIVISOR: 20VW (escritorio), 0px (tableta), 0px (teléfono inteligente) divisor: separador horizontal: parte inferior: parte inferior Estilo del divisor: vea la captura de pantalla del color color: #ffffff la altura del divisor: 20VW (escritorio), 0px (tableta), 0px (teléfono inteligente) divisor de flip: revestimiento personalizado horizontal: 0 px hacia arriba, 0 px hacia abajo

Nota: Si sus imágenes tienen una dimensión diferente de 600 × 850, deberá ajustar el llenado de la fila para que los separadores se superpongan correctamente. Creando la cuarta sección para crear la Sección Cuatro, simplemente copie la segunda sección y pégala en la tercera sección. Luego actualice el contenido con lo siguiente:

Nuestros miembros

Su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. También puede diseñar todos los aspectos de este contenido en la configuración de diseño del módulo e incluso aplicar la costumbre a este texto en la configuración avanzada del módulo.
Creación de la sección cinco: un aspecto diagonal para los miembros del equipo para la siguiente sección, crearemos una sección para los miembros de la presentación en su página. Para acelerar el proceso de diseño, continuar y copiar la sección tres (con sus imágenes) y pegarla en el lado . Desde la parte inferior de la página. Limpie el módulo de imagen de la cuarta columna y cambie la línea de la fila en tres columnas en lugar de cuatro.

En el módulo de imagen en la primera columna, agregue un módulo de persona.
Mantendremos el contenido de texto predeterminado. Pero continúe y agregue URL de perfil social para que aparezcan en el módulo. Luego elimine la imagen porque usaremos el módulo de imagen de arriba para la imagen de nuestra persona.

En la pestaña Diseño, actualice lo siguiente: Color de texto: ENVISTA PERSONALIZADO ABIERTO: 8% ACTERIOR, 8% ABAJO, 8% IZQUIERDA, 8% CORRECTO
Todavía no podrá ver el texto, pero será visible después de agregar el color de fondo a cada una de las tres columnas. Ahora copie el módulo de persona y agregue debajo de los otros dos módulos de imagen a otras dos columnas

Acceda a la configuración de la fila y actualice lo siguiente: Columna 1 Color de fondo: # 577171 Columna 2 Columna de fondo: 0 PX Down Columna 1 Reinicio personalizado (Desktop): 12 VW arriba, 6VW Down Columna 1 Reinicio personalizado (tableta): 0VW arriba, 0VW Columna de abajo 2 relleno (escritorio): columna de 6VW 2 trenza personalizada (0VW): 0VW UP COLUMNE 3 ENLAJO PERSONALIZADO: 0 PX TOP

Guarde la configuración. No olvide actualizar sus imágenes con otras nuevas. Ahora verifique el resultado final …

Una apariencia diagonal receptiva Este diseño resalta la potencia de la unidad de longitud VW. Debido a que utilicé VW en todo el diseño para liberar el espacio y el tamaño de los elementos, el resultado será perfectamente escamas en todas las dimensiones para el escritorio.

Y en la tableta y el teléfono inteligente, la apariencia se adaptará a un diseño normal y limpio, sin los elementos diagonales.

Los pensamientos finales que diseñan una apariencia diagonal con una división pueden producir resultados increíblemente únicos. El secreto es el uso de la combinación correcta de la altura del separador, el tamaño de la imagen y el espacio que usa la unidad de longitud VW para escalar el diseño en el ancho de su navegador. Esta es simplemente la punta de los posibles modelos que usted puede crear con diferentes módulos, separadores. Espero que esto te inspire a crear tu propia obra maestra geométrica. Espero tener noticias suyas en los comentarios a continuación. ¡Suerte!