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 l'extension dans Maître Addons Pro ajoute un panneau de transformation à chaque élément : traduire, faire pivoter, mettre à l'échelle, incliner 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 selon les axes X et Y, en pixels, de -1000 à 1000.
- Faire pivoter : tournez-le sur l'axe X, Y ou Z, de -180 à 180 degrés.
- Échelle: agrandissez-le ou rétrécissez-le sur chaque axe indépendamment, de 0 à 5.
- 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.
- UN Maître Addons Pro licence, car Transforms est une extension Pro.
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 le canevas au fur et à mesure que le curseur se déplace Les valeurs sont en pixels, et chaque axe a son propre réglage réactif par appareil.
Le Échelle le contrôle fonctionne de la même manière La définition 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 de découpage cadrant une grille simple ne peut pas faire L'échelle Y reste à sa valeur par défaut de 1 à moins que vous ne la modifiiez, donc définissez les deux pour un agrandissement pair.
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 simples CSS avec une petite feuille de style, 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 La propre section Transform d'Elementor dans l'onglet Avancé offre gratuitement des contrôles similaires.
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 X, Y et Z, Échelle X et Y, Skew X et Y, Flip Horizontal, et Flip Vertical, chacun disponible à la fois dans les états normal et en vol stationnaire Les curseurs sont réactifs, de sorte que les valeurs peuvent différer par appareil.
L'extension Transforms est-elle gratuite ?
No. Transforms est une extension Pro dans Master Addons Elementor a également une section Transform gratuite dans l'onglet Avancé avec des contrôles similaires, et la page d'extension Transforms compare les deux.
Envelopper #
Le Transforme l'extension 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 en petits groupes ou un levage en 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.
