Divi y sus efectos de desplazamiento brindan toneladas de nuevas posibilidades de diseño a los sitios web que crea. Con cada función nueva, tratamos de compartir técnicas geniales de Divi que puede usar para hacer que sus páginas se destaquen entre la multitud. Este tutorial no es diferente, hoy le mostraremos cómo crear una lista de desplazamiento automático horizontal. A medida que los visitantes se desplazan verticalmente hacia abajo en su página, los elementos horizontales se desplazan horizontalmente. Esto elimina la necesidad de una barra de desplazamiento horizontal separada y mejora la experiencia general del usuario que tienen los visitantes. También lo ayuda a concentrarse en compartir contenido masivo sin que se apodere de toda su página. ¡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
Descargue el diseño de lista de desplazamiento automático horizontal GRATIS
Para poner sus manos en el diseño de lista de desplazamiento automático horizontal gratuito, primero deberá descargarlo 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!
¡Empecemos a Recrear!
Agregar nueva sección
Color de fondo
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y modifique el color de fondo.
- Color de fondo: #d0d5db
desbordamientos
Oculte los desbordamientos de sección también.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Imagen de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cargue la imagen de fondo que puede encontrar en la carpeta de descarga que se compartió al comienzo de este tutorial.
Dimensionamiento
Pase a la pestaña de diseño de la fila y cambie la configuración de tamaño a continuación.
- Ancho: 90 % (escritorio), 100 % (tableta y teléfono)
- Ancho máximo: 1580px
Espaciado
Modifique también la configuración de espaciado.
- Margen inferior: 200 px (escritorio), 50 px (tableta y teléfono)
- Relleno superior: 100px
- Relleno inferior: 100px
Agregar módulo de texto a la columna
Agregar contenido H2
Es hora de agregar módulos, comenzando con un módulo de texto que contenga algo de contenido H2 de su elección.
Configuración de texto H2
Modifique la configuración de texto H2 del módulo en consecuencia:
- Encabezado 2 Fuente: Raleway
- Encabezado 2 Peso de fuente: semi negrita
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #d0d5db
- Título 2 Tamaño del texto: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
Agregar módulo divisor a columna
Visibilidad
Luego, agregue un módulo divisor y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Cambia el color de la línea del módulo a continuación.
- Color de línea: #d7dce2
Dimensionamiento
Junto con la configuración de tamaño.
- Peso del divisor: 20px
- Ancho: 11%
- Alineación del módulo: Centro
- Altura: 20px
Borde
Complete la configuración del módulo agregando un radio de borde.
- Borde: 20px (Todas las esquinas)
Añadir Fila #2
Estructura de la columna
A la siguiente fila. Utilice la siguiente estructura de columnas:
Espaciado
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie los valores de relleno izquierdo y derecho en diferentes tamaños de pantalla.
- Relleno izquierdo: 0 % (escritorio), 5 % (tableta y teléfono)
- Relleno derecho: 0 % (escritorio), 5 % (tableta y teléfono)
Configuración de columna
Color de fondo
Luego, vaya a la configuración de la columna y use un color de fondo.
- Color de fondo: #d0d5db
Espaciado
Modifique también los valores de relleno de columna en diferentes tamaños de pantalla.
- Relleno superior: 3 % (escritorio), 20 % (tableta), 30 % (teléfono)
- Relleno inferior: 2 % (escritorio), 15 % (tableta), 20 % (teléfono)
- Relleno izquierdo: 2 % (escritorio), 10 % (tableta y teléfono)
- Relleno derecho: 2 % (escritorio), 10 % (tableta y teléfono)
Borde
A continuación, vaya a la configuración del borde y agregue un radio de borde al contenedor de la columna.
- Todas las esquinas: 30px
Elemento principal CSS
Complete la configuración de la columna agregando un código CSS receptivo. Estamos usando CSS para la sombra del cuadro para obtener el estilo de diseño de neumorfismo donde se combinan dos sombras de cuadro diferentes. Sin embargo, siéntase libre de reemplazar esta sombra de cuadro con una sombra de cuadro construida por Divi si desea cambiar el estilo general del diseño. También nos estamos asegurando de que las columnas aparezcan una debajo de la otra en tamaños de pantalla más pequeños.
Escritorio:
|
01
|
box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px; |
Tableta y teléfono:
|
01
02
03
|
box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px;width: 100% !important;margin: 100px 0px 100px 0px !important; |
desbordamientos
Complete la configuración de la columna configurando los desbordamientos como visibles. Esto nos permitirá crear las superposiciones que pudo notar en la vista previa de esta publicación.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Agregar módulo de imagen a la columna
Cargar imagen
Es hora de agregar módulos, comenzando con un módulo de imagen. Sube una imagen de tu elección.
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación de la imagen.
- Alineación de imagen: Centro
Espaciado
Agregue un margen superior negativo también.
- Margen superior: -10%
filtros
Luego, vaya a la configuración de filtros y elimine toda la saturación. También estamos agregando un poco de contraste adicional.
- Saturación: 0%
- Contraste: 200%
Posición
Complete la configuración del módulo reposicionando todo el módulo.
- Posición: Absoluta
- Ubicación: Centro superior
Agregue el módulo de texto n. ° 1 a la columna
Agregar contenido H3
El siguiente módulo que necesitamos es un módulo de texto con algo de contenido H3 de su elección.
Configuración de texto H3
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:
- Encabezado 3 Fuente: Raleway
- Encabezado 3 Peso de fuente: semi negrita
- Título 3 Color del texto: #7e8a98
- Encabezado 3 Tamaño del texto: 28px
Agregar módulo divisor a columna
Mostrar divisor
Agregue un módulo divisor justo debajo del módulo de texto y asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.
- Mostrar divisor: Sí
Línea
Cambia el color de la línea del módulo a continuación.
- Color de línea: #d7dce2
Dimensionamiento
Modifique también la configuración de tamaño.
- Peso del divisor: 20px
- Ancho: 21%
- Altura: 20px
Borde
Luego, vaya a la configuración del borde y use un radio de borde.
- Todas las esquinas: 20px
Elemento principal CSS
Complete la configuración del módulo agregando el mismo tipo de sombra de cuadro de neumorfismo al elemento principal del módulo. Nuevamente, puede usar una sombra de cuadro integrada Divi en su lugar.
|
01
|
box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px; |
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido
A continuación tenemos otro módulo de texto con algo de contenido descriptivo.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente del texto: Raleway
- Color del texto: #7e8a98
- Altura de línea de texto: 2,7 em
- Alineación de texto: Izquierda
Agregar copia
Por último, pero no menos importante, también necesitaremos 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 según corresponda:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 17px
- Color del texto del botón: #7e8a98
- Color de fondo del botón: #d0d5db
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Fuente del botón: Raleway
Espaciado
También haremos algunos cambios en la configuración de espaciado.
- Margen inferior: -5%
- Relleno superior: 30px
- Relleno inferior: 30px
- Relleno izquierdo: 100 px (computadora de escritorio y tableta), 50 px (teléfono)
- Relleno derecho: 100 px (computadora de escritorio y tableta), 50 px (teléfono)
Elemento principal CSS
Usaremos la misma sombra de cuadro de neumorfismo.
|
01
|
box-shadow: #A2B1C6 9px 9px 30px,#ffffff -5px -0px 40px; |
Posición
Y complete la configuración del módulo de botones reposicionando el módulo.
- Posición: Absoluta
- Ubicación: centro inferior
Convertir fila en lista de desplazamiento automático
Cambiar tamaño de fila
Ahora, en la última parte de este tutorial, convertiremos la segunda fila en una lista de desplazamiento automático. El primer paso para lograr el resultado deseado es abrir la configuración de la fila y modificar la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho: 220 % (escritorio), 100 % (tableta y teléfono)
- Ancho máximo: 220 % (escritorio), 100 % (tableta y teléfono)
Clonar Columna 5x
Luego, clone la columna cinco veces.
Agregar efecto de desplazamiento de movimiento horizontal
Para que se produzca el efecto de lista de desplazamiento automático, agregaremos un poco de movimiento horizontal.
- Habilitar movimiento horizontal: Sí
- Compensación inicial:
- Escritorio: 8
- Tableta y teléfono: 0
- Compensación media: 0 (al 40 %)
- Compensación final:
- Escritorio: -35 (al 62%)
- Tableta y teléfono: 0
Aumentar el relleno de la sección
Complete el diseño agregando algo de relleno adicional a su sección. ¡Eso es todo!
- Relleno superior: 300 px (escritorio), 100 px (tableta y teléfono)
- Relleno inferior: 300 px (escritorio), 100 px (tableta y teléfono)
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, le mostramos cómo crear una lista de desplazamiento automático horizontal con los efectos de desplazamiento de Divi . A medida que sus visitantes se desplazan verticalmente hacia abajo, la lista de columnas horizontales se desplaza por sí sola, revelando diferentes partes de la lista a la vez. Esta es una excelente manera de compartir contenido masivo y mejorar la experiencia de usuario de sus visitantes. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en 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 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.