Cómo diseñar secciones exclusivas de héroe multicolumna con la sección especializada de Divi

A lo largo de todas las tendencias de diseño, la forma en que diseña las secciones de su héroe sigue siendo extremadamente importante. Con Divi, puede adoptar diferentes enfoques y crear una sección de héroe que se destaque y aliente a las personas a extender su estadía en su sitio web. Para ayudarlo a inspirarse para sus próximos proyectos de Divi, le mostraremos cómo diseñar secciones únicas de héroes de varias columnas utilizando solo las opciones integradas de Divi. Las secciones de héroes de varias columnas no solo se ven geniales, sino que también te ayudan a colocar estratégicamente más contenido en la sección de héroes sin abrumar a tus visitantes.

¡Hagámoslo!

Avance

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

Descargue el diseño de la sección Hero de múltiples columnas GRATIS

Para poner sus manos en el diseño de la sección de héroe de varias columnas, 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!

Agregar nueva sección de especialidad

Estructura de la columna

Para crear una sección de héroe de varias columnas sin interrupciones, usaremos una de las secciones especiales de Divi a las que tiene acceso dentro del Visual Builder. Elegir una sección especializada te permite tener un mejor control de la estructura de la cuadrícula que buscas cuando estás diseñando una sección de héroe de varias columnas. Para este ejemplo en particular, seleccionamos la siguiente estructura de columna:

Color de fondo

Abra la configuración de la sección y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Dimensionamiento

Nos aseguramos de que no haya espacios entre las columnas de la sección cambiando la configuración de tamaño.

• Ecualizar alturas de columna: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Ancho interior: 100%
• Ancho máximo interno: 100%

Espaciado

También eliminaremos todo el relleno superior e inferior predeterminado de la fila y las columnas.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 1: 0px
• Relleno inferior de la columna 1: 0px
• Relleno superior de la columna 2: 0px
• Relleno inferior de la columna 2: 0px
• Relleno superior de la columna 3: 0px
• Relleno inferior de la columna 3: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la columna de la primera sección utilizando la siguiente estructura de columnas:

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y elimine todo el relleno superior e inferior predeterminado.

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

Agregar módulo de texto a la columna

Agregar párrafo y contenido H1

¡Es hora de comenzar a agregar módulos! Agregue un nuevo módulo de texto con algunos párrafos y contenido H1 de su elección.

Configuración de texto

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

• Fuente de texto: Open Sans
• Tamaño del texto: 0.9vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)

Configuración de texto H1

Modifique también la configuración de texto H1.

• Fuente de encabezado: Open Sans
• Peso de la fuente del encabezado: Semi negrita
• Estilo de fuente de encabezado: mayúsculas
• Color del texto del encabezado: # 000000
• Tamaño del texto del encabezado: 4vw
• Altura de la línea de rumbo: 1.1em

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior: 10,8 vw
• Acolchado izquierdo: 4vw
• Acolchado derecho: 4vw

Agregar fila n. ° 2

Estructura de la columna

La segunda fila que necesitamos en la columna de la primera sección utiliza la siguiente estructura de columna:

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique los valores de relleno.

• Acolchado superior: 3vw
• Acolchado izquierdo: 4vw
• Acolchado derecho: 4vw

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

Agregar contenido H3

Una vez que haya terminado con la configuración de la fila, puede continuar y agregar un nuevo módulo de texto a la primera columna. Ingrese algún contenido H3 de su elección.

Configuración de texto H3

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

• Fuente del título 3: Open Sans
• Peso de fuente del encabezado 3: Semi negrita
• Estilo de fuente del título 3: mayúsculas
• Título 3 Color del texto: # 000000
• Encabezado 3 Tamaño del texto: 1.5vw (escritorio), 2vw (tableta), 2.5vw (teléfono)

Espaciado

Continúe agregando un margen superior en el teléfono.

• Margen superior: 2vw (solo teléfono)

Agregar módulo divisor a la columna 1

Visibilidad

El segundo módulo que necesitamos en la primera columna 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: # 000000

Espaciado

Agregue algunos valores de margen personalizados para crear espacio alrededor del divisor.

• Margen superior: 2vw
• Margen inferior: 2vw
• Margen derecho: 2vw

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

Agregar contenido

El siguiente y último módulo que necesitamos en esta columna es otro módulo de texto. Ingrese 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
• Tamaño del texto: 0.6vw (escritorio), 1.1vw (tableta), 2vw (teléfono)
• Altura de la línea de texto: 2em

Espaciado

Agregue un poco de relleno inferior y derecho también.

• Margen inferior: 5vw (solo teléfono)
• Margen derecho: 2vw

Clonar todos los módulos en la columna 1 dos veces y colocar duplicados en las columnas restantes

Una vez que haya 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.

Cambiar contenido

Asegúrese de cambiar todo el contenido de los módulos de texto.

Agregar fila n. ° 3

Estructura de la columna

La siguiente y última fila que necesitamos en la columna de la primera sección utiliza la siguiente estructura de columna:

Espaciado

Abra la configuración de la fila y modifique los valores de espaciado.

• Margen superior: 2vw
• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar módulo de texto a la columna 1

Agregar contenido

Continúe agregando un módulo de texto a la primera columna con una copia de CTA de su elección.

Añadir enlace

Agregue también un enlace a todo el módulo.

Color de fondo

También estamos cambiando el color de fondo del módulo de texto.

