Create original layouts with Divi's transformation options!

In this article, I'll review Divi's transformation options. You may not be using them properly or at all? Yet they allow you to create original layouts ! For example, it is thanks to these options that you can superimpose certain elements. Take a look at what you can achieve:

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a transformation option?

Once again, Divi hasn't invented anything! It just puts in your hands - and in the form of various options - "old as the hills" CSS properties (well OK, maybe not so old 😜). By the way, the Style tab available in each Divi module uses dozens of CSS properties.

In this article, I focus on the "Transform" tab, which uses the CSS property named Transform. Quite simply!

This Transform property proposes 6 different values, whereas Divi has only retained 5 (the value "matrix" is not proposed).

In short, this is what the Mozilla.org website says:

The Transform property modifies the coordinate space used for visual formatting. With this property, it is possible to translate elements, rotate them, apply homotheties, distort them to change their perspective.

See details on Mozilla

This CSS property is essential for rotating images, creating scroll animations or even for superimposing elements...

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Overlaying text and images with transformation: video tutorial

To better understand, I propose you a small video which shows you how to use the transformation options of Divi. Be careful not to miss the end of the video, which explains how to fix responsive problems.

3 - Possible CSS transformations

Now back to Divi's transformation options, here is what is available:

1. Transformation Scale: Allows you to enlarge or reduce the size of an element.
2. Transform Translate: Allows you to move an item from its original location.
3. Transform Rotate: Allows you to rotate in 3 different axes.
4. Skew : allows you to change the perspective of an element and distort it.
5. Transform Origin: Allows you to change the origin of the rotation axis.

It is best to test all these options to understand them better and not to save your changes if the result is not satisfactory.

Tip: don't forget to link or unlink the ratio (as explained in the video), depending on your needs.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

4 - The usefulness of the Z-Index

As you have seen in the video, if you overlay certain elements by moving them, it is possible to decide the depth of the overlay. This can be compared to "layers" in Photoshop. In this case you will need the Z-Index property.

You will then need to go to the options Advanced > Job of the module, line or section concerned to give values so that the item is placed above or below the stack.

5 - Always take responsive into account!

6 - To go further with the transformation options...

So, what do you think of this type of layout? Do you use these options on your site? If so, please feel free to share your original creations in the comments, it could give inspiration to other readers?

And to go further, here is a reading list:

• Explanation of the transformation tool by Nick Roach
• How to enlarge, resize or transform an image in Photoshop
• How to create a unique blurb module with Divi's transformation options

Did you like this article? Save it on Pinterest!