Default & Enhanced Homepage

Widgets

CMS Workshop: Widgets

Custom widgets create additional functionalities on USF homepages. The widget section is a required element for all USF homepages. The section is highly customizable, with various layout options including: one three-column widget, one two-column widget and one one-column widget, or three one-column widgets. Examples include featured stories, news feeds, call-to-action items, and more. Learn how to edit widgets on your USF homepage.

When your website is created, the submitted wireframes allows you to choose the widgets that will be displayed on your homepage. Once your homepage is live, you can edit the existing widgets create new widgets.

create a new Widget

  1. From the Modern Campus CMS home screen, navigate to your site folder.
  2. Click on your unit's folder.
  3. Scroll to and click on the "widgets" folder.
  4. Click either "New" or the arrow icon.
    1. Clicking the arrow icon will provide a quick look at which widgets are available, while clicking "New" will provide a larger view.
  5. Select the type of widget you want to create.
  6. Complete all required information, following all instructions.
  7. Click "Create".
  8. Click "MultiEdit".
  9. Make all appropriate changes.
  10. Click "Save".
  11. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Note: If you are building a test site, publish the new widget to both Production and Test. Even though your website is not live yet, the new widget needs to be published to Production to operate correctly. All changes after initial creation can be published to just Test.

Back to top

add a widget to your homepage

  1. Click the Properties button in the page options at the top of the homepage (index.pcf file).
  2. Click the document icon, navigate to and click on the widget you wish to use. You may also enter in the path manually. Widgets need to be created and published prior to selecting them here.
    Screenshot of widget URL fields within a homepage
  3. Click Save.
  4. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.). 

Back to top

edit AN EXISTING WIDGET

  1. Navigate to your unit's directory (website folder).
    1. Click on the "widgets" folder.
  2. Check out the widget that you want to edit by clicking the light bulb icon.
  3. Click the MultiEdit button.
  4. Make all appropriate changes via MultiEdit > Parameters and/or MultiEdit > MultiEdit Content.
  5. Click Save.
  6. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to top

commonly used widgets

Call to Action

Screenshot of the Call to Action widget.

If you choose the small photo, small rotator, or small video option, you can opt to display four call to action boxes to the right or left of it (vertical). If you choose the large photo or large rotator option, you can opt to display four call to action boxes underneath it (horizontal). You can change the boxes as often as you like.

The purpose of the Call to Action Widget is to drive traffic to specific functionality on your website. For example, at different points of the year, you may want to drive prospective students to apply, or donors to give, or community members to attend a campus event. In order to implement this option successfully, you need to identify your key audience(s), analyze their needs and meet those needs by producing a call to action that allows them to complete a specific task that you know is important to them.

Call to Action options include:
  • Icon (3 or 4)
    • Icons are located in /images/cta-icons.
  • Headline (3 or 4)
    • Each Headline must include one link.
    • Headline has a character limit of 20.
  • Summary (3 or 4)
  • Summary has a character limit of 50.

Edit Call to Action widget:

  1. Navigate to your unit's directory (website folder).
    1. Click on the "widgets" folder.
  2. Check out the Call to Action widget by clicking the light bulb icon.
  3. Click the MultiEdit button.
    1. The editing screen will appear as Properties > MultiEdit Content.
      MultiEdit Content in MultiEdit
  4. Start with Call to Action 1:
    1. Use the Order dropdown menu to choose the Call to Action icon order (as they appear down the page (vertically) or across the page (horizontally)).
      1. The Call to Action widget will appear vertically if it is chosen as the Feature Sidebar Widget in Index > Properties > Parameters.
      2. The Call to Action widget will appear horizontally if it is used in the dedicated Horizontal Call to Action section in Index > Properties > Parameters.
        Editing the Call to Action widget
    2. Choose the Call to Action icon you would like to use via the Dependency Manager.
      Dependency Manager to choose Call to Action Icon
    3. Use the Filter field to search for the icon or scroll through the list.
      1. Click the icon you would like to use. Then click Insert.
        Selecting the Gift icon for the Call to Action icons
    4. In the Image Description field, add alt text for the icon.
    5. In the Headline field, add the headline.
    6. In the Text field, add the text that will appear underneath the headline.
    7. In the URL field, add a full URL that will be linked in the icon and headline.
      1. If the link lives outside the CMS, change the Open in New Tab? dropdown to "Yes".
      2. If the link lives inside the CMS, keep the Open in New Tab? dropdown as "No".
    8. Repeat Steps 1-7 for Call to Action 2-4.
    9. Click Save.
    10. From the Publish drop down menu, select which action is appropriate for your permission level/workflow (Publish, Schedule, Submit for Approval, etc.).

