Cómo usar creativamente los bordes de las filas de Divi para crear un impresionante diseño de sección de héroe

La sección de héroe de su página generalmente establece el listón para el resto de la página. También juega un papel importante en la primera impresión de sus visitantes. Con Divi, puedes crear secciones de héroes increíbles usando solo las opciones integradas. Ahora, si estás buscando una manera de hacer que tu próxima sección de héroes se destaque, te encantará esta publicación. Le mostraremos cómo crear un diseño de sección de héroe efectivo y hermoso mientras juega con los bordes de las filas de Divi. ¡También podrá descargar el archivo JSON de diseño de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Descarga el diseño de la sección Hero GRATIS

Para poner sus manos en el diseño de la sección de héroe GRATUITO, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado

Continúe y cree una nueva página o abra una existente. Agregue una nueva sección regular, abra la configuración de la sección y agregue el siguiente fondo degradado:

• Color 1: # 7e2dff
• Color 2: #ffffff
• Posición inicial: 63%
• Posición final: 63%

Espaciado

Vaya a la pestaña de diseño y agregue un relleno superior e inferior personalizado en diferentes tamaños de pantalla.

• Acolchado superior: 6vw (escritorio), 13vw (tableta), 32vw (teléfono)
• Acolchado inferior: 6vw (escritorio), 10vw (tableta), 20vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique el ancho máximo.

• Ancho máximo: 100%

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de imagen a la columna

Cargar imagen

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen. Sube la imagen que puedes encontrar en la carpeta comprimida que pudiste descargar al principio de este tutorial. Si prefiere usar otra imagen, asegúrese de usar un ancho de 1160px y un alto de 1385px.

Dimensionamiento

Vaya a la pestaña de diseño del Módulo de imagen y habilite la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Espaciado

A continuación, modifique la configuración de espaciado.

• Mostrar espacio debajo de la imagen: No
• Acolchado izquierdo: 17vw

Frontera

Y agregue '50vw' en la esquina superior derecha del Módulo de imagen.

Filtros

También estamos cambiando los colores de nuestra imagen para que coincidan con nuestra paleta de colores. Abra la configuración de filtros y aplique la siguiente configuración:

• Tono: 211 grados
• Saturación: 600%
• Brillo: 67%
• Contraste: 112%
• Invertir: 18%

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H1

El segundo módulo que necesitamos en esta fila es un módulo de texto con algo de contenido H1.

Configuración de texto H1

Vaya a la pestaña de diseño y cambie la configuración de texto H1 en consecuencia:

• Fuente de encabezado: Montserrat
• Peso de la fuente del encabezado: Semi negrita
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado: 5vw
• Espaciado entre letras del encabezado: -2px

Dimensionamiento

Modifique el ancho del módulo a continuación.

• Ancho: 70%

Espaciado

Y cree una superposición entre este y el módulo anterior utilizando un margen superior negativo.

• Margen superior: -57vw (escritorio), -75vw (tableta), -91vw (teléfono)

Agregar módulo divisor a la columna

Visibilidad

El siguiente módulo que necesitamos es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

A continuación, cambie el color de la línea.

• Color de línea: # 00dcff

Dimensionamiento

Modifique también la configuración de tamaño.

• Peso del divisor: 0.8vw
• Ancho: 27%

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido de párrafo

Continúe agregando un nuevo módulo de texto con algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Open Sans
• Color del texto: #ffffff
• Tamaño del texto: 1vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
• Altura de la línea de texto: 1.8em

Dimensionamiento

Modifique también el ancho del módulo.

• Ancho: 53% (escritorio), 65% (tableta), 100% (teléfono)

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Vaya a la configuración del botón a continuación y cambie el estilo de su botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 000000
• Ancho del borde del botón: 0px
• Fuente del botón: Open Sans

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior: 1vw
• Acolchado inferior: 1vw
• Acolchado izquierdo: 4vw
• Acolchado derecho: 4vw

Agregar fila n. ° 2

Estructura de la columna

¡A la siguiente fila! Elija la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila. Cambie el color de fondo a blanco.

• Color de fondo: #ffffff

Dimensionamiento

Pase a la pestaña de diseño y aumente el ancho máximo.

• Ancho máximo: 100%

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado superior: 3vw
• Acolchado inferior: 8vw
• Acolchado izquierdo: 7vw
• Acolchado derecho: 7vw

Frontera

Continuaremos agregando '20vw' a las esquinas inferior izquierda y superior derecha de la fila. También agregaremos un borde superior usando la siguiente configuración:

• Ancho del borde superior: 1.2vw
• Color del borde superior: # 00dcff

Sombra de la caja

También estamos agregando una sombra de cuadro sutil para crear profundidad en la página.

• Fuerza de desenfoque de sombra de caja: 120px

Índice Z

Para asegurarnos de que la fila aparezca en la parte superior del Módulo de imagen, aumentaremos el índice Z de la fila en la configuración de visibilidad.

• Índice Z: 10

Agregar módulo Blurb a la columna 1

Agregar contenido

Una vez que haya completado la configuración de la fila, puede agregar un módulo Blurb a la primera columna de la fila. Ingrese algún contenido de su elección.

Seleccionar icono

A continuación, seleccione un icono de su elección.

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono.

• Color del icono: # 000000
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 5vw

Configuración del texto del título

Modifique también la configuración del título.

• Fuente del título: Montserrat
• Peso de la fuente del título: negrita
• Alineación del texto del título: centro
• Color del texto del título: # 000000
• Tamaño del texto del título: 1.1vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
• Espaciado de letras de título: -1px

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Alineación del texto del cuerpo: centro
• Tamaño del texto del cuerpo: 0.8vw (escritorio), 1.6vw (tableta), 2vw (teléfono)
• Altura de la línea del cuerpo: 1.5vw (escritorio), 3vw (tableta y teléfono)

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya completado el Módulo Blurb en la columna 1, puede clonarlo dos veces y colocar los duplicados en las dos columnas restantes de la fila.

Cambiar contenido

¡Asegúrese de cambiar el contenido de ambos duplicados y listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los bordes de fila incorporados de Divi para crear una sección de héroe impresionante que puede usar para su próximo proyecto de Divi. Hemos recreado un hermoso ejemplo desde cero y también pudo descargar el archivo JSON de forma gratuita. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.