The Before/After Slider is a powerful visual tool in Ion Interactive, perfect for showcasing transformations or comparisons. Follow these steps to add and customize it easily:
- Go to the Elements palette > Interactive section, and find the Before/After Slider.
- Drag the slider element onto your creative page. It will appear with placeholder images.
- With the element active, go to the Settings menu > Variables. Under “Before” and “After”, select your images. Make sure they have the same dimensions for the best results.
- It is possible to include images (.png, .jpg, .jpeg, .svg, .webp) or even animated .gif files to make your slider more dynamic.
- Additional Customization:
- Tagging: Add a tag to track engagement.
- Slider Direction: Choose horizontal or vertical movement.
- Slider Color: Select a color for the lever that provides an ideal contrast for your design.
- Labels: Display “Before” and “After” labels if required.
- Responsive Design: Enable this option to ensure the slider adapts to different screen sizes.
Pro tip:
If you wish for the lever of the slider element to sit in a different position than centrally on the image upon page load, you can customize its position with a bit of custom CSS.
