Accordion Hover Widget - Advanced Tutorial
Please note that you must have both Adobe Muse and Adobe Photoshop in order to properly complete this tutorial.
First drag the default accordion widget onto your Muse canvas. Clear both styling and content from the widget.
Turn the accordion widget 90 Degrees to the left.
Size both the label and content areas as desired; these measurements will be used later in the tutorial.
Select both the content and label sections and using the Transform Panel, locate and note both the width and the height for the sections.
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.
Place your image onto the canvas once you have lined it up correctly; size as desired.
Rotate the canvas 90 degrees clockwise and save the image to your hard drive. Avoid using a file name with spaces or special characters.
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."
Back inside Photoshop, use the selection tool to select the canvas, then hit backspace.
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.
Next rotate your image 90 degrees clockwise, as shown in Stage 7. Save this image to your hard drive.
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.
Ensure that inside the accordion widget Options panel, you have selected 'Can Close All.'
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.
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'
Your widget will now be working on preview. You can add more labels to this widget by repeating the steps in this tutorial.