Before | After Images

In this section, you would be able to upload the Before and After images for your Slider. These are the options available for this section:

1. Enable Lazy Load: Triggers the default WordPress lazy loading functionality. Lazy loading is delaying the loading of images until a user scroll downs the page.
2. Before Image: Upload your Before Image. This is the image that will show inside the Before Image container.
3. Before Image Alt text: Short alternative text HTML attribute describing your Before Image. Good for Search Engine Optimization.
4. Before Label Text: Set the Before label text. This label is displayed inside the Before Image.
5. After Image: Upload your After Image. This is the image that will show inside the After Image container.
6. After Image Alt text: Short alternative text HTML attribute describing your After Image. Good for Search Engine Optimization.
7. After Label Text: Set the After label text. This label is displayed inside the After Image.

Slider Settings

In this section you would be able to customize your Slider Settings:

1. Orientation: Set the orientation of your Before and After image Slider: Vertical or Horizontal.
2. Labels Position (Horizontal): Set the position of the labels inside the Slider when the Orientation has been set to Horizontal.
3. Labels Position (Vertical): Set the position of the labels inside the Slider when the Orientation has been set to Vertical.
4. Default Offset Percentage: How much of the Before Image will be visible when the slider loads. The higher the number the more visible the Before Image will be, resulting in the After Image being less visible.
5. Hide Overlay: This will hide the overlay layer that is displayed when the mouse hovers over the Slider.
6. Move Slider on Hover: This will cause the Slider Divider to move automatically when the mouse enters(hovers) the slider.
7. Move With Handle Only: If this option is enabled the Slider Divider can only be moved using the Handler in the middle of the divider, on the contrary, if this option is disabled, the full Slider Divider can be moved
   left and right or up and down depending on your configuration.
8. Click to Move: If this option is enabled the Slider Divider will automatically move the position where the mouse clicked inside the Slider.

All the elements of the Before and After Image Slider module used the default Divi Builder options to change their appearance. Here is a list of what sections of the Before and After Image Slider can be stylized.

Before Label • After Label

1. Divi Builder Default: Stylize each Label respectively using the default Background, Border Styles, Box Shadow, and the Text and Font style options provided by the Visual Builder.

Handle

1. Left|Up Arrow Color: Set the color for the Left or Up Arrow in Handle depending on the Slider Orientation previously selected.
2. Right|Down Arrow Color: Set the color for the Right or Down Arrow in Handle depending on the Slider Orientation previously selected
3. Handle Border Width: Set the border width of the Handle.
4. Handle Border Radius: Set the border radius of the Handle.
5. Handle Width: Set the width of the Handle.
6. Handle Height: Set the height of the Handle.
7. Handle Background Color: Set the background color of the Handle.
8. Divider Color: Set the color of the Divider.
9. Divider Width: Set the width of the Divider.
10. Divider Shadow Color: Set the shadow color of the Divider.
11. Divider Shadow Blur Amount: How blurry the shadow should be.

Other Options

1. Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.