Table Of Contents
- Divi’s Transform Controls UnlockTons Of New Design Possibilities
- An Amazing New Visual InterfaceMakes Transforming Elements Easy
- A Stunning User Interface
- Transform Origin
- Amazing Hover Effects
- Design Freedom
- It’s Our Anniversary Celebration Plus The Biggest Discount Of The Year So Far!
Divi’s Transform Controls Unlock
Tons Of New Design Possibilities
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.
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.
An Amazing New Visual Interface
Makes Transforming Elements Easy
We spent extra time building the Transforms interface to make sure it was super intuitive. The result is a set of options that are as easy to use as they are powerful.
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.
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.
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.
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!
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.
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.
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.
It’s Our Anniversary Celebration Plus The Biggest Discount Of The Year So Far!
You’re in luck! Today Elegant Themes turns 11 year old, and to celebrate we are offering our biggest discount of the year so far. That’s double our normal discount, but it will only be available for a short time. Don’t miss out!