{"id":16864,"date":"2024-05-03T06:30:20","date_gmt":"2024-05-03T06:30:20","guid":{"rendered":"https:\/\/elfsight.com\/de\/?page_id=16864"},"modified":"2025-02-20T14:05:12","modified_gmt":"2025-02-20T14:05:12","slug":"html","status":"publish","type":"page","link":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/","title":{"rendered":"Before and After Slider &#8211; HTML"},"content":{"rendered":"\n<div class=\"application-platform-content-item-description application-platform-content-item\" id=\"description\" data-nav-section=\"description\"> <h2>Beschreibung<\/h2> <p> Der Vorher-Nachher-Slider von Elfsight hilft Ihnen dabei, verlockende, verkaufseffiziente Fotos f\u00fcr Ihre Website zu erstellen. Kunden k\u00f6nnen alle Wirkungen entdecken, die Ihre Waren oder Dienstleistungen mit sich bringen. Laden Sie einfach zwei Fotos in den Vorher-Nachher-Slider f\u00fcr HTML hoch und sie werden mit einer Trennlinie angezeigt, die sich bewegen l\u00e4sst, um die \u00c4nderung zu beobachten. Sie k\u00f6nnen unbegrenzt viele Folien einbetten, jede mit einer eigenen Beschriftung. Die Teilerrichtung kann horizontal oder vertikal sein, und Sie k\u00f6nnen das beste Bildverh\u00e4ltnis w\u00e4hlen. Ihre Benutzer werden keine andere Wahl haben, als einen Kauf zu t\u00e4tigen, sobald sie das tats\u00e4chliche Ergebnis sehen| Ihrer Produkte! <\/p> <p><b>Vor &amp; starten nach dem Schieberegler, um Ihre Gesch\u00e4ftsspitzen effizienter zu erreichen! <\/b><\/p> <\/div> <div class=\"application-platform-content-item-features application-platform-content-item\" id=\"features\" data-nav-section=\"features\"> <h2>Wir bieten praktische und unkomplizierte Funktionen, sehen Sie sich einige davon an: <\/h2> <ul><li>Formen Sie eine beliebige Anzahl von Vorher und Nach ein paar Bildern<\/li> <li>Beschriftungen mit Textformatierungseinstellungen in jede Folie einf\u00fcgen<\/li><li>Zwei Layouts: Liste und Karussell<\/li><li>Horizontales oder vertikales Verschieben der Trennlinie<\/li> li&gt;<li>Klicken und Ziehen oder einfach den Mauszeiger bewegen, um die Trennlinie zu verschieben<\/li><li>Wischen auf Touch-Ger\u00e4ten<\/li><\/ul><p><a href=\"#demo\">Testen Sie die gesamte Personalisierung Funktionen in voll funktionsf\u00e4higer Demo<\/a><\/p> <\/div> <div class=\"application-platform-content-item-installation application-platform-content-item\" id=\"installation\" data-nav-section=\"installation\"> <h2>Wie bette ich den Vorher-Nachher-Slider in meine HTML-Website ein? <\/h2> <div class=\"video-container\"><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/YkoX3lNPpuc?si=ffh8vNvRLyc9qs3p\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><p>Befolgen Sie einfach die folgenden Richtlinien, um das Plugin einzuf\u00fcgen. <\/p> <ol><li><b>F\u00fchren Sie unseren kostenlosen Konfigurator aus und beginnen Sie mit der Gestaltung Ihres ma\u00dfgeschneiderten Widgets. <\/b><br> Finden Sie die bevorzugte Form und die bevorzugten Funktionen des Tools und nehmen Sie die \u00c4nderungen vor. <\/li> <li><b>Kopieren Sie Ihren individuellen Code, der im Fenster von Elfsight Apps angezeigt wird.<\/b><br> Sobald die Anpassung Ihres pers\u00f6nlichen Tools abgeschlossen ist, kopieren Sie den exklusiven Code im erscheinenden Fenster und behalten Sie ihn es f\u00fcr weiteren Bedarf. <\/li> <li><b>Erste Schritte mit der Verwendung des Tools auf Ihrer HTML-Homepage<\/b><br> Platzieren Sie den Code, den Sie k\u00fcrzlich kopiert haben, auf Ihrer Webseite und \u00fcbernehmen Sie die \u00c4nderungen. <\/li> <li><b>Du bist fertig! Die Integration ist vollst\u00e4ndig abgeschlossen<\/b><br> Gehen Sie auf Ihre Seite, um zu sehen, wie das Plugin funktioniert. <\/li><\/ol> <p>Wenn Sie Fragen haben oder auf Komplikationen sto\u00dfen, k\u00f6nnen Sie sich gerne an unser Support-Team wenden. Unsere Berater helfen Ihnen gerne bei allen Fragen rund um das Produkt weiter. <\/p> <\/div><div class=\"faq\" data-component=\"FAQ\"><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Wie f\u00fcge ich meiner HTML-Website einen Vorher- und Nachher-Slider hinzu?<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Die Erstellung des Das Widget erfolgt auf der Elfsight-Website und Sie m\u00fcssen nicht programmieren. \u00d6ffnen Sie unsere Online-Demo, um Ihr pers\u00f6nliches Widget zu erstellen, erhalten Sie den Code und f\u00fcgen Sie ihn in Ihre Website ein. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Die besten Anwendungsbeispiele f\u00fcr die Vorher- und Nachher-Image-Slider-Integration<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Wir gew\u00e4hren Ihnen unz\u00e4hlige Personalisierungsoptionen: Widgets in voller Gr\u00f6\u00dfe zur Implementierung in der Inhaltsbereich, schwebende Plugins mit Scrollfunktion, Miniaturansichten f\u00fcr die Fu\u00dfzeile, den Kopfbereich und alle m\u00f6glichen vertikalen M\u00f6glichkeiten f\u00fcr Seitenleisten und Men\u00fcs. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><div class=\"faq-item\">\r\n\t\t\t\t\t<div class=\"faq-item-question\">\r\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Kann ich mit Hilfe Ihres Editors eine Retusche oder einen einfachen Vergleichsschieberegler erstellen?<\/h3>\r\n\r\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div class=\"faq-item-answer\">\r\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Sie k\u00f6nnen \u00c4nderungen an jedem Widget vornehmen. Im Editor stehen Ihnen zahlreiche Layouts zur Verf\u00fcgung, die Sie alle schnell an Ihre Bed\u00fcrfnisse anpassen k\u00f6nnen. <\/p><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":1269,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-platform.php","meta":{"footnotes":""},"class_list":["post-16864","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsiver Vorher-Nachher-Bild-Slider f\u00fcr HTML-Websites<\/title>\n<meta name=\"description\" content=\"F\u00fcgen Sie das Vorher-Nachher-Slider-Widget in Ihre HTML-Website ein. Probieren Sie die Vergleichs-Slider-Demo von Elfsight aus und erstellen Sie Ihr individuelles Widget in nur 2 Minuten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr HTML-Websites\" \/>\n<meta property=\"og:description\" content=\"F\u00fcgen Sie das Vorher-Nachher-Slider-Widget in Ihre HTML-Website ein. Probieren Sie die Vergleichs-Slider-Demo von Elfsight aus und erstellen Sie Ihr individuelles Widget in nur 2 Minuten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight DE\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T14:05:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr HTML-Websites","description":"F\u00fcgen Sie das Vorher-Nachher-Slider-Widget in Ihre HTML-Website ein. Probieren Sie die Vergleichs-Slider-Demo von Elfsight aus und erstellen Sie Ihr individuelles Widget in nur 2 Minuten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/","og_locale":"de_DE","og_type":"article","og_title":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr HTML-Websites","og_description":"F\u00fcgen Sie das Vorher-Nachher-Slider-Widget in Ihre HTML-Website ein. Probieren Sie die Vergleichs-Slider-Demo von Elfsight aus und erstellen Sie Ihr individuelles Widget in nur 2 Minuten.","og_url":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/","og_site_name":"Elfsight DE","article_modified_time":"2025-02-20T14:05:12+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/","url":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/","name":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr HTML-Websites","isPartOf":{"@id":"https:\/\/elfsight.com\/de\/#website"},"datePublished":"2024-05-03T06:30:20+00:00","dateModified":"2025-02-20T14:05:12+00:00","description":"F\u00fcgen Sie das Vorher-Nachher-Slider-Widget in Ihre HTML-Website ein. Probieren Sie die Vergleichs-Slider-Demo von Elfsight aus und erstellen Sie Ihr individuelles Widget in nur 2 Minuten.","breadcrumb":{"@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/de\/"},{"@type":"ListItem","position":2,"name":"Before and After Slider","item":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/"},{"@type":"ListItem","position":3,"name":"Before and After Slider &#8211; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/de\/#website","url":"https:\/\/elfsight.com\/de\/","name":"Elfsight DE","description":"Just another Elfsight Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"504","h1":"Vorher-Nachher-Slider f\u00fcr HTML","h1_caption":"Pr\u00e4sentieren Sie Vergleiche zwischen zwei Bildern, ideal zum Hervorheben von Transformationen oder zum m\u00fchelosen Pr\u00e4sentieren von Produktvorteilen auf Ihrer HTML-Website.","application_category":[],"applications_title":"","applications_request_title":"","applications_request_button_text":"","hero_text":"","hero_video":"","hero_video_schema_markup":"","selling_points_title":"","selling_points_caption":"","selling_points":[],"selling_points_cta_text":"","features_title":"","features":"","ed_cta_examples_text":"","ed_cta_examples_hidden":"","ed_cta_demo_text":"","ed_cta_demo_hidden":"","why_caption":"","why_editor_title":"","why_editor_text":"","why_team_title":"","why_team_text":"","why_service_title":"","why_service_text":"","template_catalog_visible":"0","template_catalog_title":"","template_catalog_text":"","template_catalog_categories_visible":"","demo_title":"Erstellen Sie Ihr Vorher-Nachher-Slider-Widget","demo_caption":"Konfigurieren Sie Ihren Vorher-Nachher-Slider und f\u00fcgen Sie ihn kostenlos zu Ihrer HTML-Website hinzu!","default_faq_hidden":"","app_template_category":[],"platform":"260","template_public_id":"","codecanyon_url":"","codecanyon_item_id":"","codecanyon_price":"","pricing_caption":"","pricing_elfsight_apps_hide_column":"","pricing_elfsight_apps_url":"","pricing_codecanyon_price_caption":"","integration_category":[],"integration_request_title":"","integration_request_cta":"","integration_platform":"","integrations":[],"platform_category":[],"video_schema_markup":"","price":"ab 0 $ \/ Monat","trial":"","benefits":[{"text":"Kostenloser Installationsservice"},{"text":"Erfahrener Kundensupport"},{"text":"14-t\u00e4gige Geld-zur\u00fcck-Garantie"},{"text":"Fortlaufende Entwicklung"}],"button_url":"#demo","button_target_blank":"0","button_nofollow":"0","attributes":[{"name":"Installiert","content":"10,000 - 100,000"},{"name":"Reaktionsfreudig","content":"Ja"},{"name":"Kompatible Browser","content":"Firefox, Safari, Opera, Chrome, Edge"}],"tags":[],"tags_disable_links":"0","hide_more_platforms":"0","video_object":"","demo_hide_cta":"0","demo_hide_cloud_options":"0","pricing_title":"","pricing":[{"pricing_icon":"platform","pricing_title":"Elfsight Apps","pricing_title_caption":"Plattform\u00fcbergreifende Software","pricing_price":"ab 0 $ \/ Monat","pricing_price_caption":"Beginnen Sie mit einem kostenlosen Plan","pricing_benefits":[{"text":"Unbegrenzte Domains"},{"text":"Kostenloser und p\u00fcnktlicher Support"},{"text":"Kostenlose Installationshilfe"},{"text":"Tolles Angebot f\u00fcr mehrere Apps"}],"pricing_button_text":"Zur Website hinzuf\u00fcgen","pricing_button_url":"#demo"}],"related_apps_title":"","related_apps_hidden":"0"},"_links":{"self":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/comments?post=16864"}],"version-history":[{"count":3,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16864\/revisions"}],"predecessor-version":[{"id":24590,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16864\/revisions\/24590"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/1269"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/media?parent=16864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}