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

Siempre es divertido explorar nuevos diseños que son posibles usando Divi. ¡Y hoy usaremos Divi para explorar el espacio 3D! Técnicamente, exploraremos cómo diseñar módulos flotantes que parezcan estar colisionando en el espacio 3D. Este diseño funcionará bien como una forma creativa de sorprender a los visitantes mostrando 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 creado en este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

Vayamos al tutorial, ¿de acuerdo?

Suscríbete a nuestro canal de Youtube

Primeros pasos con un diseño prefabricado

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 prefabricado». Luego, seleccione el diseño de la página de destino del videojuego e impórtelo a su nueva página.

Para obtener una ventaja inicial en nuestro diseño, usaremos la sección titulada «Características del juego», que contiene los anuncios publicitarios que usaremos 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 publicitarios.

Implementando los Blurbs Flotantes en el Diseño de Espacio 3D en Divi

Creando la Primera Fila de Blurbs

Dentro de la sección del diseño prefabricado que contiene las dos filas de anuncios publicitarios, 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 presionado ctrl/cmd mientras selecciona cada publicidad), seleccione 5 de las publicidades en las dos columnas a continuación y arrástrelas a la nueva fila de una columna en la parte superior de la sección.

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

Agregar perspectiva a nuestra sección

Para obtener el efecto 3D que buscamos en este diseño, debemos 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:

01
perspective: 1000px;

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 .

Personalización de la fila

Antes de comenzar a diseñar nuestros anuncios publicitarios, primero configuremos la configuración de nuestras filas. Hay tres cosas principales que debemos cambiar en el 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 medianil en 1.
  3. Necesitamos usar transformar 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:

Canal Ancho: 1

Ancho: 80% (escritorio), 100% (tableta), 100% (teléfono)


Transformar Girar eje X: 45 grados

Columna Elemento principal CSS:

01
02
display: flex;
justify-content: center;

Ajustar el estilo y el espaciado de Blurb

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

Dado que queremos aplicar las mismas personalizaciones a todos nuestros anuncios publicitarios, use la selección múltiple nuevamente para seleccionar todos los anuncios publicitarios e implementar el modal de configuración de elementos.

Primero, elimine el contenido del cuerpo.

Luego agrega un color de fondo:

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

Luego actualice el siguiente espacio:

Margen personalizado (escritorio): 2vw a la derecha

Margen personalizado (tableta y teléfono): 0vw a la derecha

Relleno personalizado: 2 % arriba, 2 % abajo, 3 % a la izquierda, 3 % a la 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 anuncios publicitarios individualmente, lo que se sumará al efecto flotante 3D de los anuncios publicitarios. Pero antes de hacer eso, dupliquemos la fila para crear nuestra segunda fila de anuncios publicitarios.

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 relleno de la sección superior e inferior

En este punto, los anuncios publicitarios 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 cambiar el tamaño y la posición de cada Blurb 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 cambiar el tamaño y colocar cada anuncio uno por uno exactamente donde lo desee. Al hacer esto, sus anuncios publicitarios parecerán tener diferentes profundidades en el espacio 3D.

Para facilitar las cosas, voy a numerar las notas publicitarias del 1 al 10, comenzando con la nota publicitaria del extremo izquierdo en la fila superior (Comentario n.º 1) y terminando con la nota publicitaria del extremo derecho de la segunda fila (Comentario n.º 10).

Blurb #1

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

Escala de transformación (eje x e y): 90%

Blurb #2

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

Transformar escala (ejes x e y): 80 %

Transformar Trasladar eje X: -10 %

Blurb #3

Transformar escala (ejes x e y): 80 %

Transformar Trasladar eje X: 20 %

Blurb #4

Transformar Escala (ejes x e y): 85%

Transformar Trasladar eje X: -30%

Blurb #5

Escala de transformación (ejes x e y): 60%

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

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

Blurb # 6

Escala de transformación (ejes x e y): 60 %

Eje X de traslación de transformación: -40 %


Eje Y de traslación de transformación: -20 %

Blurb #7

Transformar escala (ejes x e y): 90 %

Transformar Trasladar eje X: 20 %

Blurb #8

Transformar Escala (ejes x e y): 70%

Transformar Trasladar eje X: -50%

Blurb # 9

Transformar Escala (ejes x e y): 80%

Transformar Trasladar eje X: -20%

Blurb #10

Transformar escala (ejes x e y): 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 del espacio 3D a la sección. Estoy usando la imagen de fondo de la sección superior que viene 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 anuncios publicitarios se extienden a lo largo de la fila, es un poco más complicado ajustar los 5 anuncios publicitarios sin que se extiendan fuera de la ventana gráfica. Para solucionar esto, simplemente puede ocultar la publicidad lejana en cada fila en el teléfono. O puede darle a cada una de sus publicidades un tamaño más pequeño en el teléfono.

Pensamientos finales

Espero que este tutorial le sirva de inspiración sobre cómo crear sus 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 escuchar de usted en los comentarios.

¡Salud!