Back to top

Featured Story

Screenshot of the feature story widget in the Modern Campus CMS.

This option provides an opportunity to display a single featured story produced by your unit. The story could be about a faculty member, a student, an upcoming event, an initiative important to your unit’s leadership, etc. This option is not recommended for units that do not have a communication professional on staff.

  • Featured Story options include:
    • Image
      • Sized 320 px by 213 px.
    • Headline
      • Each Headline must include one link.
      • Headline has a character limit of 20.
    • Story Text
      • Story Text has a character limit of 150.

Please note: If using the Featured Story – Three-Column Grid, please only edit via Properties > MultiEdit Content (not the WYSIWYG Editor, which can cause formatting and accessibility issues).

Back to top

News - Manual - One-Column

Screenshot of the one-column news manual widget in the Modern Campus CMS.

This option provides an opportunity to display news headlines, summaries and publication dates (optional) that link to news articles you’ve created and posted on your website. It is available in the one or two-column format. This widget is a good option for your unit if it generates lots of news stories and has a communications professional on staff. It is best practice not to duplicate stories in this widget already found in your rotator (if applicable) or another widget. 

News - Manual - One-Column options include:

  • News Item (3 minimum)
    • News Item 4 and 5 are optional.
  • Headline
    • No character limit.
  • Display Date (optional)
    • Day of Week (optional)
    • Month (optional)
    • Day of Month (optional)
    • Year (optional)
  • URL

Back to top

Links - Styled List

Screenshot of the text navigation widget in the Modern Campus CMS.

If you choose the small photo, rotator, or video option, you can opt to display an additional widget to the left or righthand side, including a "Links - Styled List" widget. This widget is a good option for units who need additional navigation on their homepage. Make sure not to duplicate links already found in your main navigation.

Links - Styled List options include:

  • Name
    • Name has a character limit of 20.
  • URL (3 minimum)
    • URLs 4-7 are optional.

Back to top

Text - One-, Two-, or Three-Column

Screenshot of the one-, two-, and three-column text widgets in the Modern Campus CMS.

This option provides an opportunity to display a block of text to welcome visitors or to display important information regarding your unit. It is not recommended for units that do not have a communication professional on staff. It can either be used as a one-column, two-column, or three-column widget.

Text - One-, Two-, or Three-Column options include:

  • Title
    • Title has a character limit of 25.
  • Text Box (limited WYSIWYG Editor)
    • One-column has a character limit of 400.
    • Two-column has a character limit of 950.
    • Three-column includes an additional hyperlink with an arrow.

Back to top

Full List of Widgets

  • Button(s) – Centered
  • Calendar – Automatic
  • Calendar – Automatic – Google
  • Calendar - Manual
  • Call to Action
  • Featured Story
  • Featured Story – Three-Column Grid
  • Links - Styled List
  • News – Automatic - One-Column
  • News – CMS Feed - One-Column
  • News – CMS Feed - One-Column Feature with Image
  • News – CMS Feed - One-Column with Image
  • News – CMS Feed - Two-Column with Image
  • News - Manual - One-Column
  • News - Manual - One-Column with Image
  • News – Manual - Two-Column with Image
  • Text – One-Column
  • Text – Two-Column
  • Text – Three-Column

Back to top