Cómo crear un diseño de encabezado elegante con paralelogramas en div Div

Agregar un nuevo diseño de encabezado elegante en su página es una forma efectiva de sorprender a sus visitantes. Y diseñar un fondo único para su encabezado es un gran lugar para comenzar. En este tutorial, le mostraré cómo usar la división para agregar paralelogramas al diseño de su encabezado utilizando fondos de gradiente de manera creativa. Esto agrega un hermoso elemento textural al diseño que surge de la apariencia tradicional de la caja. Vamos a empezar. Eche un vistazo al diseño que construiremos.

Lo que necesitará para crear este diseño, necesitará cosas principales:
El tema de Div
Compañía de diseño de interiores en la apariencia de la página (disponible en Divi Builder)
Configure la página para este tutorial, usaré la compañía de diseño de interiores sobre la página Look en una nueva página. Vaya al tablero de WordPress y navegue por las páginas> Agregar un nuevo. Luego, dé el título de su página y haga clic para usar Divi Builder. Luego haga clic en el botón para implementar el Visual Builder. Seleccione la opción “Elija un aspecto prefabricado”. Luego busque y seleccione el paquete de apariencia interior. Elija la página Busque y luego haga clic en “Use este aspecto”.

Una vez que la página se ha cargado en la página, está listo para comenzar a editar. Retire el revestimiento superior de la sección y reemplace la imagen de fondo, este es un primer paso fácil. Todo lo que tiene que hacer es colocar el cursor sobre la parte superior de la sección de encabezado superior. Verá que el relleno superior actual está establecido en 10%. Simplemente tire del relleno hacia abajo al 0%. O siempre puede acceder a la configuración de la página y establecer y el relleno personalizado de arriba a 0%. También puede cambiar la imagen de fondo en este momento, pero no es necesario. Para hacer esto, vaya a la configuración de la sección y cambie la imagen de fondo en la pestaña de contenido. Luego retire el gradiente de fondo. Esto hará que el texto (que será blanco) es más fácil de leer en el móvil, porque habrá un texto que se superpone sobre el fondo.

Ajuste el tamaño de la fila y el revestimiento luego, vaya a la configuración de la fila y debajo de la pestaña de diseño, actualice lo siguiente: Use el ancho personalizado: Sí Ancho personalizado: 100% de revestimiento personalizado: 0px hacia arriba, 10 VW abajo

Agregue el fondo de gradiente en una fila y columna para crear este diseño elegante, se superpondremos a los fondos degradados con diferentes posiciones de inicio y detención. Primero debemos agregar un fondo de gradiente en una fila y luego a la columna. Acceda a la configuración de la fila en la pestaña de contenido y actualice lo siguiente: Color izquierdo del gradiente de fondo: # 1A1A1A Color derecho del fondo Gradiente: RGBA (255,255,255.0) Dirección de gradiente: 45 grados Posición inicial: 60% Posición final: 0%%

Columna 1 Gradiente de papel tapiz Color izquierdo: RGBA (244,88,63,0.83) Columna 1 Color de la columna Derecho: RGBA (255,255,255,0) Dirección del gradiente de columna: 45 grados Posición inicial: 66% Posición final de la columna: 0%% El gradiente naranja que agregamos a la columna se utilizará para el primer paralelogramo en el diseño de nuestro encabezado. Para crear el paralelograma, debemos acortar el gradiente naranja con un lado izquierdo que se inclina a 45 grados para que coincida con el lado derecho. Lo haremos agregando un gradiente al módulo de urgencia. Ajustando el tamaño del texto y el espacio del módulo de exhortación antes de agregar nuestro gradiente de fondo al módulo de acción, primero formemos los estilos de separación y texto.

Acceda a la configuración del módulo de urgencia y actualice lo siguiente en la pestaña de diseño: Orientación del texto: Texto izquierdo Color: Abrir Título del tamaño del texto: 4.5VW (escritorio), 42 PX (tableta) El color del texto del botón: # 1A1A1A Color del fondo: #FFFFFFF ANCHO: 100% Restablecer los bordes de la trenza personalizada (escritorio): 10 VW arriba, 5% izquierda, 45% personalizado derecho (tableta): 38% de trenza personalizada correcta (teléfono inteligente): 5% correcto

Ahora podemos agregar nuestro gradiente de fondo a nuestro módulo. Para acelerar este proceso, vaya a la configuración de la fila y haga clic en el derecho y copie el fondo de la fila.
Luego acceda a la configuración del módulo de urgencia, en la pestaña de contenido, y haga clic en el derecho y pegue el gradiente de fondo en el módulo. Luego ajuste la posición inicial al 47%.


Como puede ver, esto crea el efecto de un rectángulo de ángulo largo que se superpone en el fondo de degradado oscuro para un elemento de diseño único. Este sería un gran diseño como es ahora, pero vamos más lejos y seamos aún más creativos agregando un adicional adicional. Paralelograma que se superpone en la parte inferior de nuestra fila. Creación de un paralelogramo adicional utilizando módulos de texto vacíos El concepto para este diseño de encabezado final implica la creación de dos módulos de texto uno al lado del otro, cada uno con un gradiente personalizado que, cuando se combina, muestra una sola “caja” con lados igualmente angulares a la derecha a la derecha. E izquierda. Para hacer esto, primero debemos crear una fila con una columna para mantener nuestros módulos de texto. Luego podemos dimensionar y colocar nuestros módulos para pararse uno al lado del otro.

Agregue una fila con una columna directamente debajo de la sección que contiene nuestro módulo de exhortación en la misma sección. Luego agregue un módulo de texto a la columna izquierda y actualice el módulo de texto de la siguiente manera: Elimine todo el contenido en el cuadro de contenido (usaremos un módulo de texto vacío) Color izquierdo del gradiente de fondo: RGBA (255.255.255.0) Color derecho de Antecedentes de gradiente: RGBA (58,80,107,0,83) Dirección de gradiente: 45 grados Posición inicial: 50% Posición final: 0%

Ahora salte sobre la pestaña de diseño y actualice lo siguiente: La altura de la línea de texto: 0em (esto eliminará cualquier espacio no deseado) Ancho: 50% Margen personalizado: -8VW arriba, 0px Down Lining personalizado: 8VW, 8VW abajo

Guarde la configuración. Desde Visual Builder, copie el módulo y actualice la configuración del módulo de texto para el nuevo módulo de la siguiente manera: Coloque el cursor sobre la vista previa del gradiente de fondo y haga clic en el icono “Gradiente de conmutación” para cambiar los colores de izquierda a derecha. Personalizado:: -16VW arriba, 0px hacia abajo
Guarde la configuración. Ahora que tenemos los módulos alineados, podemos ajustar la configuración para colocar nuestros módulos y podemos cambiarlos para que coincidan con el diseño. Abra la configuración de la fila y actualice lo siguiente:

Alineación de filas: a la izquierda Use ancho personalizado: sí Ancho personalizado: 45% Margen personalizado: 30% permanece alineación personalizada: 0 px arriba, 0 px abajo

¡Eso es todo! Verifique los resultados finales.

Aquí está la tableta y el teléfono inteligente.

Pensamientos finales Espero que esta técnica de diseño le brinde una pequeña inspiración sobre cómo puede usar las opciones de fondo de gradiente Div para incorporar algunos paralelogramas elegantes en su propio diseño de encabezado. Y, por supuesto, este diseño no se limita a los encabezados. Siéntase libre de explorar nuevas áreas donde este diseño funcionará para usted para obtener más inspiración, consulte algún diseño de red que pueda ayudarlo en todo momento.
Espero tener noticias suyas en los comentarios. ¡Suerte!