Descargue un diseño de sección de héroe de deslizamiento de columna de CTA GRATUITO para Divi

La sección de héroe de tu página merece toda la atención que pueda recibir. Hay infinitas formas de diseñar tu sección de héroe, según de qué se trate tu sitio web y cómo se comporte tu público objetivo. Para algunos sitios web, puede ser útil colocar tarjetas de CTA de varias columnas sin crear una experiencia abrumadora. Una excelente manera de abordarlo es creando tarjetas de CTA de deslizamiento de columna. En el tutorial de Divi de hoy, le mostraremos cómo crear un diseño impresionante desde cero que aborde esta técnica. ¡También podrá descargar el archivo JSON 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.

Escritorio

Móvil

Descarga The Hero Sections GRATIS

Para poner sus manos en las secciones de héroe gratuitas, primero deberá descargarlas 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!

Suscríbete a nuestro canal de Youtube

¡Empecemos a recrear!

Agregar nueva sección

Fondo degradado

Agregue una nueva sección a la página en la que está trabajando, abra la configuración de la sección e inserte un fondo degradado.

• Color 1: #ffffff
• Color 2: # f5ede5
• Dirección del gradiente: 90 grados
• Posición inicial: 17%
• Posición final: 17%

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: 5vw (escritorio), 10vw (tableta), 13vw (teléfono)
• Acolchado inferior: 5vw (escritorio), 10vw (tableta), 13vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

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

Color de fondo

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

• Color de fondo: # fff6ed

Dimensionamiento

Vaya a la pestaña de diseño y cambie también la configuración de tamaño de la fila.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 60vw (escritorio), 100% (tableta y teléfono)
• Ancho máximo: 100%
• Alineación de filas: derecha

Espaciado

También estamos agregando algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 6vw
• Acolchado inferior: 6vw
• Acolchado izquierdo: 5.5vw
• Acolchado derecho: 24vw

Frontera

Vaya a la configuración del borde a continuación y agregue un borde izquierdo usando la siguiente configuración:

• Ancho del borde izquierdo: 6px
• Color del borde izquierdo: #FFFFFF

Sombra de la caja

Agrega una sombra de cuadro sutil para crear profundidad en la sección de héroe.

• Fuerza de desenfoque de sombra de caja: 100px
• Color de sombra: rgba (0,0,0,0.22)

Clase CSS

Y usa una clase CSS en la pestaña avanzada. Más adelante en esta publicación, usaremos esta clase CSS para ocultar la barra de desplazamiento.

• Clase CSS: barra de desplazamiento y deslizamiento

Elemento principal

Para crear un desplazamiento / deslizamiento horizontal, necesitaremos colocar las columnas horizontalmente. Lo haremos agregando código CSS personalizado en el elemento principal de la fila.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Desbordes

Pase a la configuración de visibilidad y cambie los desbordamientos de la fila.

• Desbordamiento horizontal: desplazamiento
• Desbordamiento vertical: oculto

Configuración de columna

Una vez que haya completado la configuración de la fila, puede abrir la configuración de la primera columna.

Fondo degradado

Agrega un fondo degradado.

• Color 1: rgba (245,237,229,0.91)
• Color 2: rgba (219,34,65,0.84)
• Posición inicial: 35%
• Posición final: 81%
• Colocar degradado sobre la imagen de fondo: Sí

Imagen de fondo

Junto con una imagen de fondo.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición

Espaciado

Vaya a la pestaña de diseño y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 4vw (escritorio), 10vw (tableta), 12vw (teléfono)
• Acolchado inferior: 4vw (escritorio), 10vw (tableta), 12vw (teléfono)
• Acolchado izquierdo: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)
• Relleno derecho: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)

Frontera

Continúe agregando un radio de borde '20px' a cada una de las esquinas en la configuración del borde.

Elemento principal

Otra parte importante para que esto funcione es agregar una sola línea de código CSS al elemento principal de la columna.

width: 100% !important;

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

Agregar contenido H3

¡Es hora de comenzar a agregar módulos! Puede agregar tantos módulos como desee y diseñarlos según sus preferencias. Sin embargo, si desea recrear exactamente el mismo ejemplo que se compartió en la vista previa de esta publicación, comience con un Módulo de texto e inserte algo de contenido H3.

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: Poppins
• Peso de fuente del encabezado 3: Ligero
• Color del texto del encabezado 3: # e92640
• Encabezado 3 Tamaño del texto: 1.5vw (escritorio), 3.5vw (tableta), 4.5vw (teléfono)

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

Agregar contenido

El siguiente módulo que necesitamos es otro módulo de texto. Ingrese algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la configuración de texto a continuación y realice algunos cambios.

• Fuente de texto: Poppins
• Peso de la fuente del texto: Ligero
• Color del texto: # e92640
• Tamaño del texto: 0.8vw (escritorio), 1.9vw (tableta), 2.8vw (teléfono)

