How to create before and after sliders on your website

After reading this article, you’ll be able to easily create before and after image sliders on your own website.

Never before has it been easier to display the differences between two or three images. The Image Before After element provides you a simple and effective way to show them in the same frame. Site visitors can manually move the slider to compare among images at once. 

Adding the Image Before After element

  • Step 1: Access the Library, by clicking on the Library button on the toolbar of the editor page.

  • Step 2: Select the Elements tab on the box and then enter “Image Before After” into the Search box on the top to find it out. It should be in the Third-party item.


  • Step 3: Select the element and click Add element at the bottom of the appearing pop-up. It will be added to the left sidebar. 

  • Step 4: Wait for the app to be configured (usually a few seconds). On your left, simply drag and drop the Image Before After element into your current page.