Cómo crear módulos flotantes que chocan en el espacio 3D en Divi


Siempre es divertido explorar nuevos diseños que son posibles con Divi. ¡Y hoy usaremos Divi para explorar el espacio 3D! Técnicamente, exploraremos cómo diseñar módulos flotantes que parecen chocar en un espacio 3D. Este diseño funcionará bien como una forma creativa de sorprender a los visitantes al mostrar que tiene una "extensión" de servicios, productos o recursos en su sitio web.

Obviamente, este tutorial no se comparará con lo que imagino que sería la exploración espacial en la vida real. Pero, con suerte, los exploradores de Divi pueden aprender algunas cosas en el camino.

Vistazo

Aquí hay un adelanto del diseño que construiremos juntos.

módulos flotantes divi

Descargue los módulos flotantes que chocan en el diseño del espacio 3D GRATIS

Para poner sus manos en el diseño construido en este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

(incrustar) https://www.youtube.com/watch?v=UoUcxAMpSN4 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Introducción a un diseño prediseñado

Para comenzar, asegúrese de tener el tema Divi instalado y activo. Luego cree una nueva página, asigne un título a la página e implemente Divi Builder (en la parte frontal). Seleccione la opción "Elegir un diseño prediseñado". Luego, seleccione el diseño de la página de destino del videojuego e impórtelo a su nueva página.

módulos flotantes divi

Para tener una ventaja en nuestro diseño, usaremos la sección titulada "Características del juego" que contiene los anuncios que vamos a usar para nuestro diseño. Dado que esta es la única sección que realmente necesitamos, continúe y elimine todas las secciones y filas excepto las dos filas de anuncios.

módulos flotantes divi

Implementando los Blurbs flotantes en el diseño de espacios 3D en Divi

Creación de la primera fila de desenfoques

Dentro de la sección del diseño prediseñado que contiene las dos filas de anuncios, cree una nueva fila de una columna y arrástrela a la parte superior de la sección.

módulos flotantes divi

Ahora, usando la función de selección múltiple de Divi (mantenga presionada la tecla ctrl / cmd mientras selecciona cada propaganda), seleccione 5 de los anuncios en las dos columnas a continuación y arrástrelos a la nueva fila de una columna en la parte superior de la sección.

módulos flotantes divi

Ahora puede eliminar las dos filas que venían con el diseño prefabricado a continuación. Después de eso, debería tener una sola fila de una columna que contenga 5 anuncios.

módulos flotantes divi

Añadiendo perspectiva a nuestra sección

Para obtener el efecto 3D que estamos buscando en este diseño, necesitamos agregar la propiedad de perspectiva css a nuestra sección. Esto agregará la perspectiva 3D a nuestra fila cada vez que rotamos la fila usando las opciones de transformación.

Abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

perspective: 1000px;

módulos flotantes divi

Más adelante, es posible que desee aumentar o disminuir el valor de la perspectiva para acercar o alejar los elementos 3D (en este caso, las filas) de la perspectiva del usuario cuando mira la pantalla.

Para obtener más información, consulte cómo funciona la perspectiva con las opciones de transformación en Divi.

Personalizar la fila

Antes de comenzar a diseñar nuestros anuncios, primero configuremos la configuración de nuestras filas. Hay tres cosas principales que debemos cambiar a nivel de fila para este diseño:

  1. Necesitamos alinear nuestros anuncios publicitarios horizontalmente usando "display: flex". Esto mantendrá nuestro diseño consistente y receptivo en todos los dispositivos (en lugar de usar un diseño de 5 columnas que se romperá en la tableta y el teléfono).
  2. Necesitamos deshacernos de los márgenes de columna predeterminados estableciendo el ancho de la canaleta en 1.
  3. Necesitamos usar transform rotar para rotar la fila 45 grados en el eje X. Con la propiedad de perspectiva agregada al padre (la sección), la fila y todos sus elementos tienen el efecto 3D que estamos buscando.

Abra la configuración de la fila y actualice lo siguiente:

Ancho de la canaleta: 1
Ancho: 80% (escritorio), 100% (tableta), 100% (teléfono)
Transformar Girar eje X: 45 grados

CSS del elemento principal de la columna:

display: flex;
justify-content: center;

módulos flotantes divi

Ajustar el estilo y el espaciado de los anuncios publicitarios

Ahora es el momento de ajustar un poco el contenido y el estilo de nuestros anuncios.

Como queremos aplicar las mismas personalizaciones a todos nuestros anuncios, use multiselect nuevamente para seleccionar todos los anuncios e implementar la configuración del elemento modal.

módulos flotantes divi

Primero, elimine el contenido del cuerpo.

módulos flotantes divi

Luego agregue un color de fondo:

Color de fondo: rgba (20,241,217,0.16)

módulos flotantes divi

Luego actualice el siguiente espaciado:

Margen personalizado (escritorio): 2vw derecho
Margen personalizado (tableta y teléfono): 0vw derecho

