Cómo crear un diseño de encabezado elegante con paralelogramos en Divi


Agregar un nuevo y elegante diseño de encabezado a su página es una forma efectiva de sorprender a sus visitantes. Y diseñar un fondo único para tu encabezado es un gran lugar para comenzar. En este tutorial, le mostraré cómo usar Divi para agregar paralelogramos al diseño de su encabezado usando fondos degradados de manera creativa. Esto agrega un bonito elemento de textura al diseño que rompe con el diseño de caja tradicional.

Empecemos.

Vistazo

Aquí hay un vistazo al diseño que construiremos.

diseño de encabezado divi

Que necesitarás

Para crear este diseño, necesitará lo principal:

  1. El tema Divi
  2. The Interior Design Company Acerca del diseño de página (disponible en Divi Builder)

Configurar la página

Para este tutorial, usaré el diseño de página Acerca de la empresa de diseño de interiores en una nueva página. Vaya a su Panel de WordPress y navegue a Páginas> Agregar nuevo. Luego, asigne un título a su página y haga clic para usar Divi Builder. Luego haga clic en el botón para implementar el constructor visual. Seleccione la opción para "Elegir un diseño prefabricado". Luego busque y seleccione el paquete de diseño de diseño de interiores. Elija el diseño de la página Acerca de y, finalmente, haga clic en "Usar este diseño".

diseño de encabezado divi

Una vez que la página se haya cargado en la página, estará listo para comenzar a editar.

Saque el relleno superior de la sección y reemplace la imagen de fondo

Este es un primer paso sencillo. Todo lo que necesita hacer es colocar el cursor sobre la parte superior de la sección de encabezado superior de la página. Verá que el relleno superior actual está establecido en 10%. Simplemente arrastre el relleno hasta el 0%. O siempre puede ir a la configuración de la página y establecer el relleno superior personalizado en 0% también.

diseño de encabezado divi

También puede cambiar la imagen de fondo en este momento, pero no es necesario. Para hacerlo, vaya a la configuración de la sección y cambie la imagen de fondo en la pestaña de contenido. Luego saca el degradado de fondo. Esto ayudará a que el texto (que será blanco) sea más legible en el móvil, ya que habrá texto superpuesto a la imagen de fondo.

diseño de encabezado divi

Ajustar el tamaño y el relleno de la fila

A continuación, vaya a la configuración de la fila y, en la pestaña Diseño, actualice lo siguiente:

Usar ancho personalizado: SÍ
Ancho personalizado: 100%
Relleno personalizado: 0px superior, 10vw inferior

diseño de encabezado divi

Agregar fondo degradado a filas y columnas

Para crear este elegante diseño, vamos a superponer fondos degradados con diferentes posiciones de inicio y parada. Primero necesitamos agregar un fondo degradado a la fila y luego a la columna.

Vaya a la configuración de la fila en la pestaña de contenido y actualice lo siguiente:

Color de degradado de fondo a la izquierda: # 1a1a1a
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Dirección del gradiente: 45 grados
Posición inicial: 60%
Posición final: 0%

diseño de encabezado divi

Degradado de fondo de la columna 1 Color a la izquierda: rgba (244,88,63,0.83)
Columna 1 Gradiente de fondo Color derecho: rgba (255,255,255,0)
Dirección del gradiente de la columna: 45 grados
Posición inicial de la columna: 66%
Posición final de la columna: 0%

diseño de encabezado divi

El degradado naranja que agregamos a la columna se usará para el primer paralelogramo en nuestro diseño de encabezado. Para crear el paralelogramo, necesitamos acortar el degradado naranja con un lado izquierdo que tiene un ángulo de 45 grados para que coincida con el lado derecho. Haremos esto agregando un degradado al módulo de llamada a la acción.

Ajustar el tamaño y el espaciado del texto del módulo de llamada a la acción

Antes de agregar nuestro degradado de fondo al módulo de llamado a la acción, primero marquemos los estilos de texto y espaciado.

Vaya a la configuración del módulo de llamada a la acción y actualice lo siguiente en la pestaña Diseño:

