TerminalFour

Vertical Tabs Content Type

The vertical tabs content type is used often to break up longer content into sections that are easier to read and understand. Another use is to bring together small sections of content into one page to make it more convenient for the visitor. A vertical tabs content item must have at least three tabs and can have at most five tabs.

To build a vertical tabs content item:

  • In the section, click the Add Content button and select YCP2016: Vertical Tabs from the list of content types.
  • There are several background patterns available for the vertical tabs content type. Choosing a background is optional, and the choice of background really depends on how the vertical tabs content will look next to the other content items on the page.
  • The Secondary Title field is presented above the Primary Title because if you use both of these elements, this is the order in which they appear on the page. The Secondary Title is not required but can be useful to add clarity or to emphasize the Primary Title. You can enter the title however you like on the form (all lowercase for example), but the system will automatically change it to all caps. It will display in a lighter shade than the Primary Title over the text content.
  • Entering the Primary Title is required. You can enter the title however you like on the form (all lowercase for example), but the system will automatically change it to all caps. It will display in a darker shade than the secondary title over the text content.
  • The Header Row element is a divider to help separate the sections of the SiteManager form. There are several of these on the vertical tabs form. There is no need to select the radio button at right.
  • The Tagline can be added to explain or promote the content. Note: Taglines are easiest to read with no background selected for the vertical tabs content.
  • Tabs can be numbered or display icons, but you must choose to use one or the other, not both.
    • You can number the tabs if you have steps that must be carried out or that occur in order.
    • Alternatively, the tabs can display icons to categorize the content.
  • Enter the Tabset Tab Heading. This text appears on the tab label at left.
  • Enter the Tabset Content Heading. This heading appears over the text content of the tab.
  • The Tabset Content is the main text content. Links are acceptable in this content, but button links (which appear below the text content) are also offered which are more visible and engaging to the visitor. If it is more appropriate to add links to the text content when adding either email address, telephone number, or offsite website link, please follow these steps:
    • Email address:
      • Enter the email address in the HTML editor.
      • Highlight and copy the email address (CTRL+C or Command+C).
      • Click the Insert/Edit Link button in the toolbar at upper right.
      • Type mailto: in the Link URL field after this.
      • Paste in the email address.
      • Click the Insert button to save your work.
    • Telephone number:
      • Enter the telephone number in the HTML editor.
      • Highlight and copy the telephone number (CTRL+C or Command+C).
      • Click the Insert/Edit Link button in the toolbar at upper right.
      • Type tel: in the Link URL field after this.
      • Paste in the telephone number.
      • Click the Insert button to save your work.
    • Offsite website address:
      • Enter the website address in the HTML editor.
      • Highlight and copy the website address (CTRL+C or Command+C).
      • Click the Insert/Edit Link button in the toolbar at upper right.
      • Paste in the website address.
      • Enter a short title phrase that describes or states the web location the link will take the visitor to.
      • Click the Insert button to save your work.
  • To add buttons:
    • For either a www.ycp.edu page or an offsite page, first enter the Tabset Button Link text which the visitor sees on the page and clicks to navigate to the linked web page. Best practice for link text is to use action words or to say exactly what you’re linking to.
      • To link to a www.ycp.edu page on our website, use the Select link at right to select the page you want to link to with the Tabset Button www.ycp.edu Link.
      • To link to an offsite page (not on our website), navigate to that page, copy the web address (URL) from the browser's address bar, and paste it into the corresponding Tabset Button Offsite Link field.
    • To link to a PDF document, you will not use the Button Link Text field. In SiteManager, the system uses the PDF document's Media Name field in the Media Library as the link text. To adjust the link text for a PDF document, first go to the document in your Media Library folder and edit the document's Media Name. Once you are satisfied with the Media Name, use the Select link at right to select the PDF document for Tabset Button PDF Link.
  • Buttons will display in colors as follows:
    • First button, orange
    • Second button, blue
    • Third button, green
  • Click Add & Approve, then Preview to view your page.
  • Repeat these steps for each tabset. You will see blank tabs for any of the first three tabs you do not fill out, until you fill in all three required tabs. Tabs 4 and 5 are optional, so no blank tabs appear on the preview for these.


Content Managed By: Web Services Team