Manches ist leichter zu zeigen als zu erzählen: Ein retuschiertes Foto, ein Raum nach einem Umbau, ein Entwurf vor und nach einer Aufräumaktion Die Bildvergleich Widget in Master-Addons für Elementor Stapelt zwei Bilder und lässt einen schaltbaren Griff dazwischen fallen, sodass Besucher rutschen, um den Unterschied selbst zu offenbaren.
Sie laden ein Vorher-Bild und ein Nachher-Bild, fügen Beschriftungen hinzu, wählen einen vertikalen oder horizontalen Split aus und stylen dann den Griff und die Beschriftungen so, dass sie zu Ihrer Website passen. Diese Anleitung deckt jede Einstellung im Widget ab.
Was das Bildvergleichs-Widget tut #
Das Widget zeigt zwei Bilder im selben Rahmen, eines übereinander, mit einem Schiebereglergriff in der Mitte nach unten Ziehen Sie den Griff und es wischt zwischen dem Vorher-Nachher-Bild, Sie können jede Seite beschriften, den Split von links-rechts nach oben-unten umdrehen und entscheiden, ob der Griff einem Widerstand, einem Klick oder einem Schwebeflug folgt.
Es gibt zwei Tabs, mit denen man arbeiten kann. Inhalt Hält die beiden Bilder, die Beschriftungen und das Schiebereglerverhalten. Stil Steuert das Layout, die Overlay-Etiketten und den Griff. Daneben liegen die üblichen Elementor Advanced-Optionen.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Zwei Bilder, die sich aneinanderreihen, gleiche Größe und Rahmen, sodass die Folie als eine Szene gelesen wird.
So fügen Sie das Bildvergleichs-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Bildvergleich, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf Ihre Seite und es wird mit zwei Beispielbildern und einem Schieberegler geladen, mit dem Sie sofort mit der Bearbeitung beginnen können.
Laden Sie die beiden Bilder #
Öffnen Sie die Inhalt Tab. Die Bilder Abschnitt hat eine Vorher und ein Nach Tabulator, und jeder legt sein eigenes Bild, seine eigene Bezeichnung und seine eigene Auflösung fest.
- Vor / Nach Tabs: Wechseln Sie zwischen den beiden Seiten, um jedes Bild einzustellen.
- Wählen Sie ein Bild: Wählen Sie das Bild für diese Seite aus der Mediathek.
- Etikett: Eine kurze Bildunterschrift für die Seite, wie vor der Arbeit oder endgültige Ergebnisse.
- Bildauflösung: Die servierte Größe ist wie voll oder groß.
Wählen Sie jedes Bild aus der Bibliothek aus #
Klicken Sie auf Wählen Sie ein Bild Und die WordPress Mediathek öffnet sich Stellen Sie das Vorher-Bild auf der Registerkarte Vorher ein, wechseln Sie dann auf die Registerkarte Nachher und wählen Sie die zweite aus Leicht zu vergessen: Die Registerkarte, auf der Sie sich befinden, entscheidet, welche Seite Sie ändern, also überprüfen Sie sie, bevor Sie auswählen.
Legen Sie die Etiketten fest #
Typ a Etikett Auf jeder Registerkarte und das Widget druckt es als Overlay auf jener Seite des Bildes, auf der einen Seite sitzt das Vorher-Label, auf der anderen das Nachher-Label, so dass Besucher wissen, welches welches ist, ohne dass Sie es ausschreiben.
Passen Sie die Schieberegler-Einstellungen an #
Öffnen Sie die Einstellungen Abschnitt für das Verhalten des Schiebers Hier stellen Sie die Ausgangsposition, die Richtung der Teilung, und was den Griff bewegt.
- Sichtbares Verhältnis (%): Wo der Griff beginnt, damit Sie sich auf der Vorher- oder Nachherseite öffnen können.
- Overlay: Vorher-Nachher-Etiketten anzeigen oder ausblenden.
- Griff bewegen: Ziehen oder wischen, klicken oder bewegen Sie den Mauszeiger, um den Schieberegler zu bewegen.
Schalten Sie die Ausrichtung #
Die Orientierung Kipphebel dreht den Split von vertikal in horizontal Vertikal gibt einen Links-Rechts-Wisch Horizontal stapelt das Vorher-Bild oben und das Nachher unten, mit einem Up-Down-Griff, der sich bei hohen Fotos meist besser liest.
Gestalten Sie Layout, Griff und Etiketten #
Öffnen Sie die Stil Tab. Es gibt Abschnitte für Layoutstil, Überlagerung, Griff, und EtikettDer Schieberegler entspricht also Ihrem Design und nicht dem Standardlook.
- Layoutstil: Randtyp, Radius und Kastenschatten um den gesamten Schieberegler.
- Griff: Farbe, Größe und Stil der Drag-Steuerung.
- Etikett: Farbe pro Seite, Typografie, Hintergrund, Rand und Abstand für die Bildunterschriften.
Häufige Anwendungsfälle #
- Fotobearbeitung Zeigt neben der retuschierten Version eine Rohaufnahme.
- Heim und Renovierung Vor und nach einem Umbau oder einer Aufräumaktion.
- Design und Dev Altes Layout versus Neugestaltung.
- Gesundheit und Fitness Fortschrittsschüsse nebeneinander.
- Produkte Ein einfacher Artikel neben dem fertigen oder gestylten Ergebnis.
Tipps für die Arbeit mit dem Bildvergleich-Widget #
- Passen Sie die beiden Bilder an. Gleiche Größe, gleicher Winkel und gleicher Schnitt, sodass die Folie als eine Szene und nicht als zwei zusammengeklemmte Fotos angezeigt wird.
- Stellen Sie das Startverhältnis ein. Öffnen Sie die Seite mit dem sichtbaren Verhältnis, damit Besucher erkennen können, dass es etwas zu ziehen gibt.
- Beschriftungen kurz halten. Vorher und Nachher, oder zwei Wörter, sitzen sauberer über dem Bild als ein voller Satz.
- Wählen Sie den richtigen Auslöser. Drag passt Desktop Der Hover fühlt sich schnell an, kann aber Touch-Benutzer unvorbereitet treffen. Testen Sie ihn also vor dem Versand auf einem Telefon.
- Verwenden Sie horizontal für große Schüsse. Ein Top-Bottom-Split funktioniert besser für Porträtbilder als ein schmaler Links-Rechts-Wisch.
Sehen Sie sich das Video-Tutorial an #
Folgen Sie lieber auf dem Bildschirm? Das Video-Tutorial unten durchläuft das Bildvergleichselement von Anfang bis Ende und zeigt, wie die Bilder, Beschriftungen, Schiebereglereinstellungen und das Styling im Elementor-Editor funktionieren.
Häufig gestellte Fragen #
Was ist das Bildvergleichs-Widget in Master-Addons?
Es handelt sich um ein Elementor-Widget, das ein Vorher- und ein Nachher-Bild mit einem ausziehbaren Griff dazwischen stapelt. Besucher schieben den Griff, um ihn von einem Bild zum anderen abzuwischen, mit optionalen Beschriftungen auf jeder Seite, die alle ohne Code aus dem Elementor-Panel eingestellt sind.
Wie füge ich Vorher-Nachher-Etiketten hinzu?
Öffnen Sie den Abschnitt Bilder und geben Sie ein Label auf der Registerkarte Vorher und der Registerkarte Nachher ein Jedes Label druckt als Overlay auf seiner Seite des Bildes Sie können sie mit dem Overlay-Toggle in Einstellungen ein - oder ausblenden und im Abschnitt Etikett der Registerkarte Stil stylen.
Kann ich den Schieber vertikal oder horizontal machen?
Ja. Der Abschnitt Einstellungen hat einen Orientierungs-Kipphebel Die Voreinstellung ist ein vertikaler Links-Rechts-Split; schalten Sie ihn und die Bilder stapeln sich oben und unten mit einem Auf-Ab-Griff Horizontal funktioniert gut für Porträtbilder oder hohe Screenshots.
Wie bewegen Besucher den Vergleichsschieber?
Der Dropdown des Verschiebegriffs in den Einstellungen setzt den Auslöser Der Griff kann einem Mauszug oder - wischen folgen, sich auf Klick bewegen oder den Verfolgungslauf verfolgen Drag ist auf dem Desktop am häufigsten, während Click die sicherste Wahl für Touchscreens ist.
Brauche ich Bilder in der gleichen Größe?
Für das beste Ergebnis ja. Die beiden Bilder sitzen im selben Rahmen, so dass die passende Größe, der passende Winkel und der Zuschnitt die Folie als eine Szene lesen lassen Wenn sich die Bilder unterscheiden, legen Sie eine feste Bildauflösung fest, sodass beide in den gleichen Dimensionen bedient werden.
Einwickelnd #
Das Bildvergleichs-Widget verwandelt zwei Bilder in ein interaktives Vorher-Nachher: Laden Sie die beiden Bilder, fügen Sie Beschriftungen hinzu, legen Sie die Ausrichtung und den Griff fest und stylen Sie dann den Schieberegler passend. Zu verwandten Widgets siehe die Bild Hotspot Widget und die Widget für Bild-Hover-EffekteDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
