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

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:

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).

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:

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.

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!

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:

• Explicación de la herramienta de transformación por Nick Roach
• Cómo ampliar, redimensionar o transformar una imagen en Photoshop
• Cómo crear un módulo de propaganda único con las opciones de transformación de Divi

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