Les dispositions de grille sont bien rangées, et bien rangées peuvent devenir ennuyeuses Une image qui se penche hors de sa colonne, ou une carte qui croît légèrement sous le curseur : de petites transformations comme celles-ci séparent une page conçue d'une empilée Le Transforme extension dans Modules complémentaires principaux pour Elementor place la boîte à outils de transformation CSS complète sur chaque élément : traduire, faire pivoter, mettre à l'échelle, biaiser et retourner, avec des paramètres séparés pour les états normaux et de vol stationnaire.
Ce que fait l'extension Transforms #
Une fois activé, chaque élément Élémenteur obtient un Transforme section sous son Avancé onglet. Retourner Transformées activées à Oui et six commandes apparaissent, chacune appliquant une transformation CSS à l'élément sans toucher au flux de mise en page réel :
- Traduire: déplacer l'élément le long des axes X et Y, en pourcentage de sa propre taille.
- Faire pivoter : faites-le tourner sous n'importe quel angle.
- Échelle: agrandissez-le ou rétrécissez-le sur chaque axe indépendamment.
- Indice: inclinez-le pour un look diagonal et dynamique.
- Retourner horizontal/Tourner vertical : miroirz-le d'un clic.
Le Normal et Survole les onglets contiennent des valeurs distinctes, de sorte qu'un élément peut s'asseoir dans un sens au repos et se transformer lorsque le curseur atterrit dessus, avec une durée de transition que vous contrôlez.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Transforms est une extension gratuite, donc aucune licence Pro n'est requise.
Comment activer l'extension Transforms #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Les transformations se trouvent dans le Widgets d'animation groupe avec un badge Hot, entre Animation d'entrée et Révéler. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Ouvrez le panneau Transforms sur un élément #
Sélectionnez l'élément dans l'éditeur Elementor, un widget Image dans la démo et ouvrez le Avancé onglet. Élargir le Transforme section avec le badge MA violet et interrupteur Transformées activées à Oui. Les six commandes de transformation apparaissent sous les onglets Normal et Hover, chacune s'ouvrant avec son icône en forme de crayon.
Déplacer et mettre à l'échelle l'élément #
Cliquez sur le crayon à côté Traduire et deux curseurs s'ouvrent : Traduire X et Traduire Y. La démo pousse l'image 71 sur l'axe X, et elle glisse vers le bord de la section sur la toile au fur et à mesure que le curseur se déplace Les valeurs sont relatives à la taille propre de l'élément, et chaque axe a son propre réglage réactif par appareil.
Le Échelle le contrôle fonctionne de la même manière Le réglage de l'échelle X à 1,4 dans la démo agrandit l'image au-delà de sa colonne, chevauchant la limite de section pour le type d'éclatement cadrant une grille simple ne peut pas laisser l'échelle Y vide et elle suit X, ou définie à la fois pour un étirement indépendant.
Rotation et inclinaison fonctionnent de la même manière Ouvrez la commande, faites glisser le curseur et la toile affiche l'angle au fur et à mesure.
Ajouter une transformation en vol stationnaire #
Passer au Survole tab et les mêmes commandes s'appliquent uniquement lorsque le curseur est sur l'élément, plus deux extras : Flip horizontal et Flip vertical devenez des commutateurs Oui/Non, et un Durée de transition (ms) slider contrôle la vitesse à laquelle le changement s'anime La démo active Flip Horizontal avec une transition de 400 ms, de sorte que l'image se reflète en douceur en vol stationnaire et revient lorsque le curseur part.
Le résultat sur la page #
Publier et vérifier le front-end L'image se trouve décalée et agrandie au-delà de sa colonne exactement comme arrangé dans l'éditeur, et le survoler joue le flip avec la facilité de 400 ms. Les transformées sont du CSS pur, donc rien de charges supplémentaires et la disposition autour de l'élément ne reflue jamais.
Une chose à retenir : les transformations sont uniquement visuelles L'élément occupe toujours sa place d'origine dans la mise en page, de sorte qu'un élément fortement traduit peut chevaucher ses voisins C'est généralement le point, mais vérifiez tablette et mobile, où le même décalage couvre plus de l'écran.
Où les transformées gagnent leur place #
- Images éclatées. Une photo mise à l'échelle et décalée au-delà du bord de sa colonne donne une profondeur de section de héros.
- Retours planeurs. Les cartes qui se soulèvent, s'inclinent ou se développent légèrement sous le curseur sont lues comme cliquables.
- Accents tournés. Les insignes, timbres et étiquettes s'assoient plus naturellement légèrement.
- Sections asymétriques. Quelques degrés d'inclinaison sur un diviseur ou un bouton brisent la monotonie du rectangle.
- Actifs miroir. Retournez une flèche ou une illustration au lieu d'exporter une deuxième image.
Tutoriel Vidéo #
Regardez chaque contrôle en action, depuis l'activation de l'extension jusqu'au retournement sur la page publiée.
Foire aux questions #
Comment faire pivoter ou mettre à l'échelle un élément dans Elementor ?
Activez l'extension Transforms dans l'onglet Extensions des addons principaux, sélectionnez l'élément et ouvrez Transforms sous l'onglet Avancé Activez Transforms, puis utilisez le contrôle Rotate ou Scale ; le canevas prévisualise le changement en direct lorsque vous faites glisser le curseur.
Puis-je appliquer une transformation différente en vol stationnaire ?
Oui. Le panneau comporte des onglets Normal et Hover séparés Définissez les valeurs de repos en Normal, passez en vol stationnaire en Hover et utilisez le curseur Durée de transition pour contrôler la rapidité avec laquelle l'élément s'anime entre les deux états.
Les transformations brisent-elles la mise en page de ma page ?
Les transformations CSS non sont uniquement visuelles, de sorte que l'élément conserve son espace d'origine dans la mise en page et que le contenu environnant ne reflue jamais. Un élément transformé peut chevaucher les voisins de par sa conception, donc prévisualiser la tablette et le mobile pour confirmer que les décalages semblent toujours corrects.
Quelles transformations l'extension inclut-elle ?
Traduire X et Y, Rotate, Scale X et Y, Skew, Flip Horizontal, et Flip Vertical, chacun disponible à la fois dans les états normal et en vol stationnaire Chaque contrôle est réactif, de sorte que les valeurs peuvent différer par appareil.
L'extension Transforms est-elle gratuite ?
Oui. Transforme les navires avec la version gratuite de Master Addons for Elementor, dans le groupe Animation Widgets de l'onglet Extensions La page de tarification couvre ce que les plans Pro ajoutent.
Envelopper #
L'extension Transforms vous remet la boîte à outils de transformation CSS à l'intérieur du panneau Élémenteur : déplacez, faites pivoter, mettez à l'échelle, biaisez et retournez n'importe quoi, avec les états de vol stationnaire et les transitions douces inclus Commencez par une image de sortie ou un levage de vol stationnaire et construisez à partir de là. Il s'associe naturellement au Extension d'animation d'entrée pour les éléments qui arrivent en mouvement, et la gamme complète de Widgets et extensions Master Addons couvre le reste.
