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 su encabezado es un excelente 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.
Aquí hay un vistazo al diseño que construiremos.
Que necesitarás
Para crear este diseño, necesitará cosas principales:
- El tema Divi
- The Interior Design Company Acerca del diseño de página (disponible desde dentro de Divi Builder)
Configurar la página
Para este tutorial, voy a utilizar la empresa de diseño de interiores Acerca del diseño de página 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 página Acerca de y, finalmente, haga clic en «Usar este diseño».
Una vez que la página se ha cargado en la página, está listo para comenzar a editar.
Retire el relleno superior de la sección y reemplace la imagen de fondo
Este es un primer paso fácil. Todo lo que necesita hacer es colocar el cursor sobre la parte superior de la sección del 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 configurar el relleno superior personalizado al 0% también.
También puede cambiar la imagen de fondo en este punto, pero no es necesario. Para hacer eso, vaya a la sección de configuración y cambie la imagen de fondo debajo de 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 dispositivos móviles, ya que habrá algo de texto superpuesto a la imagen de fondo.
Ajustar tamaño de fila y relleno
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 arriba, 10vw abajo
Agregar fondo degradado a fila y columna
Para crear este elegante diseño, superpondremos fondos degradados con diferentes posiciones de inicio y finalización. Primero debemos 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 izquierdo del degradado de fondo: #1a1a1a
Color derecho del degradado de fondo: rgba(255,255,255,0)
Dirección del degradado: 45 grados
Posición inicial: 60 %
Posición final: 0 %
Color izquierdo del degradado de fondo de la columna 1: rgba(244,88,63,0.83)
Color derecho del degradado de fondo de la columna 1: rgba(255,255,255,0)
Dirección del degradado de la columna: 45 grados
Posición inicial de la columna: 66 %
Posición final de la columna: 0 %
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 tenga 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.
Ajuste del tamaño del texto y el espaciado del módulo de llamada a la acción
Antes de agregar nuestro degradado de fondo al módulo de llamada a la acción, marquemos primero el espaciado y los estilos de texto.
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 top, 5 % izquierdo, 45 % derecho
Relleno personalizado (tableta): 38 % derecho
Relleno personalizado (teléfono inteligente): 5 % derecho
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 con el botón derecho y copie el degradado de fondo de la fila.
Luego vaya a la configuración del módulo de llamada a la acción, en 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%.
Como puede ver, esto crea el efecto de un rectángulo en ángulo largo superpuesto al fondo degradado oscuro para un elemento de diseño único.
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 superpuesto a la parte inferior de nuestra fila.
Creación de un paralelogramo adicional utilizando módulos de texto vacíos
El concepto de 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 un solo «cuadro» con los lados en ángulos iguales a la derecha y a 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 queden uno al lado del otro.
Agregue una fila de una columna directamente debajo de la sección que contiene nuestro módulo de llamada a la acción dentro de 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:
Borre todo el contenido en el cuadro de contenido (vamos a usar un módulo de texto vacío)
Color izquierdo del degradado de fondo: rgba(255,255,255,0)
Color derecho del degradado de fondo: rgba(58,80,107,0.83)
Dirección del degradado: 45 grados
Posición de inicio: 50%
Posición final: 0%
Ahora salta sobre la pestaña de diseño y actualiza lo siguiente:
Altura de línea de texto: 0em (esto eliminará cualquier espacio no deseado)
Ancho: 50%
Margen personalizado: -8vw superior, 0px inferior
Relleno personalizado: 8vw superior, 8vw inferior
Guardar ajustes.
Desde el generador visual, duplique el módulo y actualice la configuración del módulo de texto para el nuevo módulo de la siguiente manera:
Pase el cursor 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.
Alineación del módulo: Derecho
Margen personalizado: -16vw superior, 0px inferior
Guardar ajustes.
Ahora que tenemos nuestros módulos alineados, podemos ajustar la configuración de la fila 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 % a la izquierda
Relleno personalizado: 0 px en la parte superior, 0 px en la parte inferior
¡Eso lo hace! Consulta los resultados finales.
Aquí está en tableta y teléfono inteligente.
Pensamientos finales
Espero que esta técnica de diseño te inspire un poco sobre cómo puedes usar las opciones de fondo degradado de Divi para incorporar algunos paralelogramos elegantes en tu propio diseño de encabezado. Y, por supuesto, este diseño no se limita a los encabezados. Siéntase libre de explorar nuevas áreas en las que este diseño funcionará para usted. Para obtener más inspiración, consulte algunos secretos de diseño de cuadrícula rota que pueden ayudarlo en el camino.
Espero escuchar de usted en los comentarios.
¡Salud!