La sección principal de tu página merece toda la atención que pueda recibir. Hay infinitas formas de diseñar su sección de héroe, según de qué se trate su sitio web y cómo se comporte su 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á descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga las Secciones Hero 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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
Pase 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)
Añadir Fila #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
Pase 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 del canalón: 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
Borde
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
Agregue una sombra de cuadro sutil para crear profundidad en la sección principal.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Color de sombra: rgba (0,0,0,0.22)
Clase CSS
Y use 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: deslizar la barra de desplazamiento
Elemento principal
Para crear un desplazamiento/deslizamiento horizontal, necesitaremos colocar las columnas horizontalmente. Lo haremos agregando un código CSS personalizado en el elemento principal de la fila.
|
01
02
03
|
display: grid;grid-template-columns: repeat(6, 100%);grid-column-gap: 2vw; |
desbordamientos
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%
- Coloque el 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 la imagen de fondo: sin repetición
Espaciado
Pase 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)
- Relleno izquierdo: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Relleno derecho: 2vw (escritorio), 5vw (tableta), 7vw (teléfono)
Borde
Continúe agregando un radio de borde de ’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.
|
01
|
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
Pase a la pestaña de diseño y cambie la configuración de texto H3 en consecuencia:
- Título 3 Fuente: Poppins
- Encabezado 3 Peso de la fuente: Light
- Título 3 Color del texto: #e92640
- Título 3 Tamaño del texto: 1.5vw (Escritorio), 3.5vw (Tableta), 4.5vw (Teléfono)
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
El siguiente módulo que necesitamos es otro módulo de texto. Introduzca 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 del 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)
Espaciado
También estamos agregando un margen inferior para crear espacio en nuestra tarjeta magnética de columna.
- Margen inferior: 18vw (escritorio), 30vw (tableta), 42vw (teléfono)
Agregar copia
Pasamos al siguiente módulo, que es un módulo de botones. Introduzca alguna copia de su elección.
Configuración 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
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)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
Agregue el 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
Pase 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 #3 a la Columna 1
Agregar contenido
El siguiente y último módulo que necesitamos en esta columna es otro módulo de texto. Introduzca algún contenido de párrafo de su elección.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del 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,3 em
Espaciado
Agregue un poco de margen superior también.
- Margen superior: 2vw
Clonar columna hasta 5 veces y reutilizar para otros CTA
Una vez que haya completado la primera columna y todos los módulos en ella, 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.
Añadir Fila #2
Estructura de la columna
¡A por la segunda fila! Usaremos esta fila para crear una superposición con la anterior. Elija la siguiente estructura 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ón personalizado: Sí
- Ancho del canalón: 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 ningún espacio en nuestro diseño. Es por eso que estamos eliminando todo el relleno de fila superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno 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
Pase a la pestaña de diseño y cambie la configuración de texto H1 en consecuencia:
- Fuente del título: Poppins
- Color del texto del encabezado: #e92741
- Tamaño del texto del encabezado: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
Espaciado
Agregue algunos valores de margen a continuación.
- Margen superior: -35vw (escritorio), 7vw (tableta), 10vw (teléfono)
- Margen izquierdo: 5vw
- Margen derecho: 12vw
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
El segundo módulo que necesitamos es otro módulo de texto. Introduzca 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 del 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 línea de texto: 2,8 em
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 copia
El siguiente módulo que necesitamos es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Luego, ve a la pestaña de diseño y dale 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)
- Relleno 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 sutil sombra de cuadro.
- Posición vertical de la sombra del cuadro: 20px
- Fuerza de desenfoque de sombra de cuadro: 50px
- Fuerza de propagación de la sombra del cuadro: -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, compartimos 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 exhibir varias tarjetas CTA en tu sección principal sin tener un diseño que parezca 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 de Divi, 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 los beneficios de este contenido gratuito.