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


La sección de héroe de tu página generalmente establece la barra 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 increíbles secciones de héroe 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 fila de Divi. ¡También podrás 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.

bordes de fila

Descargar The Hero Section Layout GRATIS

Para poner sus manos en el diseño de la sección de héroe GRATIS, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=d3OTIS1xlqI (/ incrustar)

Suscríbase 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 de inicio: 63%
  • Posición final: 63%

bordes de fila

Espaciado

Pase a la pestaña de diseño y agregue algunos rellenos superiores e inferiores personalizados en diferentes tamaños de pantalla.

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

bordes de fila

Agregar fila # 1

Estructura de columna

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

bordes de fila

Dimensionamiento

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

  • Ancho Máx .: 100%

bordes de fila

Espaciado

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

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

bordes de fila

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. Cargue la imagen que puede encontrar en la carpeta comprimida que pudo descargar al comienzo de este tutorial. Si prefiere usar otra imagen, asegúrese de usar un ancho de 1160 px y una altura de 1385 px.

bordes de fila

Dimensionamiento

Pase a la pestaña de diseño del Módulo de imagen y active la opción "Forzar ancho completo".

  • Forzar ancho completo: sí

bordes de fila

Espaciado

Modifique la configuración de espaciado a continuación.

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

bordes de fila

Frontera

Y agregue "50vw" a la esquina superior derecha del Módulo de imagen.

bordes de fila

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:

  • Hue: 211deg
  • Saturación: 600%
  • Brillo: 67%
  • Contraste: 112%
  • Invertir: 18%

bordes de fila

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

Añadir contenido H1

El segundo módulo que necesitamos en esta fila es un Módulo de texto con algún contenido H1.

bordes de fila

Configuraciones de texto H1

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

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

bordes de fila

Dimensionamiento

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

  • Ancho: 70%

bordes de fila

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)

bordes de fila

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í

bordes de fila

Línea

Cambie el color de la línea a continuación.

  • Color de línea: # 00dcff

bordes de fila

Dimensionamiento

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

  • Divisor de peso: 0.8vw
  • Ancho: 27%

bordes de fila

Agregue 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.

bordes de fila

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de 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

bordes de fila

Dimensionamiento

Modifique también el ancho del módulo.

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

bordes de fila

Agregar módulo de botón a 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.

bordes de fila

Configuraciones de botones

Vaya a la configuración del botón siguiente 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: Abrir sin

bordes de fila

bordes de fila

Espaciado

Agregue algunos valores de relleno personalizados también.

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

bordes de fila

Agregar fila # 2

Estructura de columna

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

bordes de fila

Color de fondo

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

  • Color de fondo: #ffffff

bordes de fila

Dimensionamiento

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

  • Ancho Máx .: 100%

bordes de fila

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

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

bordes de fila

Frontera

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

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

bordes de fila

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: 120 px

bordes de fila

Índice Z

Para asegurarnos de que la fila aparece en la parte superior del Módulo de imagen, vamos a aumentar el índice Z de la fila en la configuración de visibilidad.

  • Índice Z: 10

bordes de fila

Agregar módulo de difusión 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.

bordes de fila

Seleccionar icono

Seleccione un icono de su elección a continuación.

bordes de fila

Configuraciones de iconos

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

  • Color del icono: # 000000
  • Colocación del icono: superior
  • Usar tamaño de fuente de icono: sí
  • Tamaño de fuente del icono: 5vw

bordes de fila

Configuración del texto del título

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

  • 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)
  • Espacio entre letras de título: -1px

bordes de fila

Configuración de 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)

bordes de fila

Clone Blurb Module dos veces y coloque 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.

bordes de fila

Cambiar contenido

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

bordes de fila

Avance

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

bordes de fila

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los bordes de fila integrados de Divi para crear una impresionante sección de héroe que puede usar para su próximo proyecto 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.