{"id":372046,"date":"2023-04-25T12:48:00","date_gmt":"2023-04-25T09:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=372046"},"modified":"2023-04-25T12:48:26","modified_gmt":"2023-04-25T09:48:26","slug":"der-einfache-weg-fuegen-sie-den-vorher-und-nachher-schieberegler-hinzu","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/der-einfache-weg-fuegen-sie-den-vorher-und-nachher-schieberegler-hinzu\/","title":{"rendered":"Der einfache Weg F\u00fcgen Sie den Vorher- und Nachher-Schieberegler hinzu"},"content":{"rendered":"\n

Die Vorher-Nachher-Bilder werden in den unterschiedlichsten Branchen zu Marketingzwecken verwendet<\/strong>. Es gibt keine Worte, die die Wirkung eines bestimmten Prozesses besser beschreiben k\u00f6nnen als ein Bild, das genau zeigt, wie jemand oder etwas vor und nach diesem Prozess ausgesehen hat. Auch in Unternehmen, die sich nicht um Produkte mit sichtbarer Wirkung drehen, l\u00e4sst sich dieses Feature humorvoll einsetzen.<\/p>\n

Angenommen, Sie betreiben ein Restaurant \u2013 Sie k\u00f6nnten zeigen, wie eine Person vor dem Essen in Ihrem Palast aussieht und wie erfreut sie aussieht, nachdem sie Ihre K\u00f6stlichkeiten probiert hat. Die M\u00f6glichkeiten vor und nach Slider-Angeboten in Bezug auf die Darstellung des Nutzens und der Vorteile Ihrer Produkte\/Dienstleistungen sind grenzenlos<\/strong>. Es h\u00e4ngt alles von Ihrer Fantasie ab.<\/p>\n

So wie das Hinzuf\u00fcgen eines Parallax-Effekts<\/a> zu Ihren Seiten Ihre Website modern aussehen l\u00e4sst, macht der Vorher-Nachher-Schieberegler es schwer zu vergessen, da Bilder mehr als 1000 Worte sagen k\u00f6nnen.<\/p>\n

Au\u00dferdem k\u00f6nnen Sie diese Funktion selbst zu Ihrer Website hinzuf\u00fcgen. In diesem Artikel zeigen wir Ihnen, wie Sie mit dem beliebten kostenlosen Vorher\/Nachher-Vergleichs-Widget<\/a> einen Vorher-Nachher-Slider erstellen .<\/p>\n

Bleiben Sie dran, um mehr zu lesen \u00fcber:<\/p>\n<\/p>\n

Hinzuf\u00fcgen von Vorher- und Nachher-Schiebereglern mit Qi-Addons f\u00fcr Elementor<\/h2>\n

Qi Addons f\u00fcr Elementor<\/a> ist ein intuitives Tool, mit dem Sie m\u00fchelos eine breite Palette an wundersch\u00f6nen Elementen<\/strong> zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen. Es verf\u00fcgt \u00fcber eine sehr praktische, benutzerfreundliche Oberfl\u00e4che<\/strong>, und sowohl Neulinge als auch fortgeschrittene Benutzer werden es einfach finden. Besonders toll an Qi ist die Tatsache, dass es Ihnen neben so vielen n\u00fctzlichen Features auch eine Prise zeitgem\u00e4\u00dfe Eleganz bietet.<\/p>\n

Der Prozess der Installation<\/a> der QI-Addons f\u00fcr Elementor unterscheidet sich nicht von jeder anderen Plugin-Installation. Wenn Sie Fragen dazu haben, \u00fcberpr\u00fcfen Sie unbedingt den oben angegebenen Link, und Sie k\u00f6nnen uns auch im Kommentarbereich schreiben.<\/p>\n

\"Der<\/a><\/p>\n

Da es sich um ein Elementor-Plugin handelt, stellen Sie sicher, dass Sie beim Erstellen eines neuen Beitrags zum Elementor-Editor wechseln<\/strong>. Alle Qi-Addons-Widgets werden ordentlich im linken Elementmen\u00fc angezeigt<\/strong>. Scrollen Sie einfach im Men\u00fc nach unten, um sie zu finden.<\/p>\n

Das Vorher-Nachher-Schieberegler-Widget<\/a> bietet eine einfache und effektive M\u00f6glichkeit, zwei Bilder im selben Rahmen anzuzeigen<\/strong>. Sie finden es im Seitenleistenmen\u00fc auf der linken Seite, indem Sie den Widget-Namen in das Suchfeld eingeben oder die Widgets im Men\u00fc durchsuchen.<\/p>\n

\"Der<\/a><\/p>\n

Um den Vorher\/Nachher-Vergleichsschieber hinzuzuf\u00fcgen, ziehen Sie das Elementor-Element per Drag & Drop an die gew\u00fcnschte Stelle. Wenn das Widget hinzugef\u00fcgt wird, befinden sich alle Einstellungen auf der linken Seite<\/strong> und auf den Registerkarten Inhalt und Stil befinden sich alle Optionen, die sich auf den Schieberegler beziehen<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Jetzt m\u00fcssen Sie die Vorher- und Nachher-Bilder zum Schieberegler hinzuf\u00fcgen<\/strong>. Zuerst f\u00fcgen wir das Vorher-Bild hinzu \u2013 bewegen Sie den Mauszeiger \u00fcber das Bildfeld und die Option \u201eBild ausw\u00e4hlen“ wird angezeigt oder klicken Sie einfach auf das kleine Plus-Symbol in der Mitte des Felds.<\/p>\n

\"Der<\/a><\/p>\n

Sie k\u00f6nnen ein Bild aus der Medienbibliothek ausw\u00e4hlen oder bei Bedarf ein Bild in Ihre Medienbibliothek hochladen<\/strong>. Ziehen Sie das ausgew\u00e4hlte Bild einfach per Drag & Drop in die Medienbibliothek, falls es noch nicht dort ist, w\u00e4hlen Sie es aus und w\u00e4hlen Sie es aus.<\/p>\n

\"Der<\/a><\/p>\n

Nachdem Sie die gew\u00fcnschten Bilder eingef\u00fcgt haben, k\u00f6nnen Sie den Vorher\/Nachher-Schieberegler weiter anpassen, indem Sie den Text \u00e4ndern, der im Kreis in der Mitte des Schiebereglers angezeigt wird<\/strong>. Sie k\u00f6nnen hier eine Anweisung oder eine einpr\u00e4gsamere Nachricht schreiben, es liegt an Ihnen und Ihrem Website-Stil. Sie k\u00f6nnen auch w\u00e4hlen, ob der Text vertikal oder horizontal ausgerichtet werden soll.<\/p>\n

Wenn Sie einstellen m\u00f6chten, wo die Grenze zwischen dem Vorher- und dem Nachher-Bild auf dem Schieberegler angezeigt wird, k\u00f6nnen Sie den gew\u00fcnschten Offset-Wert in das Feld eingeben<\/strong>. Der Standardwert ist 50 %, was bedeutet, dass sich der Standardrand genau in der Mitte des Bildes befindet. So kann der Schieberegler aussehen, wenn Sie den Offset anpassen:<\/p>\n

\"Der<\/a><\/p>\n

Jetzt ist es Zeit f\u00fcr eine weitere Feinabstimmung des Vorher-Nachher-Schiebereglers. Sehen wir uns an, was Sie sonst noch anpassen k\u00f6nnen, damit der Schieberegler genau so aussieht, wie Sie ihn ben\u00f6tigen. Klicken Sie auf die Registerkarte Stil, um weitere Optionen zu erkunden<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Wenn Sie den kreisf\u00f6rmigen Anfasser aus der Bildmitte verschieben m\u00f6chten, verwenden Sie einfach den Schieberegler, um den Wert f\u00fcr den oberen Versatz des Anfassers anzupassen<\/strong>. Sie werden sofort Live-\u00c4nderungen sehen, sodass Sie leicht entscheiden k\u00f6nnen, was f\u00fcr Sie am besten funktioniert. Auf die gleiche Weise passen Sie auch die Kreisgr\u00f6\u00dfe sowie die Grenze zwischen der Vorher-\/Nachher-Version des Bildes an<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Sie k\u00f6nnen auch auf die Nabdle-Textfarbe klicken, um Ihren Farbton f\u00fcr den Text im Kreis zu erstellen<\/strong>, und auf die gleiche Weise die Textschrift ausw\u00e4hlen<\/strong>. Schlie\u00dflich k\u00f6nnen Sie auch die Kreisfarbe<\/strong> auf die gleiche Weise anpassen.<\/p>\n

\"Der<\/a><\/p>\n

Erkundung der erweiterten Optionen<\/h2>\n

Auf der Registerkarte Erweitert finden Sie viele weitere Optionen, um den Schieberegler attraktiver und einpr\u00e4gsamer zu gestalten. Diese Optionen gelten nicht nur f\u00fcr dieses Widget, sondern sind standardm\u00e4\u00dfige Elementor-Optionen, mit denen Sie auch andere Widgets auf einer Seite bearbeiten k\u00f6nnen.<\/p>\n

Lassen Sie uns einige der interessantesten veranschaulichen. F\u00fchlen Sie sich frei, alle Optionen zu testen, da Sie alle \u00c4nderungen sehen, die Sie live vornehmen, sodass Sie sofort erfahren, was jede Option mit dem Schieberegler macht und ob sie f\u00fcr Sie funktioniert.<\/p>\n

\"Der<\/a><\/p>\n

Wenn Sie das Men\u00fc Erweitert \u00f6ffnen, sehen Sie die Optionen zum Einstellen von Rand und Auff\u00fcllen<\/strong>. Neben jeder Option sehen Sie ein kleines Laptop-Symbol, mit dem Sie auf verschiedenen Ger\u00e4ten \u2013 Laptop, Tablet oder Handy \u2013 unterschiedliche Werte f\u00fcr Rand und Abstand festlegen k\u00f6nnen.<\/p>\n

\"Der<\/a><\/p>\n

Bewegungseffekte sind besonders interessant und Sie haben eine wirklich gro\u00dfe Auswahl von mehr als 35 Bewegungseffekten zur Auswahl. Sie haben auch die M\u00f6glichkeit, verschiedene Animationen einzustellen, die auf verschiedenen Ger\u00e4ten angezeigt werden<\/strong>. Nachdem Sie den Animationstyp ausgew\u00e4hlt haben, k\u00f6nnen Sie bei Bedarf auch dessen Dauer und Verz\u00f6gerung anpassen.<\/p>\n

\"Der<\/a><\/p>\n

Klicken Sie nun auf die Registerkarte \u201eTransformieren“, um weitere Effekte zu entdecken, die Sie verwenden k\u00f6nnen<\/strong>. Von Drehen \u00fcber Neigen bis hin zu horizontalem und vertikalem Spiegeln gibt es viele Dinge, die Sie tun k\u00f6nnen, um die Anzeige des Schiebereglers zu \u00e4ndern.<\/p>\n

\"Der<\/a><\/p>\n

Auf der Registerkarte Rahmen finden Sie Optionen, mit denen Sie den Sider dekorieren k\u00f6nnen, indem Sie Schattenbildrahmen in den von Ihnen ausgew\u00e4hlten Farben hinzuf\u00fcgen<\/strong>. Sie k\u00f6nnen auch einen Schatteneffekt um das Diafeld hinzuf\u00fcgen und die Ausgabe des Schatteneffekts festlegen.<\/p>\n

\"Der<\/a><\/p>\n

Die Optionen auf der Registerkarte Maske sind sehr praktisch. Sie k\u00f6nnen hier festlegen, dass der Schieberegler in verschiedenen Formen angezeigt wird<\/strong> \u2013 Kreis, Blume, Skizze, Dreieck, Klecks, Sechseck, oder sogar eine benutzerdefinierte Form hinzuf\u00fcgen. Es ist auch m\u00f6glich, die Gr\u00f6\u00dfe und Position der ausgew\u00e4hlten Form anzupassen.<\/p>\n

\"Der<\/a><\/p>\n

Achten Sie besonders auf die Registerkarte \u201eResponsive“<\/strong>, da Sie den Schieberegler so einstellen k\u00f6nnen, dass er auf ausgew\u00e4hlten Ger\u00e4ten nicht angezeigt wird<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

So sieht der Schieberegler auf der Seite aus, nachdem wir ihn an unsere Bed\u00fcrfnisse angepasst haben:<\/p>\n

\"Der<\/a><\/p>\n

Weitere Informationen finden Sie in diesem Video:<\/p>\n