Documentation Center

Adding a Tabbed Content Page

A Tabbed Content Page organizes contents on the Page into a tab interface: clicking a tab opens the content.

About this task

An example of Tabbed Content Page in the Example Site is the /about/contact Page.

Default content
When you create an Tabbed Content Page, new Components are created for you containing dummy content. You can edit or replace the content. By default, the following items are included in the layout:
  • a main article Component
  • a content list Component that displays two items
Ordering of content
The Components are displayed in the Tabbed Content in the order they are specified in the Component.

Procedure

  1. Open your Web site in Experience Manager.
  2. In the Home tab of the Ribbon, click New Page.
  3. From the library pane, select Tabbed Content Page.
  4. Specify the following properties:
    • Page Title—enter the internal name of the Page
    • File Name—enter the name of the Page as it appears in the browser address bar
    • Page Location—accept the default, or click Change and select the section of the Web site you want the Page to appear in.
    • Folders for Components—if you want to store the default Components containing dummy content that are created when you create a Section Page in a different location, click Configure Folders for Components, select a new Folder and click Apply to confirm your choice.
  5. Click Create Page.
  6. Change the main article page inline:
    1. Change the image—browse to and select a new background image
    2. Change the text—enter body text, subheading and content
    3. Add media—add additional multimedia and captions
  7. Click Show Properties in the top right corner of the Component and in the Metadata section, click Edit. Modify the following properties:
    • Metadata Description—used in search engines
    • Short Title—used in navigation
    • Intro Text—used as summary text
  8. Add content items:
    1. Click Open in Form View.
    2. Click the plus sign to add an item.
    3. Enter a Subheading to define the text that appears in the tab.
    4. Enter Content for the main body text that appears when you expand the tab (a Format Area containing the formatted text).
    5. Click the Media option and browse to and select a Multimedia Component link that points to a multimedia item that appears if you expand the tab
    6. Change the Link to define an internal or external link with link text that appears if you expand the tab
    7. Click Publish and select the Target Type that Publishes to your Staging Web site.
    8. Click Save and Close.
  9. Reorder items (items are displayed in order they are specified in the Component):
    1. Click Open in Form View.
    2. Drag the item to a new location.
    3. Click Publish and select the Target Type that Publishes to your Staging Web site.
    4. Click Save and Close.
  10. Remove items:
    1. Click Open in Form View.
    2. Click the delete icon next to an item.
    3. Click Publish and select the Target Type that Publishes to your Staging Web site.
    4. Click Save and Close.