Before After Image Tutorial
Essential Classy Tab from Dashboad -> Widgets then enable Before After Image
![](https://ecaddons.com/wp-content/uploads/2024/04/before-after-wp-panel-1024x319.png)
Now Drag and Drop Before After Image widget
![](https://ecaddons.com/wp-content/uploads/2024/04/before-after-e-panel.png)
Image : Before After Image
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-imageselection.png)
Dots Type : Text/Icon/Image
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-dotstype.png)
Set Default Position of Dots
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-defaultposition.png)
Style Tab
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-styletab.png)
Before Image Style Tab
In this tab, You can manage Filter CSS on Before Image.
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-beforeimage-style.png)
Dots Style – Text
In this tab, You can manage Padding, Typography, Color, Background, Border, Shadow and Text Shadow.
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-dotsstyle.png)
Dots Style – Icon
In this tab, You can manage Padding, Size, Color, Background, Border and Shadow.
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-dotsiconstyle.png)
Dots Style – Image
In this tab, You can manage Padding, Max. Width of Image, Background, Border and Shadow.
![](https://ecaddons.com/wp-content/uploads/2024/04/baidots-image-style.png)
Dots Style – Image Styling
In this tab, You can manage Border and It’s Shadow.
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-image-style.png)
Line Style
In this tab, You can manage Size and Color of Line.
![](https://ecaddons.com/wp-content/uploads/2024/04/bai-line-style.png)