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

Publicado el 29/07/2021 | 4 comentarios

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

Anuncio: 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 Transform 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 de transformación: 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), en función de 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 Avanzadas > Artículo 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
options transformation 4

730 palabras

3

A ti también te debería gustar:

Formation Divi PDF : un guide pas à pas

Formación en Divi PDF: una guía paso a paso

¿Qué podría ser mejor que un entrenamiento de Divi PDF para dominar este tema de WordPress, su Constructor Visual y su Constructor de Temas? Es como tener un entrenador en tu casa... ¡Compruébalo!

4 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é

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pínchalo en Pinterest

Acciones
Comparte esto