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 :

Créer un en-tête plein écran avec Divi

Créer un en-tête plein écran avec Divi

Dans ce tutoriel, je  vous montre étape par étape comment créer un en-tête plein écran époustouflant en utilisant le puissant Divi Visual Builder. Nous commencerons par trouver une image de qualité professionnelle sur Pixabay, puis nous l’optimiserons pour le web avec Photopea avant de plonger dans la conception de notre en-tête.

lire plus
Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus