Text Pages

Components

CMS Workshop: Components

Components are a form-based type of reusable content that gather information and add it into complex design elements. A Component on a page prompts you to enter information and adds source code to format and display the information on the page.

Add a Component to a Page

  1. Click on the Component icon in the WYSIWYG Editor.

    Screenshot of the CMS toolbar highlighting the Insert Component tool.

  2. Choose the Component you'd like to use.
  3. A window will open — add in all information in the fields where necessary.
  4. Click "Save".
  5. The Component will then display as it will look on the page.

Edit a Component

  1. While on the page, click "Edit".
  2. Click on the Component, then click on the pencil icon.
  3. Edit the fields where necessary.
  4. Click "Save".
  5. The Component will then display as it will look on the page. 

Delete a Component

  1. While on the page, click "Edit".
  2. Click on the Component, then click on the "X" icon.
  3. Click "Save".

 Available Components

Arrow Link

The Arrow Link Component creates linked text alongside an arrow that animates with a mouse hover to call attention to the item.

Arrow Link Specifications

  • Arrow Link options include:
    • Text
    • URL
    • New Tab/Window
  • Text has no character limit.
  • URL can open in the same window or a new window.
  • Event Tracking can be enabled.

Add an Arrow Link Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Arrow Link" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary (Text, URL, New Tab/Window).
    Screenshot of adding in Arrow Link information fields.

  4. Click "Save".

The Component will then display as it will look on the page:

Screenshot of how Arrow Link Component looks on a page once finished

Blockquote

The Blockquote Component creates a callout quote on a page, using larger font and quotation marks.

Blockquote Specifications

  • Blockquote options include:
    • Text
    • Display Attribution?
    • Number of Attribution Lines
    • Attribution Link 1 (optional)
    • Attribution Link 2 (optional)
  • Text has no character limit.
  • Attribution can be hidden or displayed.
    • The number of attribution lines displayed can be one or two.

Add a Blockquote Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Blockquote" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary.
    Screenshot of adding in Blockquote information fields.

  4. Click "Save".

The Component will then display as it will look on the page:
Finished Blockquote component

Callout Text

The Callout Text Component creates a colored (Gray or Green) box on a text page that includes a Heading, Text, and Link (optional).

Callout Text Specifications

  • Callout Text options include:
    • Callout Text Box Color
    • Heading
    • Heading Level
    • Text
    • Display Link?
    • Link Theme (optional)
    • Link Text (optional)
    • Link URL (optional)
    • New Tab/Window (optional)
  • Box Color can display as Gray or Green.
  • Heading does not have a character limit.
  • Heading Level can display as H2-H6.
  • Text does not have a character limit.
  • URL can open in the same window or a new window.
  • Link Theme can display as a Link or a Button.

Add a Callout Text Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Callout Text" Component, then click "Insert".
  3. A window will open — choose/add in all information in the fields where necessary.
    Screenshot of the first section of fields in a Callout Text componentScreenshot of the second section of fields in a Callout Text component
  4. Click "Save".

The Component will then display as it will look on the page:
Screenshot of a completed Callout Text component

Date

The Date Component creates a calendar/event-like element that displays information, a link, and a large date block.

Date Specifications

  • Date options include:
    • Month
    • Day
    • Heading Level
    • Heading
    • Summary
    • Link Text
    • URL
    • New Tab/Window
  • Heading does not have a character limit.
  • Summary does not have a character limit.

Add a Date Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Date" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary.
    Screenshot of the first section of fields in a Date componentScreenshot of the second section of fields in a Date component
  4. Click "Save".

The Component will then display as it will look on the page:
Screenshot of a completed Date component

Faculty

The Faculty Component creates a text section on a page to include faculty contact information, CV, etc.

