{"id":288,"date":"2026-04-13T09:56:56","date_gmt":"2026-04-13T09:56:56","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&#038;p=288"},"modified":"2026-06-14T16:05:38","modified_gmt":"2026-06-14T16:05:38","password":"","slug":"vorher-nacher","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/vorher-nacher\/","title":{"rendered":"Before \/ After"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"288\" class=\"elementor elementor-288\">\n\t\t\t\t<div class=\"elementor-element elementor-element-52ce5cdc e-con-full e-flex e-con e-parent\" data-id=\"52ce5cdc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6165038 elementor-widget elementor-widget-video\" data-id=\"6165038\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;vimeo&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"Vimeo video player\" src=\"https:\/\/player.vimeo.com\/video\/1198578529?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78346f05 elementor-widget elementor-widget-text-editor\" data-id=\"78346f05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Application<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><section class=\"elementor-element elementor-element-523ca26 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section\" data-id=\"523ca26\" data-element_type=\"section\"><div class=\"elementor-container elementor-column-gap-default\"><div class=\"elementor-row\"><div class=\"elementor-element elementor-element-d1d95ec elementor-column elementor-col-100 elementor-top-column\" data-id=\"d1d95ec\" data-element_type=\"column\"><div class=\"elementor-column-wrap elementor-element-populated\"><div class=\"elementor-widget-wrap\"><div class=\"elementor-element elementor-element-0b9f4c9 elementor-widget elementor-widget-fp-text\" data-id=\"0b9f4c9\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p class=\"p1\">Das Vorher-Nachher-Element ist perfekt zur Veranschaulichung von Ver\u00e4nderungen oder Entwicklungsprozessen. Es bietet eine intuitive M\u00f6glichkeit, Unterschiede visuell hervorzuheben. Verwende den Lentikular-Slider, wenn du Ver\u00e4nderungen oder Entwicklungsprozesse veranschaulichen m\u00f6chtest, wie zum Beispiel Verbesserungen durch ein Produkt oder einen Prozess. Der Lentikular-Slider ist perfekt f\u00fcr visuelle Vergleiche, bei denen der Unterschied deutlich sichtbar sein soll. Du kannst mehr als nur ein Vorher-Nachher-Bild hinzuf\u00fcgen und diese als einen Slider bedienen. Schau dir die Schritt-f\u00fcr-Schritt-Anleitung an, um mehr \u00fcber das Element zu erfahren.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-180bcb0c elementor-widget elementor-widget-spacer\" data-id=\"180bcb0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5aaa67fe elementor-widget elementor-widget-text-editor\" data-id=\"5aaa67fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Vorher-Nacher-Element hinzuf\u00fcgen<\/h2><div id=\"model-response-message-contentr_a9f677e6d41788df\" class=\"markdown markdown-main-panel stronger enable-updated-hr-color\" dir=\"ltr\" aria-live=\"polite\" aria-busy=\"false\"><p data-path-to-node=\"0\">Ziehe das Element in einem Modul hinein.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15c49060 elementor-widget elementor-widget-image\" data-id=\"15c49060\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Vorhernacher-hinzufuegen.jpg\" title=\"Vorhernacher hinzufu\u0308gen\" alt=\"Vorhernacher hinzufu\u0308gen\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-730846ec elementor-widget elementor-widget-spacer\" data-id=\"730846ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20809f2e elementor-widget elementor-widget-text-editor\" data-id=\"20809f2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Aufl\u00f6sungsrichtung einstellen<\/h2><p>Schau dir den Slider an, um zu sehen, welche Aufl\u00f6sungen es gibt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdbc0d elementor-widget elementor-widget-excelerate-slider\" data-id=\"fdbc0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"excelerate-slider.default\">\n\t\t\t\t\t\t\t<div class=\"excelerate-slider-outer\" id=\"excelerate-slider-outer-fdbc0d\">\n\t\t\t<div class=\"excelerate-slider-left\">\n\t\t\t\t<div class=\"excelerate-slider-texts\" id=\"excelerate-slider-texts-fdbc0d\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Horizonal<\/h2><p>Die Aufl\u00f6sung erfolgt in der Horizontalen von links nach rechts.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Vertikal<\/h2><p>Die Aufl\u00f6sung erfolgt in der Vertikalen von oben nach unten.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"excelerate-slider-arrows\" id=\"excelerate-slider-arrows-fdbc0d\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"excelerate-slider-images\" id=\"excelerate-slider-images-fdbc0d\">\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Horizonal.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Vertical.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff6ab60 elementor-widget elementor-widget-spacer\" data-id=\"ff6ab60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca79493 elementor-widget elementor-widget-text-editor\" data-id=\"ca79493\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Schritt 2 &#8211; Curser Startposition w\u00e4hlen<\/h2><p>Schau dir den Slider an, um zu sehen, welche Startpositionen es gibt.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-144ffb5 elementor-widget elementor-widget-excelerate-slider\" data-id=\"144ffb5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"excelerate-slider.default\">\n\t\t\t\t\t\t\t<div class=\"excelerate-slider-outer\" id=\"excelerate-slider-outer-144ffb5\">\n\t\t\t<div class=\"excelerate-slider-left\">\n\t\t\t\t<div class=\"excelerate-slider-texts\" id=\"excelerate-slider-texts-144ffb5\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Links<\/h2><p>Die Aufl\u00f6sung startet links, und die Lerner sollen den Cursor von links aus verschieben.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Zentriert<\/h2><p>Die Aufl\u00f6sung startet in der Mitte, und die Lerner verschieben den Cursor von der Mitte aus, um das Bild zu entdecken.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Rechts<\/h2><p>Die Aufl\u00f6sung startet rechts und die Lerner sollen den Cursor von rechts aus verschieben.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"excelerate-slider-arrows\" id=\"excelerate-slider-arrows-144ffb5\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"excelerate-slider-images\" id=\"excelerate-slider-images-144ffb5\">\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/1-1.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/2-1.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/3.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8878cba elementor-widget elementor-widget-spacer\" data-id=\"8878cba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3eddbb9 elementor-widget elementor-widget-text-editor\" data-id=\"3eddbb9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Schritt 3 &#8211; Slides verwalten<\/h2><p>Schau dir die Hotspots an, um zu sehen, welche M\u00f6glichkeiten es gibt, die Slides zu verwalten.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af174e0 elementor-widget elementor-widget-hotspots\" data-id=\"af174e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Slides.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 15%; left: 59%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Slide hinzuf\u00fcgen<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Klicke auf Slide hinzuf\u00fcgen, um bei Bedarf einen zus\u00e4tzlichen Slide hinzuzuf\u00fcgen.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 47%; left: 59%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Change order<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Tausche die Reihenfolge der Slides, indem du auf das Verschieben Icon klickst und es ziehst.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 83%; left: 59%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Slides l\u00f6schen<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">L\u00f6sche Slides, indem du auf das Papierkorb Icon klickst.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62e55bf elementor-widget elementor-widget-spacer\" data-id=\"62e55bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-495b10e elementor-widget elementor-widget-text-editor\" data-id=\"495b10e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Schritt 4 &#8211; Slider Schaltfl\u00e4che<\/h2><p>Schau dir den Slider an und sieh, wie sich das Vorher-Nachher-Element bei mehr als nur einem Slide ver\u00e4ndert<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebae355 elementor-widget elementor-widget-excelerate-slider\" data-id=\"ebae355\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"excelerate-slider.default\">\n\t\t\t\t\t\t\t<div class=\"excelerate-slider-outer\" id=\"excelerate-slider-outer-ebae355\">\n\t\t\t<div class=\"excelerate-slider-left\">\n\t\t\t\t<div class=\"excelerate-slider-texts\" id=\"excelerate-slider-texts-ebae355\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Einzelner Slide<\/h2><p>Die Ansicht des Elements zeigt die Standardansicht des Vorher-Nachher-Sliders.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-text\">\n\t\t\t\t\t\t<h2>Mehr als zwei Slides<\/h2><p>Die Ansicht des Elements wechselt von einem Bild zu einem bedienbaren Slider mit einem Slide Indikator.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"excelerate-slider-arrows\" id=\"excelerate-slider-arrows-ebae355\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"excelerate-slider-images\" id=\"excelerate-slider-images-ebae355\">\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/1-2.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"excelerate-slider-slide-image\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/2-2.jpg\" alt=\"\" \/>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3002551b elementor-widget elementor-widget-spacer\" data-id=\"3002551b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>https:\/\/vimeo.com\/1198578529 Anwendung Das Vorher-Nachher-Element ist perfekt zur Veranschaulichung von Ver\u00e4nderungen oder Entwicklungsprozessen. Es bietet eine intuitive M\u00f6glichkeit, Unterschiede visuell hervorzuheben. Verwende den Lentikular-Slider, wenn du Ver\u00e4nderungen oder Entwicklungsprozesse veranschaulichen m\u00f6chtest, wie zum Beispiel Verbesserungen durch ein Produkt oder einen Prozess. Der Lentikular-Slider ist perfekt f\u00fcr visuelle Vergleiche, bei denen der Unterschied deutlich sichtbar sein soll. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[11],"doc_tag":[],"class_list":["post-288","docs","type-docs","status-publish","hentry","doc_category-inhaltselemente"],"year_month":"2026-08","word_count":323,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Creator - Inhalt - Elemente","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/inhaltselemente\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":48,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/288\/revisions"}],"predecessor-version":[{"id":3908,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/288\/revisions\/3908"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=288"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=288"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}