Cómo apilar maravillosamente elementos de cartera con las opciones de transformación de Divi

Las nuevas opciones de transformación Divi han abierto un montón de nuevas puertas hacia la creación de un diseño web visualmente atractivo. Nos acerca un paso más a no necesitar ningún software de edición de imágenes al diseñar un sitio web desde cero. Podemos transformarlo para que se vea exactamente como queremos sin dejar de tener un diseño 100% sensible.

En esta publicación, usaremos las nuevas opciones de transformación para apilar maravillosamente los elementos de la cartera. Este es un gran enfoque para mostrar sitios web creados anteriormente, por ejemplo. También nos aseguraremos de que las imágenes permanezcan donde están, sin importar el tamaño de pantalla que usen los visitantes. Esperamos que este tutorial lo inspire a ser creativo con las nuevas opciones de transformación de Divi al personalizar un sitio web según sus necesidades.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

¡Empecemos a recrear!

Agregar nueva sección

Fondo degradado

Comience agregando una nueva sección a su página. Abra la configuración de la sección y agréguele un fondo degradado.

• Color 1: # f4f4f4
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 30%
• Posición final: 30%

Espaciado

Luego, vaya a la pestaña de diseño y modifique los valores de relleno personalizados en la configuración de espaciado.

• Relleno superior: 0px (escritorio), 18vw (tableta), 40vw (teléfono)
• Acolchado inferior: 0px (escritorio), 18vw (tableta), 40vw (teléfono)

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

Luego, vaya a la configuración de espaciado y elimine el relleno predeterminado superior e inferior.

• Relleno superior: 0px
• Acolchado inferior: 0px

Monitor

También nos aseguramos de que ambas columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños. Para hacer eso, necesitaremos agregar una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregue el módulo de imagen n. ° 1 a la columna 1

Cargar imagen

¡Ahora podemos comenzar a agregar los diferentes módulos! Para poder seguir este tutorial, siga adelante y guarde la siguiente pantalla de impresión en su computadora:

Cargue la pantalla de impresión en un módulo de imagen en la primera columna.

Dimensionamiento

Luego, vaya a la pestaña de diseño y habilite la opción 'Forzar ancho completo'. Una vez que lo haga, la imagen ocupará todo el ancho de la columna.

• Forzar ancho completo: Sí

Espaciado

Para reducir el tamaño de la imagen, agregaremos algunos márgenes izquierdo y derecho personalizados. Notará que estamos usando una unidad de ventana gráfica para asegurarnos de que el tamaño de la imagen permanezca intacto, sin importar el tamaño de la pantalla.

• Margen superior: -10vw
• Acolchado izquierdo: 11vw
• Acolchado derecho: 11vw

Frontera

Agregue '2vw' a cada una de las esquinas en la configuración del borde a continuación.

Sombra de la caja

Junto con una sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

Transformar Traducir

¡Ahora podemos empezar a transformar la imagen! Agregue los siguientes valores a la pestaña de traducción de transformación de las opciones de transformación:

• Abajo: -26vw
• Derecha: -2vw

Los valores que agregue aquí dependen del ancho y alto de su imagen, por lo que si está usando una imagen diferente, tendrá que modificar los valores en consecuencia. Asegúrese de utilizar unidades de ventana gráfica para asegurarse de que la posición de la imagen siga siendo la misma en todos los tamaños de pantalla.

Transformar Girar

Vaya a la pestaña de rotación de transformación y gire la imagen en consecuencia:

• Izquierda: 24 grados
• Centro: 46 grados
• Derecha: -7deg

Traducir Skew

Por último, pero no menos importante, habilite traducir sesgo con los siguientes valores:

• Abajo: -4deg
• Derecha: 24 grados

Agregue el módulo de imagen n. ° 2 a la columna 1

Cargar imagen

¡Pasemos al siguiente módulo de imagen! Guarde la siguiente pantalla de impresión en su computadora o use otra pantalla de impresión de su elección:

Continúe cargando la pantalla de impresión en el segundo módulo de imagen en la columna 1.

Dimensionamiento

Luego, vaya a la configuración de tamaño y habilite la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Espaciado

Estamos reduciendo el tamaño de la imagen y superponiéndola con la imagen anterior usando algunos valores de margen personalizados en la configuración de espaciado.

• Margen superior: -81vw (escritorio), -50vw (tableta y teléfono)
• Margen izquierdo: 11vw
• Margen derecho: 11vw

Frontera

Agregaremos '2vw' a cada una de las esquinas en la configuración del borde a continuación.

Sombra de la caja

Y también agregaremos una sombra de caja. Observe cómo estamos usando una sombra de cuadro más oscura para la imagen del segundo artículo de cartera. Esto le ayudará a crear más profundidad entre los elementos de la cartera.

• Fuerza de desenfoque de sombra de caja: 150px
• Color de sombra: rgba (0,0,0,0.6)

Transformar Traducir

Luego, vaya a la configuración de transformación y modifique los valores de conversión de transformación:

• Abajo: -8vw
• Derecha: 0px

