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
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
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
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
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
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
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
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
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.
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
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
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
Using Hover Options in Divi
Las Opciones de Hover en Divi están disponibles para cualquier contenido o elemento que agregues a una página en Divi. Puedes añadir efectos al pasar el cursor sobre textos, íconos, enlaces, imágenes y más dentro de un módulo. También puedes aplicar ...Using Border Options in Divi
Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...Using Sizing Options in Divi
Divi Size Options make it easy to adjust the size of sections, rows, columns and modules in Divi. Divi Size Options make adjusting the size of sections, rows, columns and modules simple. Size is an essential part of creating attractive websites. ...Using Spacing Options in Divi
It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...Divi Rows and Row Options
Therowsare thesecond largest construction blockwithin the Divi builder and can be used in various ways. &;amp;;;;; Rows of Divi and how to use them Therowsare thesecond largest construction blockwithin the Divi builder and can be used ...