Cómo diseñar secciones únicas de múltiples columnas de héroe con Div especializado

A lo largo de todas las tendencias de diseño, la forma en que proyectas las secciones de tus héroes sigue siendo extremadamente importante. Con Div, puede adoptar diferentes enfoques y crear una sección de héroes que se destaque y aliente a las personas a expandir su estadía en su sitio web. Para ayudarlo a inspirarse en sus futuros proyectos DIV, le mostraremos cómo diseñar héroes únicos con múltiples columnas utilizando solo las opciones integradas de Div. Las secciones de héroes no solo con varias columnas se ven geniales, sino que también te ayuda a colocar estratégicamente más contenido en la sección de héroes, sin abrumar a tus visitantes.
¡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 apariencia de la sección Hero con varias columnas gratuitas para poner su mano en el aspecto de la sección Hero con varias columnas, primero debe descargarla con 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! Agregue una nueva sección especializada de la estructura de la columna para crear una sección de héroes sin múltiples columnas, utilizaremos una de las secciones especializadas a las que tiene acceso dentro de Visual Builder. La elección de una sección especializada le permite tener una mejor estructura de agarre que elija al diseñar una sección de héroes de columna múltiple. Para este ejemplo en particular, seleccionamos la siguiente estructura de columna:
El color de fondo abre la configuración de la sección y agregue un color de fondo blanco.

Color de fondo: #ffffff
Dimensión Nos aseguramos de que no haya brecha entre las columnas de la sección cambiando la configuración de tamaño.

Igualar las alturas de la columna: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Ancho interno: 100%
Ancho interno máximo: 100%
El espacio también elimina todos los rellenos predeterminados e inferiores de la fila y las columnas.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 1 revestimiento superior: 0 px
Columna 1 revestimiento inferior: 0 pxcolana 2 revestimiento superior: 0 px
Columna 2 revestimiento inferior: 0 px
Columna 3 revestimiento superior: 0 px
Columna 3 revestimiento inferior: 0 px
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila a la primera columna de la sección utilizando la siguiente estructura de columna:
Espacio sin agregar módulos, abra la configuración de la fila y elimine todos los valores predeterminados, desde arriba e abajo.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
¡Agregue un módulo de texto al contenido de agrega de la columna y H1 es hora de comenzar a agregar módulos! Agregue un nuevo módulo de texto con un párrafo particular y contenido H1 de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto.

Texto de fuente: Abrir sans

Tamaño de texto: 0.9VW (escritorio), 1.6VW (tableta), 2.2VW (teléfono)
Configuración de texto H1 Cambio y configuración de texto H1.
Fuente del título: Open Sans

Título Fuente de peso: semi audac
Estilo de fuente de título: mayúscula
Text Pre -Text: # 000000
Encabezado de texto de tamaño: 4VW
Altura de la línea de dirección: 1.1em
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 10.8VW

Junta izquierda: 4VW
Junta derecha: 4VW
Agregue la estructura de la fila # 2 de la segunda fila que necesitamos en la primera columna de la sección utiliza la siguiente estructura de la columna:
Espacio sin agregar módulos, abra la configuración de línea y cambie los valores de llenado.

Revestimiento superior: 3VW

Junta izquierda: 4VW
Junta derecha: 4VW
Agregue el módulo de texto no. 1 En la columna 1 Agregar contenido H3 Después de haber terminado la configuración de la fila, puede continuar y agregar un nuevo módulo de texto en la primera columna. Ingrese un contenido H3 de su elección. Configuración de texto H3 Cambie a la pestaña Diseño y cambie la configuración de texto H3 en consecuencia:
3 FUENTES SECCIÓN: Open Sans

Título 3 Fuente de peso: semi audac

Título 3 Estilo de fuente: mayúscula
Rúbrica 3 Color de texto: # 000000
Texto 3 Sección: 1.5VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
El espacio continúa agregando un margen superior al teléfono.
Margen superior: 2 VW (único teléfono)
Agregue un módulo divisor en la visibilidad de la columna 1 La segunda forma que necesitamos en la primera columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.

Divisor del espectáculo: si
La línea cambia el color de la línea aún más.

Color de línea: # 000000
El espacio agregue algunos valores de margen personalizados para crear espacio alrededor del divisor.

Margen superior: 2VW
Margen inferior: 2 VW

Margen derecho: 2VW
Agregue el módulo de texto no. 2 en la columna 1 agrega el siguiente contenido y el último modo que necesitamos en esta columna es otro módulo de texto. Ingrese un contenido de párrafo de su elección.
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

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

Altura de la línea de texto: 2em
Espacio agregue un poco de relleno recto y de fondo.
Margen inferior: 5VW (solo teléfono)
Margen derecho: 2VW

Clon todos los módulos en la columna 1 dos veces y coloque los duplicados en las columnas restantes después de haber completado todos los módulos en la columna 1, puede continuar y clonar cada uno de ellos dos veces. Coloque los duplicados en las dos columnas restantes de la fila. Cambie el contenido Asegúrese de cambiar todo el contenido en los módulos de texto.
Agregue la estructura de la fila # 3 de la siguiente columna y la última fila que necesitamos en la primera columna de sección utiliza la siguiente estructura de la columna:
Espacio abrir la configuración de la fila y cambiar los valores de espaciado.

Margen superior: 2VW

SUS Lingo: 0 PX

Finamiento inferior: 0 PX

Agregue un módulo de texto a la columna 1 Agregar contenido Continuar agregando un módulo de texto a la primera columna con una copia CTA de su elección.
Agregue un enlace Agregue un enlace a todo el módulo.
El color de fondo también cambia el color de fondo del módulo de texto.
Color de fondo: # 000000


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

