Adobe Muse CC

Using widgets

Learn how to add power and functionality to your websites with Adobe Muse widgets. (Try it, 6 min)

What do I need?

Get files Sample files to practice with (ZIP, 2 MB)

Step 1 of 7:

Open the site in Plan view

Plan view shows a thumbnail of all of the pages in your site. In this site layout, each page is named for a function. The Master page, located at the bottom is like a page template that lets you apply common elements to all the pages in the site.

Double-click the Slideshow page to open it.

Step 2 of 7:

Choose Widgets Library from the Window menu, or click the Widgets Library tab in the panel to make it active.

Expand the Slideshows section in the list of widgets and select the widget named Lightbox as shown.

Step 3 of 7:

Drag and drop a widget

Select the Lightbox widget and drag it to the Slideshow page. Drag and drop it in the center of the page.

Step 4 of 7:

Work the Slideshow options

Customize the slideshow by trying one of the following options:

  • Change the Transition and Transition speed of your slideshow.
  • Select Full Screen to resize your slideshow to fill the entire screen.
  • Select the Lightbox option in the Layout section to display the contents of the lightbox while dimming the rest of the page.

Note: Preview the slideshow options by choosing File > Preview Page in Browser.

Step 5 of 7:

Add images

To add images to the slideshow, click the Add images icon at the top of the Slideshow Options menu and select images from the folder that is provided with this tutorial. Go to: Using Widgets in Adobe Muse > Images > Slideshow Images.

Select all the images in the folder and click Open. Notice how the images you selected populate the slideshow.

Step 6 of 7:

Experiment with your slideshow

  • Reposition the thumbnail set by selecting the thumbnail container and moving it.
  • Reorder an individual thumbnail by clicking again, then drag and drop it to a new position.
  • Add or remove captions for each image by toggling the Captions box in the Parts section.

Step 7 of 7:

Preview your work

When you're done experimenting, click Preview in the top-right corner to preview your new slideshow.

Try these other Widgets too:

Add a Contact Form

To add a Contact Form, expand the Forms section and choose Simple Contact.

Experiment with these options:

  • Add more fields by checking additional Standard Fields. Add a custom field by clicking the add button in Add Custom Fields.
  • Change the font color by double-clicking to select the Field label. Then change the color in the Control panel at the top.

Add a Navigation Menu

To add a navigation menu, it is recommended that you apply it to the Master Page. Switch to the Plan mode and double-click the Master page thumbnail (in the Masters section at the bottom of the screen) to open it.

In the Widgets Library, open the Menus section and choose either a Horizontal or a Vertical Menu widget to drag on to the page.

Experiment with this option:

  • Completely customize the design of your menu by changing the Fill and Stroke or adding Effects to the menu elements.

Notice that if you go back to Plan mode and change the order of pages in your site, the navigation menu will update accordingly.

And more...

To download more widgets provided by the Adobe Muse community, including the ability to integrate blogs and online stores visit the Adobe Muse Widget Directory.

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.