--- title: Image Comparison Widget Settings description: "Some things are easier to show than tell: a retouched photo, a room after a remodel, a design before and after a cleanup. The free [Image Comparison widget](https://master-addons.com/element/image-comparison/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) stacks two images and drops a draggable…" url: "https://master-addons.com/docs/addons/image-comparison-element/" updated: "2026-09-15" category: Addons --- # Image Comparison Widget Settings Some things are easier to show than tell: a retouched photo, a room after a remodel, a design before and after a cleanup. The free [Image Comparison widget](https://master-addons.com/element/image-comparison/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) stacks two images and drops a draggable handle between them, so visitors slide to reveal the difference themselves. You load a before image and an after image, add labels, pick a vertical or horizontal split, then style the handle and labels to match your site. This guide covers every setting in the widget. ![Elementor image comparison slider built with the Master Addons widget, a calm sea on the left and a train interior on the right split by a round handle](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112444/image-comparison-08-frontend-result.webp) ## What the Image Comparison widget does The widget shows two images in the same frame, one on top of the other, with a slider handle down the middle. Drag the handle and it wipes between the before and after image. You can label each side, flip the split from left-right to top-bottom, and decide whether the handle follows a drag (free) or, with Master Addons Pro, a click or mouse movement. There are two tabs to work with. **Content** holds the two images, the labels, and the slider behavior. **Style** controls the layout, the overlay labels, and the handle. The usual Elementor Advanced options sit alongside them. ## Before you start - **WordPress** with **Elementor** installed and active. - **Master Addons for Elementor** installed and active. New to the plugin? See the [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/). - Two images that line up, same size and framing, so the slide reads as one scene. ## How to add the Image Comparison widget In the Elementor editor, open the **Elements** panel and search for **Image Comparison**, or scroll to the Master Addons section (the widgets carry a purple MA badge). Drag it onto your page and it loads with two sample images and a slider you can start editing right away. ![Image Comparison widget in the Elementor Elements panel being dragged onto the page](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112405/image-comparison-01-image-comparison-widget.webp) ## Load the two images Open the **Content** tab. The **Images** section has a **Before** and an **After** tab, and each one sets its own image, label, and resolution. ![Image Comparison Images section with Before and After tabs, a Choose an Image box, a Label field, and Image Resolution](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112411/image-comparison-02-images.webp) - **Before / After tabs:** switch between the two sides to set each image. - **Choose an Image:** pick the picture for that side from the media library. - **Label:** a short caption for the side, like Before Work or Final Results. - **Image Resolution:** the size served, like Full or Large. ## Pick each image from the library Click **Choose an Image** and the WordPress media library opens. Set the before image on the Before tab, then switch to the After tab and pick the second one. Easy thing to forget: the tab you are on decides which side you are changing, so check it before you hit select. ![WordPress media library open with an image selected and the Attachment Details panel on the right](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112416/image-comparison-03-select-image.webp) ## Set the labels Type a **Label** on each tab and the widget prints it as an overlay on that side of the image. The before label sits on one side, the after label on the other, so visitors know which is which without you spelling it out. ![Image Comparison with the After tab set to Final Results, showing Before Work and Final Results labels over the two images on the canvas](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112422/image-comparison-04-labels.webp) ## Adjust the slider settings Open the **Settings** section for how the slider behaves. This is where you set the starting position, the direction of the split, and what moves the handle. ![Image Comparison Settings section with Visible Ratio, Orientation toggle, Overlay Show, and a Move Handle dropdown set to Mouse Drag or Swipe](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112427/image-comparison-05-settings.webp) - **Visible Ratio (%):** where the handle starts, so you can open on the before or after side. - **Overlay:** show or hide the before and after labels. - **Move Handle:** Mouse Drag/Swipe is free. Mouse Move and Mouse Click need Master Addons Pro. ## Switch the orientation The **Orientation** toggle switches between Horizontal and Vertical. Horizontal, the default, gives a left-right wipe. Vertical stacks the before image on top and the after below, with an up-down handle, which usually reads better for tall photos. ![Image Comparison in horizontal orientation with the before image on top, the after image below, and an up and down handle in the middle](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112433/image-comparison-06-orientation.webp) ## Style the layout, handle, and labels Open the **Style** tab. There are sections for **Layout Style**, **Overlay**, **Handle**, and **Label**, so the slider matches your design instead of the default look. ![Image Comparison Style tab with the Label section open, showing Before and After tabs and a color picker for the label text](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01112438/image-comparison-07-style.webp) - **Layout Style:** border, padding, and margin around the whole slider. Border Radius and Box Shadow are Pro options. - **Handle:** the color, size, and style of the drag control. - **Label:** per-side color, typography, background, border, and spacing for the captions. ## Common use cases - **Photo editing** showing a raw shot next to the retouched version. - **Home and renovation** before and after a remodel or clean-up. - **Design and dev** old layout versus redesign. - **Health and fitness** progress shots side by side. - **Products** a plain item next to the finished or styled result. ## Tips for working with the Image Comparison widget - **Match the two images.** Same size, angle, and crop so the slide reads as one scene, not two photos jammed together. - **Set the starting ratio.** Open partway with Visible Ratio so visitors can tell there is something to drag. - **Keep labels short.** Before and After, or two words, sit cleaner over the image than a full sentence. - **Pick the right trigger.** Drag works on desktop and touch screens. The Pro Mouse Move option feels quick but does nothing on phones, which have no hover. - **Use Vertical for tall shots.** A top-bottom split works better for portrait images than a narrow left-right wipe. ## Watch the video tutorial Prefer to follow along on screen? The video tutorial below walks through the Image Comparison element from start to finish, showing how the images, labels, slider settings, and styling work in the Elementor editor. [How To Add Image Comparison in Elementor Page Editor?](https://www.youtube.com/embed/3nqRRXSGk3M?feature=oembed) ## Frequently Asked Questions What is the Image Comparison widget in Master Addons? It is an Elementor widget that stacks a before and an after image with a draggable handle between them. Visitors slide the handle to wipe from one image to the other, with optional labels on each side, all set from the Elementor panel with no code. How do I add before and after labels? Open the Images section and type a Label on the Before tab and the After tab. Each label prints as an overlay on its side of the image. You can show or hide them with the Overlay toggle in Settings and style them in the Label section of the Style tab. Can I make the slider vertical or horizontal? Yes. The Settings section has an Orientation toggle. The default is Horizontal, a left-right split; switch to Vertical and the images stack top and bottom with an up-down handle. Vertical works well for portrait images or tall screenshots. How do visitors move the comparison slider? The Move Handle dropdown in Settings sets the trigger. Mouse Drag/Swipe is free and works on desktop and touch screens. Mouse Move and Mouse Click are Master Addons Pro options. Do I need images of the same size? For the best result, yes. The two images sit in the same frame, so matching size, angle, and crop makes the slide read as one scene. If the images differ, set a fixed Image Resolution so both are served at the same dimensions. ## Wrapping up The Image Comparison widget turns two images into an interactive before and after: load the two pictures, add labels, set the orientation and handle, then style the slider to match. For related widgets, see the [Image Hotspot widget](https://master-addons.com/element/image-hotspot/) and the [Image Hover Effects widget](https://master-addons.com/element/image-hover-effects/), browse the full [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/), and see the [Image Comparison widget page](https://master-addons.com/element/image-comparison/) or the [before and after slider guide](https://master-addons.com/elementor-image-comparison-slider-for-before-after-showcase/) for examples.