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 für Elementor Stellt das vollständige CSS-Transformations-Toolkit auf jedes Element: Ü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 Prozent seiner eigenen Größe.
- Drehen: Drehen Sie es um einen beliebigen Winkel.
- Maßstab: Vergrößern oder verkleinern Sie es auf jeder Achse unabhängig voneinander.
- 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.
- Transforms ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
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 relativ zur eigenen Größe des Elements, 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 umrahmt, kann nicht Lassen Skala Y leer und es folgt X, oder setzen beide für unabhängiges Dehnen.
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 so, wie es im Editor angeordnet ist, und im Schweben spielt es den Flip mit der 400 ms Leichtigkeit ab Die Transformationen sind reines CSS, also nichts extra lädt und das Layout um das Element herum nie wieder fliesst.
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 auf der Registerkarte Master-Addons-Erweiterungen, wählen Sie das Element aus und öffnen Sie Transforms unter der Registerkarte Erweitert Aktivierte Transformationen einschalten, dann den Steuerelement drehen oder skalieren verwenden; die Leinwand gibt eine Vorschau der Änderung live vor, während Sie den Schieberegler ziehen.
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, Skala X und Y, Schräg, horizontal drehen und vertikal drehen, jeweils sowohl im Normal- als auch im Schwebezustand verfügbar. Jedes Steuerelement reagiert, sodass die Werte je nach Gerät unterschiedlich sein können.
Ist die Transforms-Erweiterung kostenlos?
Ja. Transformiert Schiffe mit der kostenlosen Version von Master Addons for Elementor, in der Gruppe Animation Widgets des Reiters Erweiterungen Die Preisseite behandelt, was die Pro-Pläne hinzufügen.
Einwickelnd #
Die Transforms-Erweiterung gibt Ihnen das CSS-Transformations-Toolkit im Elementor-Panel: Bewegen, drehen, skalieren, schief schieben und alles umdrehen, mit Hover-Zuständen und glatten Übergängen. Beginnen Sie mit einem Breakout-Bild oder einem Hover-Lift und bauen Sie von dort aus. Es passt sich auf natürliche Weise mit dem zusammen 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.
