Using Composition widgets in Adobe Muse

Open Adobe Muse. From the Welcome screen, either click Create New to create a new site, or open an existing Adobe Muse site where you want to add a Composition widget.

From the Plan view, double-click and open the page where you want to add the widget.

Open the Widgets Library (Window > Widget Library) and click Compositions to expand the option. Choose one of the Composition widgets, based on your design requirement.

For example, choose a Lightbox Display from the Widget Library.

The default version of the Lightbox Display widget has three smaller gray trigger boxes above the larger light gray target container.

When visitors click the trigger container, the target container of the Lightbox Display widget appears. You can embed images, text, videos including YouTube videos as the target.

Select the container or the trigger in the Composition widget. To select the entire widget, select the widget. The Selection Indicator in the upper-left corner of the application displays the word Composition.

To select the trigger, double-click and select the smaller boxes in this widget. The word Trigger is displayed in the Selection Indicator. The smaller boxes are the triggers for this widget. They are the buttons that respond to user interaction.

You can tell that no other elements are selected when the Selection Indicator in the upper-left corner displays the word Page.

Choose File > Place to open the Import dialog box. Browse to select the files that you want to place in this widget. Click Open to choose the file and close the Import dialog box.

Click once, anywhere on the page, to place the image at its full size.

While the image is still selected, right-click and choose Cut from the context menu.

You can also use the keyboard shortcut to cut the image, which removes it from the page and copies it to the clipboard.

Right-click inside the trigger button and choose Paste. You can also use the keyboard shortcut to paste the image in the trigger. Notice that the trigger container automatically expands to the size of the image dimensions.

Pasting content into a container can be tricky. Sometimes while you think the content is pasted inside, the content might actually be pasted on the page.

If you need to verify that the image is inside the trigger container, press Escape once and look at the Selection Indicator. If it displays the word Trigger, you know that the image is inside the trigger. If the Selection Indicator displays the word Page, you have to cut and paste the image inside the trigger container again.

You can also open the Layers panel (Window > Layers) to verify where the image is pasted. The Layers panel shows the hierarchy of the elements in a page.

To add additional thumbnails, click the plus sign (+) next to the trigger containers.

After placing the widget in your Design view, you can go ahead and configure the widget. To configure the options for your Composition widget, select the widget and click the blue arrow at the upper-right corner of the widget.

You can configure the following settings from the Options panel:

• Position: Specifies where the target area is positioned on the page. Select Stacked if you want your targets to overlap and select Scattered if you want your targets to be placed in different positions. Select Lightbox if you want to dim the rest of the page.
• Show Target: Specifies the setting for target behavior when a user clicks the trigger. 
• Hide Target: Specified the settings for hiding a target. Unless a user clicks the trigger, the target area remains hidden. 
• Transition: Specifies how the content in the target area changes when a user clicks or rolls over the trigger. Choose Fading to fade in the new target, Horizontal to bring in the targets in a horizontal slide motion, Vertical to bring in the targets in a vertical slide motion. 
• Transition Speed: Specifies the speed of the transition for your Composition widget. If you want the transition to be immediate, select None.
• Autoplay: Configure this option to create a slideshow in your website. If you select this option, the slides play automatically, without any interaction from the user.
• Shuffle: Select this option if you want to display the targets in random order.
• Triggers on top: Select this option to place the Trigger above the Target container. You can see the same hierarchy displayed in the Layers panel as well.
• Enable swipe: Select this option to enable swipe motion for moving to the next target for touch-enabled devices.
• Hide All Initially: Select this option if you want to hide all the target options when the website initially loads. To see the target, users need to click the corresponding trigger.
• Auto Lightbox: Select this option if you want the lightbox to be automatically displayed when the website loads.
• Parts: Select the Prev (previous), Next, or the Close Button options to add extra interactivity to your widget. Users can click the previous, next, and close options in your website.
• Editing: Select Show Lightbox Parts While Editing to display the target area in the Design view, when you are editing the widget. Select Show All in Design Mode to view all the target containers at the same time in the Design view.

To remove triggers that you don't require, double-click the select the trigger that you want to delete. Press Delete (Mac) or Backspace (Windows) to remove the selected trigger.

Click the hero image in the trigger container, to invoke the lightbox effect.

Press Escape to close the lightbox window and go back to the Design view to continue editing the Adobe Muse page.

After you configure and place your Composition widget in your design, test the widget in the Preview view.

In Design view, add a Lightbox Composition widget to the page by dragging the widget from the Widgets Library.

Select the Trigger containers. Using the Selection tool, move all three Trigger containers to the top, above the larger Target container, and space them evenly.

Use the Selection tool to drag the side handles of each Trigger container. Expand the width to create a set of three "tabs" along the top, similar to a Tabbed Panel widget.

Add the required content to each of the three trigger areas. The trigger content can include text, links, images, rectangles, embedded HTML, and more. For example, you can use the Text tool to add text to each trigger: Link one, Link two, and Link three.

Now, create a link inside the second Target content area.

Click a Trigger container and then select the larger Target container that corresponds to it. Add a link to the second Target content area. Then, click the drop-down list next to the Hyperlinks label on the right side of the Control panel. Add a link to the web address that you want to link to.

Choose File > Preview Page in Browser to test how the Composition widget displays.
Interact with the widget by clicking the trigger containers labeled Link one, Link two, and Link three.

Notice that by default, the target container is always shown and never hides. You can click between the three trigger buttons to show the corresponding target container, but one of the three target containers is always showing.

To configure the Hide on Rollout setting, select the Composition widget. Click the blue arrow to access the Options panel and edit the widget's configuration options.

Ensure that the following settings are enabled:

• Position: Stacked (default)
• Show Target: On Rollover
• Hide Target: On Rollout of Trigger and Target
• Transition: Fading (default)
• Transition Speed: 0.5 Seconds (default)
• Auto Play: Disabled (default)
• Shuffle: Disabled (default)
• Hide All Initially: Enabled

The key settings that control the hide/show functionality are the Show Target menu, the Hide Target menu, and enabling the option: Hide All Initially.

Choose File > Preview Page in Browser again to test the recent changes to the widget.

Now, when the Composition widget first loads, all the target areas are hidden by default.

Interact with the widget again. Notice that when you roll over a trigger area, the corresponding target area is displayed. If your cursor remains within the widget area, you can interact with content inside the target areas (such as clicking the link to a website in the middle target container).

However, if you roll your cursor off the trigger or target regions, the target regions are hidden until you roll over another trigger area again.

This feature enables you to set up much more complex interactive site navigation that responds to the visitors mouse movements.