Relleno personalizado: 2% arriba, 2% abajo, 3% izquierda, 3% derecha

módulos flotantes divi

A continuación, agregue un borde de la siguiente manera:

Ancho del borde: 2px
Color del borde: rgba (20,241,217,0.66)

módulos flotantes divi

En este punto, todos los anuncios publicitarios tienen el estilo en su lugar. Todavía necesitamos usar las opciones de transformación para cambiar la escala y la posición de cada uno de los desenfoques individualmente, lo que se sumará al efecto flotante 3D de los desenfoques. Pero antes de hacer eso, dupliquemos la fila para crear nuestra segunda fila de anuncios.

Crear la segunda fila de anuncios publicitarios

Para crear la segunda fila de anuncios publicitarios, simplemente duplique la fila de 5 anuncios publicitarios que acaba de personalizar.

módulos flotantes divi

Para crear un efecto de colisión, podemos rotar la fila duplicada en la dirección opuesta (-45 grados).

Abra la fila duplicada y actualice lo siguiente:

Transformar Girar eje X: -45 grados

módulos flotantes divi

Aumentar el acolchado de la sección superior e inferior

En este punto, los borrones frontales pueden extenderse fuera de la sección. Para solucionar esto, agregue el siguiente relleno a su sección:

Relleno personalizado: 15% superior, 15% inferior

módulos flotantes divi

Uso de las opciones de transformación para ajustar el tamaño y la posición de cada anuncio individualmente

En este punto, está configurado para ser creativo con la forma en que desea que cada uno de sus anuncios “flote” en el espacio 3D. Para hacer esto, puede usar las opciones de transformación para dimensionar y colocar cada propaganda una por una exactamente donde lo desee. Al hacer esto, sus borrones parecerán tener diferentes profundidades en el espacio 3D.

Para facilitar las cosas, voy a numerar los anuncios publicitarios del 1 al 10, comenzando con el anuncio del extremo izquierdo en la fila superior (Anuncio n. ° 1) y terminando con el anuncio del extremo derecho en la segunda fila (Anuncio n. ° 10).

módulos flotantes divi

Anuncio n. ° 1

Comencemos con nuestra primera propaganda en la fila superior. Abra la configuración de propaganda y actualice lo siguiente:

Transformar escala (ejes xey): 90%

módulos flotantes divi

Anuncio # 2

Abra la configuración de Blurb # 2 y actualice lo siguiente:

Transformar escala (ejes xey): 80%
Transformar trasladar eje X: -10%

módulos flotantes divi

Anuncio # 3

Transformar escala (ejes xey): 80%
Transformar trasladar eje X: 20%

Anuncio # 4

Transformar escala (ejes xey): 85%
Transformar trasladar eje X: -30%

Anuncio # 5

Transformar escala (ejes xey): 60%

Una vez hecho esto, su primera fila debería verse así.

módulos flotantes divi

Continúe personalizando las opciones de transformación para los desenfoques 6-10, comenzando con el anuncio # 6 en el extremo izquierdo de la segunda fila.

Anuncio # 6

Transformar escala (ejes xey): 60%
Transformar trasladar eje X: -40%
Transformar trasladar eje Y: -20%

Anuncio # 7

Transformar escala (ejes xey): 90%
Transformar trasladar eje X: 20%

Anuncio # 8

Transformar escala (ejes xey): 70%
Transformar trasladar eje X: -50%

Anuncio # 9

Transformar escala (ejes xey): 80%
Transformar trasladar eje X: -20%

Anuncio # 10

Transformar escala (ejes xey): 70%
Transformar trasladar eje X: -60%

Ahora veamos cómo se ve la segunda fila cuando choca con nuestra primera fila en el espacio 3D.

módulos flotantes divi

Para completar el diseño, podemos agregar una bonita imagen de fondo de espacio 3D a la sección. Estoy usando la imagen de fondo de la sección superior que vino con el diseño de la página de destino del videojuego que usamos para este tutorial.

Diseño final

Ahora veamos el diseño final de nuestros módulos flotantes 3D.

Escritorio

módulos flotantes divi

Tableta

módulos flotantes divi

Teléfono

módulos flotantes divi

Debido a que los 5 desenfoques se extienden a lo largo de la fila, es un poco más difícil ajustar los 5 desenfoques sin que se extiendan fuera de la ventana gráfica. Para solucionar esto, simplemente puede ocultar la publicidad lejana en cada fila del teléfono. O puede dar a cada uno de sus anuncios un tamaño más pequeño en el teléfono.

módulos flotantes divi

Pensamientos finales

Espero que este tutorial te sirva de inspiración sobre cómo crear tus propios módulos flotantes en 3D Space. Todo lo que realmente se necesita son unos pocos pasos para rotar toda la fila de módulos en 3D usando las opciones de perspectiva y transformación. Después de eso, puede colocar cada uno de los módulos para que floten en cualquier lugar que desee.

Diviértete explorando.

Espero tener noticias tuyas en los comentarios.

¡Salud!