The “AI Before After Image” addon also provides functionality to allow users to swipe or drag the divider between the before and after images. This interactive feature enhances the user experience by enabling them to visually compare the images by simply swiping their finger or cursor across the screen. Users can easily configure this swipe functionality within the addon settings. This provides a dynamic and engaging way to showcase the transformation or difference between the two images.
How to set up the AI Before After Image?
Step 1: Search and find Before After Image in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.
Step 2: This is how the element will look after inserting the AI Before After Image.
How to set up content for AI Before After Image?
Under the content tab, you can configure the AI Before After Image.
Select the image that needs to be compared, upload it from Media Library or a URL for both Before and After, and set the image size in the Image Size dropdown.
Options:
Orientation – Select a good comparison style, such as vertically or horizontally
Default Offset – Set the divider position value.
Hover Slide Move – Enable the toggle to set the hover slide movement.
Allow a user to swipe – Enable the toggle to provide the functionality to allow users to swipe or drag the divider between the before and after images.
Anywhere Move – Enable the toggle for movement anywhere on the image
Overlay – Enable the toggle to set Overlay for the image and you can add the text for before and after individually.
How to add Styles to Before and After Image?
You can set Padding and Margin for the Image Box.
Final Outcome,
