Durante las últimas semanas, las nuevas opciones de transformación 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 "destaque". Los cinco ejemplos que cubriremos son muy generales, lo que significa que puede usarlos para una amplia variedad de casos de uso. El propósito principal de este tutorial es presentarle el potencial de las opciones de transformación y desplazamiento cuando se combinan.
¡Hagámoslo!
Avance
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 para el 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 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.
(incrustar) https://www.youtube.com/watch?v=n1eNucMx2Hs (/ incrustar)
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 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 la fuente del texto: Ultra Bold
- Color del texto: # f2f2f2
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de la línea de texto: 1em
Configuración de texto flotante
Modifica 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:
- Acolchado superior: 50px
- Acolchado inferior: 50px
- Relleno izquierdo: 100 px (escritorio), 50 px (tableta y teléfono)
- Relleno derecho: 100 px (escritorio), 50 px (tableta y teléfono)
Transformar Girar por defecto
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
Hover Transformar Girar
Para que el módulo vuelva a la normalidad, eliminaremos la entrada al pasar el mouse.
- Derecha: 0deg
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
¡Pasemos al siguiente ejemplo! Agregue el siguiente color de fondo predeterminado:
- Color de fondo: rgba (255,255,255,0)
Colocar el cursor sobre el color de fondo
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 de texto a continuación.
- Fuente de texto: Open Sans
- Peso de la fuente del texto: Ultra Bold
- Color del texto: # 000000
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de la 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 valores de margen y relleno personalizados.
- 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: 100 px
- Acolchado inferior: 100px
- Relleno izquierdo: 100 px (escritorio y tableta), 30 px (teléfono)
- Relleno derecho: 100 px (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 aparezca.
- Color de sombra: # 00fff6
Transformar Girar por defecto
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 por defecto.
- Derecha: 0deg
Hover Transformar Girar
Modifique este valor al pasar el mouse.
- Derecha: 47 grados
Desviación de transformación predeterminada
Continúe asegurándose de que la configuración de sesgo de transformación predeterminada sea la siguiente:
- Derecha: 0deg
- Abajo: 0deg
Desviación de transformación de desplazamiento
Modifique los valores al pasar el mouse.
- Derecha: -20deg
- Inferior: 1 grado
Recrear el ejemplo n. ° 3
Color de fondo predeterminado
¡Vamos al tercer ejemplo! Cambie el color de fondo predeterminado con el siguiente código de color:
- Color de fondo: rgba (255,255,255,0)
Colocar el cursor sobre el color de fondo
Modifica el color de fondo al pasar el mouse.
- Color de fondo: # 0a16ff
Configuración de texto predeterminada
Vaya a la pestaña de diseño y cambie la configuración del texto.
- Fuente de texto: Georgia
- Peso de la fuente del texto: Ultra Bold
- Color del texto: # 000000
- Tamaño del texto: 80 px (escritorio), 60 px (tableta), 50 px (teléfono)
- Altura de la línea de texto: 1em
- Orientación del texto: centro
Configuración de texto flotante
Modifica 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 valores de margen y relleno personalizados.
- 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 (escritorio y tableta), 170 px (teléfono)
- Acolchado inferior: 220 px (escritorio y tableta), 170 px (teléfono)
- Relleno izquierdo: 100 px (escritorio y tableta), 50 px (teléfono)
- Relleno derecho: 100 px (escritorio y tableta), 50 px (teléfono)
Frontera
Continúe con la configuración del borde y cree un círculo agregando "500vw" a cada una de las esquinas.
Transformar Girar por defecto
Asegúrese de que el valor de la izquierda en la configuración de rotación de transformación permanezca en 0 grados.
- Izquierda: 0deg
Hover 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)
Colocar el cursor sobre el color de fondo
Modifica el color de fondo al pasar el mouse.
- Color de fondo: # 4b0fff
Configuración de texto predeterminada
Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente de texto: Georgia
- Peso de la fuente del texto: Ultra Bold
- Color del texto: # 000000
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de la 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
Dé forma al módulo de texto utilizando valores de margen y relleno personalizados:
- Margen izquierdo: 280 px (escritorio), 50 px (tableta), 0 px (teléfono)
- Margen derecho: 280px (escritorio), 50px (tableta), 0px (teléfono)
- Acolchado superior: 50px
- Acolchado inferior: 50px
Espaciado de desplazamiento
Modifique los valores al pasar el mouse.
- Relleno superior: 200px
- Acolchado 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: 1 px
- Color del borde inferior: # 000000
Borde flotante
Que quitaremos al pasar el mouse.
- Ancho del borde inferior: 0px
Sombra de cuadro predeterminada
Continúe agregando una sombra de caja 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 aparezca la sombra del cuadro.
- Color de sombra: rgba (10,226,255,0.67)
Transformar Girar por defecto
Pase a la configuración de rotación de transformación y asegúrese de que la entrada izquierda sea 0 grados.
- Izquierda: 0deg
Hover 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
Recrear el ejemplo n. ° 5
Color de fondo predeterminado
¡Pasemos al siguiente y último ejemplo! Agregue el siguiente color de fondo al módulo de texto:
- Color de fondo: rgba (255,255,255,0)
Colocar el cursor sobre el color de fondo
Modifica el color de fondo al pasar el mouse.
- Color de fondo: #ffffff
Configuración de texto predeterminada
Vaya a la pestaña de diseño y cambie la configuración de texto predeterminada.
- Fuente del texto: Alegreya Sans SC
- Peso de la fuente del texto: Ultra Bold
- Color del texto: #ffffff
- Tamaño del texto: 100 px (escritorio), 80 px (tableta), 70 px (teléfono)
- Altura de la línea de texto: 1em
- Longitud vertical de la sombra del texto: 0em
- Intensidad del desenfoque de la sombra del texto: 0.02em
- Color de la sombra del texto: # 000000
- Orientación del texto: centro
Configuración de texto flotante
Modifica 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 valores de margen y relleno personalizados.
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 la siguiente configuración a continuación:
- Posición vertical de la sombra del cuadro: 50px
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (255,255,255,0)
Sombra de caja flotante
Y cambia el color de la sombra al pasar el mouse.
- Color de sombra: rgba (0,0,0,0.1)
Transformar Girar por defecto
Pase a la configuración de rotación de transformación y cambie el valor izquierdo.
- Izquierda: 359,9 grados
Hover Transformar Girar
Modifica ese mismo valor al pasar el mouse.
- Izquierda: 348 grados
Desviación de transformación predeterminada
Asegúrese de que el valor de sesgo de transformación inferior permanezca en 0 grados.
- Abajo: 0deg
Desviación de transformación de desplazamiento
Y cambie este valor al pasar el mouse.
- Inferior: 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 obsequios de Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.