A todos nos encantan las nuevas opciones de transformación . Nos ayudan a crear diseños sorprendentes y tienen una vista en tiempo real de los cambios que hacemos. Y cuando se combina con las opciones de desplazamiento , definitivamente puede lograr crear algunos efectos sorprendentes. En este tutorial, le mostraremos cómo crear módulos publicitarios interactivos combinando Divi y sus opciones de transformación y desplazamiento. Manejaremos cuatro ejemplos diferentes que toman poco o nada de tiempo para crear, y que puede usar para cualquier proyecto web que desee.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado.
Pasos generales
Agregar nueva sección
En la primera parte de esta publicación, repasaremos algunos pasos generales que nos ayudarán a centrarnos en los ejemplos de la propaganda de transformación más adelante en la publicación. Comience creando una nueva página o abriendo una existente y agréguele una sección regular.
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño para permitir que la fila ocupe todo el ancho de la pantalla.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Agregue un poco de relleno superior e inferior personalizado también.
- Relleno superior: 150px
- Relleno inferior: 150px
Agregue el módulo Blurb a la columna 1
Agregar contenido
El único módulo que necesitaremos a lo largo de este tutorial es un módulo de Blurb. Una vez que hayamos personalizado el Módulo Blurb, lo reutilizaremos para lograr los cuatro ejemplos que pudo ver al comienzo de la publicación. Continúe y agregue un Módulo de Blurb a la primera columna e ingrese algún contenido de su elección.
Seleccionar icono
Continúe seleccionando un icono.
Color de fondo
Agregue un fondo completamente blanco a continuación.
- Color de fondo: #ffffff
Configuración de iconos predeterminada
Luego, cambie la configuración del icono en la pestaña de diseño.
- Color del icono: #7a69e6
- Icono de círculo: Sí
- Color del círculo: rgba (122,105,230,0.3)
- Colocación de imagen/icono: Arriba
- Usar tamaño de fuente del icono: 32 px
Configuración del icono de desplazamiento
Modifique tanto el icono como el color del círculo al pasar el mouse.
- Color del icono: #ff758e
- Color del círculo: rgba (255.117.142, 0,29)
Configuración del texto del título
Continúe cambiando la configuración de texto.
- Fuente del título: Roboto
- Peso de la fuente del título: Negrita
- Alineación del texto del título: Centro
- Tamaño del texto del título: 18px
- Altura de la línea del título: 1,7 em
Configuración del texto del cuerpo
Y modifique la configuración del texto del cuerpo también.
- Fuente del cuerpo: Open Sans
- Alineación del cuerpo del texto: Centro
- Tamaño del cuerpo del texto: 14px
- Altura de la línea del cuerpo: 1,8 em
Dimensionamiento
También estamos reduciendo ligeramente el tamaño del módulo en diferentes tamaños de pantalla.
- Ancho: 74 % (escritorio), 85 % (tableta y teléfono)
- Alineación del módulo: Centro
Espaciado
Y también agregaremos algo de relleno personalizado.
- Relleno superior: 30px
- Relleno inferior: 40px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Borde
Continúe agregando ’10px’ a cada una de las esquinas del Módulo de Blurb.
Sombra de cuadro predeterminada
Y para colmo, agrega una sutil sombra de caja.
- Fuerza de desenfoque de sombra de cuadro: 70px
- Color de sombra: rgba (122,105,230,0.3)
Sombra de caja flotante
Cambie el color de la sombra del cuadro al pasar el mouse para que coincida con el ícono del mouse y los colores del círculo.
- Color de sombra: rgba (255.117.142, 0,29)
Clonar módulo Blurb dos veces y colocar duplicados en las columnas restantes
Una vez que haya terminado de personalizar el módulo de Blurb, puede continuar y clonarlo dos veces. Coloque los duplicados en las dos columnas restantes.
Añadir Fila #2
Estructura de la columna
Para el último ejemplo, necesitaremos una fila separada. Elija la siguiente estructura de columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño en la pestaña de diseño.
- Usar ancho personalizado: Sí
- Unidad: PX
- Ancho personalizado: 1440px
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Clonar el módulo Blurb en la fila anterior y colocarlo en la columna 1
Luego, clone uno de los módulos de Blurb en la fila anterior y coloque el duplicado en la primera columna de la segunda fila.
Cambiar talla
Modifique el ancho en la configuración de tamaño de su nuevo Módulo Blurb y una vez que lo haga, ¡habrá completado los pasos generales!
- Ancho: 100 % (escritorio), 85 % (tableta y teléfono)
Recrear el ejemplo n.º 1
Escala de transformación predeterminada
Ahora que hemos seguido todos los pasos generales, podemos comenzar a centrarnos en los diferentes ejemplos y cómo lograrlos utilizando las opciones de transformación y desplazamiento de Divi. El primer ejemplo, como puede notar en el GIF anterior, aumenta el tamaño del módulo al pasar el mouse por encima. Para lograrlo, asegúrese de que los valores de la escala de transformación permanezcan en ‘100 %’ en todos los tamaños de pantalla.
- Abajo: 100% (Escritorio, tableta y teléfono)
- Derecha: 100% (Escritorio, tableta y teléfono)
Escala de transformación de desplazamiento
Modifique los valores de la escala de transformación al pasar el mouse para crear un efecto de expansión.
- Fondo: 132%
- Derecha: 132%
Recrear el Ejemplo #2
Rotación de transformación predeterminada
¡Vamos al segundo ejemplo! Vamos a crear un efecto de volteo horizontal como puedes notar en el GIF de arriba. Para hacer eso, tendremos que jugar con los valores de rotación de transformación. Estamos usando el valor ‘más alto’ posible antes de que la rotación cambie a 0 grados. Esto permitirá que se produzca el efecto de volteo.
- Derecha: 359,9 grados
Pasar el cursor Transformar Girar
Habilite las opciones de desplazamiento para la opción de rotación de transformación y agregue ‘0 grados’. Básicamente, lo que estamos haciendo es permitir que el módulo haga un giro de 360 grados (técnicamente, 359,9).
- Derecha: 0 grados
Transiciones
También aumentaremos la duración de la transición en la pestaña avanzada para crear una transición fluida.
- Duración de la transición: 1000ms
Recrear el Ejemplo #3
Rotación de transformación predeterminada
Para el tercer ejemplo, vamos a hacer casi exactamente lo mismo que hicimos en el ejemplo anterior, pero en lugar de tener un giro horizontal, vamos a crear uno vertical.
- Centro: 359,9 grados
Pasar el cursor Transformar Girar
Asegúrese de cambiar el valor que ha modificado de nuevo a ‘0 grados’ al pasar el mouse.
- Centro: 0 grados
Transiciones
Y, nuevamente, aumente la duración de la transición en la configuración de transiciones.
- Duración de la transición: 1000ms
Recrear el Ejemplo #4
Escala de transformación predeterminada
¡Vamos al siguiente y último ejemplo! Comience por transformar la escala del módulo, pero asegúrese de que el módulo permanezca intacto en tamaños de pantalla más pequeños.
- Abajo: 150 % (escritorio), 100 % (tableta y teléfono)
- Derecha: 150 % (escritorio), 100 % (tableta y teléfono)
Escala de transformación de desplazamiento
Cambie la escala de transformación al pasar el mouse para permitir que el módulo vuelva a su lugar en el escritorio.
- Abajo: 100%
- Derecha: 100%
Rotación de transformación predeterminada
Continúe cambiando los valores de rotación de transformación. Nuevamente, asegúrese de que el módulo permanezca intacto en tamaños de pantalla más pequeños modificando los valores en consecuencia.
- Izquierda: 322 grados (escritorio), 0 grados (tableta y teléfono)
- Derecha: 59 grados (escritorio), 0 grados (tableta y teléfono)
Pasar el cursor Transformar Girar
Permita que el módulo caiga para colocarse al pasar el mouse reemplazando los valores que ha agregado con ‘0deg’.
- Izquierda: 0 grados
- Derecha: 0 grados
Sesgo de transformación predeterminado
Modifique también los valores de sesgo de transformación.
- Abajo: 22 grados (escritorio), 0 grados (tableta y teléfono)
- Derecha: 22 grados (escritorio), 0 grados (tableta y teléfono)
Sesgo de transformación de desplazamiento
Recupere los valores predeterminados al pasar el mouse.
- Inferior: 0 grados
- Derecha: 0 grados
Transiciones
Por último, pero no menos importante, aumente la duración de la transición en la configuración de transiciones.
- Duración de la transición: 500ms
Clonar el módulo Blurb en la columna 1 cuatro veces y colocar duplicados en las columnas restantes
Una vez que haya completado la configuración de transición, puede continuar y clonar el Módulo Blurb cuatro veces. Coloque los duplicados en las columnas restantes y ¡listo!
Pensamientos finales
En este tutorial, le mostramos cómo usar creativamente las opciones de transformación y desplazamiento de Divi juntas. Más específicamente, hemos recreado cuatro ejemplos diferentes que le muestran cómo hacer que los módulos de Blurb sean más interactivos y al mismo tiempo mantener el resultado deseado en pantallas más pequeñas. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!