Accordion Hover Widget - Advanced Tutorial

Please note that you must have both Adobe Muse and Adobe Photoshop in order to properly complete this tutorial.

Stage 1

First drag the default accordion widget onto your Muse canvas. Clear both styling and content from the widget.

Stage 2

Turn the accordion widget 90 Degrees to the left.

Stage 3

Size both the label and content areas as desired; these measurements will be used later in the tutorial.

Stage 4

Select both the content and label sections and using the Transform Panel, locate and note both the width and the height for the sections.

Stage 5

Open a new Photoshop document, and add in the dimensions you noted from Muse, but swap them. For example, if your height was 149 inside Muse, enter 149 into the width box inside Photoshop. The reason for this is that the accordion widget has been rotated 90 degrees inside Muse. Start by entering your dimensions for the label part of the widget.

Stage 6

Place your image onto the canvas once you have lined it up correctly; size as desired.

Stage 7

Rotate the canvas 90 degrees clockwise and save the image to your hard drive. Avoid using a file name with spaces or special characters.

Stage 8

Go back into Muse and set this as the background image for the label portion of the widget. Make sure the 'Fitting' is set to "Scale to Fit."

Stage 9

Back inside Photoshop, use the selection tool to select the canvas, then hit backspace.

Stage 10

Move the image from right to left making sure not to move the image on the y-axis. Your image should sit tight against the left hand corner.

Stage 11

Next rotate your image 90 degrees clockwise, as shown in Stage 7. Save this image to your hard drive.

Stage 12

Set your second image as the background image for the content portion in the widget. Again, set this to "Scale to Fit." Your images should now be lining up within Muse as shown below.

Stage 13

Ensure that inside the accordion widget Options panel, you have selected 'Can Close All.'

Stage 14

Next drag your Accordion Hover widget onto the canvas. Select the default Muse accordion widget that has your images applied and assign it a new graphic style from the Graphic Styles panel. In this tutorial we have called it 'hover,' but you can call it whatever you want.

Stage 15

Inside the Accordion Hover widget Options panel, in the 'Accordion Panel Graphic Style,' enter the graphic style you just assigned to the accordion widget. In this case: 'hover'

Completed!

Your widget will now be working on preview. You can add more labels to this widget by repeating the steps in this tutorial.