Learn how to display and style a cluster of related content using Tabbed or Accordion panels in Adobe Muse.

Add a Tabbed Panel widget

  1. Open the Widgets Library panel (Window > Widgets Library). Expand Panels, and select the Tabbed Panels widget. Drag the widget from the Widgets Library to your Design panel.

    The Tabbed Panel widget displays the default formatting when you drag it onto a page.
    The Tabbed Panel widget displays the default formatting when you drag it onto a page.

  2. Click the top tab on the right side three times. The first click selects the entire Tabbed Panel, the second click selects the Tab Container, and the third click selects the Tab on the right side.

    Check the Selection Indicator to see which sub-element of the widget is currently selected. Press Delete (Mac) or Backspace (Windows) to delete the third tab. After making this change, there are only two tabs remaining. Click away, anywhere else on the page.

  3. Click the widget once again, to select the entire Tabbed Panel. Drag the handles to resize the entire widget to a width of 840 and a height of 645. As you drag the handles, you can refer to the measurements that appear as you drag.

    You can also check the Transform panel to see the values in the W (width) and H (height) fields.

    Review the width and height fields to check the dimensions of the resized widget.
    Review the width and height fields to check the dimensions of the resized widget.

  4. Use the Selection tool to position the Tabbed Panel widget on the page, near the top, and centered vertically.

  5. Click the top center position of the Pin interface in the Control panel, to pin the Tabbed Panel widget in place. To learn more about pinning objects in position so that they don't scroll, see this link.

  6. While the Tabbed Panel widget is still selected, click the left tab to select the Tab Container (the element that holds both top tabs). Use the Selection tool to drag the center handle down, until the height is approximately 98 pixels.

    In the Spacing panel, set the following values as shown in the image given below:

    • Left: 220
    • Right: 220
    • Bottom: 2
    • Gutter Height: 10
    Set the spacing values for the Tab Container in the Spacing panel.
    Set the spacing values for the Tab Container in the Spacing panel.

  7. After making these changes, use the Selection tool to drag the entire Tabbed Panel widget up to the very top of the page, so that the top of the Tabbed Panel is butted up against the bottom of the header rectangle with no vertical space between the two.

    If necessary, you can zoom in to get a closer look of how the elements are aligned. Set the magnification back to 100% after you are finished.

Styling the Tabbed Panel widget

Now that you've added the Tabbed Panel widget, the next part involves updating the styles to design the two tabs.

  1. Click the left tab three times, to select the left Tab. Open the States panel and select the Normal state. Use the Fill menu to set the fill color. Set the stroke width to 0.

  2. Select the Rollover state in the States panel. Set the fill color of the Rollover state of the tab to 571E00. Notice that when you set the fill color for the Rollover state, the Mouse Down state also updates automatically.

    Select the Active state and also apply the same fill color to the tab while in the Active state. Now the Normal state is filled with the fill color you chose in the previous step, and the other three states are filled with 571E00.

  3. Click the left tab once again, to select the Label. The Selection Indicator displays the word Label when it is selected. Select the Normal state in the States panel and then use the Text panel to set the  following attributes as shown in the image given below:

    • Web font: Kaushan Script (or any script font you prefer)
    • Font size: 26Color: #70909D (you can rename this color. For example, blue-menu)
    • Leading: 120%
    • Alignment: Centered
    Style the label text by updating the settings in the Text panel.
    Style the label text by updating the settings in the Text panel.

  4. While the Label is still selected, click the New Style button at the bottom of the Paragraph Styles panel. To reapply this formatting whenever you want, with a single click, rename this new paragraph style. For example, head-tabs.

  5. When you look in the States panel, the formatting you applied to the Label while the Normal state is selected is also applied to both the Rollover and Mouse Down states. Select the Active state and then click the head-tabs paragraph style again, to apply the formatting to the Active state. Now all the states in both the tabs have been styled.

    Select the Normal state again.

  6. Use the Text tool to select the label text in all the tabs, and enter appropriate names for your labels.

  7. If you select the left Tab and look at the States panel, you'll see the final formatting applied to each tab and label. Click the right tab and notice that the states look the same, except for the text content of each tab.

    Review the formatting of each tab in the States panel in Adobe Muse.
    Review the formatting of each tab in the States panel.

