Before and after galleries make it easy to show a transformation of your product or service — from how it looked before to how it looks now. Visitors drag a slider across the image to reveal the change, creating an interactive and engaging comparison.
Before & After Slider Overview
Creating a Before & After Slider
- 1Navigate to the page where you want the slider
- 2Click '+Add Element' in the page header bar
- 3Drag the Before & After Slider icon to your preferred location
- 4Upload your 'before' and 'after' images via the settings panel
- 5Add titles, alt text, and descriptions for each image
- 6Click 'Apply' to save your changes
Configuration Options
Gallery title — displays above the gallery. Show Title — toggle title visibility. Width — set to 100% or a limited width. Height — adjusts the image set height. Image titles — positioned in the bottom corner of each image. Alt text — important for accessibility and SEO. Description — optional text describing the transformation.
Getting the Best Result
For the most impactful comparison, take both images from exactly the same perspective and distance. If the original photos do not match perfectly, crop your images until they align as closely as possible. Consistent framing ensures the slider transition feels smooth and professional.
Use matching proportions and distances from the focal point for both images. This ensures a seamless slider experience and helps visitors focus on the actual transformation rather than differences in camera angle.
Was this helpful?
Related Articles
Image Galleries
Showcase images with banner sliders, grid galleries, before/after sliders, and more.
3 min read
Grid Gallery
Display images in symmetrical grid or masonry layouts with popup viewing, tagging, filtering, and drag-and-drop reordering.
5 min read
Adding and Editing Images and Files
Upload images, add background images, insert downloadable files, and convert HEIC photos for your Limecube website.
8 min read
Still need help?
Submit a Support Ticket