Orientación del texto: izquierda
Color del texto: claro
Tamaño del texto del título: 4.5vw (escritorio), 42px (tableta)
Color del texto del botón: # 1a1a1a
Color de fondo del botón: #ffffff
Ancho: 100%
Restablecer márgenes
Relleno personalizado (escritorio): 10vw en la parte superior, 5% a la izquierda, 45% a la derecha
Acolchado personalizado (tableta): 38% a la derecha
Relleno personalizado (teléfono inteligente): 5% a la derecha

diseño de encabezado divi

Ahora podemos agregar nuestro degradado de fondo a nuestro módulo. Para acelerar este proceso, vaya a la configuración de la fila y haga clic derecho y copie el degradado de fondo de la fila.

diseño de encabezado divi

Luego, vaya a la configuración del módulo de llamada a la acción, debajo de la pestaña de contenido, haga clic con el botón derecho y pegue el degradado de fondo en el módulo. Luego ajuste la posición inicial al 47%.

diseño de encabezado divi

Como puede ver, esto crea el efecto de un rectángulo largo en ángulo que se superpone al fondo degradado oscuro para un elemento de diseño único.

diseño de encabezado divi

Este sería un gran diseño tal como está ahora, pero sigamos adelante y seamos aún más creativos agregando un paralelogramo adicional que se superponga a la parte inferior de nuestra fila.

Creación de un paralelogramo adicional utilizando módulos de texto vacíos

El concepto para esta fase final del diseño del encabezado implica la creación de dos módulos de texto uno al lado del otro, cada uno con un degradado personalizado que, cuando se combinan, muestran una sola "caja" con lados igualmente angulados a la derecha ya la izquierda. Para hacer esto, primero debemos crear una fila de una columna para contener nuestros módulos de texto. Luego, podemos dimensionar y colocar nuestros módulos para que estén uno al lado del otro.

Agregue una fila de una columna directamente debajo de la sección que contiene nuestro módulo de llamado a la acción dentro de la misma sección.

Luego agregue un módulo de texto a la columna de la izquierda y actualice el módulo de texto de la siguiente manera:

Borre todo el contenido en el cuadro de contenido (vamos a utilizar un módulo de texto vacío)
Color de degradado de fondo a la izquierda: rgba (255,255,255,0)
Gradiente de fondo Color derecho: rgba (58,80,107,0.83)
Dirección del gradiente: 45 grados
Posición inicial: 50%
Posición final: 0%

diseño de encabezado divi

Ahora salte sobre la pestaña de diseño y actualice lo siguiente:

Altura de la línea de texto: 0em (esto eliminará cualquier espacio no deseado)
Ancho: 50%
Margen personalizado: -8vw superior, 0px inferior
Acolchado personalizado: 8vw superior, 8vw inferior

diseño de encabezado divi

Guardar ajustes.

Desde el constructor visual, duplique el módulo y actualice la configuración del módulo de texto para el nuevo módulo de la siguiente manera:

Desplácese sobre la vista previa del degradado de fondo y haga clic en el icono "Cambiar degradado" para cambiar los colores del degradado de izquierda a derecha.

diseño de encabezado divi

Alineación del módulo: derecha
Margen personalizado: -16vw superior, 0px inferior

diseño de encabezado divi

Guardar ajustes.

Ahora que tenemos nuestros módulos alineados, podemos ajustar la configuración de las filas para colocar nuestros módulos y cambiar su tamaño para que se ajusten al diseño. Abra la configuración de la fila y actualice lo siguiente:

Alineación de filas: izquierda
Usar ancho personalizado: SÍ
Ancho personalizado: 45%
Margen personalizado: 30% restante
Relleno personalizado: 0px superior, 0px inferior

diseño de encabezado divi

¡Eso lo hace! Mira los resultados finales.

diseño de encabezado divi

Aquí está en tableta y teléfono inteligente.

diseño de encabezado divi

diseño de encabezado divi

Pensamientos finales

Espero que esta técnica de diseño le brinde un poco de inspiración sobre cómo puede usar las opciones de fondo degradado de Divi para incorporar algunos paralelogramos 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, echa un vistazo a algunos secretos de diseño de cuadrícula rota que puede ayudarte en el camino.

Espero tener noticias tuyas en los comentarios.

¡Salud!