En las últimas semanas, las nuevas opciones de transformación de Divi han ayudado a despertar nuestra creatividad. Una de las mejores cosas de las opciones de transformación es el «pop» visual que viene con su uso. Con solo unos pocos ajustes, puede cambiar la experiencia general del usuario de cualquier módulo, fila, sección o página en la que esté trabajando.
En esta publicación, le mostraremos cómo combinar estas increíbles opciones de transformación con las opciones de desplazamiento de Divi . Más precisamente, vamos a hacer que nuestra copia «explote». Los cinco ejemplos que cubriremos son muy generales, lo que significa que puede usarlos para una amplia variedad de casos de uso. El objetivo principal de este tutorial es presentarle el potencial de las opciones de transformación y desplazamiento cuando se combinan.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de los cinco ejemplos en diferentes tamaños de pantalla. Recuerde que los efectos se activarán al pasar el mouse por encima del escritorio y al hacer clic en la tableta y el teléfono.
Escritorio
Móvil
Descarga los ejemplos GRATIS
Para poner sus manos en los ejemplos gratuitos, primero deberá descargarlos 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!
Suscríbete a nuestro canal de Youtube
Pasos generales
Agregar nueva sección
Antes de sumergirnos en los diferentes ejemplos, veremos algunos pasos generales que son los mismos para cada uno de los ejemplos. Agregue una sección regular a una página nueva o existente.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Agregar contenido
Agregue un módulo de texto con algún contenido de su elección.
Clonar sección cuatro veces
Clona la sección cuatro veces si planeas recrear cada uno de los ejemplos de esta publicación.
Recrear el ejemplo n.º 1
Configuración de texto predeterminada
¡Comencemos a recrear el primer ejemplo! Abra el Módulo de texto, vaya a la pestaña de diseño y modifique la configuración del texto.
- Fuente de texto: Open Sans
- Peso de fuente de texto: ultra negrita
- Color del texto: #f2f2f2
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de línea de texto: 1em
Configuración de texto flotante
Modifique el color del texto al pasar el mouse.
- Color del texto: #680aff
Espaciado
Luego, vaya a la configuración de espaciado y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla:
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 100 px (escritorio), 50 px (tableta y teléfono)
- Relleno derecho: 100 px (escritorio), 50 px (tableta y teléfono)
Rotación de transformación predeterminada
Vamos a reflejar el texto agregando la siguiente entrada a la opción de rotación de transformación de nuestro módulo de texto:
- Derecha: 180 grados
Pasar el cursor Transformar Girar
Para que el módulo vuelva a la normalidad, eliminaremos la entrada al pasar el mouse.
- Derecha: 0 grados
Transiciones
Para crear una transición fluida, también aumentaremos la duración de la transición en la pestaña avanzada.
- Duración de la transición: 800ms
Recrear el Ejemplo #2
Color de fondo predeterminado
¡Vamos al siguiente ejemplo! Agregue el siguiente color de fondo predeterminado:
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Modificar el color de fondo al pasar el mouse
- Color de fondo: #006aff
Configuración de texto predeterminada
Pase a la pestaña de diseño y cambie la configuración del texto a continuación.
- Fuente de texto: Open Sans
- Peso de fuente de texto: ultra negrita
- Color del texto: #000000
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de línea de texto:
Configuración de texto flotante
Use otro color de texto al pasar el mouse:
- Color del texto: #ffffff
Espaciado
Luego, vaya a la pestaña de diseño y dé forma al módulo utilizando márgenes personalizados y valores de relleno.
- Margen izquierdo: 250 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Margen derecho: 250 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Relleno superior: 100px
- Relleno inferior: 100px
- Relleno izquierdo: 100 px (computadora de escritorio y tableta), 30 px (teléfono)
- Relleno derecho: 100 px (computadora de escritorio y tableta), 30 px (teléfono)
Sombra de cuadro predeterminada
También estamos agregando sombra de cuadro. No queremos que la sombra del cuadro se muestre en el estado predeterminado. Es por eso que usaremos un color de sombra completamente transparente.
- Posición vertical de la sombra del cuadro: 6px
- Color de sombra: rgba(237,240,0,0)
Sombra de caja flotante
Modifique el color de la sombra al pasar el mouse para que se muestre.
- Color de sombra: #00fff6
Rotación de transformación predeterminada
Pase a la configuración de transformación y asegúrese de que la entrada correcta en la configuración de rotación de transformación permanezca en 0 grados de forma predeterminada.
- Derecha: 0 grados
Pasar el cursor Transformar Girar
Modifique este valor al pasar el mouse.
- Derecha: 47 grados
Sesgo de transformación predeterminado
Continúe asegurándose de que la configuración de sesgo de transformación predeterminada sea la siguiente:
- Derecha: 0 grados
- Inferior: 0 grados
Sesgo de transformación de desplazamiento
Modifique los valores al pasar el mouse.
- Derecha: -20 grados
- Inferior: 1 grado
Recrear el Ejemplo #3
Color de fondo predeterminado
¡Vamos al tercer ejemplo! Cambie el color de fondo predeterminado usando el siguiente código de color:
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Modifique el color de fondo al pasar el mouse.
- Color de fondo: #0a16ff
Configuración de texto predeterminada
Pase a la pestaña de diseño y cambie la configuración del texto.
- Fuente del texto: Georgia
- Peso de fuente de texto: ultra negrita
- Color del texto: #000000
- Tamaño del texto: 80 px (escritorio), 60 px (tableta), 50 px (teléfono)
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Configuración de texto flotante
Modifique el color del texto al pasar el mouse.
- Color del texto: #ffffff
Espaciado
Luego, vaya a la configuración de espaciado y dé forma al módulo utilizando márgenes personalizados y valores de relleno.
- Margen izquierdo: 275 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Margen derecho: 275 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Relleno superior: 220 px (computadora de escritorio y tableta), 170 px (teléfono)
- Relleno inferior: 220 px (computadora de escritorio y tableta), 170 px (teléfono)
- Relleno izquierdo: 100 px (computadora de escritorio y tableta), 50 px (teléfono)
- Relleno derecho: 100 px (computadora de escritorio y tableta), 50 px (teléfono)
Borde
Pase a la configuración del borde y cree un círculo agregando ‘500vw’ en cada una de las esquinas.
Rotación de transformación predeterminada
Asegúrese de que el valor de la izquierda en la configuración de rotación de transformación permanezca en 0 grados.
- Izquierda: 0 grados
Pasar el cursor Transformar Girar
Y modifique este valor al pasar el mouse usando la siguiente entrada:
- Izquierda: 359,9 grados
Transiciones
Por último, asegúrese de que la transición se realice sin problemas aumentando la duración de la transición en la pestaña avanzada.
- Duración de la transición: 800ms
Recrear el Ejemplo #4
Color de fondo predeterminado
¡Vamos al cuarto ejemplo! Utilice el siguiente color de fondo:
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Modifique el color de fondo al pasar el mouse.
- Color de fondo: #4b0fff
Configuración de texto predeterminada
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Georgia
- Peso de fuente de texto: ultra negrita
- Color del texto: #000000
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Configuración de texto flotante
Cambia el color del texto al pasar el mouse.
- Color del texto: #ffffff
Espaciado predeterminado
Da forma al módulo de texto usando márgenes personalizados y valores de relleno:
- Margen izquierdo: 280 px (escritorio), 50 px (tableta), 0 px (teléfono)
- Margen derecho: 280 px (escritorio), 50 px (tableta), 0 px (teléfono)
- Relleno superior: 50px
- Relleno inferior: 50px
Espaciado de desplazamiento
Modifique los valores al pasar el mouse.
- Relleno superior: 200px
- Relleno inferior: 200px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Borde predeterminado
También estamos agregando un borde inferior al módulo de texto.
- Ancho del borde inferior: 1px
- Color del borde inferior: #000000
Borde flotante
Que eliminaremos al pasar el mouse.
- Ancho del borde inferior: 0px
Sombra de cuadro predeterminada
Continúe agregando una sombra de cuadro con un color de sombra completamente transparente.
- Color de sombra: rgba(0,0,0,0)
Sombra de caja flotante
Cambie el color de la sombra al pasar el mouse para permitir que se muestre la sombra del cuadro.
- Color de sombra: rgba (10,226,255,0.67)
Rotación de transformación predeterminada
Pase a la configuración de rotación de transformación y asegúrese de que la entrada izquierda sea 0 grados.
- Izquierda: 0 grados
Pasar el cursor Transformar Girar
Cambie el valor al pasar el mouse.
- Izquierda: 359,9 grados
Transiciones
Y aumente la duración de la transición en la pestaña avanzada.
- Duración de la transición: 800ms
Recree el Ejemplo #5
Color de fondo predeterminado
¡Vamos al siguiente y último ejemplo! Agregue el siguiente color de fondo al módulo de texto:
- Color de fondo: rgba(255,255,255,0)
Color de fondo flotante
Modifique el color de fondo al pasar el mouse.
- Color de fondo: #ffffff
Configuración de texto predeterminada
Pase a la pestaña de diseño y cambie la configuración de texto predeterminada.
- Fuente del texto: Alegreya Sans SC
- Peso de fuente de texto: ultra negrita
- Color del texto: #ffffff
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de línea de texto: 1em
- Longitud vertical de la sombra del texto: 0em
- Fuerza de desenfoque de sombra de texto: 0.02em
- Color de sombra de texto: #000000
- Orientación del texto: Centro
Configuración de texto flotante
Modifique algunas configuraciones al pasar el mouse.
- Color del texto: #952bff
- Color de sombra: rgba(0,0,0,0)
Espaciado
Continúe yendo a la configuración de espaciado. Agregue algunos márgenes personalizados y valores de relleno.
Borde predeterminado
Junto con un borde inferior.
- Ancho del borde inferior: 0px
- Color del borde inferior: rgba (149,43,255,0.29)
Borde flotante
Permita que se muestre el borde inferior aumentando el ancho al pasar el mouse.
- Ancho del borde inferior: 7px
Sombra de cuadro predeterminada
Agregue una sombra de cuadro usando las siguientes configuraciones a continuación:
- Posición vertical de la sombra del cuadro: 50px
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba(255,255,255,0)
Sombra de caja flotante
Y cambie el color de la sombra al pasar el mouse.
- Color de sombra: rgba(0,0,0,0.1)
Rotación de transformación predeterminada
Pase a la configuración de rotación de transformación y cambie el valor de la izquierda.
- Izquierda: 359,9 grados
Pasar el cursor Transformar Girar
Modifique ese mismo valor al pasar el mouse.
- Izquierda: 348 grados
Sesgo de transformación predeterminado
Asegúrese de que el valor de sesgo de transformación inferior permanezca en 0 grados.
- Inferior: 0 grados
Sesgo de transformación de desplazamiento
Y cambie este valor al pasar el mouse.
- Abajo: 26 grados
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, hemos compartido 5 formas diferentes de hacer que su copia destaque con las opciones de transformación y desplazamiento de Divi. Al comienzo de este tutorial, también pudo descargar el diseño completo de forma gratuita. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.