Divi y sus efectos de desplazamiento ayudan a traer una dimensión completamente nueva al diseño que está creando. Con cada nueva característica de Divi, también intentamos compartir tutoriales que te ayudarán a ver tu diseño web desde una perspectiva diferente. En este tutorial, le mostraremos cómo limitar los efectos de desplazamiento del módulo a los contenedores de columnas. Esto significa que, independientemente del tipo de efecto de desplazamiento que agregue, el efecto de movimiento del módulo no superará el contenedor de columnas. Esto da como resultado un hermoso diseño en caja e interactivo. ¡Recrearemos un ejemplo desde cero y 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 efectos de desplazamiento de límite gratuito GRATIS
Para poner sus manos en el diseño de efectos de desplazamiento de límite 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!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección regular
Comience agregando una nueva sección regular a la página en la que está trabajando.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo a la fila todavía, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 90%
- Ancho máximo: 1580px
Configuración de la columna 1
Imagen de fondo
Luego, abra la configuración de la columna 1 y cargue la imagen ‘divi-column-background’ que puede encontrar en la carpeta de descarga al comienzo de este tutorial.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Espaciado
Pase a la configuración de espaciado y agregue un poco de relleno superior e inferior.
- Relleno superior: 100px
- Relleno inferior: 100px
Borde
Agregue algunas esquinas redondeadas también.
- Todas las esquinas: 20px
Sombra de la caja
También usaremos una sombra de caja sutil.
- Posición vertical de la sombra del cuadro: 51 px
- Fuerza de desenfoque de sombra de caja: 46px
- Color de sombra: rgba(0,0,0,0.08)
desbordamientos
Y completaremos la configuración de la columna configurando los desbordamientos como ocultos. Esta es una parte crucial de este tutorial. Al configurar los desbordamientos como ocultos, se asegura de que ningún módulo dentro del contenedor de columnas lo sobrepase.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H3
Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue contenido H3 de su elección.
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 fuente: Pesado
- Título 3 Color del texto: rgba(0,0,0,0.15)
- Título 3 Tamaño del texto: 200 px (Escritorio), 150 px (Tableta), 100 px (Teléfono)
- Encabezado 3 Espaciado entre letras: -12px (Escritorio), -10px (Tableta), -7px (Teléfono)
Espaciado
Para aumentar el ancho de nuestro módulo, agregaremos un margen negativo izquierdo y derecho a la configuración de espaciado.
- Margen Izquierdo: -50%
- Margen Derecho: -50%
movimiento horizontal
Completaremos la configuración del módulo agregando un poco de movimiento horizontal a la configuración del efecto de desplazamiento. Siéntase libre de usar cualquier otro tipo de efecto de desplazamiento aquí, independientemente de lo que elija hacer, no superará el contenedor de columnas porque hemos ocultado los desbordamientos de columnas en uno de los pasos anteriores de este tutorial.
- Habilitar movimiento horizontal: Sí
- Compensación inicial: 5 (al 45 %)
- Compensación media: 0 (al 75 %)
- Compensación final: -4
- Disparador de efecto de movimiento: medio del elemento
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
Pasamos al siguiente módulo, que es otro módulo de texto. Agregue algún contenido de descripción 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 de texto: Open Sans
- Color del texto: #969696
- Tamaño del texto: 18 px (escritorio), 16 px (tableta), 14 px (teléfono)
- Altura de línea de texto: 2,4 em
Espaciado
Complete la configuración del módulo ajustando los valores de margen en diferentes tamaños de pantalla.
- Margen superior: 100 px (escritorio), 60 px (tableta), 50 px (teléfono)
- Margen inferior: 200 px (escritorio), 180 px (tableta), 100 px (teléfono)
- Margen izquierdo: 100 px (escritorio), 50 px (tableta y teléfono)
- Margen derecho: 100 px (escritorio), 50 px (tableta y teléfono)
Agregar copia
El siguiente y último módulo que necesitamos en la columna 1 es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Cambie la configuración de los botones del módulo de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 24 px (escritorio), 20 px (tableta), 18 px (teléfono)
- Color del texto del botón: #000000
- Color degradado 1: #f2f2f2
- Color degradado 2: #ffffff
- Tipo de gradiente: lineal
- Dirección del gradiente: 270 grados
- Posición inicial: 50%
- Posición final: 50%
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: -1 px
- Fuente del botón: Poppins
- Peso de la fuente del botón: Medio
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Mostrar solo el icono al pasar el mouse sobre el botón: No
Espaciado
Luego, agregue algunos valores de espaciado personalizados.
- Margen inferior: 50px
- Relleno superior: 50px
- Relleno inferior: 50px
Posición
Y complete la configuración del módulo reposicionando el módulo de botones.
- Posición: Absoluta
- Ubicación: abajo a la izquierda
Agregar módulo de imagen a la columna 2
Cargar imagen
En la segunda columna, el único módulo que necesitamos es un módulo de imagen. Sube una imagen de tu elección.
Dimensionamiento
Luego, fuerce el ancho completo en la configuración de tamaño.
- Forzar ancho completo: Sí
Borde
A continuación, modifique la configuración del borde en diferentes tamaños de pantalla.
- Arriba a la izquierda: 0px (escritorio), 20px (tableta y teléfono)
- Arriba a la derecha: 20px
- Abajo a la izquierda: 0px (escritorio), 20px (tableta y teléfono)
- Abajo a la derecha: 20px
Posición
Y vuelva a colocar el módulo en el escritorio. Regréselo a su configuración predeterminada en tamaños de pantalla más pequeños.
- Posición: absoluta (escritorio), predeterminada (tableta y teléfono)
- Ubicación: Centro (Escritorio)
Clona la fila tantas veces como quieras
Una vez que haya completado la fila y todos sus módulos, puede clonar la fila completa tantas veces como desee.
Cambiar contenido e imagen
Cambie la copia y la imagen en consecuencia y ¡listo!
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 limitar sus efectos de desplazamiento a los contenedores de columnas usando las opciones de desbordamiento de Divi en combinación con los efectos de desplazamiento del módulo. Tan pronto como un módulo supera el contenedor de la columna, desaparece, lo que da como resultado un diseño interactivo en caja ordenada. ¡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.