Der Editor ist vorerst auf Englisch. Keine Kreditkarte nötig.
Probier den Editor aus, ohne Registrierung
Wähle eine Vorlage, passe sie an und sieh live, wie sich alles aktualisiert, ohne Registrierung. Der Editor ist vorerst auf Englisch.
Keine Kreditkarte nötig · Dauerhaft kostenloser Plan
Keine Kreditkarte nötig · Dauerhaft kostenloser Plan
Der Vorher-Nachher-Slider von Common Ninja ist ein kostenloses No-Code-Widget für den Bildvergleich, das visuelle Veränderungen mit einem verschiebbaren Trennbalken sichtbar macht.
Lade Vorher- und Nachher-Fotos hoch, wähle die horizontale oder vertikale Ausrichtung, passe Beschriftungen, Farben und den Slider-Griff an und füge dann eine Zeile Einbettungscode auf über 200 Plattformen ein, darunter Canva, Wix, Tilda, Squarespace und Google Sites.
Die Einrichtung dauert weniger als 4 Minuten.
Hausrenovierungen, Zahnbehandlungen, Fotoretusche, Abnehmerfolge und Design-Überarbeitungen haben eines gemeinsam: Die Veränderung ist das Entscheidende. Mit einem verschiebbaren Slider spüren Besucher den Unterschied, statt nur darüber zu lesen.
Dienstleister stehen und fallen mit Belegen. Reinigungskräfte, Maler, Gartenbauer, Restauratoren, Fotografen und Stylisten gewinnen Buchungen, wenn Interessenten durch das tatsächliche Ergebnis ihrer Arbeit schieben können und kein Stockfoto sehen.
Hautpflege, Kosmetik, Werkzeuge, Farben, Restaurierungssets. Alles, dessen Wert in einer sichtbaren Veränderung liegt, lässt sich mit einem Slider präsentieren. Binde ihn auf Produktseiten, in Fallstudien und auf Landingpages ein, um die Conversion mit Belegen direkt auf der Seite zu steigern.
Designer, Fotografen, Retuscheure und Journalisten nutzen Slider, um den Prozess neben das Ergebnis zu stellen. Kombiniere ein finales Rendering mit einem Wireframe, ein unbearbeitetes Foto mit der fertigen Bearbeitung oder eine historische Damals-und-heute-Aufnahme für eine Reportage.
Füge zwei Fotos desselben Motivs zu unterschiedlichen Zeitpunkten hinzu. Wähle einen horizontalen oder vertikalen Trennbalken, lege fest, welches Bild der Ausgangszustand ist, und schreibe die beiden Beschriftungen, die Besucher beim Darüberfahren sehen.
Stelle per Drag-and-drop den Stil des Griffs, die Farben der Beschriftungen, das Bildverhältnis, die Animationsgeschwindigkeit und die Startposition des Trennbalkens in der Live-Vorschau ein. Passe den Slider an deine Marke an, ohne eine einzige Zeile CSS zu schreiben.
Kopiere den Einbettungscode und füge ihn an beliebiger Stelle auf deiner Website ein. Spätere Änderungen an den Bildern oder Beschriftungen werden automatisch übernommen, ohne dass du den Code neu einbetten musst.
Besucher ziehen den Trennbalken am Desktop mit dem Mauszeiger und auf Touchscreens mit dem Finger. Der Griff bleibt bei jeder Bildschirmgröße responsiv, und du kannst das Griff-Symbol an das Design deiner Marke anpassen.
Drehe den Trennbalken mit einem Klick um 90 Grad. Horizontale Slider passen zu Veränderungen im Breitformat (Renovierungen, Landschaften, Design-Layouts). Vertikale Slider passen zu Hochformat-Aufnahmen (Gesichter, Mode, Zahnmedizin, Retusche).
Ändere den Stil des Griffs, die Farben der Beschriftungen, das Bildverhältnis oder die Startposition des Trennbalkens und sieh im Editor in Echtzeit, wie sich der Slider aktualisiert. Kein Veröffentlichen und Hoffen mehr.
Wenn der visuelle Editor an seine Grenzen kommt, füge eigenes CSS für jedes Element hinzu. Gestalte individuelle Hover-Effekte, Animations-Timings oder pixelgenaue Abstände, ohne den Rest deiner Website anzufassen.
Mit dem Vorher-Nachher-Slider-Widget kannst du horizontale oder vertikale Slider erstellen und deiner Kreativität freien Lauf lassen. Dank der Wahl zwischen horizontalen und vertikalen Slidern passt du deine Slider flexibel an die Anforderungen deines Projekts an. Ob du Designer, Fotograf oder Unternehmer bist, das Vorher-Nachher-Slider-Widget ist das perfekte Werkzeug, um deine Arbeit auf einzigartige und ansprechende Weise zu präsentieren.
Mit dem Vorher-Nachher-Slider-Widget kannst du so viele Slider erstellen, wie du möchtest, und eine vollständige visuelle Geschichte erzählen, die genau auf deine Bedürfnisse zugeschnitten ist, ob du den Fortschritt eines Bauprojekts, die Verwandlung bei einer Hausrenovierung oder die Veränderung im Aussehen eines Menschen oder Tieres im Lauf der Zeit zeigen willst.
Das Vorher-Nachher-Slider-Widget bietet umfassende Anpassungsmöglichkeiten, damit du das Design einfach an den Stil deiner Website anpassen kannst. Du kannst die Farben des Sliders, der Buttons und der Beschriftungen an deine Marke anpassen. Außerdem kannst du aus verschiedenen Schriftarten wählen und Schriftgröße, Schriftstil und Schriftfarbe einstellen, um einen einheitlichen, professionellen Look zu schaffen. Zusätzlich zu diesen Designoptionen kannst du auch die Abstände des Widgets anpassen, damit es sich nahtlos in das Layout deiner Website einfügt.
Das Vorher-Nachher-Widget ist ein wertvolles Werkzeug für jede Website. Es ist nicht nur vollständig responsiv, passt sich also nahtlos an die Bildschirmgröße jedes Geräts an, sondern hat auch ein schlankes, modernes Design, das den Gesamteindruck deiner Website aufwertet. In einer Welt, in der immer mehr Menschen über Smartphone und Tablet ins Internet gehen, ist eine für Mobilgeräte optimierte Website entscheidend. Das Vorher-Nachher-Widget hilft dir genau dabei und verschafft dir einen Vorsprung vor der Konkurrenz.
Unser erweiterter Editor ist ein leistungsstarkes Werkzeug, mit dem du die volle Kontrolle über das Aussehen des Vorher-Nachher-Widgets hast. Damit passt du jeden Aspekt von Optik und Wirkung des Widgets ganz einfach an, von Farben und Schriftarten bis zu Layout und Positionierung. Und wenn du besonders kreativ sein willst, gehst du noch einen Schritt weiter und bearbeitest das CSS direkt. So kannst du noch weitergehende Änderungen am Widget vornehmen und es ganz zu deinem eigenen machen. Ob ein paar einfache Anpassungen oder aufwendige Individualisierung, unser erweiterter Editor deckt alles ab.
Um das Vorher-Nachher-Widget auf deiner Website einzubetten, kopierst du einfach den bereitgestellten Code und fügst ihn in das HTML deiner Seite ein. Außerdem aktualisiert sich das Widget selbst: Alle Änderungen, die du im Vorher-Nachher-Editor vornimmst, erscheinen automatisch auf deiner Website, ohne dass du zusätzlich etwas manuell aktualisieren musst.
Das Vorher-Nachher-Slider-Widget ist einfach zu bedienen und erfordert keine Programmierkenntnisse. Mit unserem intuitiven Dashboard und der Drag-and-drop-Funktion passt du das Widget mit nur wenigen Klicks ganz nach deinen Wünschen an.
Du kannst die Position der Beschriftungen im Vorher-Nachher-Slider-Widget anpassen. So platzierst du die Beschriftungen dort, wo sie am besten zum Design und Layout deiner Website oder App passen.
Ganz gleich, ob dein Bild im Querformat, Hochformat oder quadratisch ist, du kannst das Bildverhältnis für die optimale Darstellung festlegen.
Bereit, deine Veränderung auf die Seite zu bringen?
Editor öffnenKeine Kreditkarte nötig · Einrichtung in weniger als 4 Minuten
Common Ninja hat großartige No-Code-Widgets, die jede Website verschönern, egal mit welchem Baukasten sie erstellt wurde. Sie sind sehr einfach zu bedienen und anzupassen. Es gibt Widgets für fast jeden, der seine Website beeindruckend gestalten möchte.
Aus dem Englischen übersetzt
Hervorragender Service. Ich nutze ihre Widgets für mein Webdesign-Business, und wann immer ich Hilfe brauche, helfen sie sehr schnell.
Aus dem Englischen übersetzt
Ausgezeichnetes Unternehmen mit ausgezeichnetem Service!!! Wir haben damit eine Umfrage erstellt, und es war sehr benutzerfreundlich. Der Service war perfekt. Amit hat uns bei jedem Problem und jeder Frage geholfen, vielen Dank!!!
Aus dem Englischen übersetzt
Common Ninja hat uns beim Aufbau unserer Website gerettet, und der Kundenservice von Daniel, dem Mitgründer und CEO, war großartig.
Aus dem Englischen übersetzt
Ja. Der kostenlose Plan umfasst ein Vorher-Nachher-Slider-Widget ohne Zeitlimit, ohne Kreditkarte und ohne ablaufende Testphase. Upgrade nur, wenn du mehr Widgets, Premium-Designs oder höhere monatliche Aufrufgrenzen brauchst.
Nein. Erstelle und gestalte den ganzen Slider in einem Drag-and-drop-Editor und füge dann eine Zeile Einbettungscode auf deiner Website ein. Die meisten Nutzer sind in weniger als 4 Minuten mit der Einrichtung fertig.
Besucher ziehen einen vertikalen oder horizontalen Trennbalken über zwei übereinanderliegende Bilder, um den Unterschied sichtbar zu machen. Das funktioniert am Desktop mit der Maus und auf Mobilgeräten per Touch. Im Editor legst du beide Bilder, die Beschriftungen (standardmäßig "Before" / "After") und die Startposition des Trennbalkens fest.
Ja. Der Vorher-Nachher-Slider von Common Ninja unterstützt beide Ausrichtungen. Nutze einen horizontalen Trennbalken für Veränderungen im Breitformat (Renovierungen, Landschaften) und einen vertikalen Trennbalken für Hochformat-Aufnahmen (Gesichter, Mode, Retusche).
Ja. Der Trennbalken ist zuerst für Touch gebaut, am Desktop funktioniert er per Mausziehen. Bildgröße, Position der Beschriftungen und der Griff passen sich automatisch an Smartphones, Tablets und Laptops an. Eine eigene Mobilversion ist nicht nötig.
Ja. Beide Beschriftungen sind vollständig anpassbar. Benenne sie um, ändere die Farben, wähle die Ecke, in der sie erscheinen, oder blende sie ganz aus. Praktisch für Websites, die nicht auf Englisch sind, für Markenkampagnen oder für Vorher-Nachher-Paare, bei denen neutrale Beschriftungen besser passen als die Standardtexte.
JPG, PNG und WebP funktionieren alle. Am besten lädst du beide Bilder mit denselben Abmessungen und demselben Seitenverhältnis hoch, damit der Trennbalken sauber ausgerichtet ist. Das Widget unterstützt auch große Bilder in Hero-Größe, du musst sie also vor dem Hochladen nicht verkleinern.
Mit über 200 Plattformen, darunter Canva, Wix, Tilda, Squarespace, Google Sites, WordPress, Shopify, Webflow, Bootstrap Studio, HighLevel, Hostinger, Readymag und jede eigene HTML-Seite, die einen Einbettungscode akzeptiert.
Wähle deine Plattform. Jede dauert weniger als 4 Minuten.
Showcases images in a rotating or sliding manner
Füge Bildern interaktive Bereiche hinzu, die beim Klicken oder Mouseover zusätzliche Infos zeigen.
Zeigt Daten oder Funktionen nebeneinander, damit sich Informationen leicht vergleichen lassen.
Zeigt mehrere Logos in einem scrollenden oder rotierenden Karussell.
Zeig Kundenstimmen in einem rotierenden Slider.
Zeige die Google-Bewertungen deines Unternehmens auf deiner Website
Ja, du kannst den Trennbalken schräg stellen.
Ja, die Slider-Richtung änderst du ganz einfach im Tab „Content“.
Das Vorher-Nachher-Slider-Widget ist sehr einfach zu nutzen. Registriere dich einfach und starte mit der kostenlosen Version. Um komplizierte Einrichtung oder Installation musst du dir keine Gedanken machen, denn das Vorher-Nachher-Slider-Widget ist benutzerfreundlich und unkompliziert gestaltet. Nach der Registrierung hast du Zugriff auf alle grundlegenden Funktionen des Widgets, mit denen du deine Website und deine Online-Präsenz verbessern kannst. Danach kannst du auf die kostenpflichtige Version upgraden, wenn du erweiterte Funktionen und Möglichkeiten nutzen möchtest. Egal, für welche Version du dich entscheidest, du wirst feststellen, dass das Widget ein leistungsstarkes und einfach zu bedienendes Werkzeug ist, das deine Online-Präsenz auf das nächste Level bringen kann.
Das Vorher-Nachher-Slider-Widget von Common Ninja ist ein kostenloses Werkzeug mit vielen Funktionen und Optionen. Die Nutzung ist zwar kostenlos, aber die Anzahl der Aufrufe ist begrenzt. Das bedeutet, dass das Widget nach einer bestimmten Anzahl von Aufrufen auf deiner Website möglicherweise nicht mehr sichtbar oder funktionsfähig ist. Beachte, dass dieses Aufruflimit je nach deinem Plan variieren kann. Trotz dieser Einschränkung ist der Vorher-Nachher-Slider von Common Ninja ein wertvolles Werkzeug für Unternehmen, die die Kundenbindung steigern und das Nutzererlebnis ihrer Website insgesamt verbessern möchten.
Das Vorher-Nachher-Slider-Widget von Common Ninja ist ein vielseitiges Werkzeug für jeden Website-Baukasten. Du kannst dieses Widget also ganz einfach zu deiner Website oder deinem Shop hinzufügen, egal mit welcher Plattform du deine Website erstellst. Das Vorher-Nachher-Slider-Widget funktioniert reibungslos mit deiner Plattform, ob du einen bekannten Website-Baukasten nutzt oder etwas Spezialisierteres. So nutzt du alle Vorteile dieses leistungsstarken Werkzeugs, ohne dir Gedanken über Kompatibilitätsprobleme zu machen.
Das Vorher-Nachher-Slider-Widget von Common Ninja auf deiner Website einzubetten ist ganz einfach und besteht aus zwei Schritten:
Ja. Das Vorher-Nachher-Slider-Widget lässt sich DSGVO-konform nutzen. Das Erfassen von Besucherdaten ist immer Opt-in: Es bleibt ausgeschaltet, bis du es in den Einstellungen des Widgets aktivierst, und du entscheidest, was erfasst wird. Als Websitebetreiber bleibst du dafür verantwortlich, wie du die Daten deiner Besucher verwendest.
Programmierkenntnisse brauchst du nicht. Unser Vorher-Nachher-Slider-Widget ist so gestaltet, dass es auch mit wenig technischer Erfahrung einfach zu bedienen ist. Das Widget hat eine benutzerfreundliche Oberfläche, mit der du es ohne Programmierkenntnisse ganz einfach anpasst. Du kannst den Vorher-Nachher-Slider vollständig an deine Marke anpassen. Wenn du fertig bist, kopierst du einfach den bereitgestellten Code und fügst ihn auf deiner Website ein. So einfach ist das!
Das Vorher-Nachher-Slider-Widget auf deiner Website einzubetten ist ganz unkompliziert. Kopiere einfach den bereitgestellten Code und füge ihn an der gewünschten Stelle deiner Website ein. Das Widget fügt sich nahtlos in deine Website ein, und du kannst seine Funktionen sofort nutzen. Technisches Fachwissen oder Programmierkenntnisse sind nicht nötig, kopiere einfach den Code und füge ihn ein, um loszulegen. Mit diesem einfachen Ablauf fügst du das Widget ohne Aufwand zu deiner Website hinzu und erweiterst ihre Funktionen.
Gern. Wir freuen uns auf deinen Vorschlag. Schau dir dazu diese Seite (auf Englisch) an.
Es gibt mehrere Gründe, ein Vorher-Nachher-Slider-Widget auf deiner Website zu nutzen.
Erstens kann ein Vorher-Nachher-Slider-Widget eine gute Möglichkeit sein, die Ergebnisse deiner Arbeit oder deiner Produkte zu präsentieren. Wenn du ein Vorher- und ein Nachher-Bild in einem Slider zeigst, machst du die Verbesserungen oder Veränderungen deutlich sichtbar und lieferst einen greifbaren Beleg für den Wert, den deine Arbeit oder deine Produkte bieten.
Zweitens kann ein Vorher-Nachher-Slider-Widget das Nutzererlebnis auf deiner Website verbessern, weil er sie interaktiver und ansprechender macht. Wenn Besucher die Vorher- und Nachher-Bilder im Slider vergleichen können, bietest du ein intensiveres, interaktives Erlebnis, das Besucher länger auf deiner Website hält und sie dazu anregt, mehr zu entdecken.
Drittens kann ein Vorher-Nachher-Slider-Widget die Suchmaschinenoptimierung (SEO) deiner Website verbessern. Wenn du relevante Keywords und Formulierungen in den Text und die Links einbaust, die du deinem Vorher-Nachher-Slider hinzufügst, erhöhst du die Chance, dass deine Website in den Suchergebnissen für diese Begriffe erscheint. Das kann mehr Traffic auf deine Website bringen und deine Sichtbarkeit im Internet erhöhen.
Insgesamt kann ein Vorher-Nachher-Slider-Widget auf deiner Website eine gute Möglichkeit sein, die Ergebnisse deiner Arbeit oder deiner Produkte zu präsentieren, das Nutzererlebnis zu verbessern und das SEO deiner Website zu stärken.
Funktioniert auf über 200 Plattformen. Über 500.000 Unternehmen vertrauen darauf.
Erstelle deinen Vorher-Nachher-SliderKeine Kreditkarte nötig · Einrichtung in weniger als 4 Minuten
