Cómo usar creativamente los bordes de las filas de división para crear un diseño increíble de la sección de héroes

La sección de héroes de su página generalmente establece la barra para el resto de la página. Además, juega un papel importante en la primera impresión de sus visitantes con Div, puede crear secciones de héroes increíbles que usan solo las opciones construidas. Ahora, si está buscando una manera de hacer que la próxima sección de héroes se destaque, le gustará esta publicación. Te mostraremos cómo crear un diseño de diseño de héroes eficiente y hermoso mientras juegas con los bordes de Div. ¡Podrá descargar el archivo de diseño JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.

Descargue la sección El diseño de la sección de héroe de forma gratuita para poner su mano en el aspecto gratuito de la sección Hero, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Suscríbase a nuestro canal de YouTube Agregue un nuevo fondo de gradiente, continúe y cree una nueva página o abra una existente. Agregue una nueva sección habitual, abra la configuración de la sección y agregue los siguientes antecedentes de gradiente:
Color 1: # 7e2dff
Color 2: #ffffff
Posición inicial: 63%
Posición final: 63%
Espacio ir a la pestaña de diseño y agregar algunos forros personalizados en la parte superior e inferior en diferentes tamaños de pantalla.

Revelaje superior: 6VW (escritorio), 13VW (tableta), 32VW (teléfono)
Bajo forro: 6VW (escritorio), 10VW (tableta), 20VW (teléfono)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie el ancho máximo.

Ancho máximo: 100%
Espacio eliminar y el llenado predeterminado e inferior de la fila.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de imagen a la carga de columna. ¡La 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 ZIP que puede 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. Dimension Switch al diseño del módulo de diseño y active la opción “Forzar el ancho completo”.

Fuerza el ancho completo: si

Extienda y luego cambie la configuración de espaciado.
Muestra el espacio debajo de la imagen: no

Junta izquierda: 17 VW
Borde y agregue “50VW” a la esquina superior derecha del módulo de imagen.
Los filtros también cambian los colores de nuestra imagen para que coincidan con nuestra paleta de colores. Abra la configuración del filtro y aplique la siguiente configuración:

Sombra: 211 grados

Saturación: 600%
Brillo: 67%
Contraste: 112%
Reversa: 18%
Agregue el módulo de texto no. 1 En la columna Agregar contenido H1 El segundo modo que necesitamos en esta fila es un módulo de texto con un contenido H1.
Configuración de texto H1 Cambiar a la pestaña Diseño y cambiar la configuración de texto H1 en consecuencia:

Título de la fuente: Montserrat

Título Fuente de peso: semi audac
Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 5VW
Distancia entre las letras del encabezado: -2 PX
Dimensión Modifique el ancho del módulo a continuación.
Ancho: 70%

Espaciado y crea una superposición entre este y el módulo anterior usando un margen superior negativo.
Margen superior: -57VW (escritorio), -75VW (tableta), -91VW (teléfono)

Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”. Divisor: sí
La línea cambia el color de la línea aún más.

Color de línea: # 00dcff

Dimensión Modifique la configuración de tamaño.

Peso del divisor: 0.8VW
Ancho: 27%

Agregue el módulo de texto no. 2 En la columna Agregar contenido de párrafo Continúe agregando un nuevo módulo de texto con un contenido de párrafo.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Abrir sans

Color de texto: #ffffff

Tamaño de texto: 1VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
La altura de la línea de texto: 1.8em
Dimensión Modifique el ancho del módulo.
Ancho: 53% (escritorio), 65% (tableta), 100% (teléfono)
Agregue un módulo de botón a la columna Agregue una copia a continuación y el último módulo que necesitamos en esta fila es un módulo de botón. Agregue una copia de su elección.

Configuración Acceso al botón La siguiente configuración de botones y cambia el estilo del botón de acuerdo con:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón de fuente: Abrir sans
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 1VW
Revestimiento inferior: 1 VW


Junta izquierda: 4VW
Junta derecha: 4VW
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Elija la siguiente estructura de columnas:
Color de fondo sin agregar módulos, abra la configuración de la fila. Cambie el color de fondo a blanco. Fondo de pantalla: #fffff
Dimension Switch a la pestaña de diseño y aumente el ancho máximo.

Ancho máximo: 100%

Espacio agregue algunos valores de llenado personalizados.
Revestimiento superior: 3VW

Revestimiento inferior: 8VW
Revestimiento izquierdo: 7VW

Junta derecha: 7VW
Border continuaremos agregando “20VW” a las esquinas inferior y superior derecha de la fila. Agregaremos un borde superior utilizando la siguiente configuración:
El ancho del borde superior: 1.2VW
Color de marco más alto: # 00dcff
Box Shadow también agregue una sombra de un cuadro sutil para crear profundidad en la página.

Poder de poco claro de la sombra de la caja: 120 px
El índice Z para garantizar que la fila aparezca por encima del módulo de imagen, aumentaremos el índice R de fila en la configuración de visibilidad.
IND ÍNDICE: 10

Agregue los módulos de blurb a la columna 1 Agregar contenido Después de haber completado la configuración de la fila, puede agregar un módulo de blurb a la primera columna de la fila. Ingrese un contenido de su elección.
Seleccione el icono Seleccione el siguiente icono en su elección.

La configuración del icono va a la pestaña de diseño y cambia la configuración del icono.
Icono de color: # 000000

Colocando iconos: arriba

Use el icono del tamaño de la fuente: sí

Icono de tamaño de fuente: 5VW
Configuración de texto de título Modificar y configuración de título.
Título de la fuente: Montserrat
Título Fuente de peso: Bold
Alineación del texto del título: Centro

Color de texto del título: # 000000
Título Tamaño del texto: 1.1VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Cartas de título de espacio: -1 PX
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.
Font Corp: Open Sans
Alineación del texto del cuerpo: Centro
Tamaño de 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)
Clon el módulo de la propaganda dos veces y coloque los duplicados en las columnas restantes después de haber completado el módulo de la propaganda en la columna 1, puede clonarlo dos veces y colocar los duplicados en las dos columnas restantes.
¡Cambie el contenido Asegúrese de cambiar el contenido de Duplicado y ya está terminado!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales En esta publicación, te mostré cómo ser creativo con los bordes de las filas incrustadas de la Divic para crear una increíble sección de héroes que puedes usar para tu próximo proyecto DIV. Recreé un buen ejemplo desde cero y podría 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.