{"id":28,"date":"2026-11-03T11:15:02","date_gmt":"2026-11-03T11:15:02","guid":{"rendered":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/"},"modified":"2026-11-05T18:17:15","modified_gmt":"2026-11-05T18:17:15","slug":"before-and-after","status":"publish","type":"page","link":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/","title":{"rendered":"Before and After"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section et_pb_section_parallax section_has_divider et_pb_bottom_divider dpds-info particles-js\" id=\"particles-js\"><span class=\"et-pb-parallax-wrapper\"><span class=\"et-pb-parallax-background et-pb-parallax-background-module--divi-section-0\" style=\"background-image:url(https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/dipi-pattern-color.jpg)\"><\/span><\/span>\n<div class=\"et_pb_row_0 et_pb_row et_block_row rellax\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_image_0 et_pb_image et_pb_module et_block_module\"><span class=\"et_pb_image_wrap\"><img decoding=\"async\" src=\"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/dp-before-after.svg\" class=\"wp-image-6\" title=\"dp-before-after\" \/><\/span><\/div>\n\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module et_pb_text_align_center\"><div class=\"et_pb_text_inner\"><h1>Before &amp; After Slider for Divi<\/h1>\n<\/div><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module et_pb_text_align_center\"><div class=\"et_pb_text_inner\"><p>Showcase your before & after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before & After Slider to display two versions of an image simply by sliding over it.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_blurb_0 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap et_pb_only_image_mode_wrap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/d5-logo.png\" width=\"186\" height=\"186\" srcset=\"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/d5-logo.png 186w, https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/d5-logo-150x150.png 150w\" sizes=\"(max-width: 186px) 100vw, 186px\" class=\"wp-image-7\" \/><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Divi 5 Ready<\/h4><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<div class=\"et_pb_bottom_inside_divider et-no-transition\"><\/div><\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_block_section dpds-info\">\n<div class=\"et_pb_row_1 et_pb_row et_pb_equal_columns et_block_row et_animated\">\n<div class=\"et_pb_column_1 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough dp-vertical-align\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><center><video id=\"video1\" width=\u201e720\" height=\"auto\" autoplay loop  muted  playsinline style=\"max-width:100%\">\n<source type=\"video\/mp4\" src=\"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/before-and-after-slider.mp4\">\n<source  type=\"video\/webm\" src=\"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/before-and-after-slider.mp4\">\n<\/video><\/center><\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_2 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough dp-vertical-align\">\n<div class=\"et_pb_cta_0 et_pb_promo et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_promo_description\"><h2 class=\"et_pb_module_header\">Custom Modules<\/h2><div class=\"et_pb_promo_content\"><p>Increase the level of engagement on your Divi website<\/p>\n<\/div><\/div><\/div>\n\n<div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>This module allows you to add and customize 2 images to achieve a nice Before &amp; After effect. It\u2019s a great way to showcase work results, photo retouching, various services, and more. The slider can be set to a horizontal or vertical orientation, and you can customize its colors and labels.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_2 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_2 et_pb_row et_block_row\">\n<div class=\"et_pb_column_3 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_blurb_1 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">\uf338<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Vertical Direction<\/h4><div class=\"et_pb_blurb_description\"><p>Choose vertical slider orientation and drag the slider up and down to see two versions of the image.<\/p>\n<\/div><\/div><\/div><\/div>\n\n<div class=\"dipi_before_after_slider_0 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-01.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-02.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;50&quot;,&quot;direction&quot;:&quot;vertical&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_4 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_blurb_2 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">\uf337<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Horizontal Direction<\/h4><div class=\"et_pb_blurb_description\"><p>Choose horizontal slider direction and drag the slider sideways to see two versions of the image.<\/p>\n<\/div><\/div><\/div><\/div>\n\n<div class=\"dipi_before_after_slider_1 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-03.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-04.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;50&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_3 et_pb_row et_block_row\">\n<div class=\"et_pb_column_5 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_blurb_3 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">\uf02c<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Custom Labels<\/h4><div class=\"et_pb_blurb_description\"><p>Add your own labels text like shown below. Labels can be always displayed on the overlay or just on mouseover.<\/p>\n<\/div><\/div><\/div><\/div>\n\n<div class=\"dipi_before_after_slider_2 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon hide_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-image.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Black &amp; White&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-image.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;Color Photo&quot;,&quot;offset&quot;:&quot;50&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_6 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_blurb_4 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_top et_pb_module et_flex_module\"><div class=\"et_pb_blurb_content et_flex_module\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">\uf1de<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Slider Customization<\/h4><div class=\"et_pb_blurb_description\"><p>Set slider style, and initial position and customize slider line and handle colors to fit your requirements.<\/p>\n<\/div><\/div><\/div><\/div>\n\n<div class=\"dipi_before_after_slider_3 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  triangle-handle_icon no_circle_handle hide_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-05.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Filtered&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-05.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;No Filter&quot;,&quot;offset&quot;:&quot;27&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_3 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_4 et_pb_row et_block_row\">\n<div class=\"et_pb_column_7 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_cta_1 et_pb_promo et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_promo_description\"><h2 class=\"et_pb_module_header\">Highly Customizable<\/h2><div class=\"et_pb_promo_content\"><p>Activate Slider on Hover or Click<\/p>\n<\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_5 et_pb_row et_block_row\">\n<div class=\"et_pb_column_8 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"dipi_before_after_slider_4 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/teeth-02.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/teeth-01.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;34&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_hover&quot;}\">\n            <\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_4 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_6 et_pb_row et_block_row\">\n<div class=\"et_pb_column_9 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"dipi_before_after_slider_5 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  triangle-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/dp-demo-26.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/dp-demo-25.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;50&quot;,&quot;direction&quot;:&quot;vertical&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_10 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"dipi_before_after_slider_6 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  triangle-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/dp-demo-27.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/dp-demo-28.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;29&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_5 et_pb_section et_section_regular et_block_section\"><span class=\"et_pb_background_pattern\"><\/span>\n<div class=\"et_pb_row_7 et_pb_row et_block_row\">\n<div class=\"et_pb_column_11 et_pb_column et_pb_column_2_5 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><h2>Before & After<\/h2>\n<\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_12 et_pb_column et_pb_column_3_5 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_text_4 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>With the Divi Pixel Before & After Slider, you can easily create a vertical or horizontal slider to compare 2 images in a few simple clicks.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_row_8 et_pb_row et_block_row\">\n<div class=\"et_pb_column_13 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"dipi_before_after_slider_7 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon show_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-06.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before Correction&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-06.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After Correction&quot;,&quot;offset&quot;:&quot;50&quot;,&quot;direction&quot;:&quot;horizontal&quot;,&quot;move_slider&quot;:&quot;on_hover&quot;}\">\n            <\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_6 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_9 et_pb_row et_pb_equal_columns et_block_row\">\n<div class=\"et_pb_column_14 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"dipi_before_after_slider_8 dipi_before_after_slider et_pb_bg_layout_light et_pb_module\"><div class=\"dipi_before_after_slider_container  arrow-handle_icon hide_on_hover-overlay\" data-options=\"{&quot;before_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-07.jpg&quot;,&quot;before_image_alt&quot;:&quot;&quot;,&quot;before_label&quot;:&quot;Before&quot;,&quot;after_image&quot;:&quot;https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/bas-08.jpg&quot;,&quot;after_image_alt&quot;:&quot;&quot;,&quot;after_label&quot;:&quot;After&quot;,&quot;offset&quot;:&quot;70&quot;,&quot;direction&quot;:&quot;vertical&quot;,&quot;move_slider&quot;:&quot;on_click&quot;}\">\n            <\/div><\/div>\n<\/div>\n\n<div class=\"et_pb_column_15 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough dp-vertical-align\">\n<div class=\"et_pb_cta_2 et_pb_promo et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_promo_description\"><h2 class=\"et_pb_module_header\">Powerful Features<\/h2><div class=\"et_pb_promo_content\"><p>Showcase your work results in a stunning way<\/p>\n<\/div><\/div><\/div>\n\n<div class=\"et_pb_text_5 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p>Are you a make-up artist, or maybe a builder or hairdresser? Use the Before & After Slider to display your work in a beautiful and neat way. Add 2 versions of images, and showcase your work results with style.<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_blurb_5 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Add custom labels<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_6 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Use horizontal or vertical slider direction<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_7 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Activate slider on hover or click<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_8 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Add images alt text for SEO<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_9 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Customize slider line and handle<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_10 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Add image overlay<\/h4><\/div><\/div><\/div>\n\n<div class=\"et_pb_blurb_11 et_pb_blurb et_pb_bg_layout_light et_pb_blurb_position_left et_pb_module et_block_module\"><div class=\"et_pb_blurb_content\"><div class=\"et_pb_main_blurb_image et_animated\"><span class=\"et_pb_image_wrap\"><span class=\"et-pb-icon\">N<\/span><\/span><\/div><div class=\"et_pb_blurb_container\"><h4 class=\"et_pb_module_header\">Advanced custom CSS fields<\/h4><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_7 et_pb_section et_section_regular et_block_section dipi-highlightable\"><div class=\"et_pb_row_10 et_pb_row et_block_row dipi_card_featured\"><div class=\"et_pb_column_16 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_6 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><h2>Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with Divi Pixel<\/h2>\n<\/div><\/div><div class=\"dipi_button_grid_0 dipi_button_grid et_pb_module\"><div class=\"dipi-button-grid-container\">\n        <div class=\"dipi_button_grid_child_0 dipi_button_grid_child dipi-pt-item--Text et_pb_module\"><a class=\"et_pb_button dipi-button-grid dipi-button-wrap\" target=\"_blank\" href=\"https:\/\/www.divi-pixel.com\/pricing\" rel=\"noreferrer\">See Pricing<\/a><\/div>\n      <\/div><\/div><div class=\"et_pb_text_7 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module et_pb_text_align_center\"><div class=\"et_pb_text_inner\"><p><span>We offer a 14 Day Money Back Guarantee, so joining is\u00a0<\/span><strong><span class=\"guarantee\" style=\"color: #ff4200;\">Risk-Free!<\/span><\/strong><\/p>\n<\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_section_8 et_pb_section et_section_regular et_block_section dipi-highlighted-overlay\"><\/div>","protected":false},"excerpt":{"rendered":"<p>The Before &amp; After Slider allows you to create unique presentations by comparing functionality.<\/p>\n","protected":false},"author":0,"featured_media":4,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"dipi_cpt_category":[],"class_list":["post-28","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Before &amp; After Slider for Divi Showcase your before &amp; after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before &amp; After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Module Demos -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Before and After - Module Demos\" \/>\n\t\t<meta property=\"og:description\" content=\"Before &amp; After Slider for Divi Showcase your before &amp; after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before &amp; After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-11-03T11:15:02+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-05T18:17:15+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Before and After - Module Demos\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Before &amp; After Slider for Divi Showcase your before &amp; after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before &amp; After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#listItem\",\"name\":\"Before and After\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#listItem\",\"position\":2,\"name\":\"Before and After\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#organization\",\"name\":\"Module Demos\",\"url\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#webpage\",\"url\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/\",\"name\":\"Before and After - Module Demos\",\"description\":\"Before & After Slider for Divi Showcase your before & after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before & After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#breadcrumblist\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/wp-content\\\/uploads\\\/sites\\\/69\\\/2026\\\/11\\\/before-and-after-slider-featured.png\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#mainImage\",\"width\":1200,\"height\":627},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/before-and-after\\\/#mainImage\"},\"datePublished\":\"2026-11-03T11:15:02+00:00\",\"dateModified\":\"2026-11-05T18:17:15+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#website\",\"url\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/\",\"name\":\"Module Demos\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/demo.divi-pixel.com\\\/modules\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Before and After - Module Demos","description":"Before & After Slider for Divi Showcase your before & after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before & After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready","canonical_url":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/demo.divi-pixel.com\/modules\/#listItem","position":1,"name":"Home","item":"https:\/\/demo.divi-pixel.com\/modules\/","nextItem":{"@type":"ListItem","@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#listItem","name":"Before and After"}},{"@type":"ListItem","@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#listItem","position":2,"name":"Before and After","previousItem":{"@type":"ListItem","@id":"https:\/\/demo.divi-pixel.com\/modules\/#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/demo.divi-pixel.com\/modules\/#organization","name":"Module Demos","url":"https:\/\/demo.divi-pixel.com\/modules\/"},{"@type":"WebPage","@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#webpage","url":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/","name":"Before and After - Module Demos","description":"Before & After Slider for Divi Showcase your before & after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before & After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/demo.divi-pixel.com\/modules\/#website"},"breadcrumb":{"@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#breadcrumblist"},"image":{"@type":"ImageObject","url":"https:\/\/demo.divi-pixel.com\/modules\/wp-content\/uploads\/sites\/69\/2026\/11\/before-and-after-slider-featured.png","@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#mainImage","width":1200,"height":627},"primaryImageOfPage":{"@id":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/#mainImage"},"datePublished":"2026-11-03T11:15:02+00:00","dateModified":"2026-11-05T18:17:15+00:00"},{"@type":"WebSite","@id":"https:\/\/demo.divi-pixel.com\/modules\/#website","url":"https:\/\/demo.divi-pixel.com\/modules\/","name":"Module Demos","inLanguage":"en-US","publisher":{"@id":"https:\/\/demo.divi-pixel.com\/modules\/#organization"}}]},"og:locale":"en_US","og:site_name":"Module Demos -","og:type":"article","og:title":"Before and After - Module Demos","og:description":"Before &amp; After Slider for Divi Showcase your before &amp; after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before &amp; After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready","og:url":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/","article:published_time":"2026-11-03T11:15:02+00:00","article:modified_time":"2026-11-05T18:17:15+00:00","twitter:card":"summary_large_image","twitter:title":"Before and After - Module Demos","twitter:description":"Before &amp; After Slider for Divi Showcase your before &amp; after photos in an amazing and interactive way with this easy to use Divi Pixel module. Use the Before &amp; After Slider to display two versions of an image simply by sliding over it. Divi 5 Ready"},"aioseo_meta_data":{"post_id":"28","title":null,"description":null,"keywords":null,"keyphrases":{"focus":[],"additional":[]},"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-11-05 01:42:39","updated":"2026-11-05 23:24:43"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/demo.divi-pixel.com\/modules\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tBefore and After\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/demo.divi-pixel.com\/modules\/"},{"label":"Before and After","link":"https:\/\/demo.divi-pixel.com\/modules\/before-and-after\/"}],"_links":{"self":[{"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":2,"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":134,"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/pages\/28\/revisions\/134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/media\/4"}],"wp:attachment":[{"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"dipi_cpt_category","embeddable":true,"href":"https:\/\/demo.divi-pixel.com\/modules\/wp-json\/wp\/v2\/dipi_cpt_category?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}