Before & After

With this element, you can easily display before and after states of an image, making it perfect for showcasing the results of a makeover, renovation, or any other type of transformation.

Before & After

This element is a Nestable Element. You can change “Before” image and “After” image by clicking on the related element in the Structure Panel and selecting the image from the media library. The name of the element for the “Before” image is: Before and for the “After” image is: After.

Element Settings

  • Width - The width of the element. Default: 800px
  • Height - The height of the element. Default: 500px
  • Keep Image Ratio - If enabled, the image will be resized to fit the container while keeping the original image ratio.
  • Drag Layer Color: - The color of the drag layer.
  • Drag Layer SVG - You can upload a custom SVG for the drag layer. The SVG will be resized to fit the container.

Also, there is a button Render. If you click on it, the element will be rendered again. This is useful if you change the size of the element and the drag layer is not in the right position.