Divi Tips n° 121

Create original layouts with Divi's transformation options!

Published on 29/07/2021 | 10 comments

730 words


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:

Mise en page avec options de transformation Divi
Example of a layout using the Divi transformation options

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).

Propriété CSS Transform
CSS Transform property

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:

options transformation de Divi
Divi's transformation options are available in the "Transform" tab
  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.

options z index divi
Divi's Z-Index option
propriete z index
Property Z-Index

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!

ameliorer versions mobiles
Responsive option

Finally, depending on the complexity of your layout, your job will not end there!

Yes, we'll have to check the mobile and tablet versions to see if Divi's transformation options have had a bad impact.

You may need to correct or undo some of the transformations to get the small screens right, as explained in my video.

👉 Find out more about the responsive in Divi.

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:

Did you like this article? Save it on Pinterest!

options transformation 1
options transformation 2
options transformation 3
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

10 Commentaires

  1. YPS

    Merci Lycia, très intéressant et excellente pédagogie !

  2. Lycia Diaz

    Merci Yves !

  3. Gégéèf

    Super article, très instructif. Merci pour votre travail

  4. Lycia Diaz

    Merci Gégé

  5. Nuria

    Merci beaucoup, je n’avais pas pensé a toutes ces possibilités ! très bien expliqué ! Bravo

  6. Lycia Diaz

    Super ! Merci Nuria !

  7. Meyer Michel

    Hello, alors j’ai fait un test pour modifier la présentation sauf quand tu regardes le rendu sur une tablette ou un smartphone c’est le bazars … ce n’est plus lisible comme quand on le place pour visionner depuis un ordi. Comment y remédier ?
    Bien cordialement

  8. Meyer Michel

    J’ai trouvé comment faire désolé du dérangement 😉

  9. Rebecc56

    Merci beaucoup Lydia.

    Je viens de mettre à Divi Builder. Grâce à vous, j’avance à pas de géants.

  10. Lycia Diaz

    Super 👍

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.