Page Comparison

Sections

The Engineering homepage is divided into five sections:

• Hero

• Intro

• Programs

• Spotlights

• Why USD?

• Audiences

Most of these six sections are further divided into sub-sections.

There are two additional portions of the home page, the Engineering MyPostings area, and the Contact

Panel. Both of those are controlled outside of the main index page for the home page.

Instructions for editing these two areas are also listed below in order of appearance on the Engineering home page.

Anchor
hero hero

Hero

The Intro Hero section contains three Button fields.

Image Removed

• Text

  Name: Displays the text in the button.

• URL

  Type

  :

  Determines whether the URL is internal to Cascade or external.Internal or External URL: This field depends on which option is select for URL Type. If Internal is selected, then this field will use

  This field uses the Cascade internal-navigation button to create an internal link.

   Otherwise, if External is selected, a field will appear so that you can copy and paste a URL from an external website.

Image Removed

The Hero section is limited to three Button entries.

Anchor
intro intro

Intro

The Intro section contains the following fields:

• Headline: Displays the heading of the section under the image on the homepage.

• Lead: Displays the lead under the headline.

The Intro section also contains three Stats.

• Number: Displays what is usually a numerical stat (i.e. percentage, number, dollar amount, etc.). The symbol still has to be included, e.g. 75%.

• Blurb (first line): Displays second line, which is supporting text for the number.

• Blurb (second line), optional *: Displays second line, which is the continuation of the first line of text, if needed.

• Blurb (third line), optional *: Used

  optionally

  only for disclaimers or sources, displays a third line, which is the continuation of the second line of text

  , if needed

  . This will italicize the text.

* The second and third lines are helpful if you would like to control the break points of the text portion of a stat. If used, the text entered will be formatted in the same way as the first line of text entered.

Programs

The Programs The Stats can be reordered using the up and down arrows to the right of each button section.

The Intro section is limited to six programs.For this documentation we will chunk the Programs section into 3 three Stats entries.

Anchor
programs programs

Programs

Each individual program within the Programs section is displayed in the three sub-sections below:

• Program (

  details

  Details)

• Program (

  courses

  Stats)

• Program (

  stats)

Image Removed

• Courses)

The Programs section is limited to six entries.

Program (

Details)

When On the front-facing web page, when a user clicks on one of the six program cards, it swaps out all of the six cards with a panel of information for just the program that was selected/ clicked.

The details section of Programs a Program has the following fields. The fields in blue type below are shared between initial page load (1st screenshot in middle column) and program information displayed once the user has selected/clicked a program (2nd screenshot in middle column).

For initial page load, the program cards are displayed:
(1st screenshot in middle column)

• Name (Short, for tab): Displays the program name in the intra-navigation tab.

• Name (long): Displays the full program name in the card in large type.

• Degree: Displays the type(s) of degree above the Name (long). 

• Icon: Icon class name for the program, displays the icon above the Degree and Name (long). All available icons can be viewed at http://www.sandiego.edu/brand/web-and-mobile/icons/. CAUTION: These icons are not linked. If you change it here, each icon through the site will have to be manually updated to match.

• Program Background Image: Used to link an image to the field. The

  help text states that the

  image must be 640x360 pixels. These images are linked to multiple areas of the site. So to update the image, you should go to the image asset and update it, then publish to all the relationships.

• Image Description (alt): Used for screen readers. Follow the directions for creating accessible image descriptions.

For selected/clicked program card, the program information panel is displayed: 
(2nd screenshot in middle column)

• Name (Short, for Tab): Displays the tab text for the program, this should be the program's name shortened, but not abbreviated.

• Name (long): Displays the full program name in the card in large type.

• Degree: Displays the type(s) of degree above the Name (long). 

• Program URL:

  The internal Cascade program landing page that sets

  Sets the link destination for the Explore Program button. It utilizes internal Cascade links only.

• Description: Displays a very short description/blurb for the program using a rich text field (WYSIWYG). Please limit to two sentences at most, and also include an internal Learn More link that points to the program's landing page in Cascade.

• Courses Link Text: Displays the link text in the panel's bottom, right-hand corner for navigating to a page with all of the program's courses.

• All Courses URL (if internal to Cascade) *: Use this page selector to internally select the program's course page from within Cascade. 

• All Courses URL (if external, like PCE) *: Use this text field to copy and paste a URL from an external (non-Cascade) web page, such as PCE.

* Use one or the other of these two fields to link to a program's course page, but not both.Image Removed

Image Added

Image Removed

Image Added

Program (

Stats)

The Stats section of a program's information panel utilize utilizes the following fields:

• Number: Displays the stat entered, can be alphanumeric and contain special characters.

• Blurb: Displays the number's accompanying text. Typically alpha characters only.

The Stats can be reordered using the up and down arrows to the right of each button section.

The Stats section is limited to four entries.Image Removed

Program (

Courses)

The Courses section of a program's information panel utilize the following fields:

• Image: Used to link an image to the field. The

  help text states that the

  image must be 640x360 pixels.