Espaciado

También estamos agregando un margen inferior para crear espacio en nuestra tarjeta deslizante de columna.

• Margen inferior: 18vw (escritorio), 30vw (tableta), 42vw (teléfono)

Agregar módulo de botones a la columna 1

Agregar copia

Pasemos al siguiente módulo, que es un módulo de botones. Ingrese alguna copia de su elección.

Configuración de botones

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

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.8vw (escritorio), 1.8vw (tableta), 2.5vw (teléfono)
• Color del texto del botón: # f5ede5
• Ancho del borde del botón: 1 px
• Color del borde del botón: # f5ede5
• Radio del borde del botón: 5px
• Fuente del botón: Poppins

Espaciado

Aumente el tamaño del botón agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
• Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Agregar módulo divisor a la columna 1

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

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

• Color de línea: # f5ede5

Agregue el módulo de texto n. ° 3 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: Poppins
• Peso de la fuente del texto: Ligero
• Color del texto: # f5ede5
• Tamaño del texto: 0.8vw (escritorio), 1.9vw (tableta), 2.8vw (teléfono)
• Altura de la línea de texto: 2,3 em

Espaciado

Agregue un poco de margen superior también.

• Margen superior: 2vw

Clonar columnas hasta 5 veces y reutilizarlas para otras llamadas a la acción

Una vez que haya completado la primera columna y todos los módulos que contiene, puede clonar la columna completa hasta 5 veces, dependiendo de cuántas tarjetas de CTA de deslizamiento de columna desee mostrar. Asegúrese de cambiar toda la copia para cada columna duplicada junto con los enlaces de los botones.

Agregar fila n. ° 2

Estructura de la columna

¡A la segunda fila! Usaremos esta fila para crear una superposición con la anterior. Elija la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y ajuste la configuración de tamaño en consecuencia:

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

Espaciado

Más adelante en la publicación, agregaremos los módulos que necesitamos y crearemos una superposición superior negativa para que parezca que los módulos son parte de la primera fila. Esto significa que no necesitamos que la segunda fila ocupe espacio en nuestro diseño. Es por eso que estamos eliminando todo el relleno predeterminado de las filas superior e inferior.

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

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

Agregar contenido H1

¡Es hora de comenzar a agregar módulos! Comience con un primer módulo de texto e ingrese algún contenido H1 de su elección.

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: Poppins
• Color del texto del encabezado: # e92741
• Tamaño del texto del encabezado: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Espaciado

A continuación, agregue algunos valores de margen.

• Margen superior: -35vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen izquierdo: 5vw
• Margen derecho: 12vw

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

Agregar contenido

El segundo módulo que necesitamos 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 de texto en consecuencia:

• Fuente de texto: Poppins
• Peso de la fuente del texto: Ligero
• Color del texto: # e92741
• Tamaño del texto: 0.8vw (escritorio), 1.9vw (tableta), 2.8vw (teléfono)
• Altura de la línea de texto: 2.8em

Espaciado

También estamos agregando algunos valores de margen personalizados al módulo de texto.

• Margen superior: 2vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen inferior: 2vw (escritorio), 7vw (tableta), 10vw (teléfono)
• Margen izquierdo: 5vw
• Margen derecho: 13vw (escritorio), 5vw (tableta y teléfono)

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente módulo que necesitamos es un módulo de botones. Ingrese alguna copia de su elección.

Configuración de botones

Luego, vaya a la pestaña de diseño y aplique estilo al botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.9vw
• Color del texto del botón: # e92741
• Color de fondo del botón: # f5ede5
• Ancho del borde del botón: 0px
• Radio del borde del botón: 5px
• Fuente del botón: Poppins

Espaciado

También estamos aumentando el tamaño del botón agregando algunos valores de espaciado personalizados.

• Margen superior: 2vw
• Margen izquierdo: 5vw
• Acolchado superior: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1.5vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 6vw (escritorio), 9vw (tableta), 15vw (teléfono)
• Relleno derecho: 6vw (escritorio), 9vw (tableta), 15vw (teléfono)

Sombra de la caja

Termine el diseño del módulo de botones agregando una sombra de cuadro sutil.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 50px
• Fuerza de propagación de la sombra de caja: -5px
• Color de sombra: rgba (0,0,0,0.19)

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, hemos compartido una hermosa sección de héroe de deslizamiento de columna de forma gratuita y también le mostramos cómo recrearla desde cero. Esta es una excelente manera de mostrar múltiples tarjetas de CTA en su sección de héroe sin tener un diseño que parezca demasiado abrumador. Esperamos que hayas disfrutado de este tutorial y si tienes alguna pregunta o sugerencia, ¡asegúrate de dejarla 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.