Add text frames to the content area of a Tabbed Panel widget

  1. Take a moment to click back and forth between the two different tabs, that have different labels. The placeholder text for both the tabs are different, so you can tell that one container is displayed as the other is hidden.

  2. Click the right tab in your widget. When the right tab is selected, the corresponding content area is displayed below the tab. This is the same behavior that occurs both in Design view when editing the page and on the live website. This is what makes Tabbed Panel widgets very helpful, because you can efficiently display much more content within a single page.

  3. Select the Content Area for your tabs. The Selection Indicator displays the words Content Area when it is selected. Select the placeholder image file and press Delete (Mac) or Backspace (Windows) to delete it.

  4. Use the Text tool to select the existing placeholder text header. Select the bold header text, Mauris sit amet, and delete it.

  5. Temporarily switch from Adobe Muse to your desktop. Open the sample files folder and locate the file named text-about-ourstory.txt. Double-click the file to open it in a text editor. Copy the first portion of the page, up until the line that reads: ... crafted through years of baking for friends and family.

  6. Return to Muse. Use the Text tool to select the existing placeholder text. Paste the text content you copied in the text frame. Leave one extra line and return to the top of the text frame.

  7. While the text frame is selected, use the Text panel to choose the settings to format your text. For example, you can choose the following settings:

    • Font: Droid Serif
    • Font Size: 14
    • Color: #222222
    • Alignment: Left
    • Leading: 120%
  8. While the text is still selected, click the New Style button at the bottom of the Paragraph Styles panel. Double-click the new paragraph style and rename it. For example, body. This will make it easier to reapply the same formatting to other text content.

  9. In the Swatches panel, double-click the color value #222222 and rename this color. For example, katieblack.

  10. In the Control panel, set the Stroke color of the text field to #222222 (katieblack) and set the Stroke Width to 5 pixels.

  11. Use the Fill menu to set the fill color of the text field to a light beige color (#F8F3E2). Click the folder next to the Image section and browse to select the file in the sample files folder named bg-texture.png. Set the Fitting menu to: Tile.

  12. In the Spacing panel, set the Left and Right spacing. For example, you can set the Left spacing to 24 and the Right spacing to 15.

    Set the spacing values to create visual space around the pasted text copy.
    Set the spacing values to create visual space around the pasted text copy.

  13. Next, you'll add content to each of the content area containers that correspond to each of the tabs.

    Use the Selection tool to resize the text field. Drag it to the left side of the container, and then use the handles to expand its width to approximately half of the available content area space (approximately 390 pixels wide by 381 pixels high).

Duplicating text frames in a Tabbed Panel

Next, you'll duplicate the existing text frame, to create a second text frame that fills the right side of the content area.

  1. Use the Selection tool to select the text frame. Press and hold Option (Mac) or Alt (Windows) as you drag a duplicate copy of the text frame to the right side of the content area (see the image below).

    Use the alignment guides that appear to ensure that the right text frame is aligned horizontally with the left text frame.

    Duplicate the existing text frame, to create a second column on the right side.
    Duplicate the existing text frame, to create a second column on the right side.

  2. Temporarily switch from Muse to the text-editing program that contains the content for your Tabbed Panel. Copy the content that you want to paste in your duplicate tab.

  3. Switch back to Muse. Delete all the existing text in the duplicated right text frame. Paste the new text content that you copied from the clipboard.

  4. As needed, use the Selection tool to position both text frames so that they are aligned and centered within the content area at the desired location.

  5. While the text frame is still selected, press Escape once to select the Content Area of the duplicated tab. Set the stroke width to 0, and set the fill color to None.

Copying text frames is almost complete. The last part involves adding a small image that wraps inside the text of the left text frame.

Working with Accordion panels

Accordion Panel widgets are helpful when you want to fit a lot of content into a smaller area of screen real estate. The collapsing and expanding behavior allows visitors to click a label panel and see the corresponding content area appear. In addition to desktop sites,  Accordion Panel widgets are often used to display content in mobile layouts.

In this section, you'll learn how to add content to the individual pages in your site. You'll work with another type of widget, called an Accordion widget. The Panel widgets (both Accordion and Tabbed Panel widgets) are helpful because they make it possible to display more content on a page within a smaller area of screen real estate.

  1. Open your project in the Design view and begin editing it.

  2. Choose File > Place. In the Import dialog box, navigate to the folder where you have your assets, and select the image file you need. Click Select, and then click once at the top of the page to place the image at its original size on the page as the header text. You'll add the Accordion widget below this header.

Add an Accordion to a web page

  1. Open the Widgets Library. (Choose Window > Widgets Library to open it. Or if it is already open, click the top tab to make the Widgets Library active in the set of docked panels.)

  2. Click Panels to expand the list of Panel widgets. Select the Accordion widget. Drag the Accordion widget onto the page and position it in the upper left side of the page content region.

    Drag and place the Accordion widget on the Adobe Muse page.
    Drag and place the Accordion widget on your page.

  3. With the Selection tool, select the various components of the widget. As you select the entire widget, the Selection Indicator in the top left corner of the Control panel displays the word “Widget.” As you click again, notice how the Selection Indicator updates to tell you that you have selected a container, or a text frame. The Selection Indicator tells you which part of the widget is currently selected.

    To deselect that element of a widget, either click the Escape key to back out of the current selection one level, or press it repeatedly to back up out of the nested elements. Alternatively, you can simply click away from the widget and onto another part of the page.

    By default, the Accordion widget has two panels. The top panel displays the placeholder tab name Lorem 1 and the bottom panel displays the placeholder tab name Ipsum 2.

  4. Open the Widget Options dialog box by clicking the round blue arrow icon. Ensure that the option Edit Together is checked. This option ensures that any changes you make to one tab name in the Accordion will be applied to all tabs.

    Ensure Edit Together is checked in the Options panel in Accordion widgets.
    Ensure Edit Together is checked in the Option panel in Accordion widgets.

  5. With the Selection tool, click the widget once to select it, and then drag the right handle to the right to expand the width of the widget, making it wide enough to cover two columns as shown in the image below.

    Drag the handle in the widget to expand the widget to two columns.
    While the widget is selected, drag the right handle to expand it to cover two columns.

  6. Click the plus (+) sign at the bottom of the widget, below Ipsum 2, to add a third panel. The third panel displays the placeholder tab name Ipsum 3.

In the next section, you'll learn how to place text content into a panel of the Accordion widget to populate it. But first, you'll update the top tab name that appears above the first panel in the Accordion widget.

Add text to the Accordion Panel

  1. Use the Selection tool to select the top tab's text frame, currently named Lorem 1. Click “Lorem 1” once to select the entire widget and expand the container that corresponds to the top tab, and then click in the “Lorem 1” text to select the text frame. The words “Text Frame” are displayed in the Selection Indicator when the text frame is selected.

  2. Double-click the placeholder text “Lorem 1” to edit it and then type the text that you want.

  3. Select the light gray larger container beneath the first tab. Use the Text tool to drag open a text frame in the larger container.

  4. In the new text frame, type your header text.

Fill the top tabs of the Accordion with background images

  1. Select the top tab of the Accordion widget that displays the header.

  2. Click the round blue arrow button to open the Options menu. Deselect the option Edit Together. Click away from the Options menu to close it.

  3. Click the top tab twice until the Selection Indicator displays the words “Text Frame.” With the top tab's text frame selected, click the Fill link in the Control panel to open the Fill menu. Click the color picker and set the background fill color to none, rather than the default dark gray color.

  4. Click the folder icon in the Image section to open the Import dialog box. Navigate to your assets folder, and select the image that you want to add.

  5. Open the Spacing panel. Press and hold the up arrow in the Padding: L (Left) section to increase the space before the header so that the text is centered on the background image for the tab.

    Configure the spacing for the Accordion widgets in Adobe Muse
    Use the Spacing panel to increase the left padding, and center text in the accordion.

The first tab of the Accordion widget is complete.

If you deselected the Edit Together setting when you edited the first tab, the changes do not appear for the other tabs. You have to seperately style the other tabs in your Accordion Panel.

Rotate Accordion widgets

By default, Accordion Panel widgets are set up to display the label panels on top and the content areas below, in a vertical orientation.

By default, Accordion widgets in Adobe Muse are displayed vertically.
When you add an Accordion Panel widget to a page, it is displayed vertically.

To create a horizontally oriented slider using the Accordion widget, perform the following steps:

  1. In Design view, open the Widgets Library and expand the Panels section.

  2. Select the Accordion option from the Panels section and drag it to the page.

  3. Using the Selection tool, click once to select the entire widget. The Selection Indicator in the top left corner of the Control panel displays the word: Accordion.

  4. Holding the Shift key while rotating constrains the proportions so you can move the widget in 45-degree increments. A tooltip appears to display the current rotate value as you are rotating the widget.

    Rotate the widget to -90° or +90°, depending which way you choose to rotate the accordion.
    Rotate the widget to -90° or +90°, depending which way you choose to rotate the accordion.

  5. After rotating the widget, click the Preview link or preview the page in a browser to see that the Accordion still expands and collapses the panels as expected. Check whether the label containers are scripted to display the corresponding content area when clicked.

    Now all that remains is to populate the labels and content area containers with content that is oriented "face up" instead of displaying sideways.

    Follow these steps to display text content within the content areas. You'll use the same technique described above to rotate the text field in a content area container.

     

  6. Click the default text in the content area twice. The first time selects the entire Accordion widget and the second time selects the content area container. While the content area is selected, use the Selection tool to expand the size of the content area, by clicking and dragging its resize handles.

  7. While the content area is still selected, click once again to select the text frame inside the content area. Hover your cursor near one of the text frame corners until you see the rotation cursor displayed. Press and hold the Shift key while rotating the text frame to the same 90-degree rotation as the outer widget.

    Rotate the existing placeholder text content if you want to display text in the content area.
    Rotate the existing placeholder text content if you want to display text in the content area.

  8. After rotating the text frame, use the Selection tool to reposition it within the content area. Use the Text tool to replace the placeholder text with the actual text you want to display and then use the text formatting options in the Control panel and the Text panel to style the text (or apply paragraph styles to update its appearance).

  9. Place images, draw rectangles, or embed HTML to populate the content area containers as desired. You don't have to rotate this content because it is placed upright within the rotated container automatically.

Update text in the label containers

To update the text in the label containers, you have several options.

If the labels are short and you want the text to remain "sideways" (to simulate books on a bookshelf, for example) you can use the Text tool to select the existing placeholder text and type the desired labels (see the image below).

Edit the label text using the Text tool for Accordion widgets.
Edit the label text using the Text tool for Accordion widgets.

If you do not want to use text labels, you can simply delete the existing placeholder text in the label containers and then use the formatting options in the Control panel or Fill panel (along with the States panel) to apply a different color to each label (see the image below). To update the appearance of each label container individually, click the blue arrow button to access the Options menu and disable the Edit Together option.

Use the Fill menu and text formatting options to color code the label containers and the corresponding text content.
Use the Fill menu and text formatting options to color code the label containers and the corresponding text content.

Another option is to use an image-editing program to create images that are inserted in the label panels. Place the images on the page, cut them, select the label text with the text tool, and then paste the images into the label containers. If desired, the images can contain vertically oriented text (see the image below).

Insert images with vertically oriented text in the label containers.
Insert images with vertically oriented text in the label containers.

Add anchor links in Accordion Panels

You can link any page element to Accordion widgets by adding anchor links in the Accordion panels. Read on to know how to add anchor links to Accordion widgets:

  1. Select the Accordion widget where you want to add the anchor link. Click the tab where you want to add the anchor link.

  2. Click the Anchor tool to load an anchor link in the Place Gun.

    Select the Anchor tool from the Tools panel.
    Select the Anchor tool from the Tools panel.

  3. Place the anchor link in the Accordion widget.

    A pop-up to rename the anchor is displayed. Type in a suitable name for your anchor, and click OK.

    Place the anchor link in the Accordion widget
    Place the anchor link in the Accordion widget

    You can now link this anchor to any page element from any page in your website.

  4. To link a page element to this anchor, select the page element that you want to link. From the Hyperlinks drop-down on top, choose the anchor that you created.

    In your live site, whenever you click the page element, the page displays the Accordion tab where you had placed the anchor link.

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