Sind Sie auf der Suche nach dem besten Vorher-Nachher-Bild-Slider für Ihre Website? Machen Sie sich keine Sorgen mehr! Denn wir haben die richtige Lösung für Sie. Heute zeigen wir Ihnen, wie Sie mit Elementor ganz einfach einen erstellen können.

Ein Vorher-Nachher-Schieberegler erstellt eine Diashow, indem er zwei ähnliche Bilder nebeneinander platziert. Mit einem Schieberegler können Sie ihn hin- und herschieben, um die beiden Bilder zu vergleichen. Schließlich ist dies eine interessante Möglichkeit, neue Produkte, das Wachstum Ihres Unternehmens oder besondere Bedeutungen zu präsentieren. Sie zieht nicht nur Ihre Besucher an, sondern zeigt auch die Wirkung Ihres Produkts oder Ihrer Dienstleistung. In der Tat ist es ein ziemlich gutes Werkzeug!

In der Regel verwenden die Menschen Bildbearbeitungsprogramme, um diese Art von Effekt zu erzielen. Aber mit einer einfachen Bildvergleich Widget können Sie dieses Kunststück leicht erreichen. Beachten Sie, dass das Unternehmen Element Pack hat dieses Widget entwickelt. Dieses Widget ist ein voll funktionsfähiger Bildschieber, mit dem Sie 2 verschiedene Versionen desselben Bildes anzeigen können. Außerdem können Sie es auf jede beliebige Weise verwenden.

Schluss mit dem Geplauder. Legen wir los!

Einfügen und Anpassen von Vorher- und Nachher-Bildschiebern

Widget einfügen

Gehen Sie zunächst auf Ihre Webseite, auf der Sie diesen Slider verwenden möchten. Da wir dies mit Elementor machen, stellen Sie sicher, dass Sie die Plugins Elementor und Element Pack Lite in Ihrem Dashboard installieren. Wir werden in diesem Blog jedoch nicht über die Installationsverfahren sprechen.

Obwohl es nicht erwähnenswert ist, könnte es für Anfänger dennoch schwierig sein. Suchen Sie einfach nach dem Bildvergleich Widget im Widget-Menü. Wenn Sie es sehen (es hat ElementPack Logo), ziehen Sie es in einen Bereich des Editors und legen Sie es dort ab.

Anpassen des Layouts des Bildsliders

Sobald Sie ihn ablegen, sehen Sie die Standardeinstellung des Schiebereglers am Anfang. Dies ist jedoch die Layout Abschnitt in der Inhalt Registerkarte. Sie können jede Art von Bild für den Bildschieberegler auswählen, um es hier anzuzeigen.

Lassen Sie uns die Bilder ändern. Für den Anfang wählen wir normale Bilder.

Sobald Sie ein Bild eingefügt haben, können Sie die Größe von Bildgröße Option. Generell gilt: Je größer das Bild ist, desto mehr Platz wird es einnehmen. Bei einem Bild mit einer Höhe von 1000 Pixeln, aber einer Breite von nur 500 Pixeln wird die Länge des Schiebereglers um 1000 Pixel erhöht.

Außerdem können Sie von hier aus die Tags "Nach" und "Vorher" ändern. Lassen Sie uns später über diesen Teil sprechen und zum nächsten Abschnitt übergehen.

Interface-Einstellungen

Gehe zu Registerkarte "Inhalt" > Zusätzliche

Die Zusätzliche Option ist auch als Schnittstelleneinstellungen bekannt. Hier können wir die Ausrichtung des Schiebereglers entweder auf Vertikal oder Horizontal ändern. Außerdem können Sie die Option 'vor dem Bild' Sichtbarkeit. Die Website Überlagerung schaltet die Überlagerung des gesamten Vorher-Nachher-Schiebers ein/aus.

Auch in diesem Abschnitt gibt es einige Dinge zu besprechen. Beachten Sie, dass Sie einen Kreis in der Mitte des Schiebereglers hinzufügen können. Außerdem können Sie dem Kreis einen Unschärfe-Effekt hinzufügen.

Interessant ist auch, dass Sie die Möglichkeit haben, das Schweben des Schiebereglers zu glätten. Aktivieren Sie den Schalter Glätten? um den Hover-Drag zu glätten. Sie können jedoch die Empfindlichkeit des Bildschiebereglers mit der Bildlauftaste unten einstellen.