fbpx

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

Anniversaire DIVI -20% Cliquez !

Jour(s)

:

Heure(s)

:

Minute(s)

:

Seconde(s)

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

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 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
Un menu hamburger ? en vue ordinateur : site WordPress Divi

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus