Vamos a ver en este post los impresionantes efectos de transformación que incluye la plantilla Divi, que te permitirán tener una web moderna y dinámica, que sorprenda positivamente al visitante.
Estos efectos de transformación, nos permitirán desplazar módulos del divi builder sin restricciones, cambiar su escala, rotarlos y deformarlos.
Estos controles de transformación de Divi, también nos van a permitir crear efectos impresionantes al poner el ratón sobre módulos del divi builder, aplicando el efecto hover junto a estos efectos de transformación.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
EFECTOS DE TRANSICIÓN DE DIVI
- 👉¿Qué son los controles de transformación de Divi y dónde están?
- 👉Efecto Escala de Divi – Scale
- 👉Efecto Posición o desplazamiento de Divi – Position
- 👉Efecto Rotar de divi – Rotation
- 👉Efecto Deformar (sesgo) de divi – Skew
- 👉Efecto Origen de transformación de Divi – Transform Origin
- 👉Efectos de transformación + Efectos hover de Divi
- 👉Precios y descuentos de Divi
👉¿Qué son los controles de transformación de Divi y dónde están?
Los controles de transformación son una serie de opciones que nos permiten realizar transformaciones sobre módulos de divi, filas completas y secciones.
Los controles de transformación se agrupan en el apartado “Transformar”, situado dentro de la pestaña de diseño de módulos, filas y secciones.
Si aplicamos un efecto de transformación sobre un elemento que contienes otros (por ejemplo una fila), el efecto se aplicará también a los elementos interiores. Se puede aplicar estos efectos a cualquier módulo de Divi.
Los controles de transformación son: Escala, posición, rotar, deformar o sesgo y origen.
NOTA: Podemos deshacer los cambios de cualquier de etas acciones haciendo clic en el icono en forma de flecha circular que aparece junto al texto “transformar” cuando acercamos el ratón al texto.
👉Efecto Escala de Divi – Scale
El efecto escala sirve para ampliar o reducir fácilmente las dimensiones de un módulo del divi builder, de una fila o de una sección.
Podemos cambiar el tamaño del elemento de manera proporcional o no. En la parte inferior derecha se muestra un icono que nos permitirá restringir o no las proporciones cuando estemos modificando el tamaño.
Si tenemos marcada la opción de restringir proporciones solo nos aparecerá una flecha para realizar la modificación de la escala. Si no tenemos la opción de restringir proporciones marcadas nos aparecerán 3 flechas para modificar las proporciones del elemento. En este último caso, el elemento se deformará.
Para modificar el tamaño, haremos clic en la pestaña “Escala de transformación”, pondremos el cursor del ratón sobre una de las flechas, haremos clic y arrastraremos. En la imagen anterior puedes ver la interface del efecto escala.
También verás que esa reducción o ampliación, se representa con un porcentaje en el eje x y otro en el eje y. El 100% sería el tamaño original.
SUPER DESCUENTO DIVI
👉Efecto Posición o desplazamiento de Divi – Position
Desde aquí podemos cambiar la posición de cualquier elemento o módulo del divi builder. Es decir, podemos desplazar un elemento de manera independiente a sus elementos circundantes y superiores en jerarquía.
A parte de cambiar la posición de módulos, también podemos cambiar la posición de elementos contenedores como las secciones y filas.
La finalidad de esta función es la de cambiar la posición de determinados elementos a lo largo de una pequeña distancia fácilmente, para un gran desplazamiento directamente moveríamos el módulo.
Para cambiar la posición marcaremos la pestaña de cambio de posición, pondremos el cursor sobre el cuadrado del interior, haremos clic y arrastraremos.
👉Efecto Rotar de divi – Rotation
Con este efecto de transformación de Divi, podremos girar un módulo según los tres ejes espaciales. De esta manera podremos realizar giros en el plano xy así como giros fuera de plano para imitar efectos 3D.
Al seleccionar este efecto de transformación de Divi, se te mostrarán 3 diferentes tipos de giros.
Simplemente, haz clic en el punto azul y desplaza para realizar un giro.
- El primer tipo de giro es el normal. Es decir, un giro sin salir del plano del papel, que sería alrededor del eje z
- El segundo giro, es alrededor del eje x, y el tercero alrededor del eje y.
👉Efecto Deformar (sesgo) de divi – Skew
Con este efecto de Divi podremos deformar o distorsionar un elemento.
Además, con éste efecto y el anterior podremos crear sensación de posiciones en 3D.
Podemos deformar un elemento con la opción de restringir proporciones marcada o sin marcar.
SUPER DESCUENTO DIVI
👉Efecto Origen de transformación de Divi – Transform Origin
Todos los efectos que hemos ido viendo se realizan según un origen de coordenadas situado e el centro del módulo sobre el que aplicamos el efecto de transformación.
Con esta opción lo que podemos hacer es modificar la posición de este elemento origen de transformación.
Es decir, cambiar la posición de este elemento afectará a como se realizan todos los efectos.
👉Efectos de transformación + Efectos hover de Divi
Al acercar el cursor del ratón al texto “transformar”, verás que se muestra un icono en forma de flecha. Este es el icono de efectos hover.
Al hacer clic sobre el nos aparecerán dos pestañas: Escritorio y Flotar
La pestaña “flotar” indica que ocurre al poner el ratón sobre el elemento que estamos creando.
Por lo tanto, podremos crear increíbles efectos de transformación al poner el ratón sobre el elemento.
En este post tienes explicado con detalle lo que es el efecto hover y como se genera: Efecto hover en Divi
👉Precios y descuentos de Divi
En la actualidad existen 2 planes diferentes para contratar un plan de Elegant themes y un gran descuento divi:
Ahora 20% de descuento
SUPER DESCUENTO DIVI
->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins. Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año.
La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.
DESCUENTO 20% PLAN YEARLY ACCESS
->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins. Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida.
La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.
DESCUENTO 20% PLAN LIFE TIME ACCESS
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
