Create original layouts with Divi's transformation options!

Published on 29/07/2021 | 4 comments

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 recognize. 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 have to go to the options Advanced > Item 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 might 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
options transformation 4

730 words

3

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What could be better than a Divi PDF training to master this WordPress theme, its Visual Builder and its Theme Builder? It's like having a trainer come to your house... Check it out!

4 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é

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pin It on Pinterest

Shares
Share This