Crear diseños originales con opciones de transformación Divi!

En este artículo, propongo revisar el Opciones de transformación Divi. ¿Tal vez no los estás usando correctamente o tal vez no? Sin embargo, ayudan a crear diseños originales ! Par exemple, c'est grâce à ces options que vous pouvez superposer certains éléments. Regardez ce qu'il est possible d'obtenir :

1 - Qu'est-ce qu'une option de transformation ?

Encore une fois, Divi n'a rien inventé ! Il met seulement entre vos mains - et sous la forme de diverses options - des Propiedades CSS "vieilles comme le monde" (bon OK, peut-être pas si vieilles 😜). D'ailleurs, l'onglet Estilo disponibles en cada uno Módulo Divi usa docenas de propiedades CSS.

En este artículo, me concentro en l'onglet "Transformer", que utiliza la propiedad CSS Transformación. ¡Solo!

Esta propiedad Transformación propose 6 valeurs différentes, alors que Divi n'en a retenu que 5 (la valeur "matrix", n'est pas proposée).

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

Propiedad Transformación modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de traducidor los elementos, turno, d'appliquer des homotéticos, Distorsión para cambiar el perspectiva.

Ver detalles sobre Mozilla

Cette propriété CSS est indispensable pour tourner des images, créer des animations au scroll ou encore pour superposer des éléments...

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

2 - Superposer des textes et des images grâce à la transformation : tutoriel vidéo

Para entender mejor, propongo un pequeño vídeo que te muestre cómo utilizar las opciones de transformación Divi. Tenga cuidado de no perder el final del vídeo que explica cómo resolver cuestiones sensibles.

3 - Les transformations CSS possibles

Ahora volvamos a la Opciones de transformación Divi, aquí está lo que está disponible :

1. Escala de transformación: permet d'agrandir ou de réduire la taille d'un élément.
2. Transform Traducir: permet de déplacer un élément par rapport à son emplacement d'origine.
3. Transformer Turner (Rotación) : permet d'émettre des rotations selon 3 axes différents.
4. Transforming Biais (Skew): permet de changer la perspective d'un élément et de le distordre.
5. Transformer l'origine (Origin) : permet de changer l'origine de l'axe de rotation.

Le mieux est de tester toutes ces options pour mieux comprendre et de ne pas enregistrer vos modifications si le résultat n'est pas satisfaisant.

Petite astuce : n'oubliez pas de lier ou de délier le ratio (comme expliqué dans la vidéo), selon vos besoins.

¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.

4 - L'utilité du Z-Index

Comme vous l'avez vu dans la vidéo, si vous superposez certains éléments en les déplaçant, il est possible de décider de la profondeur de superposition. On peut alors comparer cela aux "calques" de photoshop. Dans ce cas, vous aurez besoin de la propiedad Z-Index.

Entonces tendrás que ir a las opciones Avanzadas √≥ Puesto du module, de la ligne ou de la section concernée pour donner des valeurs afin que l'élément se place au-dessus ou au-dessous de la pile.

5 - Toujours prendre en compte le responsive !

6 - Pour aller plus loin avec les options de transformation...

Alors, que dites-vous de ce type de mise en page ? Utilisez-vous ces options sur votre site ? Si oui, n'hésitez pas à partager en commentaire vos créations originales, ça pourrait donner de l'inspiration aux autres lecteurs ?

Y para ir más lejos, aquí hay una lista de reproducción:

• Explication de l'outil de transformation par Nick Roach
• Cómo agrandar, redimensionar o transformar una imagen en Photoshop
• Cómo crear un módulo de resumen único (modulo de Blueurb) con opciones de transformación Divi

¿Te gustó este artículo? ¡Ahorra en Pinterest!