Cómo flotar elementos en una sección para crear un efecto de desplazamiento dinámico en la división

Los elementos flotantes en una sección pueden proporcionar una forma efectiva y única de revelar contenido a medida que el usuario ejecuta la página. Con Div, puede flotar, simplemente dándoles una posición fija utilizando las opciones de posición incorporadas. Y cuando combina elementos fijos con elementos estáticos, de animación y paralaje, ¡su contenido cobrará vida! En este tutorial, le mostraremos cómo flotar elementos (imágenes y un módulo de propaganda) en una sección de la división para crear un hermoso efecto de desarrollo dinámico. ¡Vamos a empezar! Tire del ojo con un vistazo rápido al diseño de los elementos flotantes que construiremos.

Suscríbase a nuestro canal de YouTube Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder. NOTA: Deberá implementar el modo de vista de estructura alámbrica y restaurar la sección media de la mitad predeterminada si desea usar Divi Builder en modo visual para editar los elementos. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”. Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Para usar las mismas imágenes utilizadas en este tutorial, puede hacer clic aquí para descargar las imágenes del paquete de presentación de Candy Shop.
Creación de una sección de tres columnas para comenzar las cosas creando una fila con tres columnas.
Luego actualice la configuración de la fila de la siguiente manera:

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Abra la configuración para la columna 1 y agregue el siguiente relleno:

Forro: 10 VW hacia arriba, 5VW abajo
Esto ayudará a escalonar un poco la apariencia de las imágenes y agregar una cierta altura a nuestra columna.
Abra la configuración para la columna 2 y agregue el siguiente índice z:

IND ÍNDICE: 12
Esto asegurará que el módulo de propaganda que agregaremos a la columna central permanecerá por encima de todos los demás contenidos en la sección. Agregar imágenes con posiciones estáticas y fijas El siguiente paso será agregar imágenes flotantes a nuestras columnas izquierda y derecha. Cuatro de las imágenes conservarán su posición estática (predeterminada), pero les daremos dos posiciones fijas. Esto ayudará a dar la ilusión de que algunos flotan. Iimaginea # 1 (estático) Agregue un nuevo módulo de imagen en la columna 1.

Sube una imagen en el modo.
Actualizar la siguiente configuración de diseño de imagen:

Ancho: 200 PX

Alineación del módulo: correcto
Desenfoque: 2 px
Translación de transformación (y): -58px
Translación de transformación (x): 63 PX
Imagen # 2 (corrección) Agregue un segundo módulo de imagen debajo del primero en la columna 1.
Sube una nueva imagen en el modo.

Actualice la configuración de diseño para la imagen no. 2 como sigue:

Ancho: 200 PX

Posición: fijo
Ubicación: superior izquierda
Brecha vertical: 7%
Brecha horizontal: 5%
Imagen # 3 (estática) Agregue una tercera imagen debajo del segundo de la columna 1.
Sube una nueva imagen en el modo.

Actualice la configuración de diseño para la imagen de la siguiente manera:

Ancho: 300 PX

Alineación del módulo: correcto
Traducción traducida (y): 179 PX
Translación de transformación (x): 128 PX
Imagen # 4 (estática) Agregue un cuarto módulo de imagen en la columna 3.
Sube una nueva imagen en el modo.


Actualice la configuración de diseño para la imagen # 4 de la siguiente manera:

Ancho: 200 PX

Alineación del módulo: izquierda
Desenfoque: 4 px
Transformar la traducción (y): -9px
Translación de transformación (x): -30px
El efecto de desvanecimiento ayuda a la ilusión de que la imagen es más allá. Imagen # 5 (corrección) Luego agregue un nuevo módulo de imagen a continuación Imagen # 4 en la columna 3. Cargue una nueva imagen en el camino de la siguiente manera:
Actualice la configuración de diseño para la imagen no. 5 como sigue:

Ancho: 200 PX

Posición: fijo

Ubicación: en el lado inferior derecho
Brecha vertical: 7%
Brecha horizontal: 5%
Imagen # 6 (estática) Agregue la sexta y última imagen debajo de la imagen # 5 de la columna 3.
Sube una nueva imagen en el modo.
Actualice la configuración de diseño para la imagen no. 6 como sigue:

