Descargue un diseño GRATIS de sección de héroe de barrido de columna CTA 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, dependiendo de qué trata tu sitio web y cómo se comporta tu público objetivo. Para algunos sitios web, puede ser útil colocar tarjetas CTA de varias columnas sin crear una experiencia abrumadora. Una excelente manera de abordarlo es creando tarjetas CTA de deslizamiento de columna. En el tutorial Divi de hoy, le mostraremos cómo crear un diseño impresionante desde cero que aborde esta técnica. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

CTA de barrido de columna

Móvil

CTA de barrido de columna

Descargar The Hero Sections GRATIS

Para poner tus manos en las secciones de héroe gratis, primero tendrás que 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 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.

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

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

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 de degradado: 90 grados
  • Posición de inicio: 17%
  • Posición final: 17%

CTA de barrido de columna

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

CTA de barrido de columna

Agregar fila # 1

Estructura de columna

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

CTA de barrido de columna

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

CTA de barrido de columna

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 60vw (escritorio), 100% (tableta y teléfono)
  • Ancho Máx .: 100%
  • Alineación de fila: derecha

CTA de barrido de columna

Espaciado

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

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

CTA de barrido de columna

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

CTA de barrido de columna

Sombra de la caja

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

  • Caja Shadow Blur Fuerza: 100px
  • Color de sombra: rgba (0,0,0,0.22)

CTA de barrido de columna

Clase CSS

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

  • Clase CSS: barra de desplazamiento

CTA de barrido de columna

Elemento principal

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

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

CTA de barrido de columna

Desbordamientos

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

  • Desbordamiento horizontal: desplazamiento
  • Desbordamiento vertical: oculto

CTA de barrido de columna

Configuraciones de columna

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

CTA de barrido de 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 de inicio: 35%
  • Posición final: 81%
  • Coloque el gradiente sobre la imagen de fondo: Sí

CTA de barrido de columna

Imagen de fondo

Junto con una imagen de fondo.

  • Tamaño de imagen de fondo: cubierta
  • Posición de la imagen de fondo: centro
  • Repetir imagen de fondo: sin repetición

CTA de barrido de columna

Espaciado

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

  • Relleno 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)

CTA de barrido de columna

Frontera

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

CTA de barrido de columna

Elemento principal

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

width: 100% !important;

CTA de barrido de columna

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

Añadir 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.

CTA de barrido de columna

Configuraciones de texto H3

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

  • Título 3 Fuente: Poppins
  • Título 3 Peso de la fuente: ligero
  • Título 3 Color del texto: # e92640
  • Encabezado 3 Tamaño del texto: 1.5vw (escritorio), 3.5vw (tableta), 4.5vw (teléfono)

CTA de barrido de columna

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.

CTA de barrido de columna

Configuraciones de texto

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

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

CTA de barrido de columna

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)

CTA de barrido de columna

Agregar módulo de botón a la columna 1

Agregar copia

En el siguiente módulo, que es un módulo de botones. Ingrese una copia de su elección.

CTA de barrido de columna

Configuraciones de botones

Pase a la pestaña de diseño y cambie la configuración del botón 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: 1px
  • Color del borde del botón: # f5ede5
  • Radio del borde del botón: 5px
  • Fuente del botón: Poppins

CTA de barrido de columna

CTA de barrido de columna

Espaciado

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

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno 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)

CTA de barrido de columna

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í

CTA de barrido de columna

Línea

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

  • Color de línea: # f5ede5

CTA de barrido de columna

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.

CTA de barrido de columna

Configuraciones de texto

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

  • Fuente de texto: Poppins
  • Peso de fuente de 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.3em

CTA de barrido de columna

Espaciado

Agregue un poco de margen superior también.

  • Margen superior: 2vw

CTA de barrido de columna

Columna de clonación hasta 5 veces y reutilización para otras CTA

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 CTA de deslizamiento de columna desee mostrar. Asegúrese de cambiar toda la copia de cada columna duplicada junto con los enlaces de los botones.

CTA de barrido de columna

Agregar fila # 2

Estructura de columna

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

CTA de barrido de columna

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

CTA de barrido de columna

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 la segunda fila para ocupar espacio en nuestro diseño. Es por eso que estamos eliminando todos los rellenos de fila superior e inferior predeterminados.

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

CTA de barrido de columna

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

Añadir contenido H1

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

CTA de barrido de columna

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

CTA de barrido de columna

Espaciado

Agregue algunos valores de margen a continuación.

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

CTA de barrido de columna

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.

CTA de barrido de columna

Configuraciones 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 fuente de 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

CTA de barrido de columna

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)

CTA de barrido de columna

Agregar módulo de botón a la columna 1

Agregar copia

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

CTA de barrido de columna

Configuraciones 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

CTA de barrido de columna

CTA de barrido de columna

Espaciado

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

  • Margen superior: 2vw
  • Margen izquierdo: 5vw
  • Relleno 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)

CTA de barrido de columna

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 de la caja: 20 px
  • Caja Shadow Blur Fuerza: 50px
  • Fuerza de propagación de sombra de caja: -5px
  • Color de sombra: rgba (0,0,0,0.19)

CTA de barrido de columna

Avance

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

Escritorio

CTA de barrido de columna

Móvil

CTA de barrido de columna

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 hemos mostrado cómo recrearla desde cero. Esta es una excelente manera de mostrar múltiples tarjetas CTA en su sección de héroe sin tener un diseño que se vea demasiado abrumador. Esperamos que hayas disfrutado 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 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.