Cómo usar la perspectiva con opciones de transformación para diseñar paredes de fotos 3D en Divi


Diseñar una pared de fotos en 3D parece algo que solo es posible con un editor de fotos como Photoshop o Sketch. ¡Pero no lo es! En estos días, hay un montón de diseños aparentemente imposibles que puedes construir en la web usando solo CSS. Y con un creador de páginas como Divi, ni siquiera necesitas saber mucho sobre CSS para crear este tipo de diseños. Es por eso que hoy les mostraré cómo diseñar paredes de fotos en 3D en Divi.

El truco consiste en utilizar la propiedad CSS de la perspectiva. Con solo una línea de CSS agregada a un elemento principal, puede usar las opciones de transformación integradas de Divi para rotar elementos en diseños 3D realistas.

¡Empecemos!

Vistazo

Aquí hay un adelanto de las paredes de fotos 3D que diseñaremos hoy.

divi paredes de fotos 3d

divi paredes de fotos 3d

divi paredes de fotos 3d

divi paredes de fotos 3d

divi paredes de fotos 3d

Descargue GRATIS el diseño de ejemplos de diseño de pared de fotos 3D

Para poner sus manos sobre los diseños de pared de fotos en 3D de 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=jyrE_hUY9Xk (/ incrustar)

Suscríbete a nuestro canal de Youtube

Empezando

Para comenzar con este tutorial, todo lo que necesita es el tema Divi instalado y activo. Necesitará algunas imágenes para trabajar, así que siéntase libre de usar las mismas imágenes que estoy usando del Paquete de diseño de agencia de viajes. Después de eso, deberá crear una nueva página, dar la página y el título, e implementar Divi Builder para construir en la interfaz. Luego seleccione la opción "construir desde cero". Eso es. ¡Tu lienzo de diseño te espera!

Comprender cómo funciona la perspectiva con las opciones de transformación

Si alguna vez tomaste una clase básica de arte, probablemente estés familiarizado con la perspectiva. Es una técnica utilizada por los artistas para dibujar objetos que parecen ser 3D aunque exista en una hoja de papel o lienzo en 2D. En el diseño web, puede colocar elementos en posiciones 3D utilizando la propiedad transform. En Divi, estas opciones de transformación están integradas en el constructor Divi. La propiedad de transformación principal que coloca un elemento en una posición 3D es la rotación de transformación, que le permite rotar elementos a lo largo de los ejes z, xoy. Sin embargo, si rotas un elemento con transformar rotar, el elemento no aparecerá como 3D a menos que se aplique la propiedad de perspectiva.

Por ejemplo, supongamos que tiene un solo módulo de imagen con una imagen agregada a una fila de una columna.

divi paredes de fotos 3d

Luego, usa la propiedad transform rotate para rotar la imagen a lo largo del eje x. La imagen girará pero seguirá siendo 2D, por lo que la imagen simplemente parecerá que se comprimió desde la parte superior e inferior para hacerse más corta.

divi paredes de fotos 3d

Ahora, si agrega perspectiva usando un pequeño fragmento de CSS al elemento principal de la fila (que es un elemento principal de la imagen), agrega perspectiva a la imagen. Dependiendo del valor de perspectiva, puede aumentar o disminuir la distancia entre el objeto y el usuario que mira la pantalla. A continuación, se muestra un ejemplo de cómo se verá la imagen si agrega "perspectiva: 600 px" a la fila.

divi paredes de fotos 3d

Puede ver que la parte superior de la imagen es más pequeña y la parte inferior de la imagen es más grande, creando el efecto 3D de perspectiva. Básicamente, la imagen se ve a 900px de distancia del usuario que ve la página.

En este tutorial, usaré esta misma técnica para rotar una fila completa de imágenes y luego agregaré perspectiva a la sección principal para crear paredes de fotos en 3D.

Diseño de paredes de fotos 3D superior e inferior

divi paredes de fotos 3d

En este primer diseño, vamos a agregar una pared de fotos en 3D en la parte superior e inferior de un solo me gusta de texto que se puede usar como encabezado. He aquí cómo hacerlo.

Creación de la pared de fotos en 3D superior

Para que las cosas comiencen en su nueva página, cree una sección regular con una fila de cuatro columnas.

divi paredes de fotos 3d

En la columna 1, agregue un módulo de imagen con su primera imagen. Todas las imágenes que estoy usando en este ejemplo son de 600 px por 800 px.

Una vez que cargue su imagen en el módulo de imagen, actualice el relleno de la siguiente manera:

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

Duplica (o copia y pega) la imagen y agrégalas a cada una de las cuatro columnas para que tengas tres imágenes en cada una de las cuatro columnas como esta.

divi paredes de fotos 3d

Esto servirá como la pared superior (o techo) que giraremos y agregaremos perspectiva para crear el diseño de la pared 3D.

Personalice la sección para agregar perspectiva y ocultar el desbordamiento

