Using Divi Transform Options

Divi transformation options are a set of powerful tools that allow you to manipulate web design in surprising ways, creating depth and attractive visual effects.

Divi transformation options allow you to move elements, scale them, rotate them into three different axes, bias elements and adjust the origin of the transformation, all within the Visual Builder.

You no longer need to write detailed custom code to add transformation effects to your page items. Now you can transform all Sections, Rows and Modules directly into the Visual Builder and see the effects in real time.

Combining these effects with Divi hover options lets you create powerful interactive designs while the user browses your website.

When applying transformation effects, it is important to note that this will not affect the elements around.

This means that you can move elements, increase their size and rotate them without affecting neighbouring elements.

This allows you to remove elements from your Columns, Rows or Parent Sections, allowing you to stack objects and create beautiful collages with different modules.

Where to find transformation options in Divi

The transformation options group is located in any Divi element (Sections, Rows, Columns or Modules).

Open the item configuration window by clicking the gear icon
Go to the Design tab
Expand the Transformation Options Group

How to use Divi transformation options

With transformation controls you can easily adjust the appearance of any Section, Row or Module within Divi.

The transformation interface includes sliders and input fields to adjust values, and presents the transformation visually so that it is easy to understand what is happening.

When you adjust the controls, you will see the transformation into action on the page.

Transform Scale

With scale control, you can quickly adjust the size of any element.

Drag the sliders to increase or decrease the size of the item.

By default, the original ratio remains, but you can unlink the height and width to adjust them independently by clicking on the string icon in the lower-right corner.

Transform Translation

With translation control you can adjust the position of any element on the page.

Moving an element with translation allows you to move it without affecting the surrounding elements or their parent element.

This is similar to using absolute position in CSS, but the position is based on the line position of the element, not on the relative position of the father.

Transform Rotation

With rotation control you can rotate any element into three different axes for complete three-dimensional rotation.

The first option allows you to tilt down-right or up-left elements
The second option allows you to tilt elements back or forth
The third option allows you to tilt elements from left to right

Instead of rotating elements in Photoshop, you can now create this effect within Divi, saving you a lot of design time. And if you need to replace an image, you don't have to edit it again in Photoshop, just replace it in Divi.

Transform Sesgado

You can tilt an item in one direction using the bias control.

This is used to create interesting depth effects. Drag the sliders to adjust the bias.

By default, the original ratio is maintained, but you can unlink the values to adjust them individually by clicking the string icon in the lower-right corner.

As with the scale, you can bias elements with blocked proportion or unlock each side to adjust them independently.

Combining biased and rotation can create amazing 3D effects that add depth and complexity to your page.

Origin of Transformation

The transformation source option allows you to change the starting point of any applied transformation.

This is useful for moving the point where a transformation effect occurs.

Example: Use this option along with rotation to define the exact point where rotation occurs. You should only position the point using the interface provided.

Best Practices and Tips for Using Divi Transformation Options

Use transformation with hover options
To create truly interactive designs, it combines transformation effects and hover so that the elements are transformed when you pass the cursor.

Professional tip: if you want to move an element with translation transformation by passing the cursor, it also increases its size with scale transformation to avoid sudden jumps when hovering.

Add perspective for 3D effects

Perspective is an artistic technique for drawing objects that look like 3D even if they are on a 2D plane.

In web design, you can position elements in 3D using the transformation property. In Divi, these options are integrated.

The main property that gives 3D position is rotation, which allows to rotate objects on the z, x or y axes.

However, rotation alone does not make the element look 3D unless the perspective property is applied.

Example: You have an image module in a row in a column. You use rotation to rotate the image on the x-axis.

The broken image but 2D is still seen, as if it were tightened up and down.

If you add perspective with a small snippet of CSS to the parent element (the row), perspective is added to the image.

Depending on the perspective value, you can increase or decrease the apparent distance of the object from the user.

Example of appearance if you add perspective: 1000px; to column.

For more information, see how to use perspective with transformations to design 3D photo walls in Divi.

Continue learning

Discover as much as possible with the transformation options in Divi! Check out these blog posts that detail many ways to use these options:

How to add 3D effects with GIFs and videos using transformation options
How to use shapes with transformation as funds in Divi
How to add image markers with Divi transformation options
3 transformed hover effects that you can apply to your images with Divi
How to transform multiple elements for abstract effects into Divi
Using transformation versus negative margin in Divi
How to use transformation options to design unique funds for section dividers in Divi
Creative interactive modules using transformation and hover options in Divi
How to stack portfolio elements beautifully with Divi transformation options

Using Divi Transform Options | Scoreapps