Learn how to add Composition widgets in Adobe Muse. Configure Composition widgets to create interactive sites.

Composition widgets in Adobe Muse enable you to add complex interactivity to your websites. Be it a photography site or a restaurant site, Composition widgets can be practically indispensible for any site, to display a wide variety of content. You can use these widgets to create unique navigational and browsing experiences without writing a single line of code.

Adobe Muse offers several types of Composition widgets that let you add and design different kinds of content for your website. For example, as a user who is creating a photography site, you can choose a Lightbox Display widget to feature a photo gallery for your website. This widget temporarily dims the rest of the page, thereby drawing the visitor's focus to the active display area.

It is also possible to create interesting web designs by nesting widgets inside a Composition widget. For example, if you are designing a catalog, you can use a Blank Composition widget to create a hamburger menu, and nest a Slideshow widget in the Target area of the Blank Composition widget. Such designs provide a unique user experience for your site visitors.

Read on to learn about the types of Composition widgets that are available in Adobe Muse.

Types of Composition widgets

A Composition widget includes two containers: Trigger and Target. The trigger area is where a site visitor clicks, and the target area is the corresponding area that is displayed. You can link the trigger and target areas to add complexity and interactivity to your site.

Adobe Muse offers the following types of Composition widgets. Based on your design requirements, you can either use one of these widgets or a combination of these widgets through nesting.

Blank

Blank Composition widget in Adobe Muse
Blank Composition widget in Adobe Muse

A widget with small thumbnails. By default, this widget does not have any fillers. You can manually link this to a target container.

Featured News

Featured News Composition widget in Adobe Muse
Featured News Composition widget in Adobe Muse

A widget that behaves similar to an accordion widget. You can add text and images in the container area for this widget.

Lightbox Display

Lightbox Display Composition widget in Adobe Muse
Lightbox Display Composition widget in Adobe Muse

A widget where content in the target area becomes active when you click the trigger. The rest of the page is dimmed when the target is displayed.

Presentation

Presentation Composition widget in Adobe Muse
Presentation Composition widget in Adobe Muse

This widget contains small thumbnails that are connected to the target presentation area. By default, the slides swipe horizontally in this widget.

Tooltip

Tooltip Composition widget in Adobe Muse
Tooltip Composition widget in Adobe Muse

This widget contains tooltip text. When a user hovers over the trigger area, the tooltip is immediately displayed.

Add and configure Composition widgets

To add and use a Composition widget in Adobe Muse, select the Composition widget that you want to add, and drag the widget into the Design view. As these widgets are responsive by default, you can see that the widget is fluid across different breakpoints. If you want to change the position or the content of a Composition widget, you can modify, resize, and pin the individual widget elements for a particular breakpoint.

Follow this procedure to add a Composition widget in your layout.

  1. 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.

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

  3. 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.

    Note:

    To remove all the default content populated within a widget, right-click the widget and select Clear Widget Contents.

    Drag a Composition widget from the Widgets Library in Adobe Muse.
    Drag a Composition widget from the Widgets 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.

  4. 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.

    View the Selection Indicator in the top left corner of the Adobe Muse page
    View the Selection Indicator in the upper-left corner of the page

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

  5. 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.

  6. 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.

  7. 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.

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

    Click + to add thumbnails in a Lightbox display
    Click + to add thumbnails
  9. 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.

    Configure the Composition widgets using the Options menu
    Configure the Composition widgets using the Options panel

    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.
    Configure the settings for Composition widgets in Adobe Muse
    Configure the settings for Composition widgets

    Note:

    The Show Lightbox Parts While Editing option is disabled when you have chosen Scattered or Stacked as the option from the Position drop-down list.

    The Hide All Initially option is disabled if you select the Auto Lightbox option.

  10. 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.

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

    Click an image in left (trigger) to view the Lightbox display
    Click an image in left (trigger) to view the Lightbox display (as shown in right)

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

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

If you are using a Composition widget in a responsive layout, read the following section. Ensure that you test and preview your widget at all your breakpoints.

Using Composition widgets in a responsive layout

Composition widgets are fluid or responsive, by default. To add and use Composition widgets in a responsive layout, perform one of the following steps:

  • If you are creating a new responsive site using the latest version of Adobe Muse, from the Widgets Library panel, drag and place the Composition widget in the Design view.
  • If you have been using Adobe Muse 2017.0.3 or earlier versions, your Composition widget is not responsive. In this case, open your .muse file using the latest version of Adobe Muse. Select the elements inside the widget, and choose the Resize option as Responsive Width or Responsive Height and Width (whichever applicable).
Converting non-responsive Composition widgets to responsive
Converting non-responsive Composition widgets to responsive

Note:

You cannot select the entire widget and change the Resize properties. Select individual element or elements inside the widget to make it responsive.

Configure your widget by following the steps mentioned in Add and configure Composition widgets. After configuring and styling the widget, you can either preview the widget in a browser or use the scrubber and resize. You will find that the widgets automatically resize according to the screen size.

Responsive Composition widget in Adobe Muse
Responsive Composition widget in Adobe Muse

Note:

When you add Composition widgets in a responsive layout, it is recommended that you lay out your design in the largest breakpoint first. After finalizing the position and the configuration of the widget at the largest breakpoint, add additional breakpoints wherever required.

To know more about designing your site for responsive layout, see Lay out objects in responsive design.

Combining a Composition widget with other widgets

One of the most unique aspect of a Composition widget is the support for nested widgets inside a Composition widget. That is, you can add widgets like forms, slideshows, or menu items inside a Composition widget.

For example, you can add a slideshow widget inside the target container of a Featured News widget in a cookery website. When a site visitor clicks the menu label (Featured News widget), the target area containing the gallery is displayed as a slideshow.

You can also add a contact form as a target such that a user clicking the Contact label is taken to the contact form immediately.

There are many more combinations and design possibilities that you can achieve with nesting. However, note the following aspects when you design nested widgets in a responsive layout:

  • Pinning is not available for responsive elements that are nested inside a non-responsive container. 
  • Objects will not be responsive when you place them inside a non-responsive container.

Note:

When you nest widgets inside Composition widgets, it is recommended that you do not use more than three levels of nesting.

The following section tells you how to create a submenu using a Composition widget. Read on to learn this sample scenario to create a hidden submenu for your site navigation.

Creating submenus using Composition widgets

You can configure Composition widgets to build site navigation with submenus. You can 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 configure the widget such that 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. 

The Show Target and Hide Target menus are helpful when you want to replicate a common menu behavior for your website. 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:

  • Blank
  • Featured News
  • Tooltip

The Options panel offers two settings for showing the target container:

  • On Click: Displays the target when a user clicks
  • On Rollover: Displays the target when a user rolls over the trigger

You can also choose to hide the target container in a Composition widget. The following are the four options for hiding the target container:

  • None
  • On Click
  • On Rollout
  • On Rollout of Trigger and Target

In the following 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.

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:

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

  2. 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.

    Reposition the Trigger containers
    Reposition the Trigger containers above the larger hero image.

  3. 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.

    Use the Selection tool to drag the handles
    Drag the bounding boxes to extend the width of the three trigger buttons.

  4. 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.

  5. 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.

  6. 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.

  7. 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
    Compositions options panel
    Update the settings in the Options panel to control how the widget behaves.

    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.

  8. 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy