Für eine bestimmte Art von Unternehmen, wie z. B. einen Fotobearbeitungsdienst, kann das Hinzufügen eines Bildvergleichs ein nützliches Werkzeug sein, um Ihren Dienst zu beschreiben. Sie können den Bildvergleich zur Homepage, Zielseite oder jeder Seite hinzufügen, auf der Sie über den von Ihnen angebotenen Service sprechen.
Elementor bietet in der Tat kein Widget oder keine Funktion zum Hinzufügen von Bildvergleichen, aber Sie können es mit einem Add-On erhalten. Es gibt Zusatzmodule Elementor die ein Widget zum Hinzufügen eines Bildvergleichs anbieten. Drei davon sind: Wesentliche Addons, Glückliche Addonsund JetElements.
In diesem Artikel zeigen wir Ihnen, wie Sie einen Bildvergleich hinzufügen Elementor mit JetElements.
JetElements selbst ist ein von Crocoblock entwickeltes Premium-Add-On für Elementor. Es ist Teil der JetPlugins-Familie. Das Add-On enthält ein Widget namens Vergleichsbilder die Sie verwenden können, um einen Bildvergleich zur Elementor-Seite hinzuzufügen.
So fügen Sie einen Bildvergleich in Elementor hinzu
Stellen Sie sicher, dass Sie das JetElements-Add-On installiert und aktiviert haben, bevor Sie beginnen. Wenn Sie neu bei Elementor sind, können Sie unseren vorherigen Artikel lesen, um mehr zu erfahren wie benutzt man Elementor.
Wir werden das Widget direkt hinzufügen Vergleichsbilder in diesem Artikel.
Bevor Sie beginnen, können Sie zwei Bilder für den Vergleich vorbereiten. Sie können beispielsweise ein Vorher-Image und ein Nachher-Image vorbereiten. Sobald Sie fertig sind, ziehen Sie einfach das Widget Vergleichsbilder im Elementor-Bearbeitungsfeld.
Standardmäßig erstellt das JetElements Image Compare-Widget zwei Bildvergleiche. Wenn Sie nur einen Bildvergleich erstellen müssen (zwei Bilder zum Vergleichen), können Sie einen der vorhandenen Bildvergleiche löschen.
Lesen Sie auch: Elementor: So fügen Sie Lottie-Animationen hinzu
Um das Vorher- und Nachher-Bild hinzuzufügen, öffnen Sie den vorhandenen Bildvergleich (indem Sie darauf klicken), um ihn zu bearbeiten Inhalt. Wählen Sie einfach das vorherige Bild aus vor bild Abschnitt und wählen Sie das Bild danach aus nach bild Sektion. Wie Sie sehen können, können Sie auch die Beschriftungen für jeden Abschnitt überschreiben.
Sobald die Auswahl der Bilder abgeschlossen ist, können Sie den Block öffnen Einstellungen um die Startposition des Separators einzustellen. Wenn Sie mehr als einen Bildvergleich hinzufügen möchten, können Sie die Karusselleinstellungen festlegen.
Dann kannst du deinen Bildvergleich stylen, indem du auf den Reiter wechselst Design. Sie können fünf Anpassungsblöcke öffnen, um Ihren Bildvergleich zu gestalten. Wenn Sie jedoch nur einen Bildvergleich hinzufügen möchten, müssen Sie nur die ersten drei Blöcke öffnen.
- General
Sie können diesen Block öffnen, um Polsterung, Rahmenschatten, Randtyp und Randradius einzustellen.
- Label
Sie können diesen Block öffnen, um Vergleichsetiketten zu gestalten (die Etiketten „vorher“ und „nachher“). Sie können Dinge wie horizontale Ausrichtung, vertikale Ausrichtung, Textfarbe, Hintergrundfarbe, Typografie (Schriftfamilie, Schriftstil, Schriftgröße) usw. festlegen.
- Handle
Sie können diesen Block öffnen, um den Griff zu gestalten. Sie können Dinge wie Griffausrichtung, Steuerungsbreite, Steuerungshöhe, Grifffarbe (ob normaler Zustand oder beim Schweben) und so weiter einstellen.
Wenn Sie mehr als einen Bildvergleich hinzufügen, können Sie auch die Blöcke öffnen Karussellpfeile et Karussell-Punkte um Pfeile und Navigationspunkte zu stylen.
Das ist es. Sie können auf die Schaltfläche klicken VERÖFFENTLICHUNG / AKTUALISIEREN befolgen für veröffentlichen /Bearbeiten Sie Ihre Seite, sobald Sie mit der Bearbeitung fertig sind.
Holen Sie sich Elementor Pro jetzt!!!
Zusammenfassung
Hier ! Das ist es für diesen Artikel, der dir zeigt, wie es geht Bildvergleich in Elementor hinzufügen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
