In this article, you'll learn how you can embed HTML content inside a Composition widget. A Composition Widget comprises of two containers: Trigger and Target. When a site visitor clicks the Trigger area, the corresponding Target area is displayed.
Adobe Muse offers a wide range of Compositions widgets that let you add and design different kinds of content. For example, lightbox displays are a great way to feature a specific element. When the target area displays, the Lightbox widget can be configured to temporarily dim the rest of the page, drawing the visitor's focus to the active display area.
- In Plan view, double-click the home page to edit it in Design view.
- In the Widgets Library, click the Compositions item to expand it. Drag a Lightbox Display widget from the Widgets Library to the page.
Use Clear Widget Contents (right-click the widget and choose Clear Widget Contents) option to remove all default content populated within a widget.
For this example, visitors will click the large hero image in the trigger container to invoke the target container of the Lightbox Display widget to appear. From there, they can click the Play button and watch the embedded YouTube video.
The default version of the Lightbox Display widget has three smaller gray trigger boxes above the larger light gray target container.
- Click the small gray box on the far right twice. The first time, the Selection Indicator in the top left corner of the Control bar displays the word Composition. Click the gray box a second time, so that the Selection Indicator displays the word: Trigger. (The smaller gray boxes are the “trigger” of this widget—they are the buttons that respond to user interaction).
This sample project only uses one trigger button and one target container, so the next part involves deleting the two unneeded light gray trigger buttons. As you delete each trigger, you also delete the corresponding target container automatically.
- Press Delete (Mac) or Backspace (Windows) to remove the selected trigger. Then, click the second (middle) gray box twice, (the trigger to the left of the one you just deleted). Press Backspace or Delete again to remove it as well.
After making these changes, only a single small gray trigger button and one larger target container remains.
- Click away so that the widget is not selected. You can tell that no other elements are selected when the Selection Indicator in the top left corner displays the word Page.
- Choose File > Place to open the Import dialog box. Browse to select the file named hero-image.jpg from the sample files folder. Click Open to choose the file and close the Import dialog box. Click once, anywhere on the page, to place the hero image at its full size.
- While the hero image is still selected, right-click and choose Cut from the context menu that appears (or use the keyboard shortcut to cut the hero image, which removes it from the page and copies it to the clipboard).
- Click the remaining small gray trigger button twice. The first time, you are selecting the entire widget and the Selection Indicator displays the word: Composition. The second time, you have selected the actual trigger container, and the Selection Indicator displays the word: Trigger.
- Right-click inside the trigger button and choose Paste in the menu that appears. Or use the keyboard shortcut to paste the hero image into the trigger button. Notice that the trigger container automatically expands to the size of the hero image dimensions.
Pasting content into a container can be tricky. Sometimes you think it was pasted inside, when really the content is on the page. If you need to verify that the hero 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 it displays the word Page, then you'll need to cut and paste the image inside the trigger container again.
- While the trigger container is selected, set the stroke width to 0. Use the Fill menu to set the fill color to None.
- Use the Selection tool to position the widget in the vertical center of the page, near the top, so that approximately the top quarter of the trigger with the hero image is overlapping with the header area. The hero image should fit neatly in the nook created by the orange ribbon graphic.
If you click the Preview button in the Control panel and test the home page, you'll see the large hero image display, slightly overlapping the header content. The page content displays above the header on the home page because the home page is using the Main master page.
- Click the hero image (in the trigger container), to invoke the lightbox effect. The page dims as the default gray fill color is displayed in the target container. Press Escape to close the lightbox window and then click the Design button in the Control panel to continue editing the home page.
- Test the home page by clicking the Preview button in the Control panel or choosing File > Preview Page in Browser.
When the page first loads, you only see the large hero image with the Mystery Latte message, because the target container with the video is hidden.
- If you click the hero image, you'll see the lightbox window appear that dims the rest of the page. The outer target container's fill (which is a light brown and semi-transparent) fills the entire browser window and the first frame of the video is displayed. Click the Play button in the center of the video to watch it play. (The video is actually playing from YouTube’s website, where the video file is hosted). When you are finished watching the video, click the close button (x icon image) in the top right corner of the target to close the lightbox and to see the home page again.
- Close the browser and return to Adobe Muse.
In the previous sections of this article you learned how to extend the behavior of slideshow widgets by scaling the contents to display full screen, staggering the position of slideshow thumbnails, and configuring the slideshow to display in a lightbox.
Next you'll learn about working with Composition widgets to build site navigation with submenus. Specifically, you'll use the option to create a menu item that displays a submenu when a visitor rolls their cursor over the active area and hides the same submenu with the visitor rolls their cursor off the active area that triggered the submenu to open. You can also see how to configure a submenu that hides in the event that the visitor chooses not to click any of the links in the submenu and simply rolls their cursor off the submenu itself.
The ability to create these types of interactive submenus is handy when you are building a navigation bar for a site with many different subsections. In earlier versions of Muse, the submenu would appear when a visitor rolled over a menu item, but then would not disappear unless they rolled over a new menu item at the top level or clicked one of the links in the submenu to actively visit a new page in the site.
The Show Target and Hide Target menus are helpful when you want to replicate a common menu behavior: when a visitor rolls their cursor over a menu item (on rollover), a submenu with links is displayed. The visitor can optionally click the links, or they can roll their cursor outside of the window area to hide the window. It is not necessary to click a Close button to hide a submenu when this option is enabled.
This feature is available when working with the following Composition widgets:
- Featured News
The Options menu offers two settings for showing the target container:
- On Click
- On Rollover
And provides four options for hiding the target container:
- On Click
- On Rollout
- On Rollout of Trigger and Target
In this section, you'll see how to use the on rollover behavior to show the target container and the on rollout of both the trigger container and the target container to hide the target container. You can create menus with a variety of behaviors by applying different values to the Show Target and Hide Target settings in the Options menu.
Follow the steps below to learn how you can enable the Hide on Rollout settings for Composition widgets to create a menu bar that hides and shows submenu links based on visitor interaction:
- In Design view, add a Lightbox Composition widget to the page by dragging it from the Widgets Library.
- Click twice on one of the Trigger containers. The first click selects the entire Composition widget and the second click selects the Trigger. 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 some content to each of the three trigger areas. The trigger content can include text, links, images, rectangles, embedded HTML, and more. For this simple example, use the Text tool to add text to each trigger: Link one, Link two, and Link three.
Next, you'll create a link inside the second Target content area.
- Click the middle trigger labeled Link two and then select the larger Target container that corresponds to it (with the same medium gray background color). Add a link to the second Target content area: Submenu link two. Then, click the dropdown menu next to the Hyperlinks label on the right side of the Control panel. Add a link to the Adobe website by typing http://www.adobe.com in the field.
- 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.
- Close the browser and return to Muse.
In the next section, you'll learn how to use the Hide on Rollout setting. Follow these steps:
- Select the Composition widget on the page.
- Click the blue arrow to access the Options panel and edit the widget's configuration options.
- Ensure 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 of 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 the Adobe 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.