Divi Supreme Before After Image Slider Module
The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images.
[dsm_floating_multi_images floating_height=”530px” floating_height_tablet=”610px” floating_height_phone=”418px” floating_height_last_edited=”on|phone” _builder_version=”4.4.2″ background_image=”data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNTYgMTc4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTYgMTc4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0YyRjJGNztlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0OC43LDMwLjhjLTE2LjQtMC42LTMyLTUuOS00Ny0xMS43UzcyLjEsNi45LDU2LDMuOEM0NS43LDEuOCwzNCwxLjYsMjUuNiw3LjFjLTgsNS4zLTEwLjYsMTQuNS0xMiwyMwoJYy0xLDYuNC0xLjcsMTMuMSwxLjIsMTkuMWMyLDQuMiw1LjUsNy43LDgsMTEuNmM4LjUsMTMuOSwyLjUsMzEtNi43LDQ0LjVjLTQuMyw2LjQtOS4zLDEyLjQtMTIuNiwxOS4ycy00LjksMTQuNS0yLDIxLjQKCWMyLjksNi44LDkuOCwxMiwxNy4yLDE1LjZjMTUuMSw3LjQsMzMsOS40LDUwLjQsMTAuNmMzOC41LDIuNiw3Ny4yLDEuNSwxMTUuOCwwLjRjMTQuMy0wLjQsMjguNi0wLjksNDIuNy0zLjEKCWM3LjgtMS4yLDE1LjktMy4yLDIxLjUtNy45YzcuMi02LDktMTYuMSw0LjItMjMuNmMtOC4xLTEyLjUtMzAuNC0xNS43LTM2LjEtMjkuMWMtMy4xLTcuNCwwLjEtMTUuNyw0LjYtMjIuNQoJYzkuNy0xNC43LDI1LjktMjcuNywyNi44LTQ0LjVjMC42LTExLjYtNy4yLTIzLjItMTkuMy0yOC43Yy0xMi43LTUuNy0zMC4yLTUtMzkuNiw0LjVDMTgwLjEsMjcuNSwxNjMuMiwzMS4zLDE0OC43LDMwLjh6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=” background_size=”contain” max_width=”47%” max_width_tablet=”100%” max_width_last_edited=”on|desktop” _i=”0″ _address=”1.0.0.0″ /]
Highly Customizable with many options available!
The Divi Before After Image Slider module is a touch friendly module that comes with all the necessary features to help you show two versions of an image together.
[dsm_before_after_image before_src=”https://thediygallery.com/wp-content/uploads/2021/12/time-lapse-photo-of-water-falls-in-the-forest-3715436-blur.jpg” after_src=”https://thediygallery.com/wp-content/uploads/2021/12/time-lapse-photo-of-water-falls-in-the-forest-3715436.jpg” click_to_move=”on” handle_border_color=”#29e4f2″ handle_background_color=”#ffffff” handle_arrow_color=”#29e4f2″ _builder_version=”4.4.2″ border_radii=”on|6px|6px|6px|6px” box_shadow_style=”preset2″ box_shadow_blur=”20px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.2)” _i=”0″ _address=”2.1.0.0″ /]
[dsm_before_after_image before_src=”https://thediygallery.com/wp-content/uploads/2021/12/after-the-rain-autumn-autumn-leaves-blur-6064552.jpg” after_src=”https://thediygallery.com/wp-content/uploads/2021/12/man-in-black-jacket-standing-beside-woman-in-black-jacket-3960076.jpg” orientation=”vertical” click_to_move=”on” before_label_background_color=”#8300e9″ after_label_background_color=”#8300e9″ overlay_color=”rgba(0,0,0,0)” _builder_version=”4.4.2″ border_radii=”on|6px|6px|6px|6px” box_shadow_style=”preset2″ box_shadow_blur=”20px” box_shadow_spread=”2px” box_shadow_color=”rgba(0,0,0,0.2)” _i=”0″ _address=”2.1.1.0″ /]
Ready to get started?
More Divi features are coming your way
[dsm_button button_one_text=”Download Layout” button_one_url=”https://divisupreme.com/download/233499/” button_two_text=”Join Pro Today” button_two_url=”https://divisupreme.com/pricing/” button_alignment=”center” separator_text=”or” fullwidth_separator_text_on_mobile=”on” button_one_hover_animation=”dsm-push” button_two_hover_animation=”dsm-push” module_class=”dsm-dual-button” _builder_version=”4.4.1″ separator_text_text_color=”#677583″ separator_text_font_size=”16px” custom_button_one=”on” button_one_text_size=”18px” button_one_text_color=”#ffffff” button_one_bg_color=”#30323d” button_one_border_color=”#30323d” button_one_border_radius=”50px” button_one_font=”Montserrat|700|||||||” button_one_use_icon=”off” custom_button_two=”on” button_two_text_size=”18px” button_two_text_color=”#ffffff” button_two_bg_color=”#25db92″ button_two_border_color=”#25db92″ button_two_border_radius=”50px” button_two_font=”Montserrat|700|||||||” button_two_use_icon=”off” button_one_text_size_tablet=”16px” button_one_text_size_phone=”14px” button_one_text_size_last_edited=”on|desktop” button_two_text_size_tablet=”16px” button_two_text_size_phone=”14px” button_two_text_size_last_edited=”on|desktop” box_shadow_style_button_one=”preset3″ box_shadow_color_button_one=”rgba(0,0,0,0.09)” box_shadow_style_button_two=”preset3″ box_shadow_color_button_two=”rgba(0,0,0,0.09)” button_two_border_radius__hover_enabled=”on” button_two_border_radius__hover=”6px” button_two_bg_color__hover_enabled=”on” button_two_bg_color__hover=”#ffffff” button_two_text_color__hover_enabled=”on” button_two_text_color__hover=”#30323d” button_one_text_color__hover_enabled=”on” button_one_text_color__hover=”#30323d” button_one_bg_color__hover_enabled=”on” button_one_bg_color__hover=”#ffffff” button_one_border_radius__hover_enabled=”on” button_one_border_radius__hover=”6px” _i=”0″ _address=”3.0.1.0″ /]