Faculty Specifications

  • Faculty Display Options include:
    • Title (optional)
    • Link to CV (optional)
    • Phone (optional)
    • Email Address (optional)
    • Office Number (optional)
    • Area of Interest (optional)
  • Users can choose to hide or display any or all "Faculty Display Options".
  • The CV link can open as an internal CMS document or external document.
  • The Faculty Display Option fields have no character limit.

Add a Faculty Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Faculty" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary.
    Screenshot of adding in Faculty information fields.

  4. Click "Save".

The Component will then display as it will look on the page:
Finished Faculty component

Info Section

The Info Section Component creates organized sections, typically including links related to a particular topic. Each Info Section allows for a Title and Text and an optional Link (including Link Text and a URL). 

Info Section Specifications

  • Info Section options include:
    • Title
    • Text
    • Display an image?
    • Choose image (optional)
    • Image Description (optional)
    • Image Alignment
    • Link
    • Link Text
    • Link URL
    • New Tab/Window
  • Each component is only one info section, but can contain up to five links.
  • Link 1 is required.
    • Links 2-5 are optional.
  • Info Section Titles does not have a character limit.
  • Info Section Link Text does not have a character limit.
  • Info Section Image can be left or right aligned.

Add an Info Section Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Info Section" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary.
    Screenshot of adding in Info Section information fields.

  4. Click "Save".

The Component will then display as it will look on the page:
Completed Info Section component

Stylized Header

The Stylized Header Component creates visually-dynamic headers on Text (H3) or Gallery Pages (H2).

Stylized Header Specifications

  • Stylized Header options include:
    • Text
    • Style
    • Enable Link?
    • Link (optional)
    • New Tab/Window
    • Anchor (optional)
    • Anchor Link ID Attribute (optional)
  • Style can display as Basic or Centered.
  • The Link can open in the same tab/window or in a new tab/window.
  • Stylized Header Text does not have a character limit.

Add an Stylized Header Component to a Page

  1. Follow the Add the Component to a Page instructions from above.
  2. Choose the "Stylized Header" Component, then click "Insert".
  3. A window will open — add in all information in the fields where necessary.
    Stylized Header Component window

  4. Click "Save".

The Component will then display as it will look on the page:

Basic StyleStylized Header Component - Basic
Centered Style
Stylized Header Component - Centered

Timeline Event (temporarily unavailable)

Please note: The Timeline Event Component can only be used in the Time Period field of an already-created Timeline Snippet. The Timeline Event Component adds event and details to the accompanying Time Period in a Timeline Snippet. Please note: More than one Timeline Event Component can be added to a single Time Period.

Timeline Event Specifications

  • Timeline Event options include:
    • Event Date
    • Event Title
    • Display Image?
      • Select Image (optional)
      • Image Description (optional)
      • Image Style (optional)
    • Event Description
  • The Event Date has a character limit of 20.
  • The Event Title has a character limit of 45.
  • The Display Image is optional.
    • The Image Style can be Default or Thumbnail.
  • The Event Description has no character limit.

Add a Timeline Event Component to Timeline Snippet

  1. Make sure you have already created a Timeline Snippet and add the Timeline Event Component to the Time Period field.
  2. Follow the Add the Component to a Page instructions from above.
  3. Choose the "Timeline Event" Component, then click "Insert".
  4. A window will open — add in all information in the fields where necessary.
    Screenshot of adding in Timeline Event information fields.

  5. Click "Save".

  6. To add an additional Time Period, right click on the Timeline Snippet Table and choose which option you'd like to add (i.e. Row > Insert Row Before). You can also make changes to the cells themselves or choose Table Properties to make other adjustments.

    Right click


  7. You can also use the pop-up toolbar and click on the appropriate icon to execute the task.

    Table functions

  8. Once a Time Period has been added, follow the same instructions to add an accompanying Timeline Event Component. Please note: More than one Timeline Event Component can be added to a single Time Period.

Once completed, the Snippet + Component will then display as it will look on the page:
Completed Basic and Centered Timeline Snippet