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 parezcan chocar en el 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.

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.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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?

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 "Elija 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.

Para tener una ventaja en nuestro diseño, usaremos la sección titulada "Características del juego" que contiene los anuncios que vamos a utilizar 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.

Implementación de 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 prefabricado 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.

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.

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.

Añadiendo perspectiva a nuestra sección

Para obtener el efecto 3D que buscamos 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ás adelante, es posible que desee aumentar o disminuir el valor de 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.

Personalización de la fila

Antes de comenzar a diseñar nuestros anuncios, primero configuremos la configuración de nuestra fila. 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 rotate 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;

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.

Dado que 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.

Primero, elimine el contenido del cuerpo.

Luego agregue un color de fondo:

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

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

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

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

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.

Creación de 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.

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

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

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

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).

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%

Anuncio n. ° 2

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

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

Anuncio n. ° 3

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

Anuncio n. ° 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í.

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.

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

Tableta

Teléfono

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 este problema, 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.

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 utilizando 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!