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.
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.
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.
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.
To remove all the default content populated within a widget, right-click the widget and select Clear Widget Contents.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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:
- Featured News
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:
- 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:
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.
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
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.