Department Landing Page Template


Content Areas

Title

This field holds the title for the page. The Title appears in the browser tab when the page is viewed on the public website.

title-field-in-browser-tab.png

It will also display when the page in search results (Google, Bing) and in the results of the search used on the Engineering School website.

It also is used to identify the page within the CMS.

page-title-field.png

Department Name

This field holds the full name of the department. The content of this field appears at the top of the page. The maximum number of characters that can be entered into this field is 65.

department-name-field.png

Header Menu

This specifies the menu to display immediately below the Department Name. The menu is displayed within a gray bar running the entire width of the page in standard browser view and appears when the menu button  is clicked in mobile view.

header-menu-field.png

Masthead

There are two options for Masthead display.

Impact Stories

For this option, the content of up to three Impact Articles can be pulled into the page to create a slideshow.

Ordering the Impact Stories in the Slideshow

To change the ordering, left-click on the  icon to the left of the article field and hold. Then drag the article to the desired position in the list.

The top-to-bottom order of the article fields in the CMS translates to the left-to-right order of the articles in the slideshow on the public website. The article at the top of the list will be the article visible in the slideshow when the page is initially viewed by a site visitor.

IMPORTANT: The articles chosen must have the Masthead Background field filled in to appear in the carousel. It is required for this display. If you notice an article is missing, check the article to see if that field has been filled in.

Images (1475x500 pixels)

For this option, a series of images is added to the page. These create an image slideshow of up to three images. The number of images is set.

Masthead Type Selector

To display the Masthead images, the Masthead Type Selector is set to the Images option.

masthead-type-selector.png

Alternate text field – This field holds the alternative text for the image. Make sure to enter text into this field that provides a description of what’s pictured in the image.

Ordering the Images in the Slideshow

To change the ordering, left-click on the  icon above the top left corner of the image and hold. Then drag the image to the desired position in the list.

The top-to-bottom order of the image fields in the CMS translates to the left-to-right order of the images in the slideshow on the public website. The image at the top of the list will be the image visible in the slideshow when the page is initially viewed by a site visitor.

Removing an image from the Slideshow

To remove an image from the slideshow, clear the content from all of the fields for the image.

Introduction

Intro Background (1475x500 pixels) 

This holds the background image for the Introduction area. The image is a background image, so it does not require alternate text.

introduction-background-image.png

Heading

This field holds the heading for the Introduction area.

introduction-heading-field.png

Body

This field holds the introduction content.

introduction-body-field.png

Graduate Programs Link

This field holds the link to the graduate programs offered by the department.

graduate-programs-link-field.png

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/gradute-programs
Incorrect format: www.virginia.edu/chemical-engineering/gradute-programs

Undergraduate Programs Link

This field holds the link to the undergraduate programs offered by the department.

undergraduate-programs-link-field.png

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/undergradute-programs
Incorrect format: www.virginia.edu/chemical-engineering/undergradute-programs

Latest News

This field holds the article pages pulled into the page. An exact count of two or four articles must be selected, or this section will not render properly.

latest-news-field.png

If fewer than two articles are selected, this section will not display on the page. If fewer than four articles are selected, the content of only the first two articles will display on the page.

IMPORTANT: Make sure that all selected articles include a thumbnail image. Only articles with thumbnail images will be displayed in the Latest News area.

Ordering the Latest News

To change the ordering, left-click on the four-pointed arrow icon to the left of the article and hold. Then drag the article to the desired position in the list.

The top-to-bottom order of the articles in the CMS translates to the left-to-right order of the articles in the Latest News on the public website.

Removing a news item

To remove a news item, clear it completely from the text field.

More News Link

The Link Title field holds the text for the link. It is limited to 128 characters. The URL field holds the URL (web page address) for the link.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/news
Incorrect format: www.virginia.edu/chemical-engineering/news

more-news-llink-field.png

Important Dates

This area holds a link to more events.

The Link Title field holds the text for the link. It is limited to 128 characters. The URL field holds the URL (web page address) for the link.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/events
Incorrect format: >www.virginia.edu/chemical-engineering/events

important-dates-field.png

Our Faculty

