Divi Tips n° 121

Cree diseños originales con las opciones de transformación de Divi.

Publicado el 29/07/2021 | 10 comentarios

730 palabras

3

En este artículo, revisaré las opciones de transformación de Divi. Es posible que no los esté utilizando correctamente o en absoluto... Sin embargo, le permiten crear diseños originales ¡! Por ejemplo, gracias a estas opciones se pueden superponer ciertos elementos. Echa un vistazo a lo que puedes conseguir:

Mise en page avec options de transformation Divi
Ejemplo de un diseño utilizando las opciones de transformación de Divi

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una opción de transformación?

Una vez más, ¡Divi no ha inventado nada! Simplemente pone en tus manos -y en forma de varias opciones- propiedades CSS "viejas como las colinas" (bueno vale, quizás no tan viejas 😜). Por cierto, la pestaña Estilo disponible en cada Módulo Divi utiliza decenas de propiedades CSS.

En este artículo, me centraré en la pestaña "Transformar", que utiliza la propiedad CSS llamada Transform. Sencillamente.

Esta propiedad de Transformación propone 6 valores diferentes, mientras que Divi sólo ha conservado 5 (el valor "matriz" no se propone).

Propriété CSS Transform
Propiedad CSS Transform

En resumen, esto es lo que dice el sitio web Mozilla.org:

La propiedad Transformación modifica el espacio de coordenadas utilizado para el formato visual. Con esta propiedad, es posible trasladar elementos, rotarlos, aplicarles homotecias, distorsionarlos para cambiar su perspectiva.

Ver detalles en Mozilla

Esta propiedad CSS es esencial para rotar imágenes, crear animaciones de desplazamiento o incluso para superponer elementos...

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Superposición de texto e imágenes con transformación: video tutorial

Para entenderlo mejor, te propongo un pequeño vídeo que muestra cómo utilizar las opciones de transformación de Divi. No te pierdas el final del vídeo en el que se explica cómo solucionar los problemas de respuesta.

3 - Posibles transformaciones CSS

Ahora volviendo a las opciones de transformación de Divi, esto es lo que está disponible:

options transformation de Divi
Las opciones de transformación de Divi están disponibles en la pestaña "Transformar"
  1. Escala: Permite ampliar o reducir el tamaño de un elemento.
  2. Transformar Traducir: Permite mover un elemento de su ubicación original.
  3. Transformar Rotar: Permite rotar en 3 ejes diferentes.
  4. Sesgar : permite cambiar la perspectiva de un elemento y distorsionarlo.
  5. Origen de la transformación: Permite cambiar el origen del eje de rotación.

Lo mejor es probar todas estas opciones para entenderlas mejor y no guardar los cambios si el resultado no es satisfactorio.

Consejo: no olvides vincular o desvincular la proporción (como se explica en el vídeo), según tus necesidades.

¿Necesitas dominar Divi? ¡Descubre mi formación que te guiará paso a paso en la comprensión y uso de Divi! Más información sobre la formación en Divi.

4 - La utilidad del Índice Z

Como has visto en el vídeo, si superpones ciertos elementos moviéndolos, es posible decidir la profundidad de la superposición. Esto puede compararse con las "capas" de Photoshop. En este caso necesitará el Propiedad del índice Z.

options z index divi
La opción Z-Index de Divi
propriete z index
Índice Z de la propiedad

A continuación, tendrá que ir a las opciones Avanzado > Trabajo del módulo, línea o sección en cuestión para dar valores para que el elemento se sitúe por encima o por debajo de la pila.

5 - ¡Tenga siempre en cuenta la capacidad de respuesta!

ameliorer versions mobiles
Opción de respuesta

Por último, dependiendo de la complejidad de su trazado, su trabajo no terminará ahí.

Sí, tendremos que comprobar las versiones para móviles y tabletas para ver si las opciones de transformación de Divi han tenido un mal impacto.

Es posible que tengas que corregir o deshacer algunas de las transformaciones para conseguir las pantallas pequeñas, como se explica en mi vídeo.

👉 Descubre más sobre el responsive en Divi.

6 - Para ir más allá con las opciones de transformación...

¿Qué opina de este tipo de diseño? ¿Utiliza estas opciones en su sitio web? Si es así, no dude en compartir sus originales creaciones en los comentarios, podría servir de inspiración a otros lectores...

Y para ir más allá, he aquí una lista de lecturas:

¿Le ha gustado este artículo? ¡Guárdalo en Pinterest!

options transformation 1
options transformation 2
options transformation 3
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

10 Commentaires

  1. YPS

    Merci Lycia, très intéressant et excellente pédagogie !

  2. Lycia Diaz

    Merci Yves !

  3. Gégéèf

    Super article, très instructif. Merci pour votre travail

  4. Lycia Diaz

    Merci Gégé

  5. Nuria

    Merci beaucoup, je n’avais pas pensé a toutes ces possibilités ! très bien expliqué ! Bravo

  6. Lycia Diaz

    Super ! Merci Nuria !

  7. Meyer Michel

    Hello, alors j’ai fait un test pour modifier la présentation sauf quand tu regardes le rendu sur une tablette ou un smartphone c’est le bazars … ce n’est plus lisible comme quand on le place pour visionner depuis un ordi. Comment y remédier ?
    Bien cordialement
    Michel

  8. Meyer Michel

    J’ai trouvé comment faire désolé du dérangement 😉

  9. Rebecc56

    Merci beaucoup Lydia.

    Je viens de mettre à Divi Builder. Grâce à vous, j’avance à pas de géants.

  10. Lycia Diaz

    Super 👍

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.