• Image Description (alt): Used for screen readers. Follow the directions for creating accessible image descriptions.

• Number: Displays a courses alphanumeric designation, such as CS 101, GENG

  101

  201, etc.)

• Name: Displays the course's title.

• Description: Displays the course's description/blurb

  .
• Course URL (if internal to Cascade) *: Use this page selector to internally select the program's course page from within Cascade. 
• Course URL Anchor (if internal to Cascade): 
• Course URL (if external to Cascade, like PCE) *: Use this text field to copy and paste a URL from an external (non-Cascade) web page, such as PCE.

* Use one or the other of these two fields to link to a program's course page.

Image Removed

Image Removed

Spotlight

Image Removed

• .

The Courses can be reordered using the up and down arrows to the right of each button section.

The Courses section is limited to three entries.

Anchor
spotlights spotlights

Spotlights

This section is not connected to MyPostings.

Each of the spotlights within the Spotlights section contains the following fields:

• Headline: Displays the text which appears on the very top of the spotlight.

• Subhead: Displays the text which appears just below the Headline.

• Quote: Displays the text entered into the plain text field.

• Author: Displays the author's name. Do not include the hyphen, it is added automatically. The data entered into this field also gets used as the image's alt description for accessibility.

• Image: Used to link an image to the spotlight. The image must be 640x360 pixels.

• Link Text: Displays the text used to link the user to another section, utilizing the “Spotlights Listing URL” field below.

• Spotlights Listing URL: Used to select the page within Cascade that this item will link to.

• Detail Page URL: Used to override the “Spotlights Listing URL” if user wants a spotlight’s arrow link to point to a specific URL.

The Spotlights section can contain one or multiple spotlights. There is not a limit to the number of spotlights allowed.

Anchor
mypostings mypostings

MyPostings

The News and Events section of the homepage are dynamically fed from MyPostings. To learn more about which options in MyPostings to use to have your news and events display on the homepage, visit the Engineering MyPostings documentation.

Why Engineering

The Why Engineering section is limited to three entries.

Log in to the MyPostings system

Anchor
whyusd whyusd

Why USD?

The Why Engineering section is divided into three Items, each of which contains a Content and a Button option.

The Content options contain the following fields:

USD section has two initial fields that display before the images:

• Headline: Displays the text which appears on the very top of the section

  overlay. Use the <br/> tag to create a return break in the paragraph

  .

  Text

• Subhead: Displays the text which appears

  inside of the background image. Use the tags <em> and </em> to enclose any text intended to appear in italics.Button Text: This text only displays for screen readers. Text should be limited to two or three words. Examples include, "Learn more." or "Visit." 

  as a lead just below the Headline.

Why USD has four sections. Each section is divided into four "items." Each item contains the following fields:

• Image: Used to link an image to the item. The image must be 640x360 pixels.

• Image Description (alt): Used for screen readers. Follow the directions for creating accessible image descriptions.

• URL

  Type

  :

   Determines whether the URL is

  Used to select the page within Cascade that this item will link to. This element can only use URLs internal to Cascade

  or external

  .

• Internal or External URL: This field depends on which option is select for URL Type. If Internal is selected, then this field will use the Cascade internal-navigation button to create an internal link. Otherwise, if External is selected, a field will appear so that you can copy and paste a URL from an external website.
• Background Image: Displays the image used in the background. The image should be 2500x1500 pixels. To change any background image, submit a web request.

The Button options contain the following fields:

• Icon/Stat: Can use either an icon or a number. For an icon, it's listed as <span class="icon icon-medal2"><span class="show-for-sr">globe</span></span> so that icon-medal2 is the name of the icon to display. See this page for a list of icons and their names. The word "globe" here is used to describe to screen readers what the icon is. If using it for a number, simply type in the desired number. Follow the directions for creating accessible image descriptions.
• Text: Displays

  Title: Displays the item's title, just below the photo. The title will link to whichever page is chosen for the URL field.

• Description: Displays the item's description/blurb using a rich text field (WYSIWYG).

The Items can be reordered using the up and down arrows to the right of each button section.

The Why USD area is limited to four sections.

Anchor
personas personas

Audiences

The Audiences section has two initial fields that display before the Buttons:

• Headline: Displays the text which appears on the very top of the section.

• Subhead: Displays the text which appears as a lead just below the Headline.

The three Buttons each contain the following fields:

• Name: Displays the text which appears on the button.

MyPostings

The News and Events section of the homepage are dynamically fed from MyPostings. To learn more about which options in MyPostings to use to have your news and events display on the homepage, visit the Engineering MyPostings documentation.

• URL: Used to select the page within Cascade that this item will link to. This section can only use URLs internal to Cascade.

Do not reorder the items in this section.

The Audiences section is limited to three entries, referred to as Buttons.

Anchor
contact contact

Contact Panel

The Contact Panel is controlled through the _site-setting-main block under the _site-settings folder. Contact Corinna Lewis by Michelle Sztupkay by emailing michelles@sandiego.edu.

View the home page site settings block in Cascade