USAGE #
Before and After Slider Module helps to reveal two images at the same place with a slider; this module has some great features like Custom Label Styling, Slider Customization, Color Saturation Slider Smoothing, etc.
ANATOMY #
Before image, after image, and a slider is the only required elements in a Before and After slider module. Other elements, like the label shown here, are optional.
01. BEFORE AFTER IMAGE #
The IMAGES section under the CONTENT tab is the place for uploading before and after images. Users can add before and after image alt text in another input field in that section.
02. SLIDER #
Users can select their desired slide type, vertical or horizontal, in the TYPE SETTINGS under the CONTENT tab. Users can also fix the slider’s starting point, color, shadow, and smooth amount in the SLIDER SETTINGS under the CONTENT tab.
03. LABEL #
Labeling is an optional feature in our module. But the user can use it if he wants. The user needs to enable the Show label by toggling it in LABEL SETTINGS under the CONTENT tab. The user can name the label as he wants. Some features like label showing on hover and label’s position are also available in that section.
When the user needs to style the label, he can do it in BEFORE IMAGE LABEL & AFTER IMAGE LABEL under the DESIGN tab. Here users can change labels’ background color, font, font weight, font style, text color, text size, letter spacing, and more.
OTHER IMPORTANT SETTINGS & FEATURES #
Under the DESIGN tab, there are some important features like BEFORE IMAGE FILTER, SIZING, SPACING, BORDER, BOX SHADOW & ANIMATION. Users can make a before-after slider attractive using those features. BEFORE IMAGE FILTER has several effects like hue, saturation, brightness, contrast, opacity, blur, etc. SIZING, SPACING, BORDER, BOX SHADOW & ANIMATION settings are like all the Divi default modules.