Dado que vamos a rotar el módulo de fila (no imágenes individuales), necesitamos agregar la propiedad de perspectiva al padre de la fila, que es la sección. Y para evitar que las imágenes salgan del contenedor de la sección, debemos agregar un desbordamiento oculto tanto al desbordamiento vertical como al horizontal.

Para hacer esto, abra la configuración de la sección y actualice lo siguiente:

Color de fondo: # 000000
Relleno personalizado: 0px arriba, 0px abajo

Para agregar la propiedad de perspectiva, agregue el siguiente CSS personalizado al elemento principal:

CSS del elemento principal:

perspective: 400px;

Ver las propiedades de desbordamiento de la siguiente manera:

Desbordamiento horizontal: oculto
Desbordamiento vertical: oculto
divi paredes de fotos 3d

Actualizar configuración de fila: ancho y ancho de canal

Ahora es el momento de personalizar la fila para prepararla para el diseño 3D girado. Para hacer esto, vamos a reducir el ancho y eliminar cualquier margen entre las imágenes actualizando el ancho de la canaleta.

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

Ancho de la canaleta: 1
Ancho: 300 px (escritorio, tableta y teléfono)

divi paredes de fotos 3d

Actualizar configuración de fila: Transformar, girar y origen

Ahora use la opción de rotación de transformación para rotar la fila de la siguiente manera:

Transformar Girar eje Y: -58deg

divi paredes de fotos 3d

Cambie el origen de la transformación de la siguiente manera:

Transformar el origen: centro inferior (o 100% 50%)

divi paredes de fotos 3d

Actualizar configuración de fila: anchos de columna personalizados

Como queremos que el diseño de cuatro columnas permanezca en las pantallas de tabletas y teléfonos, debemos anular el CSS para el ancho de columna en esos puntos de interrupción. Para hacer esto, necesitamos agregar una propiedad CSS de ancho a cada una de las columnas. En la pestaña avanzada, agregue el siguiente fragmento de CSS personalizado al elemento principal de cada columna de la siguiente manera:

(nota: asegúrese de que el ancho de la canaleta esté establecido en 1 o esto no funcionará)

Elemento principal de la columna 1:

width: 25% !important;

Elemento principal de la columna 2:

width: 25% !important;

Elemento principal de la columna 3:

width: 25% !important;

Elemento principal de la columna 4:

width: 25% !important;

divi paredes de fotos 3d

Eso es. Se ha creado nuestro primer muro de fotos en 3D.

Crear la sección de encabezado

Para crear nuestro encabezado para el diseño, necesitamos crear una nueva sección regular con una fila de una columna directamente debajo de la sección actual.

divi paredes de fotos 3d

Antes de agregar un módulo, actualice la sección con un fondo negro:

Color de fondo: # 000000

divi paredes de fotos 3d

Luego agregue la misma propiedad de perspectiva al elemento principal de la sección como lo hicimos antes de la siguiente manera:

divi paredes de fotos 3d

Luego agregue un módulo de texto a la fila con lo siguiente:

Contenido: Fotografía

Fuente de texto: Titillium Web
Estilo de fuente de texto: TT
Color del texto del texto: #ffffff
Tamaño del texto del texto: 5vw
Espaciado de letras de texto: 6px
Altura de la línea de texto: 1em
Orientación del texto: centro

divi paredes de fotos 3d

Ahora, podemos agregar una rotación de transformación al módulo de texto. Con la perspectiva establecida en el padre (o sección), el efecto 3D se producirá una vez que giremos el texto.

Agregue los valores de rotación de transformación de la siguiente manera:

Transformar Girar Eje X: -12deg
Transformar Girar eje Y: 32 grados

divi paredes de fotos 3d

Ahora estamos listos para crear la pared de fotos 3D inferior.

Crear la pared (o piso) de la foto 3D inferior

Para crear la pared de fotos en 3D inferior, simplemente podemos copiar y pegar la sección superior que contiene la pared superior y pegarla directamente debajo de la sección de encabezado.

divi paredes de fotos 3d

A continuación, actualice la configuración de fila de la nueva sección de la siguiente manera:

Transformar Girar eje Y: 58 grados

Transformar el origen: Centro superior

divi paredes de fotos 3d

Diseño final

¡Eso es! Veamos el diseño final.

divi paredes de fotos 3d

El diseño también permanecerá intacto en el móvil (aparte de un pequeño desbordamiento).

divi paredes de fotos 3d

Creación de paredes de fotos 3D izquierda y derecha

divi paredes de fotos 3d

Para este próximo diseño, crearemos paredes de fotos en 3D en el lado izquierdo y derecho de nuestro encabezado en lugar de en la parte superior e inferior. Para poner en marcha el proceso de diseño, utilizaremos algunos de nuestros diseños prediseñados en nuestro primer ejemplo.

Para empezar, duplique la sección inferior del primer ejemplo de diseño que contiene la pared de la imagen inferior. Luego, abra la configuración de fila de la nueva sección y restablezca las opciones de transformación al estado predeterminado.

