{"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\">The before-and-after element is perfect for illustrating changes or development processes. It offers an intuitive way to visually highlight differences. Use the lenticular slider when you want to illustrate changes or development processes, such as improvements made by a product or a process. The lenticular slider is perfect for visual comparisons where the difference needs to be clearly visible. You can add more than just one before-and-after image and operate them as a slider. Check out the step-by-step guide to learn more about the element.<\/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>Add before-after element<\/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\">Drag the element into a module.<\/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=\"Add before-and-after\" 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>Set resolution direction<\/h2><p>Check out the slider to see what resolutions are available.<\/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>Horizontal<\/h2><p>The resolution takes place horizontally from left to right.<\/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>Vertical<\/h2><p>The resolution takes place vertically from top to bottom.<\/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>Step 2 \u2013 Choose cursor start position<\/h2><p>Check out the slider to see what starting positions are available.<\/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>The solution starts on the left, and learners are expected to move the cursor from the left.<\/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>Centered<\/h2><p>The resolution starts in the middle, and learners move the cursor from the center to discover the image.<\/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>Right<\/h2><p>The solution starts on the right and learners are supposed to move the cursor from the right.<\/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>Step 3 \u2013 Manage slides<\/h2><p>Check out the hotspots to see the available options for managing the slides.<\/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\">Add slide<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Click Add Slide to add an additional slide if needed.<\/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\">Change the order of the slides by clicking and dragging the move icon.<\/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\">Delete slides<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Delete slides by clicking the trash can icon.<\/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>Step 4 \u2013 Slider Button<\/h2><p>Check out the slider and see how the before-and-after element changes with more than just one slide<\/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>Single slide<\/h2><p>The element's view shows the default view of the before-after slider.<\/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>More than two slides<\/h2><p>The element's view changes from an image to an operable slider with a slide indicator.<\/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-09","word_count":323,"total_views":"3","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}]}}