Cómo crear superposiciones de módulos en el desarrollo con los efectos de Div

El uso de superposición en su diseño ha aumentado en popularidad en los últimos años. Le da a su diseño un aspecto más abstracto. Al mismo tiempo, le ayuda a ahorrar espacio, lo que, a su vez, limita el desarrollo vertical que se necesita. Dentro de Div, hay varias formas de agregar superposiciones a los módulos. ¡También puede ir más allá y agregar una interacción de desfile! En el tutorial de la división de hoy, le mostraremos cómo crear sutiles superposiciones de módulos de desplazamiento utilizando el margen negativo y el efecto de desplazamiento vertical del movimiento de la división. ¡El diseño que recreamos incluye una imagen superior 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 módulo superposiciones en el curso gratuito para poner sus manos en los módulos superpuestos gratuitos en el aspecto de desplazamiento, primero debe 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!
Pasos generales Agregue una nueva sección, comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección e incluya algunos revestimientos personalizados desde arriba y abajo.
Revestimiento superior: 10%
Finamiento inferior: 10%
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Espacio sin agregar módulos, abra la configuración de la fila y agregue un borde inferior a la configuración de espaciado.

Margen inferior: 100 px
Agregue el módulo de texto no. 1 En la columna, agregar el contenido H2 es hora de agregar módulos, comenzando con un primer módulo de texto que contiene un contenido H2.

Configuración de texto de rúbrica 2 Cambie la configuración de texto H2 de la siguiente manera:

Título 2 Fuente: Abril Fatface
Título 2 Dimensión de texto: 100 PX (escritorio), 70 PX (tableta), 60 PX (teléfono)
Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.

Divisor del espectáculo: si
La línea vaya a la pestaña de diseño y cambie la configuración de la línea de la siguiente manera: Color de línea: # 33333

Estilo de línea: sólido
Posición de línea: arriba
Dimensión Modifique la configuración de tamaño.
Peso del divisor: 6 PX

Ancho: 10% (escritorio), 20% (tableta), 30% (teléfono)
Agregue el módulo de texto no. 2 En la columna agrega contenido, el último modo que necesitamos en esta fila es otro módulo de texto con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:

Texto de fuente: Karla

Tamaño del texto: 18 PX
La altura de la línea de texto: 2.2em
Agregue la estructura de la fila # 2 de la columna en la siguiente fila, que utiliza la siguiente estructura de la columna:
Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Agregue el módulo de imagen a la superposición de la columna 1 de carga en la columna 1, el primer módulo que necesitamos es un módulo de imagen. Cargue el archivo de imagen superpuesto que puede encontrar en la carpeta de descarga que pueda descargar al comienzo de esta publicación.
Imagen de fondo luego Cargue una imagen de fondo de su elección.


Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
La dimensión fuerza el ancho completo en el módulo de imagen más.
Fuerza el ancho completo: si

Agregue un módulo de texto a la columna 1 Agregue el contenido H3 y el interruptor de descripción al siguiente módulo, que es un módulo de texto que contiene un contenido y descripción H3.
El color de fondo cambia el color de fondo del módulo.

Color de fondo: # 333333

Configuración de texto Entonces, pase a la pestaña de diseño y cambie la configuración de texto en consecuencia: Fuente Texto: Karla
Tamaño del texto: 18 PX

La altura de la línea de texto: 2.2em
Color de texto: Abierto
H3 Configuración de texto Cambio y configuración de texto H3.
Título 3 Fuente: Abril Fatface
Título 3 Fuente de peso: Bold

Rúbrica 3 Dimensión de texto: 50 PX
Dimensión Luego, acceda a la configuración del tamaño y cambie el ancho en diferentes tamaños de pantalla.
Ancho: 70% (escritorio), 80% (tableta), 100% (teléfono)
Alineación del módulo: centro

También utilizamos valores de margen y llenado personalizados.
Margen superior: -26%
Revestimiento superior: 15%

Finamiento inferior: 15%
ENLIZACIÓN IZQUIERDA: 10%
Revelaje derecho: 10%
Efecto del movimiento horizontal y completaremos la configuración del módulo agregando un movimiento horizontal a los efectos de progreso en la pestaña avanzada.
Habilitar el movimiento vertical: sí
Comenzando el desplazamiento: 4

GAPACIÓN PROMEDIA: 4 (al 5%)
Compensación final: 0 (al 10%)
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de botón a la columna 1 Agregue una copia El último módulo que necesitamos en la columna 1 es un módulo de botón. Ingrese una copia de su elección.
Alinee entonces, pase a la pestaña de diseño y cambie la alineación del botón.
Alineación de botones: centro

Botón de configuración, entonces estilizaremos el botón en consecuencia:

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 20 PX

El color del texto del botón: # 333333
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 1 PX
Botón de fuente: Karla
Botón de peso de fuente de fuente: en negrita
Espacio y completaremos la configuración del módulo agregando márgenes personalizados y valores de llenado a la configuración de balanceo del módulo. Superior Marja: -4%

Revestimiento superior: 2%
Finamiento inferior: 2%

ENLIZACIÓN IZQUIERDA: 7%
Revestimiento derecho: 7%
Módulos de clon en la columna 1 y colocar duplicados en la columna 2 Después de completar los módulos en la columna 1, puede clonar todos los módulos y colocar los duplicados en la segunda columna de la fila.
Cambie la imagen de fondo y el contenido Asegúrese de cambiar la imagen y el contenido de fondo.
Clone toda la fila, clone toda la fila tantas veces como quieras.
Cambie las imágenes de fondo y el contenido cambie y las imágenes de fondo y el contenido aquí y ¡está listo!

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

Pensamientos finales En esta publicación, le mostré cómo crear superposiciones sutiles en el pergamino con los nuevos efectos de desplazamiento de Div. En realidad, combinamos el margen superior negativo con el efecto del desfile vertical incorporado Div para elevar la apariencia general de nuestro diseño. ¡El diseño que recreé incluía una imagen superior y podría 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.