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.
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.
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.
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
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.
Now that you've added the Tabbed Panel widget, the next part involves updating the styles to design the two tabs.
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.
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
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.
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.
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.
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).
Next, you'll duplicate the existing text frame, to create a second text frame that fills the right side of the content area.
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.
Copying text frames is almost complete. The last part involves adding a small image that wraps inside the text of the left text frame.
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.
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.
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.
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.
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.
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.
By default, Accordion Panel widgets are set up to display the label panels on top and the content areas below, in a vertical orientation.
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.
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.
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.
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).
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).
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.
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).
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: