How To Install Muse Widgets

Learn how to use widgets to add forms, menus, slideshows, social media buttons, and more to your web pages.

Note:

Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.

You can add interactive site features and dynamically generated content using widgets in Adobe Muse. Widgets are preconstructed configurable objects that offer common web functionalities such as menus, forms, slideshows, and so on. Adobe Muse provides a range of widgets that make complex web design simple.

Widgets within Adobe Muse can be style per the design of your site, allowing you to blend them perfectly with the rest of your web pages. The Widgets Library contains all of the prebuilt site features (Widgets) that you can drag onto pages, configure to control their behavior, and style to modify their appearance.

Adobe Muse provides the following kinds of widgets:

Composition widgets: These widgets allow you to interact with an area on the web page in order to change the content shown in another area. A fade or sliding animation occurs on change.
Form widgets: Add a form visitors to your site can use to contact you. Different form fields are available depending on which form widget you choose.
Menu widgets: Create a dynamically or manually populated menu bar that includes states for each menu item. On each page, the proper menu link will automatically have an "active" state to show that is the current page.
Panel widgets: Show only one panel of content at a time, with intuitive navigation links to switch the visible panel. Choose between a sliding animated accordion structure or a familiar tabbed look.
Slideshow widgets: These widgets enable you to easily display your images in a gallery with sleek animations. They're best used for simple image-based slideshows; more complex use cases are better served by a composition widget.
Social widgets: Social widgets provide an easy way to configure custom HTML and embed it into your Adobe Muse pages. Most of the Web widgets provide functionality that is also available by embedding HTML from third-party websites. You can save time by adding and configuring the web content from within Adobe Muse, rather than generating the code outside of the application and pasting it into Adobe Muse as embedded HTML.

You can choose and add widgets on to your Adobe Muse web page from the Widgets Library. To add a widget, do the following:

In Adobe Muse, choose Window > Widgets Library.

The Widgets Library panel is displayed.

In the Widgets Library panel, select the widget and drag it on to your Adobe Muse web page.

To configure the widget further, click the button to open the Options panel.

For more information, see Configuring and customizing widgets.

Adobe Muse allows you to configure widgets via Options panel after placing them on web pages. The Options panel is a contextual panel that lets you apply changes and update settings that are specific to a widget. The Options panel contains settings that help determine the appearance of content.

The Fill and Stroke options allow you to greatly enhance the appearance of a widget. If the widget contains text, you can use the Text panel ( Windows > Text or text options on control panel) to modify and style text per your design needs.

To configure a widget, do the following:

In Adobe Muse, drag any widget on to the web page.

Note:

Use Clear Widget Contents (right-click the widget and choose Clear Widget Contents from the context menu) option to remove all default content populated within a widget.

With the widget selected, click the button to display the Options panel.

On the Options panel, modify or update settings as necessary.

Click anywhere else on the page to close the Options panel.

In the figure, the Options panel for a Horizontal Menu widget is displayed.

Horizontal Menu widget options panel

Options panel for a Horizontal Menu widget.

When you drag a widget out of the Widgets Library and onto a page, you are essentially placing nested set of containers. These containers can selected and edited based on their hierarchy.

When working with widgets, it is important to understand how select the widget and its containers. Adobe Muse displays your current selection using the Selection Indicator. The Selection Indicator, present at the top-left corner in Adobe Muse, displays your current selection along with a drop-down menu that allows you to preview an object per its state.

In the examples below, the Selection Indicator displays selection of the Page (when no object on the web page is selected), a Menu widget (on selecting a Menu widget), and a Menu Item (container within a Menu widget).

Button states

On leaving all page elements unselected.

Button states

On selecting a Menu widget.

Button state normal

On selecting a container, and in this case a Menu Item within a Menu widget.

When you click once on the entire widget, the Selection Indicator displays the word "Widget." If you click again, you can select a container within the widget, and the Selection Indicator displays the word "Container." You can continue to click repeatedly to select the elements (such as text frames) that are nested inside the containers.

While a text frame is selected, the Selection Indicator displays the words "Text Frame." As you click a widget to "drill down" inside the nested elements, it is a best practice to note the words in the Selection Indicator to learn which nested element is selected. You'll select different containers (such as individual buttons of a menu navigation) to update the states of the buttons, which allows you to optionally control how the buttons look when the page first loads, when the visitor hovers over a button, and when the visitor clicks them. It also allows you to define an "active" state that orients the visitor by visually indicating the button that corresponds to the page a visitor is currently viewing.

To click in the nested containers in a widget, you can click several times on the item you want to edit. Take note of the Selection Indicator and the options presented in the States panel to see when you've selected the nested element you want to change.

After you've finished updating a widget, you can either click away (somewhere else on the page) to deselect the widget or press the Escape key repeatedly to jump up a level in the widget's hierarchy.

After you drag a widget out of the Widgets Library and onto a page, you'll see a blue arrow icon appear in the top right corner of the widget, when the widget is selected. Click this blue arrow icon to open the Options menu.

Each widget has different options available, so the options you can set in the interface of the Options menu vary. The settings control the behavior of the widget (such as choosing whether a slideshow will auto play or whether visitors must click the thumbnails to see each larger image) and the display of the widget (such as specifying the type of transition that will animate as each new image is displayed).

As you design websites, you'll have an opportunity to make these settings and work with your clients to find the best choices for a specific project. Remember that at any time, even once a site has been published online, you can return to the .muse file, select a widget, click its blue arrow icon to access the Options menu, and make new settings to change the widget. Later, after you publish the site again, the changes you make are reflected on the live website.

With Menu widgets, you can have the widgets dynamically display the page names of the site and automatically create the links to those pages. This makes it very easy to add site navigation to pages based on your sitemap in Plan view, and you never have to worry about creating broken links. You can also disable specific pages so that they do not appear dynamically in the Menu widgets by right-clicking the page's thumbnail in Plan view and deselecting the option Include page in Navigation. This option is enabled by default (and displays a checkmark when it is enabled).

Alternatively, you can also choose to set up Menu widgets manually, if you would prefer to name the buttons yourself and add the links to specific pages, rather than allowing Adobe Muse to create the menu items. In the Options menu, in the section named Menu Type, you can choose the Manual option.

Menu type options panel

Choose the Manual option in the Menu Type settings if you'd like to create a custom menu manually, rather than generate the page names and links dynamically.