Today we are introducing a brand new feature to Divi that allows for amazing freehand design within the Divi Builder, giving you the power to transform elements right on the page in ways that would typically only be possible in graphic design programs like Photoshop and Sketch. You can move elements around, scale them up and down, rotate on three different axis, skew and adjust the transform origin with ease. All of this is done using a super slick new interface that makes each transformation easy to perform and understand.

A Stunning User Interface

With the new Transform controls, you can easily adjust the appearance of any module, row or section using a combination of new settings. The Transforms interface has been built to allow for visual control over your design. Instead of a long list of indistinct sliders, Divi presents you with visual controls that describes each transformation in a visual way. This is mirrored on the page as you watch elements transform right before your eyes. It’s really fun to play with, but more importantly than that, it’s also really effective at unlocking tons of new design possibilities.

Scale

Using the Scale control, you can quickly adjust the size of anything. Scale entire modules up and down with a single move of your mouse. When you adjust an element’s size, the entire element and all sub elements are adjusted at once. By default, scaling elements will keep the original aspect ration, but you can also unsync the height and width settings and adjust them independently.

Position

You can adjust an element’s position using the Translate control. Move elements around in any direction without worrying about the surrounding parts of your page. When you move an element, it moves independently of its surrounding elements and parent element. This is similar to using absolute positioning in CSS, except the position is based on the element’s inline position instead of the position of its parent relative element.

Rotation

You can also rotate items using the Rotate controls, which allow you to rotate on three different axis for a full range of three dimensional rotation. You can combine different rotations to create some pretty cool effects and save tons of design time. For example, instead of opening an image in Photoshop and using a mockup template to create some 3d image effects, you can just open the flat image in Divi and transform it inside the builder. If you ever need to replace the image, you don’t have to edit it again in Photoshop!

Skew

You can skew elements to create compelling depth effects. Much like the Scale control, you can skew elements with a locked aspect ratio, or you can unlock each side and adjust them independently. Combining Skew and Rotation can lead to some pretty stunning 3d effects that add depth and complexity to your page.

Transform Origin

Finally, you can adjust the transform origin, which will affect all of the transforms added to any element at once. This option allows you to change the position of transformed elements. Two dimensional transformations can be adjusted across the x and y axis.

Amazing Hover Effects

These transformations are also animatable on hover, allowing you to create some simply stunning hover effects that were never possible before. Combined with all of the great design features that Divi already has, the possibilities are pretty incredible.

Design Freedom

When you transform an element, it doesn’t disrupt the elements around it. You can stack things on top of each other and create beautiful collages with different modules. This allows you to easy “break free” elements from their parent columns or rows, allowing for module overlay effects that can add a sense of fun and playfulness to any design.

The brand new Transform controls are available today, so download Divi and take them for a spin. Let us know what you think in the comments, and don’t forget to check back next week for even more great Divi features coming your way.