Découvrez les bons plans & les réductions Alpa14

Divi : Fonction Transformer, améliorez le design de vos pages

Alpa14 les tutoriels faciles !

Catégories

Designez vos pages comme un Pro avec la fonction Transformer de Divi !

Dans ce nouveau tuto WordPress Divi, je présente une fonction bien pratique du Visual Builder de Divi qui va vous permettre d’améliorer le design des pages de votre site WordPress. Il s’agit de la fonction Transformer qui va vous va vous offrir la possibilité d’agrandir, de déplacer, de faire pivoter, de distordre n’importe quel élément de votre page Divi que ce soit une section, une rangée ou un module et ce sans avoir besoin d’écrire la moindre ligne de code CSS !

Dans le tutoriel, je pars d’une page fictive et je vous montre les différentes options de cette fonction sur différents éléments de la page.
Bon visionnage à toutes et à tous ! ?

Licence Divi
Code Promo Divi Supreme
.

 La Fonction Transformer du Divi Visual Builder

Cette fonction est donc accessible à tous les éléments d’une page Divi et vous pouvez y accéder aux mêmes endroits dans les paramètres des sections, des rangées et des modules Divi. Pour cela rendez-vous sur l’onglet « Style » puis « Transformer ».

Fonction Transformer du Divi Visual Builder

Les 5 options de la fonction Transformer du Divi Visual Builder

  1. Échelle de Transformation : Cette option permet d’agrandir ou de réduire la taille d’un élément Divi.
  2. Transformer Traduire : Cette option permet de déplacer un élément par rapport à son emplacement d’origine.
  3. Transformer Tourner : Cette option permet d’émettre des rotations en degrés. Trois axes sont possibles.
  4. Transformer le Biais : Cette option permet de changer la perspective d’un élément et de le distordre.
  5. Transformer l’origine : Cette option permet de changer l’origine de l’axe de rotation.

A noter qu’à chaque fois que vous ferez une modification avec la fonction transformer sur un élément de votre page en vue ordinateur, il faudra absolument vérifier l’aspect de votre page sur les 2 autres vues (tablette et téléphone). En effet, du fait que votre site Divi soit « responsive » les modules des différentes rangées vont passer les uns en dessous des autres et votre mise en forme avec l’option déformer risque d’être bien différente sur ces différentes vues mobiles.

Pour vérifier les différentes vues de votre site, cliquez sur le disque violet (avec les 3 points blancs) au bas de votre écran et cliquez à gauche sur les icônes correspondantes pour modifier la vue.

Vues Divi : ordinateur, tablette, téléphones
MailerLite free-trial
Les différentes options de la fonction Divi Transformer
Licence Divi

Vous serez peut-être intéressé par les articles suivants :

Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress Divi personnalisé

Ajouter un footer WordPress ? Rien de plus simple grâce au Thème Builder de Divi. Faire un pied de page WordPress global devient un jeu d’enfant ! C’est ce que je vous montre dans ce tutoriel Vidéo Divi, comment créer un footer WordPress personnalisé en le désignant de manière très fine avec Divi Visual Builder d’Elegant Themes.

lire plus
Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus
Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus