Las nuevas opciones de transformación de Divi han abierto un montón de nuevas puertas para crear 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% receptivo.
En esta publicación, vamos a utilizar las nuevas opciones de transformación para apilar de manera hermosa 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, independientemente del tamaño de pantalla que utilicen 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!
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 gradiente: 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)
- Relleno 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 utilizando 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 del canalón: 1
- Igualar alturas de columna: Sí
Espaciado
Luego, vaya a la configuración de espaciado y elimine el relleno predeterminado superior e inferior.
- Relleno superior: 0px
- Relleno inferior: 0px
Mostrar
También nos estamos asegurando 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.
|
01
|
display: flex; |
Agregue el módulo de imagen n. ° 1 a la columna 1
Cargar imagen
¡Ya podemos empezar a añadir los diferentes módulos! Para poder seguir este tutorial, continúe 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
Borde
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 cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
Transformar Traducir
¡Ahora podemos comenzar 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 agrega aquí dependen del ancho y el alto de su imagen, por lo que si está utilizando una imagen diferente, deberá modificar los valores en consecuencia. Asegúrese de utilizar unidades de ventana gráfica para asegurarse de que la posición de la imagen permanezca igual en todos los tamaños de pantalla.
Transformar Rotar
Pase a la pestaña de rotación de transformación y gire la imagen en consecuencia:
- Izquierda: 24 grados
- Centro: 46 grados
- Derecha: -7 grados
Traducir sesgado
Por último, pero no menos importante, habilite el sesgo de traducción con los siguientes valores:
- Inferior: -4 grados
- Derecha: 24 grados
Agregue el módulo de imagen n.º 2 a la columna 1
Cargar imagen
¡Pasamos 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 haciendo que se superponga con la imagen anterior mediante el uso de 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
Borde
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 cuadro. Observe cómo estamos usando una sombra de cuadro más oscura para la imagen del segundo elemento de la cartera. Esto le ayudará a crear más profundidad entre los elementos de la cartera.
- Fuerza de desenfoque de sombra de cuadro: 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 traducción de transformación:
- Abajo: -8vw
- Derecha: 0px
Nuevamente, estos valores realmente dependen de cómo desea colocar la pantalla de impresión y qué dimensiones tiene su pantalla de impresión. Cuanto más pequeña sea la imagen, más tendrá que empujarla hacia la izquierda utilizando un valor negativo mayor.
Transformar Rotar
Pase a la pestaña de transformación y rotación y juegue con los tres valores.
- Izquierda: 24 grados
- Centro: 46 grados
- Derecha: -7 grados
Traducir sesgado
Por último, pero no menos importante, modifique los valores de sesgo de traducción:
- Inferior: -4 grados
- Derecha: 24 grados
Agregue el módulo de imagen n.º 3 a la columna 1
Cargar imagen
En el 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 margen en consecuencia:
- Margen superior: -107vw
- Margen izquierdo: 19vw
- Margen derecho: 19vw
Borde
Continúe agregando ‘2vw’ en cada una de las esquinas del Módulo de Imagen.
Sombra de la caja
Agregue una sombra de cuadro a continuación. 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 cuadro: 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 traducción de transformación:
- Abajo: -42vw
- Derecha: 11vw
Transformar Rotar
Pase a la pestaña Transformar Rotar y haga algunos cambios allí también.
- Izquierda: 24 grados
- Centro: 46 grados
- Derecha: -7 grados
Traducir sesgado
Por último, pero no menos importante, modifique los valores de sesgo de traducción.
- Inferior: -4 grados
- Derecha: 24 grados
Agregar módulo de texto de título a la columna 2
Agregar copia H2
¡A por la segunda columna! Agregue un módulo de texto con algún 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.
- Encabezado 2 Fuente: Roboto
- Encabezado 2 Peso de fuente: Delgado
- Encabezado 2 Alineación de texto: Izquierda
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto: 5vw (Escritorio), 6vw (Tablet), 7vw (Teléfono)
- Encabezado 2 Espaciado entre letras: -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
Agregue el 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, ve a la pestaña de diseño y cambia 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
Agregue el módulo de texto de descripción 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,6 vw (escritorio), 1,2 vw (tableta), 1,8 vw (teléfono)
- Altura de la línea de texto: 3,1 em (escritorio), 2,7 em (tableta), 2,6 em (teléfono)
- Orientación del texto: Izquierda
Espaciado
Agregue algunos valores de margen personalizados a continuación.
- Margen superior: 1vw
- Margen izquierdo: -4vw
- Margen derecho: 4vw
Agregar copia
El siguiente y último módulo que necesitamos para completar el diseño es un módulo de botones. Agregue alguna 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 negrita
- Estilo de fuente: Mayúsculas
Espaciado
Cambie también los valores de margen y relleno personalizados.
- Margen superior: 2vw (escritorio), 3vw (tableta), 5vw (teléfono)
- Margen inferior: 6vw (tableta), 8vw (teléfono)
- Margen izquierdo: -4vw
- Margen derecho: 4vw
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno 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 cuadro: 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!