Rasterlayouts sind aufgeräumt, und ordentlich kann langweilig werden Ein Bild, das sich aus seiner Spalte lehnt, oder eine Karte, die leicht unter dem Cursor wächst: Kleine Transformationen wie diese trennen eine gestaltete Seite von einer gestapelten Die Transformiert Erweiterung In Master Addons Pro Fügt jedem Element ein Transformationspanel hinzu: Übersetzen, Drehen, Skalieren, Schrägstellen und Umdrehen, mit separaten Einstellungen für Normal- und Schwebezustände.
Was die Transforms-Erweiterung bewirkt #
Sobald aktiviert, erhält jedes Elementorelement eine Transformiert Abschnitt unter seiner Fortgeschritten Tab. Flip Aktivierte Transformationen zu Ja und sechs Steuerelemente erscheinen, die jeweils eine CSS-Transformation auf das Element anwenden, ohne den eigentlichen Layoutfluss zu berühren:
- Übersetzen: Bewegen Sie das Element entlang der X- und Y-Achse in Pixeln von -1000 auf 1000.
- Drehen: Drehen Sie es auf die X-, Y- oder Z-Achse von -180 bis 180 Grad.
- Maßstab: Vergrößern oder verkleinern Sie es auf jeder Achse unabhängig voneinander, von 0 bis 5.
- Schräg: Schräglage es für einen diagonalen, dynamischen Look.
- Horizontal umdrehen / Vertikal umdrehen: Spiegel es mit einem Klick.
Die Normal und Schweben Tabs enthalten separate Werte, sodass ein Element in einer Richtung ruhen und sich transformieren kann, wenn der Cursor darauf landet, mit einer von Ihnen kontrollierten Übergangsdauer.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- A Master Addons Pro Lizenz, denn Transforms ist eine Pro-Erweiterung.
So aktivieren Sie die Transforms-Erweiterung #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Transformiert sitzt in der Animations-widgets Gruppe mit einem Hot-Abzeichen, zw Eingangsanimation und Enthüllen. Klicken Sie auf den Knebel, damit er lila wird, und schlagen Sie dann Änderungen speichern und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Öffnen Sie das Transforms-Panel für ein Element #
Wählen Sie das Element im Elementor-Editor, ein Bild-Widget in der Demo, und öffnen Sie das Fortgeschritten Tab. Erweitern Sie die Transformiert Abschnitt mit dem lila MA-Abzeichen und Schalter Aktivierte Transformationen Zu Ja. Die sechs Transform-Steuerelemente erscheinen unter den Registerkarten Normal und Hover, wobei sich jedes mit seinem Bleistiftsymbol öffnet.
Bewegen und skalieren Sie das Element #
Klicken Sie auf den Bleistift neben Übersetzen Und zwei Schieberegler öffnen sich: Übersetzen Sie X und Übersetzen Sie Y. Die Demo schiebt das Bild 71 auf die X-Achse, und es gleitet in Richtung des Randes des Abschnitts auf der Leinwand, während sich der Schieberegler bewegt Werte sind in Pixeln, und jede Achse hat ihre eigene responsive Einstellung pro Gerät.
Die Skala Steuerung funktioniert genauso Einstellen von Skala X auf 1,4 in der Demo vergrößert das Bild über seine Spalte hinaus, überlappt die Schnittgrenze für die Art von Breakout, die ein einfaches Gitter rahmt, kann nicht. Skala Y bleibt bei ihrer Standardeinstellung von 1, es sei denn, Sie ändern sie, also setzen Sie beides für eine gleichmäßige Vergrößerung.
Drehen und Schief gehen genauso Öffnen Sie die Steuerung, ziehen Sie den Schieberegler, und die Leinwand zeigt den Winkel während Sie gehen.
Fügen Sie eine Hover-Transformation hinzu #
Wechseln Sie zu den Schweben Tab und die gleichen Steuerelemente gelten nur, während sich der Cursor auf dem Element befindet, plus zwei Extras: Horizontal umdrehen und Vertikal kippen Ja/Nein-Schalter werden, und ein Übergangsdauer (ms) Schieberegler steuert, wie schnell die Änderung animiert Die Demo schaltet Flip Horizontal mit einem 400 ms Übergang ein, sodass sich das Bild beim Schwebeflug sanft widerspiegelt und zurückschaltet, wenn der Cursor geht.
Das Ergebnis auf der Seite #
Veröffentlichen und überprüfen Sie das Frontend Das Bild sitzt verschoben und vergrößert über seine Spalte hinaus genau wie im Editor angeordnet, und im Schweben spielt es den Flip mit der 400 ms Leichtigkeit ab Die Transformationen sind schlichtes CSS mit einem kleinen Stylesheet, und das Layout um das Element herum fliesst nie wieder.
Eines zu bedenken: transforms sind nur visuell Das Element nimmt immer noch seinen ursprünglichen Platz im Layout ein, so dass ein stark übersetztes Element seine Nachbarn überlappen kann Das ist normalerweise der Punkt, aber überprüfen Sie Tablet und Mobil, wo der gleiche Offset mehr vom Bildschirm abdeckt.
Wo Transformationen ihren Platz verdienen #
- Ausbruchbilder. Ein Foto, das skaliert und über seinen Säulenrand hinaus verschoben ist, ergibt eine Heldenabschnittstiefe.
- Hover-feedback. Karten, die sich unter dem Cursor anheben, neigen oder leicht wachsen, werden als anklickbar gelesen.
- Gedrehte Akzente. Abzeichen, Stempel und Etiketten sitzen natürlicher und in einem leichten Winkel.
- Schrägabschnitte. Ein paar Grad Schrägstellung an einem Teiler oder Knopf unterbricht die Rechteckmonotonie.
- Gespiegelte Vermögenswerte. Drehen Sie einen Pfeil oder eine Abbildung um, anstatt ein zweites Bild zu exportieren.
Video-Tutorial #
Beobachten Sie jedes Bedienelement in Aktion, vom Aktivieren der Erweiterung bis zum Hover-Flip auf der veröffentlichten Seite.
Häufig gestellte Fragen #
Wie drehe oder skaliere ich ein Element in Elementor?
Aktivieren Sie die Transforms-Erweiterung im Reiter Master Addons Extensions, wählen Sie das Element aus und öffnen Sie Transforms unter der Registerkarte Erweitert Aktivierte Transformationen einschalten, dann verwenden Sie den Steuerelement drehen oder Skalieren; die Leinwand gibt eine Vorschau auf die Änderung live, während Sie den Schieberegler ziehen Der Abschnitt Elementor-eigene Transformierung im Reiter Erweitert bietet ähnliche Steuerelemente kostenlos an.
Kann ich beim Hover eine andere Transformation anwenden?
Ja. Das Panel hat separate Registerkarten Normal und Hover Ruhewerte in Normal einstellen, Schwebewerte in Hover, und mit dem Schieberegler Übergangsdauer steuern, wie schnell das Element zwischen den beiden Zuständen animiert.
Brechen Transformationen mein Seitenlayout?
Nr. CSS-Transformationen sind nur visuell, so dass das Element seinen ursprünglichen Platz im Layout behält und umgebende Inhalte nie wieder einfließen Ein transformiertes Element kann Nachbarn von Design überlappen, so dass Vorschautablett und Mobilgerät zur Bestätigung der Offsets immer noch richtig aussehen.
Welche Transformationen beinhaltet die Erweiterung?
Übersetzen Sie X und Y, Drehen Sie X, Y und Z, Skala X und Y, Schräg X und Y, Flip Horizontal und Flip Vertical, jeweils sowohl im Normalzustand als auch im Hover-Zustand verfügbar Die Schieberegler reagieren, sodass die Werte je Gerät unterschiedlich sein können.
Ist die Transforms-Erweiterung kostenlos?
No. Transforms ist eine Pro-Erweiterung in Master Addons Elementor hat auch einen freien Abschnitt Transformieren in der Registerkarte Erweitert mit ähnlichen Steuerelementen, und die Seite Transforms-Erweiterung vergleicht die beiden.
Einwickelnd #
Die Transformiert Erweiterung Hände Ihnen das CSS-Transformations-Toolkit im Inneren des Elementor-Panels: Bewegen, drehen, skalieren, schief, und alles umdrehen, mit Hover-Zuständen und glatten Übergängen inklusive Beginnen Sie mit einem Breakout-Bild oder einem Hover-Lift und bauen Sie von dort aus Es paart sich auf natürliche Weise mit dem Erweiterung für Eingangsanimation Für Elemente, die in Bewegung kommen, und die vollständige Aufstellung von Master Addons Widgets und Erweiterungen Den Rest deckt.
