[dipi_before_after_slider before_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-07.jpg“ after_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-08.jpg“ direction=“vertical“ handle_icon=“arrow“ before_label_bg_color=“#ffffff“ after_label_bg_color=“#ffffff“ overlay_color=“rgba(10,0,0,0.27)“ overlay_visibility=“hide_on_hover“ offset=“70″ slider_color=“#FFFFFF“ slider_width=“1px“ slider_handle_icon_color=“#FFFFFF“ handle_container_bg_blur=“15px“ slider_handle_color=“#FFFFFF“ slider_handle_bg_color=“RGBA(255,255,255,0)“ handle_circle_size=“50px“ handle_circle_border_width=“1px“ handle_icon_size=“8px“ handle_icon_arrow_width=“1px“ handle_icon_gap=“5″ handle_hover_icon_gap=“8″ _builder_version=“4.19.4″ labels_font=“|||on|||||“ labels_text_color=“#15022a“ box_shadow_style=“preset3″ global_colors_info=“{}“ _i=“0″ _address=“0.0.0.0″ theme_builder_area=“post_content“][/dipi_before_after_slider]

Powerful Features

Showcase your work results in a stunning way

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.

N

Add custom labels

N

Use horizontal or vertical slider direction

N

Activate slider on hover or click

N

Add images alt text for SEO

N

Customize slider line and handle

N

Add image overlay

N

Advanced custom CSS fields

Vertical Direction

Choose vertical slider orientation and drag the slider up and down to see two versions of the image.

[dipi_before_after_slider before_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-01.jpg“ after_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-02.jpg“ direction=“vertical“ handle_icon=“arrow“ before_label_bg_color=“#FFFFFF“ after_label_bg_color=“#FFFFFF“ overlay_color=“rgba(0,0,0,0.2)“ slider_width=“2px“ handle_container_bg_blur=“10px“ handle_circle_size=“45px“ handle_circle_border_width=“2px“ handle_icon_arrow_width=“2px“ handle_icon_gap=“4″ handle_hover_icon_gap=“8″ handle_circle_size_tablet=“45px“ handle_circle_size_phone=“35px“ handle_circle_size_last_edited=“on|phone“ handle_hover_icon_gap_tablet=“8″ handle_hover_icon_gap_phone=“6″ handle_hover_icon_gap_last_edited=“on|phone“ _builder_version=“4.19.4″ _module_preset=“default“ labels_font_size_tablet=““ labels_font_size_phone=“11px“ labels_font_size_last_edited=“on|phone“ labels_line_height_tablet=““ labels_line_height_phone=“2em“ labels_line_height_last_edited=“on|phone“ global_colors_info=“{}“ _i=“1″ _address=“1.0.0.1″ theme_builder_area=“post_content“ /]

Horizontal Direction

Choose horizontal slider direction and drag the slider sideways to see two versions of the image.

[dipi_before_after_slider before_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-03.jpg“ after_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-04.jpg“ handle_icon=“arrow“ before_label_bg_color=“#FFFFFF“ after_label_bg_color=“#FFFFFF“ overlay_color=“rgba(10,10,10,0.2)“ slider_color=“#FFFFFF“ slider_width=“2px“ slider_handle_icon_color=“#FFFFFF“ handle_container_bg_blur=“10px“ slider_handle_color=“#FFFFFF“ handle_circle_size=“45px“ handle_circle_border_width=“2px“ handle_icon_arrow_width=“2px“ handle_icon_gap=“4″ handle_hover_icon_gap=“8″ handle_circle_size_tablet=“45px“ handle_circle_size_phone=“35px“ handle_circle_size_last_edited=“on|phone“ _builder_version=“4.19.4″ _module_preset=“default“ labels_font_size_tablet=““ labels_font_size_phone=“11px“ labels_font_size_last_edited=“on|phone“ labels_line_height_tablet=““ labels_line_height_phone=“2.5em“ labels_line_height_last_edited=“on|phone“ custom_css_dss_image_before=“filter: brightness(90%)“ custom_css_dss_image_after=“filter: brightness(90%)“ global_colors_info=“{}“ custom_css_dss_label_before_last_edited=“on|phone“ custom_css_dss_label_before_phone=“top: 80%;“ custom_css_dss_label_after_last_edited=“on|phone“ custom_css_dss_label_after_phone=“top: 80%;“ _i=“1″ _address=“1.0.1.1″ theme_builder_area=“post_content“ /]

Custom Labels

Add your own labels text like shown below. Labels can be always displayed on the overlay or just on mouseover.

[dipi_before_after_slider before_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-image.jpg“ after_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-image.jpg“ handle_icon=“arrow“ before_label=“Black & White“ after_label=“Color Photo“ before_label_bg_color=“#0a0a0a“ after_label_bg_color=“#0a0a0a“ overlay_color=“rgba(0,0,0,0.2)“ overlay_visibility=“hide_on_hover“ slider_color=“#0a0000″ slider_width=“2px“ slider_handle_icon_color=“#FFFFFF“ handle_container_bg_blur=“10px“ slider_handle_color=“#0a0000″ slider_handle_bg_color=“#0a0a0a“ handle_circle_size=“45px“ handle_circle_border_width=“2px“ handle_icon_arrow_width=“2px“ handle_icon_gap=“5″ handle_hover_icon_gap=“8″ handle_circle_size_tablet=“45px“ handle_circle_size_phone=“35px“ handle_circle_size_last_edited=“on|phone“ handle_icon_size_tablet=““ handle_icon_size_phone=“4px“ handle_icon_size_last_edited=“on|phone“ _builder_version=“4.19.4″ _module_preset=“default“ labels_text_color=“#FFFFFF“ labels_font_size_tablet=““ labels_font_size_phone=“11px“ labels_font_size_last_edited=“on|phone“ labels_line_height_tablet=““ labels_line_height_phone=“2em“ labels_line_height_last_edited=“on|phone“ custom_css_dss_image_before=“filter: grayscale(100%);“ global_colors_info=“{}“ custom_css_dss_label_before_last_edited=“on|phone“ custom_css_dss_label_before_phone=“top: 80%;||padding: 5px !important;“ custom_css_dss_label_after_last_edited=“on|phone“ custom_css_dss_label_after_phone=“top: 80%;||padding: 5px !important;“ _i=“1″ _address=“1.1.0.1″ theme_builder_area=“post_content“ /]

Slider Customization

Set slider style, and initial position and customize slider line and handle colors to fit your requirements.

[dipi_before_after_slider before_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-05.jpg“ after_image=“https://eikenroth-werbeagentur.de/wp-content/uploads/bas-05.jpg“ before_label=“Filtered“ after_label=“No Filter“ before_label_bg_color=“#0a0a0a“ after_label_bg_color=“#0a0a0a“ overlay_color=“rgba(10,10,10,0.2)“ overlay_visibility=“hide_on_hover“ offset=“27″ slider_color=“#0a0a0a“ slider_width=“2px“ slider_handle_icon_color=“#0a0a0a“ handle_container_bg_blur=“0px“ handle_use_circle=“off“ handle_icon_size=“12px“ handle_icon_gap=“0″ handle_hover_icon_gap=“8″ _builder_version=“4.19.4″ _module_preset=“default“ labels_text_color=“#FFFFFF“ labels_font_size_tablet=““ labels_font_size_phone=“11px“ labels_font_size_last_edited=“on|phone“ labels_line_height_tablet=““ labels_line_height_phone=“2.2em“ labels_line_height_last_edited=“on|phone“ custom_css_dss_image_before=“filter: hue-rotate(40deg);“ global_colors_info=“{}“ custom_css_dss_label_before_last_edited=“on|phone“ custom_css_dss_label_before_phone=“top: 80%;||padding: 5px;“ custom_css_dss_label_after_last_edited=“on|phone“ custom_css_dss_label_after_phone=“top: 80%;||padding: 5px;“ _i=“1″ _address=“1.1.1.1″ theme_builder_area=“post_content“ /]