Nuevamente, estos valores realmente dependen de cómo desee colocar la pantalla de impresión y de las dimensiones que tenga la pantalla de impresión. Cuanto más pequeña sea la imagen, más tendrás que empujarla hacia la izquierda utilizando un valor negativo mayor.

Transformar Girar

Pase a la pestaña de rotación de transformación y juegue con los tres valores.

• Izquierda: 24 grados
• Centro: 46 grados
• Derecha: -7deg

Traducir Skew

Por último, pero no menos importante, modifique los valores de desviación de traducción:

• Abajo: -4deg
• Derecha: 24 grados

Agregue el módulo de imagen n. ° 3 a la columna 1

Cargar imagen

Pasando al siguiente y último módulo de imagen que necesitamos en la columna 1. Guarde la siguiente pantalla de impresión en su computadora o use cualquier otra pantalla de impresión de su elección:

Agregue la pantalla de impresión que ha guardado en un nuevo módulo de imagen.

Dimensionamiento

Luego, vaya a la configuración de tamaño y habilite la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Espaciado

Vaya a la configuración de espaciado a continuación y modifique los valores de los márgenes en consecuencia:

• Margen superior: -107vw
• Margen izquierdo: 19vw
• Margen derecho: 19vw

Frontera

Continúe agregando '2vw' a cada una de las esquinas del Módulo de imagen.

Sombra de la caja

A continuación, agregue una sombra de cuadro. Nuevamente, estamos usando un color de sombra más fuerte que los que usamos para los dos módulos de imagen anteriores.

• Fuerza de desenfoque de sombra de caja: 200px
• Color de sombra: rgba (0,0,0,0.82)

Transformar Traducir

Luego, vaya a la configuración de transformación y modifique los valores de conversión de transformación:

• Abajo: -42vw
• Derecha: 11vw

Transformar Girar

Pase a la pestaña de rotación de transformación y realice algunos cambios allí también.

• Izquierda: 24 grados
• Centro: 46 grados
• Derecha: -7deg

Traducir Skew

Por último, pero no menos importante, modifique los valores de desviación de traducción.

• Abajo: -4deg
• Derecha: 24 grados

Agregar módulo de texto de título a la columna 2

Agregar copia H2

¡A la segunda columna! Agregue un módulo de texto con contenido H2 de su elección.

Configuración de texto H2

Vaya a la configuración de texto H2 a continuación y realice algunos cambios.

• Fuente del encabezado 2: Roboto
• Peso de la fuente del encabezado 2: Delgado
• Alineación del texto del encabezado 2: izquierda
• Color del texto del encabezado 2: # 000000
• Encabezado 2 Tamaño del texto: 5vw (escritorio), 6vw (tableta), 7vw (teléfono)
• Espacio entre letras del encabezado 2: -1px

Espaciado

Continúe agregando algunos valores de margen personalizados en la configuración de espaciado.

• Margen superior: 35vw (escritorio), 10vw (tableta), 0vw (teléfono)
• Margen izquierdo: -4vw
• Margen derecho: 4vw

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitamos en la columna 2 es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

• Color: # 8193fa

Dimensionamiento

Modifique también la configuración de tamaño.

• Peso del divisor: 8px
• Ancho: 28%

Espaciado

Y agregue algunos valores de margen personalizados.

• Margen superior: 1vw
• Margen izquierdo: -4vw
• Margen derecho: 4vw

Agregar módulo de texto descriptivo a la columna 2

Agregar contenido

El siguiente módulo que necesitamos en la columna 2 es otro módulo de texto. Agregue algún contenido de párrafo de su elección.

Configuración de texto

Luego, vaya a la configuración de texto y realice algunos cambios.

• Fuente de texto: Open Sans
• Tamaño del texto: 0.6vw (escritorio), 1.2vw (tableta), 1.8vw (teléfono)
• Altura de la línea de texto: 3.1em (escritorio), 2.7em (tableta), 2.6em (teléfono)
• Orientación del texto: izquierda

Espaciado

A continuación, agregue algunos valores de margen personalizados.

• Margen superior: 1vw
• Margen izquierdo: -4vw
• Margen derecho: 4vw

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que necesitamos para completar el diseño es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Luego, vaya a la pestaña de diseño y modifique la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color 1: # 5627ba
• Color 2: # 8fb5fc
• Dirección del gradiente: 122 grados
• Ancho del borde del botón: 0px
• Peso de fuente: Ultra Bold
• Estilo de fuente: mayúsculas

Espaciado

Cambie también el margen personalizado y los valores de relleno.

• Margen superior: 2vw (escritorio), 3vw (tableta), 5vw (teléfono)
• Margen inferior: 6vw (tableta), 8vw (teléfono)
• Margen izquierdo: -4vw
• Margen derecho: 4vw
• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
• Relleno derecho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro sutil y ¡listo!

• Fuerza de desenfoque de sombra de caja: 40px
• Color de sombra: rgba (0,0,0,0.3)

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con las nuevas opciones de transformación de Divi. Más específicamente, hemos apilado elementos de cartera para crear un diseño agradable y visualmente atractivo. También nos hemos asegurado de que las imágenes se vean bien en todos los tamaños de pantalla. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!