All Collections
Divi Release Tutorials
The New Divi Transformation Controls
The New Divi Transformation Controls

Divi’s Transform Controls unlock tons of new Design possibilities.

Vlad avatar
Written by Vlad
Updated over a week ago

Now you can perform amazing freehand design using a collection of new design options that was, until now, only possible in graphic design programs like Photoshop.

Accessing the new Transform options is super easy! Open up any module settings and head out to the Design > Transforms. Here you will find an intuitive interface with 5 different Transform styles each with a set of options that are easy to use.

Transform Scale

Adjust the module scale on the X and/or Y axis.

Transform Translate (Position)

Adjust the module translate (position) on the X and/or Y axis.

Transform Rotate

Adjust the module rotation on the X, Y and/or Z axis.

Transform Skew

Adjust the module skew on the X and/or Y axis.

Transform Origin

Adjust the transform point of origin.

Note: Origin does not apply to the Translate transform.

Every Transform style option can also be individually adjusted for Desktop, Tablet and/or Phone devices by using the Responsive options (phone icon) and it can also be applied on hover using the Hover options (cursor icon).

Transform Responsive

Transform Hover

That’s not all! 😎 The Transitions options (Advanced > Transition) will also apply to Transforms on hover so you can get those super smooth hover animation transitions. 

And finally, we introduced a new Z Index option that can be found in Advanced > Visibility which will let you control the Z position of any module, section and row. This is super useful when you want to overlap modules on top of each other.

Z Index

Did this answer your question?