Cómo limitar los efectos de desarrollo en los contenedores de columnas con la división

Los efectos de desplazamiento de DIV lo ayudan a traer una dimensión completamente nueva al diseño que crea. Con cada nueva función de división, también intentamos compartir tutoriales que lo ayudarán a ver su diseño web desde una perspectiva diferente. En este tutorial, le mostraremos cómo limitar los efectos de los módulos en los contenedores de columnas. Esto significa que, independientemente del tipo de efecto de desarrollo que agregue, el efecto de movimiento del módulo no excederá el contenedor de columna. Esto da como resultado un diseño hermoso y un diseño interactivo. ¡Recrearemos un ejemplo desde cero y podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el diseño de desplazamiento del efecto de diseño gratuito Para poner su mano sobre los efectos de límite gratuito, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear!
Suscríbase a nuestro canal de YouTube Agregue una nueva sección regular Comience agregando una nueva sección habitual a la página en la que está trabajando.
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos en fila, abra la configuración de la fila y cambie la configuración de dimensionamiento en consecuencia:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 90%
Ancho máximo: 1580 PX
Configuración Columna 1 Imagen de fondo luego abra la configuración de la columna 1 y cargue la imagen “Div-Column-Background” que puede encontrar en la carpeta de descarga desde el comienzo de este tutorial.

Tamaño de la imagen de fondo: portada
Posición de la imagen de fondo: Centro
Cambio de espacio a la configuración de espaciado y agregue algunos rellenos superior e inferior.

Revestimiento superior: 100 px
Finamiento inferior: 100 PX
Border agregue algunas esquinas redondeadas.

Todas las esquinas: 20 PX
Box Shadow también usaremos una sombra sutil. Posición vertical de la sombra de la caja: 51 PX

Poder de poco claro de la sombra de la caja: 46 PX
Shadow Color: RGBA (0.0,0,0.08)
Derrame y completaremos la configuración de la columna a través de la configuración de vertido oculto. Esta es una parte crucial de este tutorial. A través de la configuración, las descargas en el oculto, se asegura de que ningún módulo en el contenedor de columna lo exceda.
Desbordamiento horizontal: oculto

Desbordamiento verticalmente: oculto
Agregue el módulo de texto no. 1 en 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 el contenido H3 de su elección.
Configuración de texto H3 Cambiar a la pestaña Diseño y cambiar la configuración de texto H3 en consecuencia:

3 Fuentes: Poppins

Fuente de peso de la rúbrica 3: duro
Rúbrica 3 Color de texto: RGBA (0.0,0,15)
Título 3 Dimensión de texto: 200 PX (escritorio), 150 PX (tableta), 100 PX (teléfono)
Lubricación 3 Espaciación de letras: -12 PX (escritorio), -10 PX (tableta), -7 PX (teléfono)
Espacio para aumentar el ancho de nuestro módulo, agregaremos algunos bordes negativos a la izquierda y a la derecha a la configuración de espaciado.
Margen izquierdo: -50%


Margen derecho: -50%
Movimiento horizontal Completaremos la configuración del módulo agregando un movimiento horizontal a la configuración del efecto de desplazamiento. Siéntase libre de usar cualquier otro tipo de efecto de desarrollo aquí, sin importar lo que elija hacer, no excederá el contenedor de la columna, porque he ocultado las columnas que fluyen en uno de los pasos anteriores de este tutorial.
Active el movimiento horizontal: sí

Comenzando el desplazamiento: 5 (al 45%)
GAPACIÓN PROMEDIA: 0 (al 75%)
Grado final: -4
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido Pase al siguiente módulo, que es otro módulo de texto. Agregue un contenido de descripción de su elección. Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuente: Abrir sans

Color de texto: # 969696

Tamaño de texto: 18 PX (escritorio), 16 px (tableta), 14 px (teléfono)
Altura de la línea de texto: 2.4em
Espacio Complete la configuración del módulo ajustando los bordes de los bordes para 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)
Agregue el módulo de botón a la columna 1 Agregue una copia a continuación y el último módulo que necesitamos en la columna 1 es un módulo de botón. Ingrese una copia de su elección.
Configuración Modifique la configuración del botón del módulo de la siguiente manera:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 24 PX (escritorio), 20 px (tableta), 18 px (teléfono)

El color del texto del botón: # 000000
Color degradado 1: # F2F2F2
Color de gradiente 2: #ffffff
Tipo de gradiente: lineal
Dirección de gradiente: 270 grados
Posición inicial: 50%
Posición final: 50%
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: -1 PX

Botón de fuente: Poppins
Peso del botón de fuente: Medium
Muestra el icono del botón: Sí
Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no
Espacio entonces, agregue algunos valores de espaciado personalizados.
Margen inferior: 50 PX
Revestimiento superior: 50 pxcatuse inferior: 50 px

Posición y complete la configuración del módulo reposicionando el botón del módulo.
Posición: Absoluto
Ubicación: en el lado inferior izquierdo
Agregue el módulo de imagen a la columna 2 Cargue la imagen en la segunda columna, el único módulo que necesitamos es un módulo de imagen. Sube una imagen de tu elección.

Dimensión Entonces, forzar el ancho completo en la configuración del tamaño.
Fuerza el ancho completo: si
Border luego cambie la configuración del borde para diferentes tamaños de pantalla.

En la parte superior izquierda: 0 PX (escritorio), 20 px (tableta y teléfono)

A la esquina superior derecha: 20 px
A la parte inferior izquierda: 0 px (escritorio), 20 px (tableta y teléfono)

En la parte inferior derecha: 20 PX
Posicione y reposicione el módulo en el escritorio. Lléelo a los valores predeterminados para dimensiones de pantalla más pequeñas.
Posición: Absoluto (escritorio), predeterminado (tableta y teléfono)
Ubicación: centro (escritorio)
Clone el giro tantas veces como desee después de haber completado el giro y todos sus módulos, puede clonar toda la fila tantas veces como desee.

¡Cambie el contenido y la imagen Cambie la copia y la imagen en consecuencia y haya terminado!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil