Los elementos flotantes dentro de una sección pueden proporcionar una forma efectiva y única de revelar contenido a medida que el usuario se desplaza hacia abajo en la página. Con Divi, puede flotar elementos simplemente dándoles una posición fija utilizando las opciones de posición incorporadas disponibles. Y cuando combine los elementos fijos con elementos estáticos, animación y paralaje, ¡su contenido cobrará vida!

En este tutorial, le mostraremos cómo flotar elementos (imágenes y un módulo de publicidad) dentro de una sección en Divi para crear un hermoso y dinámico efecto de desplazamiento.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo rápido al diseño de elementos flotantes que construiremos.

Elementos flotantes en una sección divi

NOTA: Deberá implementar el modo de vista de estructura alámbrica y restaurar el Índice Z predeterminado de la sección Medio si desea usar Divi Builder en modo visual para editar los elementos.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Elija la opción «Construir desde cero». Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
  4. Para utilizar las mismas imágenes utilizadas en este tutorial, puede hacer clic aquí para descargar las imágenes del paquete de diseño de Candy Shop .

Crear una sección con tres columnas

Comencemos creando una fila de tres columnas.

Elementos flotantes en una sección divi

Luego actualice la configuración de la fila de la siguiente manera:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

Elementos flotantes en una sección divi

Abra la configuración de la columna 1 y agregue el siguiente relleno:

  • Acolchado: 10vw arriba, 5vw abajo

Esto ayudará a escalonar un poco el diseño de las imágenes y agregará algo de altura a nuestra columna.

Elementos flotantes en una sección divi

Abra la configuración de la columna 2 y agregue el siguiente índice Z:

  • Índice Z: 12

Elementos flotantes en una sección divi

Esto asegurará que el módulo de publicidad que agregaremos a la columna central se mantendrá por encima de todo el contenido de la sección.

Agregar las imágenes con posiciones estáticas y fijas

El siguiente paso será agregar las imágenes flotantes a nuestras columnas izquierda y derecha. Cuatro de las imágenes mantendrán su posición estática (predeterminada) pero le daremos a dos una posición fija. Esto ayudará a dar la ilusión de que algunos están flotando.

Imagen # 1 (estática)

Agregue un nuevo módulo de imagen a la columna 1.

Elementos flotantes en una sección divi

Sube una imagen al módulo.

Elementos flotantes en una sección divi

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

  • Ancho: 200 px
  • Alineación del módulo: derecha
  • Desenfoque: 2px
  • Transformar Traducir (Y): -58px
  • Transformar Traducir (X): 63 px

Elementos flotantes en una sección divi

Imagen # 2 (fija)

Agregue un segundo módulo de imagen debajo del primero en la columna 1.

Elementos flotantes en una sección divi

Suba una nueva imagen al módulo.

Elementos flotantes en una sección divi

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

  • Ancho: 200 px
  • Posición: fija
  • Ubicación: arriba a la izquierda
  • Desplazamiento vertical: 7%
  • Desplazamiento horizontal: 5%

Elementos flotantes en una sección divi

Imagen # 3 (Estática)

Agregue una tercera imagen debajo de la segunda en la columna 1.

Elementos flotantes en una sección divi

Suba una nueva imagen al módulo.

Elementos flotantes en una sección divi

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

  • Ancho: 300 px
  • Alineación del módulo: derecha
  • Transformar Traducir (Y): 179px
  • Transformar Traducir (X): 128px

Elementos flotantes en una sección divi

Imagen # 4 (Estática)

Agregue un cuarto módulo de imagen a la columna 3.

Elementos flotantes en una sección divi

Suba una nueva imagen al módulo.

Elementos flotantes en una sección divi

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: 4px
  • Transformar Traducir (Y): -9px
  • Transformar Traducir (X): -30px

Elementos flotantes en una sección divi

El efecto de desenfoque ayuda a dar la ilusión de que la imagen está más lejos.

Imagen # 5 (fija)

Luego, agregue un nuevo módulo de imagen debajo de la imagen # 4 en la columna 3.

Elementos flotantes en una sección divi

Cargue una nueva imagen al módulo de la siguiente manera:

Elementos flotantes en una sección divi

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

  • Ancho: 200 px
  • Posición: fija
  • Ubicación: abajo a la derecha
  • Desplazamiento vertical: 7%
  • Desplazamiento horizontal: 5%

Elementos flotantes en una sección divi

Imagen # 6 (Estática)

Agregue la sexta y última imagen debajo de la imagen # 5 en la columna 3.

Elementos flotantes en una sección divi

Suba una nueva imagen al módulo.

Elementos flotantes en una sección divi

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

  • Ancho: 300 px
  • Alineación del módulo: izquierda
  • Transformar Traducir (Y): 62 px
  • Transformar Traducir (X): -122px

Elementos flotantes en una sección divi

Agregar la propaganda con una posición fija

Estamos listos para agregar el contenido final a nuestra sección. Esta será la propaganda destacada principal que también estará en una posición fija.

Agregue un módulo de propaganda a la columna central (columna 2).

Elementos flotantes en una sección divi

Luego actualice el contenido de la propaganda de la siguiente manera:

  • Título: Sweet Deal

Luego agregue el siguiente HTML al cuerpo debajo de la pestaña de texto:

01
02
03
<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>
 
<a href="#">Learn More</a>

Elementos flotantes en una sección divi

Agregue una imagen a la propaganda.

Elementos flotantes en una sección divi

Diseñe la propaganda actualizando la siguiente configuración:

  • Color de fondo: #ffffff
  • Alineación de texto: centro
  • Fuente del título: Concierto uno
  • Color del texto del título: # 0a2d61
  • Tamaño del texto del título: 50 px
  • Fuente del cuerpo: Concierto uno
  • Tamaño del texto del cuerpo: 20 px
  • Altura de la línea del cuerpo: 1.8em
  • Fuente de enlace Syle: TT
  • Color del texto del enlace: # ff3d97
  • Tamaño del texto del enlace: 20 px
  • Espaciado de letras de enlace: 5px
  • Ancho: 400 px
  • Relleno: 30px arriba, 30px abajo, 30px izquierda, 30px derecha

Elementos flotantes en una sección divi

  • Esquinas redondeadas: 10px
  • Box Shadow: ver captura de pantalla
  • Fuerza de desenfoque de sombra de caja: 80 px

Elementos flotantes en una sección divi

Luego, finalmente, déle a la propaganda una posición fija con una ubicación central.

  • Posición: fija
  • Ubicación: Medio / Centro

Elementos flotantes en una sección divi

Crear una sección superior e inferior simulada

Agregue una nueva sección regular debajo de la sección actual.

Elementos flotantes en una sección divi

Dale a la sección un color de fondo.

  • Color de fondo: # 4DB9FF

Elementos flotantes en una sección divi

Luego dele algo de altura para que podamos tener suficiente espacio para desplazarnos por nuestra sección con los elementos flotantes.

  • Altura: 100vh

Elementos flotantes en una sección divi

Duplique la sección simulada y mueva el duplicado a la parte superior de la página para que nuestra sección principal con los elementos flotantes se convierta en la sección central.

Elementos flotantes en una sección divi

Toques finales a la Sección Media

Para finalizar el diseño, agregaremos otra capa de movimiento agregando un fondo de paralaje a la sección. Y también tendremos que ocultar el desbordamiento. Pero el problema principal es que nuestros elementos fijos todavía se muestran sobre las secciones superior e inferior. Para solucionar esto, debemos darle a nuestra sección un índice Z -1.

  • Imagen de fondo: insertar imagen
  • Usar efecto de paralaje: SÍ
  • Efecto de paralaje: verdadero paralaje
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
  • Índice Z: -1

Elementos flotantes en una sección divi

NOTA : Una vez que asigne a la sección un Índice Z de -1, es posible que el generador visual en el modo de vista de escritorio no funcione correctamente. Por lo tanto, es posible que deba implementar el modo de vista de estructura alámbrica para editar más la sección.

Animación adicional para elementos estáticos

Utilice la selección múltiple para seleccionar las cuatro imágenes estáticas y luego actualice la configuración del elemento con la siguiente configuración de animación:

  • Estilo de animación: diapositiva
  • Dirección de animación: arriba
  • Duración de la animación: 4000 ms
  • Opacidad de inicio de animación: 100%

Elementos flotantes en una sección divi

Esto agregará el efecto flotante de las imágenes cuando se vean en el desplazamiento.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!