---
title: Before and After Widget
description: The Before & After widget enables you to show two images, side by side, for an eye-catching and engaging visual comparison.
---

[Skip to content](https://support.tributetech.com/frontrunner/before-and-after-widget#main-content)

English

Show submenu for translations

[Register For The Customer Support Portal](https://support.tributetech.com/portal?hsLang=en)

![](https://support.tributetech.com/hs-fs/hubfs/Tribute%20Tech%20Logo.webp?width=277&height=80&name=Tribute%20Tech%20Logo.webp)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations
- [Register For The Customer Support Portal](https://support.tributetech.com/portal)
- [Contact us](https://share.hsforms.com/1iDvar3xJSF2g-vDGycwdFAtkn7c)

[Contact us](https://share.hsforms.com/1iDvar3xJSF2g-vDGycwdFAtkn7c)

 How can we help?

- There are no suggestions because the search field is empty.

1. [Frontrunner](https://support.tributetech.com/frontrunner?hsLang=en)
2. [Website Editor (Duda)](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en)
3. [List of Widgets](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en#list-of-widgets)

# Before and After Widget

## The Before & After widget enables you to show two images, side by side, for an eye-catching and engaging visual comparison.

#### **Adding The Widget To A Page**

1. Drag and drop the Before & After widget anywhere on your page.
2. Using the content editor, add before and after images, labels and alt text.
3. Using the design editor, set the size of the images, slider color, label design and spacing. Regarding label design, you can control the label color, position and when it displays (always or on hover/click).

![](https://support.tributetech.com/hs-fs/hubfs/image-png-Aug-20-2025-07-33-27-7932-PM.png?width=602&height=457&name=image-png-Aug-20-2025-07-33-27-7932-PM.png)

- [Dashboard](https://support.tributetech.com/frontrunner/dashboard?hsLang=en)
- [Records](https://support.tributetech.com/frontrunner/records?hsLang=en#main-content)

    - [Management Records](https://support.tributetech.com/frontrunner/records?hsLang=en#management-records)
- [Book of Memories](https://support.tributetech.com/frontrunner/book-of-memories?hsLang=en)
- [Website Editor (Duda)](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en#main-content)

    - [List of Widgets](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en#list-of-widgets)
    - [Editing Features](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en#editing-features)
    - [Editor Overview](https://support.tributetech.com/frontrunner/website-editor-duda?hsLang=en#editor-overview)
- [Website Tab (Wireframe)](https://support.tributetech.com/frontrunner/website-tab-wireframe?hsLang=en#main-content)

    - [Website Modules](https://support.tributetech.com/frontrunner/website-tab-wireframe?hsLang=en#website-modules)
- [Stationery Printing](https://support.tributetech.com/frontrunner/stationery-printing?hsLang=en)
- [Memorial FX Videos](https://support.tributetech.com/frontrunner/memorial-fx-videos?hsLang=en)
- [Arranging Director](https://support.tributetech.com/frontrunner/arranging-director?hsLang=en)
- [Marketing Center](https://support.tributetech.com/frontrunner/marketing-center?hsLang=en)
- [System Features](https://support.tributetech.com/frontrunner/system-features?hsLang=en)
- [Partner Integrations](https://support.tributetech.com/frontrunner/partner-integrations?hsLang=en)
- [General Settings](https://support.tributetech.com/frontrunner/general-settings?hsLang=en)
- [Management System Settings](https://support.tributetech.com/frontrunner/management-system-settings?hsLang=en)
- [FAQ](https://support.tributetech.com/frontrunner/faq?hsLang=en)

[![](https://support.tributetech.com/hs-fs/hubfs/Tribute%20Tech%20Logo.webp?width=277&height=80&name=Tribute%20Tech%20Logo.webp)](https://www.tributetech.com/)

<https://www.facebook.com/TributeTechnology> <https://www.instagram.com/tributetechnology/> <https://www.linkedin.com/company/tributetechnology/>

Copyright © 2026, Tribute Technology