The Transform options in Divi allow you to apply advanced design effects to your modules, such as scaling, rotating, skewing, and translating. These settings help create dynamic and visually engaging layouts by manipulating the module’s shape and position.
Where to Find the Transform Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Transform option group.
Transform Customization Settings
Scale: Resize the module horizontally, vertically, or both.
Uniform Scaling: Enable the chain link icon to maintain the same value for both directions.
Custom Scaling: Unlink the values to resize the width and height independently.
Translate: Move the module horizontally or vertically from its original position. Enter positive or negative values to shift the module in different directions.
Rotate: Rotate the module along the X, Y, or Z axes for a 3D effect. Adjust the rotation angle using numerical input or sliders.
Skew: Slant the module horizontally, vertically, or both to create a distorted, dynamic effect. Enter specific values for precise control.
Origin Points: Define the anchor point from which transformations are applied.
Use the preset grid or drag the control to set a custom origin point.
Changing the origin affects how the module behaves during scaling, rotation, and other transformations.
Tips for Using Transform Options
Enhance Visual Interest: Use subtle skew, rotate, or translate effects to make your design stand out.
Maintain Balance: Overusing transform options can make layouts look chaotic; apply changes purposefully.
Lock Values for Symmetry: When scaling or skewing, lock values using the chain link icon to maintain proportions.
Experiment with Origin Points: Adjusting origin points can create unique rotation or scaling effects.
Transform options give you creative control over your modules, enabling designs that are dynamic, interactive, and tailored to your site’s aesthetic.