Open the slider in Fugte
In Fugte, open Starters, search for before, and choose Use on the Before/After Slider. It opens in the editor as your own copy.
Canva's website builder has no drag-to-compare element of its own, and a before and after made from a Canva template is a flat image: both photos side by side, and nothing moves. The draggable version comes from an embed. Canva websites show embeds that sit in the page, and a slider is exactly that, so it works. Floating buttons, sticky bars, and popups do not work on a Canva site, so do not take this one as proof that every widget will.
The photos are the part that changes. A landscaper finishes a job every fortnight, a cleaner every day, a clinic adds a case every week. With a template, each new pair means opening the design, swapping the photos, downloading the image again, and replacing it on every page it sits on. With the embedded slider, you replace the two photos in Fugte and publish again, and within about a minute every Canva page carrying it shows the new pair.
What makes a slider read well happens before upload. Both photos fill the same 16:9 frame and are cropped to fit, so shoot the after from where you shot the before, at the same distance. Shrink very large photos first, and give the slider room: it is built to run up to about 920 pixels wide, so a full-width section reads better than a narrow column.
Why Fugte
A template image, and a slider on the site.
Templates make a picture
Canva's before and after templates are for posts, slides, and flyers. Downloaded, they are a JPG or PNG with both photos side by side, which is the right thing for Instagram.
A picture on a website is frozen
Placed on a Canva website, the image shows both photos at once and cannot be dragged. Each new job means a new image, downloaded again and replaced on every page.
The slider is edited, not re-exported
Visitors drag the handle, click a spot, or use the arrow keys. Replace the photos in Fugte and publish again, and every page carrying the slider shows the new pair.
Step by step
Embed the Before and After Slider in your Canva website.
Add your photos
Each comparison is a block with a before photo, an after photo, alt text for each, a title, and a caption, up to six per widget. Set the Before and After labels, and where the divider starts, anywhere from 10 to 90.
Match it to your Canva site
Set the background, card, text, and accent colors, the corner rounding, the shadow, and the heading and body fonts. The accent paints the divider and its handle.
Publish and copy the link
Publish the widget and copy its link from the publish panel. Canva takes the link. It does not accept HTML embed code on any plan.
Add an Embed in Canva
In your Canva website design, open Apps in the left sidebar, search for Embed, and open it. Paste the link into Web link and choose Add to design.
Give it the width of the section
Drag the box across the full width of a section rather than into a narrow column, and tall enough for the title and caption under the photos. Publish the Canva site, then drag the handle on a computer and on a phone.
Swap the photos for the next job
Replace both photos in Fugte, update the title and caption, and publish again. Within about a minute every Canva page carrying the slider shows the new pair. Nothing changes in Canva.
Good to know
Canva specifics worth planning around.
Canva renders only static, in-page embeds: floating buttons, sticky bars, and popups will not work on Canva sites.
There is no site-wide option: a widget you want on several pages must be embedded on each page individually.
The Embed element is available on free Canva accounts.
The link stays stable, so later edits made in the widget editor appear on the Canva page automatically, no need to reopen the design.
Why Canva takes a link and not code, and what to do when an embed is blank or cut off: How to Add HTML to Canva.
This widget
What the Before and After Slider needs from the embed.
The section above applies to anything you put on a Canva website. This part is specific to the Before and After Slider.
Ideas
Where the Before and After Slider fits.
Renovation and landscaping
A slider visitors drag to compare two photos, on your website or your Canva page.
Cleaning and detailing
A slider visitors drag to compare two photos, on your website or your Canva page.
Retouching and restoration
A slider visitors drag to compare two photos, on your website or your Canva page.
FAQ
Common questions.
Does Canva have a before and after slider?
Not for websites. Canva's before and after templates make a still image with both photos side by side. A slider that visitors drag comes from an embed, which Canva's Embed element takes as a link.
Can I put a before and after slider on a Canva website?
Yes. Build the slider in Fugte, publish it, and paste its link into an Embed element in Canva. A slider sits in the page, which is the kind of embed Canva websites show, so it works the same there as anywhere else.
How do I change the photos later?
Replace them in Fugte and publish again. Within about a minute every Canva page carrying the slider shows the new pair, with nothing to download, re-upload, or republish in Canva.
Does the slider work on phones?
Yes. Visitors drag the handle with a finger, and the photos keep their 16:9 frame at any width. On a phone the photos are smaller, so a pair where the change is obvious at a glance works best.
How many comparisons can one slider hold?
Up to six pairs, stacked down the page, each with its own title and caption. There is no carousel and no three-way comparison: each slider compares two photos.
Can I change the Before and After labels?
Yes. Both labels are settings shared by every pair in the widget, so "Before" and "After" can become "Week 1" and "Week 12", or "Old roof" and "New roof".
Can I make the slider move up and down instead?
No. The divider moves left and right only. For a tall subject, crop both photos to the same landscape frame before you upload them.
Can I paste HTML or iframe code into Canva instead?
No. Canva websites do not support raw HTML, JavaScript, or iframe embeds on any plan. Hosting the widget elsewhere and embedding it by link is the supported route.
Will the Before and After Slider stay interactive after the Canva site is published?
Yes. The Before and After Slider loads live on the published site, on desktop and mobile, and visitors can interact with it without any account.
Does this need a paid Canva plan?
No. Canva's Embed element works on free accounts, and Fugte has a free plan, so you can test the full workflow at no cost.
More guides
Same widget, other platforms.
Add a Before and After Slider to a Notion page
Add a Before and After Slider to any Notion page or Notion Site with the /embed block. Hosted, interactive, works on free Notion plans, no code.
Add a Before and After Slider to a Shopify store
Add a Before and After Slider to your Shopify store without installing an app or editing theme code: paste one hosted embed into a Custom Liquid section or page.
Add a Before and After Slider to a WordPress site
Add a Before and After Slider to WordPress with a Custom HTML block, no plugin required. Works with the block editor, classic editor, and page builders like Elementor.
Add a Before and After Slider to a Webflow site
Add a Before and After Slider to a Webflow site with the Embed element: one hosted snippet, editable later without republishing the site.
Related widgets
More media widgets for Canva.
Add a Categorized Image Gallery to a Canva website
Categorized image gallery with modal preview and fast filtering.
Add a Hover To Reveal to a Canva website
Create a hover section that reveals what's behind it.
Add an Image marquee to a Canva website
Show trusted client and partner logos in a seamless, infinite horizontal scrolling track.
Try it
Put a Before and After Slider on your Canva website today.
Start free, customize the Before and After Slider without code, and embed it with one link. Free widgets show a small Fugte badge, which you can remove from this one for $9.99 once when you publish, with no subscription.