Ancho: 300 PX

Alineación del módulo: izquierda

Translación de transformación (y): 62 PX
Translación de transformación (x): -122px
Agregar propaganda con una posición fija, estamos listos para agregar el contenido final a nuestra sección. Esta será la propaganda principal presentada, que también estará en una posición fija.
Agregue un módulo de propaganda a la columna central (columna 2).
Luego actualice el contenido de la propaganda de la siguiente manera:

Título: Sweet Deal
Luego agregue el siguiente HTML al cuerpo en la pestaña Texto:
Su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo.

aprender más
Agregue una imagen a la propaganda.
Diseñe su pedido actualizando la siguiente configuración:
Color de fondo: #ffffff

Alineación de texto: Centro

Título de la fuente: concierto uno
Color de texto del título: # 0a2d61
Título Tamaño del texto: 50 PX
Fuente del cuerpo: concierto uno
Tamaño del texto del cuerpo: 20 PX
La altura de la línea del cuerpo: 1.8em
Enlace Font Syle: TT
Enlace de color de texto: # FF3D97
Tamaño del enlace de texto: 20 PX
Enlace de la carta de espacio: 5 PX
Ancho: 400 PX
Revestimiento: 30 px arriba, 30 px abajo, 30 px izquierda, 30 px a la derecha
Esquinas redondeadas: 10 Pxbox Shadow: Ver captura de pantalla
Poder de poco claro de la sombra de la caja: 80 px
Luego, finalmente, le dé a la propaganda una posición fija con una ubicación central.

Posición: fijo
Ubicación: centro / centro
Creación de una sección falsa e inferior Agregue una nueva sección habitual en la sección actual.

Dale a la sección un color de fondo.
Color de fondo: # 4db9ff
Luego dale una cierta altura, para que podamos tener suficiente espacio para ejecutar nuestra sección con elementos flotantes.

Altura: 100 VH

Duplique la sección falsa y mueva el duplicado a la parte superior de la página para que nuestra sección principal con elementos flotantes se convierta en la sección central.
El último toque de la sección central para completar el diseño, agregaremos otra capa de movimiento agregando un fondo de paralax a la sección. Y también tendremos que ocultar el desbordamiento. Pero el principal problema es que nuestros elementos fijos todavía se muestran por encima de las secciones superior e inferior. Para remediar esto, debemos darle a nuestra sección un índice -1 z.

Imagen de fondo: inserte la imagen
Use el efecto de paralaje: sí

Efecto de paralaje: verdadero paralaje

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
IND ÍNDICE: -1
Nota: Una vez que haya dado a la sección A Z del índice -1, es posible que el generador visual en la visualización de escritorio no funcione correctamente. Por lo tanto, puede ser necesario implementar el modo de visualización de estructura alámbrica para editar la sección. Animación adicional para elementos estáticos Utilice múltiples selecciones para seleccionar las cuatro imágenes estáticas y luego actualizar la configuración del elemento con la siguiente configuración de animación: Estilo de animación: diapositiva
Dirección de Animación: Up
Duración de la animación: 4000 ms
Opacidad de animación para comenzar: 100%

Esto agregará el efecto flotante de las imágenes cuando se vean en el pergamino. El resultado final aquí es el resultado final.
Pensamientos finales que flotan un elemento en DIV requieren solo unos pocos clics para darle una posición fija y luego usar compensaciones para colocarlo en el lugar exacto donde desea mantenerse fijo en su navegador, puede usar el índice Z para asegurarse de que se arregle. Los elementos son visibles solo en una sección en particular. Una vez que se completa la configuración básica, puede mejorar el efecto de desarrollo agregando elementos estáticos adicionales, antecedentes de paralaje y animación para que la sección cobre vida. Espero que esto te inspire a ser un poco creativo con tu próxima división. Si desea llevar esta sección a un nivel completamente nuevo, consulte nuestros nuevos efectos de desarrollo que ahora están integrados en el DIV. Espero tener noticias suyas en los comentarios. ¡Suerte!