El peso de la fuente de texto: Ultra Bold
Text -Text estilo: mayúscula

Alineación de texto: Centro
Color de texto: #ffffff
Tamaño de texto: 1VW (escritorio), 1.7VW (tableta), 2.5VW (teléfono)
Espacio y cree espacio alrededor del módulo utilizando algunos márgenes personalizados y valores de llenado.
Margen superior: 4VW (escritorio), 11VW (tableta), 0VW (teléfono)
Revestimiento superior: 4VW
Revestimiento inferior: 4VW

Clone el módulo de texto y coloque el duplicado en la columna 2 Después de haber completado el módulo de texto en la columna 1, puede clonar y colocar el duplicado en la segunda columna.
Cambie el contenido para asegurarse de cambiar el contenido y el enlace.
Cambie el color de fondo y el color de fondo. Fondo de pantalla: # E5E5E5
Cambie el color del texto luego, cambie a la pestaña de diseño y cambie el color del texto.

Color de texto: # 000000

Cambie el espacio por última vez, pero no menos importante, asegúrese de que la configuración de espaciado solo contenga los siguientes valores:

Revestimiento superior: 4VW
Revestimiento inferior: 4VW

¡Agregue el módulo de imagen a la columna 2 de la sección Cargue la imagen Acceso a la siguiente columna de la sección! Aquí, el primer módulo que necesitamos es un módulo de imagen. Cargue una imagen de su elección o use una que pueda encontrar en el archivo zip que se compartió al comienzo de esta publicación.
Dimensión Acceda a la configuración del tamaño y asegúrese de que la opción “Fuerza el ancho completo” se activa. Esto asegurará que la imagen mantenga su tamaño en todo el tamaño de la pantalla.

Fuerza el ancho completo: si
Los filtros cambian la configuración del filtro.
Saturación: 0%

Brillo: 50%

Agregue un módulo de texto a la columna 2 de la sección Agregar párrafo y contenido H3 El segundo módulo que necesitamos en esta columna es un módulo de texto. Ingrese algunos párrafos y contenido H3 de su elección.
Color del sótano Agregue un color de fondo al módulo.

Color de fondo: # 000000
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: 0.9VW (escritorio), 1.6VW (tableta), 2.2VW (teléfono)
H3 Configuración de texto Cambio y configuración de texto H3.

3 FUENTES SECCIÓN: Open Sans
Título 3 Fuente de peso: semi audac
Título 3 Estilo de fuente: mayúscula
Frup 3 color de texto: #ffffff

Título 3 Dimensión de texto: 1.5VW (escritorio), 2.5VW (tableta), espaciado de 3VW (teléfono) y agregue algunos valores de llenado personalizados en la configuración de espaciado.
Revestimiento superior: 3VW
Revestimiento inferior: 3VW
Junta izquierda: 2VW
Junta derecha: 2VW
Clone ambos módulos y coloque los duplicados en la sección de la columna 3 (invertido) Después de haber completado ambos módulos, puede continuar y puede clonarlos. Coloque los duplicados en la columna de la sección que queda en orden inverso.

Cambie el módulo de texto Cambiar el color de fondo Abra el módulo de texto duplicado en la tercera sección y cambie el color de fondo.
Color de fondo: #ffffff
Cambie el color del texto Cambie el color del texto.
Color de texto: # 000000
Cambie el color del texto H3 junto con el color del texto H3.

Rúbrica 3 Color de texto: # 000000

Cambie el módulo de imagen Cambie la imagen cargue otra imagen en el módulo de imagen duplicada a continuación.
Cambie los filtros y cambie la configuración del filtro.

Saturación: 0%
Brillo: 147%

Agregue un módulo divisor a la posición de la columna 2 de la sección, también agregamos algunos separadores transformados para agregar detalles a nuestro diseño. Coloque el primer módulo divisor aquí:
Visibilidad Asegúrese de que la opción “División de visualización” esté activada.

Divisor del espectáculo: si

La línea agrega un color de línea aún más.
Color de línea: #ffffff
Transformación de rotación y transforma el divisor horizontal en una vertical cambiando el valor de giro de la izquierda.

Izquierda: 270 grados

Transformar la repose de traducción El módulo divisor utilizando la unidad de ancho de la ventana en la configuración de traducción de transformación.
Derecha: -19VW (escritorio)

La parte inferior: -11vw (escritorio), -24VW (tableta)
Visibilidad y ocultar todo el módulo en el teléfono.

Agregue el módulo divisor a la columna 3 de la posición en la siguiente posición y el último módulo divisor debe agregarse aquí mismo:
Visibilidad Asegúrese de que la opción “División de visualización” esté activada.

Divisor del espectáculo: si
La línea va a la pestaña de diseño y cambia el color de la línea.
Color de línea: # 000000

La transformación de rotación luego transforma el divisor horizontal en uno vertical.

Izquierda: 270 grados

Transformar la traducción y reposicionar el divisor utilizando la configuración de traducción de transformación.
Derecha: 2 VW

La parte inferior: -11vw (escritorio), -24VW (tableta)
Visibilidad Para garantizar que el divisor aparezca por encima del módulo de imagen debajo de él, aumentaremos el índice z en la configuración de visibilidad. También ocultaremos todo el modo en el teléfono.

IND ÍNDICE: 2
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 crear secciones de héroe con varias columnas, hermosas y únicas, solo con las opciones incorporadas del Div. Esta es una excelente técnica que se puede utilizar para diferentes tipos de sitios web. 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.