The Before and After widget adds interactivity to your Muse website with a slider that lets your visitors visually compare two versions of an image. This is especially great for creatives who want to be able to show off their photo editing or illustration skills. You can also use the widget to display a product in two different colours, or even a before and after shot demonstrating your cleaning or repair services!
The widget is fully responsive and touch-enabled, so it’s perfect for the latest versions of Adobe Muse!
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Start by dragging the Before and After widget onto the design canvas from the Library panel. The default frame is empty as we have not yet defined the images.
The first setting is to load up the images for the widget*. Click the Add File button to choose the Before image. We're using the supplied demo images here. The before image in this example is BMW-M6-Blue.jpg.
Repeat this for the After image using the BMW-M6-Red.jpg file. The widget should now look the same as shown here.
*Note: unlike native image frames in Muse, the images in the widget are not auto-optimised, so make sure you are mindful of the image size when publishing the site.
By default the widget will display a semi-transparent overlay with Before and After labels when the mouse hovers over the image. In this example we'll disable it.
The widget can display the before and after images in one of two orientations: Left to Right (the default) or Top to Bottom. We'll stick with the using the default here as it works better for landscape images.
►Set the slider offset
The final setting is the Slider Offset, which determines how much of the before image is visible at the start. By default this is 50%. As we want to show the whole before image when the page loads we'll set the value to 100%. This moves the slider bar to the far right.
Lastly, we'll adjust the image to the size we require. This can be done at the start, of course but sometimes it's easier to do at the end when everything has been set up.
Now we can preview the widget, either within Muse or in the browser. Make sure everything is working correctly and you're ready to publish!
See the live version of this tutorial image on the demo page.