5 formas de hacer que su copia destaque con las opciones de desplazamiento y transformación de Divi


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

copia pop

Móvil

copia pop

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.

copia pop

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

copia pop

Agregar módulo de texto a la columna

Agregar contenido

Agregue un módulo de texto con algún contenido de su elección.

copia pop

Clonar sección cuatro veces

Clona la sección cuatro veces si planeas recrear cada uno de los ejemplos de esta publicación.

copia pop

Recrear el ejemplo n. ° 1

copia pop

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

copia pop

Configuración de texto flotante

Modifica el color del texto al pasar el mouse.

  • Color del texto: # 680aff

copia pop

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)

copia pop

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

copia pop

Hover Transformar Girar

Para que el módulo vuelva a la normalidad, eliminaremos la entrada al pasar el mouse.

  • Derecha: 0deg

copia pop

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

copia pop

Recrear el ejemplo 2

copia pop

Color de fondo predeterminado

¡Pasemos al siguiente ejemplo! Agregue el siguiente color de fondo predeterminado:

  • Color de fondo: rgba (255,255,255,0)

copia pop

Colocar el cursor sobre el color de fondo

Modificar el color de fondo al pasar el mouse

  • Color de fondo: # 006aff

copia pop

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:

copia pop

Configuración de texto flotante

Use otro color de texto al pasar el mouse:

  • Color del texto: #ffffff

copia pop

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)

copia pop

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)

copia pop

Sombra de caja flotante

Modifique el color de la sombra al pasar el mouse para que aparezca.

  • Color de sombra: # 00fff6

copia pop

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

copia pop

Hover Transformar Girar

Modifique este valor al pasar el mouse.

  • Derecha: 47 grados

copia pop

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

copia pop

Desviación de transformación de desplazamiento

Modifique los valores al pasar el mouse.

  • Derecha: -20deg
  • Inferior: 1 grado

copia pop

Recrear el ejemplo n. ° 3

copia pop

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)

copia pop

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

  • Color de fondo: # 0a16ff

copia pop

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

copia pop

Configuración de texto flotante

Modifica el color del texto al pasar el mouse.

  • Color del texto: #ffffff

copia pop

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)

copia pop

Frontera

Continúe con la configuración del borde y cree un círculo agregando "500vw" a cada una de las esquinas.

copia pop

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

copia pop

Hover Transformar Girar

Y modifique este valor al pasar el mouse usando la siguiente entrada:

  • Izquierda: 359,9 grados

copia pop

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

copia pop

Recrear el ejemplo # 4

copia pop

Color de fondo predeterminado

¡Vamos al cuarto ejemplo! Utilice el siguiente color de fondo:

  • Color de fondo: rgba (255,255,255,0)

copia pop

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

  • Color de fondo: # 4b0fff

copia pop

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

copia pop

Configuración de texto flotante

Cambia el color del texto al pasar el mouse.

  • Color del texto: #ffffff

copia pop

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

copia pop

Espaciado de desplazamiento

Modifique los valores al pasar el mouse.

  • Relleno superior: 200px
  • Acolchado inferior: 200px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

copia pop

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

copia pop

Borde flotante

Que quitaremos al pasar el mouse.

  • Ancho del borde inferior: 0px

copia pop

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)

copia pop

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)

copia pop

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

copia pop

Hover Transformar Girar

Cambie el valor al pasar el mouse.

  • Izquierda: 359,9 grados

copia pop

Transiciones

Y aumente la duración de la transición en la pestaña avanzada.

  • Duración de la transición: 800ms

copia pop

Recrear el ejemplo n. ° 5

copia pop

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)

copia pop

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

  • Color de fondo: #ffffff

copia pop

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

copia pop

  • 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

copia pop

Configuración de texto flotante

Modifica algunas configuraciones al pasar el mouse.

  • Color del texto: # 952bff
  • Color de sombra: rgba (0,0,0,0)

copia pop

Espaciado

Continúe yendo a la configuración de espaciado. Agregue algunos valores de margen y relleno personalizados.

copia pop

Borde predeterminado

Junto con un borde inferior.

  • Ancho del borde inferior: 0px
  • Color del borde inferior: rgba (149,43,255,0.29)

copia pop

Borde flotante

Permita que se muestre el borde inferior aumentando el ancho al pasar el mouse.

  • Ancho del borde inferior: 7px

copia pop

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)

copia pop

Sombra de caja flotante

Y cambia el color de la sombra al pasar el mouse.

  • Color de sombra: rgba (0,0,0,0.1)

copia pop

Transformar Girar por defecto

Pase a la configuración de rotación de transformación y cambie el valor izquierdo.

  • Izquierda: 359,9 grados

copia pop

Hover Transformar Girar

Modifica ese mismo valor al pasar el mouse.

  • Izquierda: 348 grados

copia pop

Desviación de transformación predeterminada

Asegúrese de que el valor de sesgo de transformación inferior permanezca en 0 grados.

  • Abajo: 0deg

copia pop

Desviación de transformación de desplazamiento

Y cambie este valor al pasar el mouse.

  • Inferior: 26 grados

copia pop

Avance

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

Escritorio

copia pop

Móvil

copia pop

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.