Manches ist leichter zu zeigen als zu erzählen: Ein retuschiertes Foto, ein Zimmer nach einem Umbau, ein Design vor und nach einer Aufräumaktion Das Gratis Bildvergleichs-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 Drag (frei) oder, mit Master Addons Pro, einer Klick - oder Mausbewegung 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: Mouse Drag/Swipe ist kostenlos Mouse Move and Mouse Click braucht Master Addons Pro.
Schalten Sie die Ausrichtung #
Die Orientierung Umschalten wechselt zwischen Horizontal und Vertikal Horizontal, die Voreinstellung, gibt einen Links-Rechts-Wisch vor Vertikal stapelt das Vorher-Bild oben und das Nachher unten, mit einem Auf-Ab-Griff, der sich bei großen Fotos normalerweise 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: Rand, Polsterung und Rand um den gesamten Schieberegler herum. Randradius und Box Shadow sind Pro-Optionen.
- 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 funktioniert auf Desktop - und Touchscreens Die Option Pro Mouse Move fühlt sich schnell an, macht aber nichts auf Telefonen, die keinen Hover haben.
- Verwenden Sie Vertical 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 Horizontal, ein Links-Rechts-Split; schalten Sie auf Vertical und die Bilder stapeln oben und unten mit einem Up-Down-Griff Vertikal funktioniert gut für Porträtbilder oder hohe Screenshots.
Wie bewegen Besucher den Vergleichsschieber?
Der Move Handle Dropdown in Einstellungen setzt den Auslöser Mouse Drag/Swipe ist kostenlos und funktioniert auf Desktop - und Touchscreens Mouse Move und Mouse Click sind Master Addons Pro Optionen.
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, und sehen Sie sich die an Widget-Seite zum Bildvergleich oder die Vor und nach Schieberegler Für Beispiele.