This field specifies the faculty profiles to pull into the page. Select the appropriate department. If N/A is selected, random faculty profiles are pulled in.

our-faculty-field.png

More Faculty Link

The Link Title field holds the text for the link. It is limited to 128 characters. The URL field holds the URL (web page address) for the link.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/faculty
Incorrect format: www.virginia.edu/chemical-engineering/faculty

more-faculty-link-field.jpg

More About Us

This holds the content for additional information about the department. The information can be displayed in either two or three sections.

Include More Section checkbox

The More About Us section is optional. Checking this checkbox displays it and unchecking this checkbox hides it.

include-more-section-checkbox.png

More Section One

This holds the content for the first section.

More Section One Link

The Link Title field holds the text for the link. It is limited to 128 characters. The URL field holds the URL (web page address) for the link.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: Incorrect format: www.virginia.edu/chemical-engineering/more

More Section Two

This holds the content for the second section. It is formatted in the same way as the first section.

More Section Two Link

The Link Title field holds the text for the link. It is limited to 128 characters. The URL field holds the URL (web page address) for the link.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: http://www.virginia.edu/chemical-engineering/more
Incorrect format: www.virginia.edu/chemical-engineering/more

More Section Three

This holds the content for the second section. It is formatted in the same way as the first section. This section can hold content like the first two sections or hold Social Media links.

If the Content option is selected, the same content entry fields as those in Sections 1 and 2 are used.

If the Social Media option is selected, a series of text fields is used.  The text field labels indicate which social media website to enter.

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: https://www.twitter.com/uva-chem-eng
Incorrect format: www.twitter.com/jsmith

Open URL in a New Window

The Open URL in a New Window checkbox controls if the link is opened in the same browser window/tab as the Engineering Website (unchecked) or if the link is opened in a new browser window/tab (checked).

To remove a website, clear it completely out of the text field. If the text field is empty, it won’t be displayed on the public website page.

Video

This field holds the Media content type to be pulled into the page. The Media content type selected must be the “Video” option.

video-field.jpg

Stats and Facts

The fours Stats and Facts callouts are positioned directly below the Trending Stories. Each stat/fact is composed of:

  • a symbol before the number (such as a dollar sign)
  • a number
  • a symbol after the number (such as %)
  • a brief description

Stats and Facts Background (1500x600 pixels)

This is the background image behind the stats and facts content. The page will apply a blue overlay to the image. This is done through the styles of the page. The image you use should be a full-color image.

stats-and-facts-background.jpg

Stat/Fact Content Fields

stats-and-facts-content-entry-fields.png

1. Fact Icon

The icon is placed at the top of the stat/fact. The icon is selected by choosing its name from a drop-down menu. See "SVG Icon Options" for a list of the available icons.

 

2. Symbol Before

This is a keyboard character that will appear in front of (before) the Number. You may enter any single keyboard character into this field.

3. Number

This is the number that is displayed. The number can be up to 10 characters, including decimal point.

4. Symbol After

This is a keyboard character that will appear after the Number. You may enter any single keyboard character into this field.

5. Description

This is displayed below the number and symbols. The maximum length is 100 characters, including spaces between words and punctuation.

Stats and Facts Ordering

The ordering of the stats and facts is changed by clicking on the four-pointed arrow icon next to a stat/fact and dragging it to a new position in the list. The top-to-bottom ordering in the list translates to a left-to-right ordering on the home page.

stats-and-facts-ordering-on-page.png

More Stats Link

This link is centered below stats and facts items.

more-stats-link-fields.png

1. Title
This is the text for the link.

Maximum length: 128 characters, including spaces between words and punctuation

2. URL

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: https://www.google.com
Incorrect format: www.google.com

Maximum length: 2048 characters

3. Open URL in a New Window

When checked, this opens the More Stats link in a new browser window or tab (depending upon how the user's browser is configured and the device on which the visitor is viewing the site).

4. Link "title" attribute
This attribute creates a "tooltip" that displays the text when a user places the mouse cursor on the link. It is also used for accessibility purposes to provide an additional description of the link. The title attribute maximum length is 128 characters, including spaces between words and punctuation.