The Image Before & After Element is a new visual element to highlight the before and after state of something using two images.
Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the before and after image.
Step 3 – Click on the + Element button at the bottom of the column. Select Image Before & After.
Step 4 – Now you have the options window open. The first step is to choose your Effect type. View the More Examples link at the top of the page to see the various effects. Once you have chosen your effect type, you need to choose your Before and After images and their labels if desired. There are then a number of options to do with the label, border and borders size options, image fade transition speed, plus a whole list of options to control how the handle looks and is placed.
Step 5 – There is also an animation tab if you wish to influence how the element loads on the page.
Step 6 – Once you have configured your options, click Save.
Step 8 – If you preview your page, you will see the result of the Image Before & After Element as you have styled it. You can always return to edit the element.