• Color de fondo: # 000000

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
• Peso de la fuente del texto: Ultra Bold
• Estilo de fuente de texto: mayúsculas
• Alineación de texto: centro
• Color del texto: #ffffff
• Tamaño del texto: 1vw (escritorio), 1.7vw (tableta), 2.5vw (teléfono)

Espaciado

Y cree espacio alrededor del módulo utilizando algunos valores de margen y relleno personalizados.

• Margen superior: 4vw (escritorio), 11vw (tableta), 0vw (teléfono)
• Acolchado superior: 4vw
• Acolchado inferior: 4vw

Clonar el módulo de texto y colocar el duplicado en la columna 2

Una vez que haya completado el Módulo de texto en la columna 1, puede clonarlo y colocar el duplicado en la segunda columna.

Cambiar contenido

Asegúrese de cambiar el contenido y el enlace.

Cambiar el color de fondo

Además del color de fondo.

• Color de fondo: # e5e5e5

Cambiar el color del texto

Luego, pase a la pestaña de diseño y cambie el color del texto.

• Color del texto: # 000000

Cambiar espaciado

Por último, pero no menos importante, asegúrese de que la configuración de espaciado solo contenga los siguientes valores:

• Acolchado superior: 4vw
• Acolchado inferior: 4vw

Agregar módulo de imagen a la columna de la sección 2

Cargar imagen

¡A la siguiente columna de la sección! Aquí, el primer módulo que necesitaremos es un módulo de imagen. Sube una imagen de tu elección o usa una que puedas encontrar en la carpeta comprimida que se compartió al principio de esta publicación.

Dimensionamiento

Vaya a la configuración de tamaño y asegúrese de que la opción 'Forzar ancho completo' esté habilitada. Esto asegurará que la imagen mantenga su tamaño en todos los tamaños de pantalla.

• Forzar ancho completo: Sí

Filtros

A continuación, modifique la configuración de los filtros.

• Saturación: 0%
• Brillo: 50%

Agregar módulo de texto a la columna de la sección 2

Agregar contenido de párrafo y H3

El segundo módulo que necesitamos en esta columna es un módulo de texto. Ingrese algún párrafo y contenido H3 de su elección.

Color de fondo

Agregue un color de fondo al módulo.

• Color de fondo: # 000000

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: 0.9vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)

Configuración de texto H3

Modifique también la configuración del texto H3.

• Fuente del título 3: Open Sans
• Peso de fuente del encabezado 3: Semi negrita
• Estilo de fuente del título 3: mayúsculas
• Color del texto del encabezado 3: #ffffff
• Encabezado 3 Tamaño del texto: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)

Espaciado

Y agregue algunos valores de relleno personalizados en la configuración de espaciado.

• Acolchado superior: 3vw
• Acolchado inferior: 3vw
• Acolchado izquierdo: 2vw
• Acolchado derecho: 2vw

Clonar ambos módulos y colocar duplicados en la columna de la sección 3 (orden inverso)

Una vez que haya completado ambos módulos, puede continuar y clonarlos. Coloque los duplicados en la columna de la sección restante en orden inverso.

Cambiar módulo de texto

Cambiar el color de fondo

Abra el módulo de texto duplicado en la columna de la tercera sección y cambie el color de fondo.

• Color de fondo: #ffffff

Cambiar el color del texto

A continuación, cambie el color del texto.

• Color del texto: # 000000

Cambiar el color del texto H3

Junto con el color del texto H3.

• Título 3 Color del texto: # 000000

Cambiar módulo de imagen

Cambiar imagen

Sube una imagen diferente al módulo de imagen duplicado a continuación.

Cambiar filtros

Y cambia la configuración de los filtros.

• Saturación: 0%
• Brillo: 147%

Agregar módulo divisor a la columna de la sección 2

Posición

También estamos agregando algunos divisores transformados para agregar detalles a nuestro diseño. Coloque el primer módulo divisor aquí mismo:

Visibilidad

Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Agregue un color de línea a continuación.

• Color de línea: #ffffff

Transformar Girar

Y transforme el divisor horizontal en uno vertical modificando el valor de rotación de transformación izquierda.

• Izquierda: 270 grados

Transformar Traducir

Vuelva a colocar el módulo divisor utilizando la unidad de ancho de la ventana gráfica en la configuración de conversión de transformación.

• Derecha: -19vw (escritorio)
• Abajo: -11vw (escritorio), -24vw (tableta)

Visibilidad

Y esconde todo el módulo en el teléfono.

Agregar módulo divisor a la columna de la sección 3

Posición

El siguiente y último módulo divisor debe agregarse aquí mismo:

Visibilidad

Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño y cambie el color de la línea.

• Color de línea: # 000000

Transformar Girar

Transforma el divisor horizontal en uno vertical a continuación.

• Izquierda: 270 grados

Transformar Traducir

Y reposicione el divisor usando la configuración de traducción de transformación.

• Derecha: 2vw
• Abajo: -11vw (escritorio), -24vw (tableta)

Visibilidad

Para asegurarnos de que el divisor aparezca en la parte superior del Módulo de imagen debajo de él, aumentaremos el Índice Z en la configuración de visibilidad. También ocultaremos todo el módulo en el teléfono.

• Índice Z: 2

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 crear secciones de héroe de múltiples columnas hermosas y únicas con las opciones integradas de Divi únicamente. Esta es una gran 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 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.