How to Add a Before and After Slider to a Webflow Site

Step by step

Embed the Before and After Slider in your Webflow site.

Create the widget in Fugte

Start from the Before and After Slider starter, generate a variation with the built-in AI, or paste your own code.

Customize and publish it in Fugte

Text, colors, images, numbers, and options are no-code settings, so you can match your branding without touching code. Publishing gives the Before and After Slider a stable hosted link and an embed snippet.

Drag in an Embed element

In the Webflow Designer, drag an Embed element from the Add panel to where the widget should sit and paste the embed snippet into the code editor.

Publish the site

Save and publish. The Before and After Slider renders live on the published site; later content changes happen in the widget editor, with no republish needed.

Good to know

Webflow specifics worth planning around.

Webflow's custom-code Embed element requires a paid Webflow site plan. On free staging domains, you can link to the hosted widget page instead.

The embed snippet is a few lines, so it uses almost none of the Embed element character limit.

The widget is hosted and sandboxed, so it cannot conflict with Webflow interactions or custom code elsewhere on the page.

Content edits in the widget editor go live immediately, useful when a client wants copy changes but you do not want to republish the Webflow project.

This widget

What the Before and After Slider needs from the embed.

The section above applies to anything you put on a Webflow site. This part is specific to the Before and After Slider.

Each comparison is a 16:9 image with a caption under it, so the height follows the embed width, multiplied by however many pairs the widget holds. Set the frame height on the editor's Iframe tab against the full stack, not against the first pair.

Width is doing more work here than on most widgets. The whole point is detail in two photographs, and a 16:9 frame squeezed into a narrow column takes that detail with it. This is a widget to give the full content width to.

Both photos are served at whatever size you upload them, and every visitor loads both. Resize them to roughly the width they will display at before uploading, or a pair of camera-original files becomes the heaviest thing on the page.

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.

Can I add the Before and After Slider on a free Webflow plan?

The Embed element needs a paid site plan. On free plans you can still add a link or button pointing to the hosted widget page.

Does the Before and After Slider count against Webflow CMS or code limits?

No CMS items are used, and the embed snippet is small. The widget itself is served from an external CDN, not stored in Webflow.

Can a client edit the widget without Designer access?

Yes, that is a common setup. The client edits text, colors, and offers through Fugte's no-code settings; the Webflow layout stays locked.

More guides

Same widget, other platforms.

Related widgets

More media widgets for Webflow.

Try it

Put a Before and After Slider on your Webflow site 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.

Start with this widget Browse all widgets