divi paredes de fotos 3d

Luego duplique la fila.

divi paredes de fotos 3d

A continuación, copie la Fila (no la sección) que contiene el módulo de texto con el encabezado en el primer ejemplo de diseño. Luego péguelo entre las dos filas que contienen las imágenes.

divi paredes de fotos 3d

Esta es una configuración similar al primer diseño, excepto que todas nuestras filas están dentro de una sección. Esto es importante para el siguiente paso.

Queremos que nuestras dos paredes de imágenes estén a la izquierda y a la derecha de la página con el texto en el centro. Una manera fácil de hacer esto es usar display flex en nuestra sección. Esto alineará nuestras filas horizontalmente dentro de la sección.

Para hacer esto, abra la configuración de la sección y agregue el siguiente CSS personalizado al elemento principal:

(Observe que estamos aumentando el valor de la perspectiva a 700 px para crear más distancia de "espacio Z" de la perspectiva del usuario).

CSS del elemento principal:

perspective: 700px;
display:flex;

divi paredes de fotos 3d

¡Y voilá! Nuestras paredes están en su lugar y listas para la rotación.

Agrega más imágenes para una pared más alta

Para hacer que nuestro muro de fotos en 3D sea un poco más alto, todo lo que necesitamos hacer es agregar otra imagen a cada una de nuestras cuatro columnas en cada una de las filas que contienen imágenes. Solo asegúrate de que lleven el relleno del 3% como los demás.

divi paredes de fotos 3d

Cambiar el ancho de las dos filas laterales

Antes de rotar nuestra pared de imágenes, primero debemos ajustar su ancho al 100%. Abra la configuración de fila para el muro de imágenes en el lado izquierdo y actualice lo siguiente:

Ancho: 100% (escritorio, tableta, teléfono)
Ancho máximo: 100%

divi paredes de fotos 3d

Luego haz lo mismo con la fila del lado derecho.

divi paredes de fotos 3d

Rotación de las filas laterales para un efecto 3D

Ahora estamos listos para agregar nuestra rotación de transformación a cada una de nuestras filas. Primero, abra la configuración de la fila de la izquierda y actualice lo siguiente:

Transformar Girar Eje X: 90 grados

divi paredes de fotos 3d

A continuación, abra la configuración de fila para la fila del lado derecho y actualice lo siguiente:

Transformar Girar Eje X: -90deg

divi paredes de fotos 3d

Con nuestra perspectiva en su lugar a nivel de sección, nuestras filas se mostrarán como paredes de fotos en 3D a cada lado de nuestro módulo de texto.

Resultado final

Veamos el resultado final.

divi paredes de fotos 3d

Para poner un poco de guinda al pastel, puede agregar una imagen de fondo con elementos gráficos en 3D. A continuación se muestra un ejemplo del diseño con una imagen de fondo tomada del Paquete de diseño de criptomonedas.

divi paredes de fotos 3d

Efecto adicional de desplazamiento: ¡Mueve esas paredes para visualizarlas al desplazarte!

Puede agregar fácilmente un efecto de desplazamiento de rotación de transformación que permitirá al usuario ver la pared de la imagen al moverla para verla al pasar el mouse. Para hacer esto, abra la configuración de la fila izquierda y actualice lo siguiente:

Transformar el origen: centro izquierdo
Transformar Girar eje X (flotar): 0deg

divi paredes de fotos 3d

Luego, en la configuración de la fila derecha, actualice lo siguiente:

Transformar origen: centro derecho
Transformar Girar eje X (flotar): 0deg

Ahora mira el resultado.

divi paredes de fotos 3d

Efecto de diseño adicional: haz que las imágenes se escapen al espacio

Dado que la fila de imágenes se gira con la perspectiva en su lugar, puede mover las imágenes dentro de su fila utilizando la traducción de transformación. Lo bueno de esto es que el movimiento se mantendrá a lo largo del plano 3D. Para hacer esto, simplemente abra la configuración de una imagen y use la opción de traducción de transformación para mover la imagen fuera de la cuadrícula al espacio.

divi paredes de fotos 3d

Aquí hay un ejemplo de cómo se vería agregando algunos valores de transformación y traducción a imágenes.

divi paredes de fotos 3d

Pensamientos finales

La creación de murales de fotos en 3D en Divi realmente tiene un impacto impresionante en el diseño de una página. Y debo decir que es muy divertido experimentar con diferentes diseños usando las técnicas de este artículo. ¡La propiedad de perspectiva funciona de la mano con las opciones de transformación para crear innumerables diseños de vida como 3D! Y no olvide que estas filas (o paredes) se pueden llenar con cualquier módulo en Divi. Así que siéntete libre de probar algunos anuncios publicitarios también. Espero que esto te inspire a crear algo único hoy.

Espero tener noticias tuyas en los comentarios.

¡Salud!