The Before-and-After Gallery widget is designed to deliver an elegant and interactive visual comparison. For the best results, your before-and-after images must be well-calibrated—the same size, background, and lighting.
A consistent image experience helps viewers focus on the transformation. Without calibration, comparisons can appear jumpy or misaligned.
✔️ Use the same dimensions: 980px width × 500px height
✔️ Keep the same environment and lighting
✔️ Maintain consistent camera angle and positioning
✔️ 'Before' = original state
✔️ 'After' = enhanced/transformed version
⚠️ Important: Upload images with the exact same size (980px width × 500px height) or (1920px width × 1080px height ) for a smooth, professional comparison effect.
If your images are mismatched or you don’t have aligned pairs, you can use AI tools to generate perfectly matched image sets with a visual transformation.
🧠 Use This Prompt:
Generate two separate, high-quality digital images with a 16:9 aspect ratio (1920px width × 1080px height).
The first image should be labeled Before and depict a [describe Original State].
The second image should be labeled After and show a clearly improved [describe Enhanced State] version of the exact same scene.
Requirements for both images:
They must be generated as two separate images (not a split or combined before/after scene).
Use the exact same environment, camera angle, lighting, and composition for consistency.
Ensure both images are aligned identically to highlight the transformation clearly.
Maintain a clean, realistic, and high-quality visual style.
📝 Replace [Original State] and [Enhanced State] with your specific content, such as:
Generate two separate high-resolution images (1920x1080 pixels).
Image 1 (Before): A plain, unfurnished modern living room with natural lighting, light beige walls, hardwood flooring, and minimal decor.
Image 2 (After): The same modern living room, now fully furnished and tastefully decorated with a sofa, coffee table, artwork, plants, and cozy lighting.
Both images should maintain the exact same viewpoint, background, and lighting. Do not combine them into a split-screen or side-by-side comparison. Generate them as individually aligned files.
Tool | Feature | Link |
DALL·E by OpenAI | Prompt-based image generation | |
Runway ML | AI editing, inpainting, background match | |
Canva Magic Media | Easy generation with templates |
Use the prompt above to generate images consistent in alignment and composition.
Always preview your site on different screen sizes to ensure a responsive display.
To get in touch with us, click the Support Center button at the bottom of the settings panel.
Please consider Adding a Review for the app where you mention how it has helped you achieve your goals. We prioritize adding features to an app based on how many reviews it's getting. Thank you for your help! ❤️
