Content Page Template


The Content Page Template is used for general content pages in the department and office sections of the UVA Engineering site.

Content Entry Fields

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. It is also used as the link to the page when the page appears in search results (Google, Bing) and as the link to the page in the results of the keyword search used on the UVA Engineering School website.

It also is used to identify the page on the Content screen in the CMS.

title-field-content-in-browser-tab.png

Masthead

There are three options for the Masthead.

N/A

This hides the Masthead area. If Masthead content isn’t needed on this page, select this option.

masthead-options-field.png

Large Headline (1475x500)

Masthead Background (1475x500)

This field holds the background image for the masthead. Since this image is used as a background, alternate text is not needed. This is an optional field, meaning that if the Large Headline Masthead option is selected, it does not have to include an image.

masthead-background-field.png

Masthead Headline

This field holds the main headline for the Masthead.

masthead-headline-field.png

Masthead Subheadline

This field holds the subheadline for the Masthead. This is the smaller portion of the headline message that is positioned directly above the Masthead Headline.

masthead-sub-headline-field.png

How the Masthead Headline and Subheadline relate to one another

Note that the Subheadline is placed directly above the Headline. The two are meant to be used in conjunction with one another to create a single message, with the Headline containing the more impactful portion of the message.

Slider of Stories

This pulls in content from Impact Story callouts and Article pages. For this option, the content of up to three items can be pulled into the page to create a slideshow.  The slideshow is capped at three (3) articles.

masthead-articles-field.png

Ordering the items in the Slideshow

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

The top-to-bottom order of the items in the CMS translates to the left-to-right order of the items 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 Article pages chosen must have the Masthead Background field filled in to appear in the carousel. If the Article page does not have a Masthead Background image, the Article page will not display in the slideshow, even if it has been selected to appear in the slideshow.  If you notice an Article page is missing from a slideshow, check the Article page to see if it includes a Masthead Background image.

How to remove an article from the slideshow

If you wish to remove an Article page from the carousel, so the slideshow will have fewer than three articles, clear the title of the Article page completely from the text box so that the text box is empty. In the example below, the Article page title has been removed from the bottom text box.

masthead-articles-field-showing-article-removed.png

Introduction

This field holds the summary or introduction for the page. This functions as a brief introduction to the content of the page. This content is placed at the top of the page, immediately below the Title. The text will be displayed as a single paragraph on the website page. This means that if carriage returns are used in the content entry field to format the quote into multiple paragraphs (i.e. using the keyboard ENTER key to create multiple paragraphs), these will be removed when the content is rendered on the page.

introduction-field.png

Body

This field holds the main content of the page. It provides many options for formatting content, including multiple paragraphs, data tables, headings, images, and links.

body-content-field.png

Note that the Quote callout can be pulled into the content use the "E" button in the toolbar of the content editor. The quote will not be displayed in its final format in the editor, as shown in the screen capture below.

quote-embedded-in-editor.png

Left Column Callouts

This field is used to select the callouts to pull into the left column of the content page.

IMPORTANT: Only the Callout – Contact Information and Callout – News Feed callout types can be pulled into the left column.

left-column-callouts-field.png

Add Another Item

This button adds another callout to the group. The new callout is placed at the bottom of the group.

add-another-item-button.png

Changing the order of the callouts

The ordering of the callouts is changed by dragging them to new positions in the list. To drag a callout to a new position, left-click and hold the four-pointed arrow icon  to the left of the callout’s content fields and then drag up or down. When the callout is in the desired position, release the mouse button and the callout will "pop" into the new position.

The top-to-bottom ordering in the list translates directly to the top-to-bottom ordering of the callouts on the page.

How to remove a callout from the left column

If you wish to remove a callout from the left column, clear the callout title completely from the text box so that it is empty.

Content Callouts

This field is used to select the callouts placed in the main content area of the page, below the Body content. The following types of callouts can be pulled in:

  • Accordion
  • List (both manual and dynamic)
  • Media (single image, single video, and carousel)
  • Quote

content-callouts-field.png

Number of callouts that can be pulled in

This content area supports an unlimited number of callouts.

Add Another Item

This button adds another callout to the group. The new callout is placed at the bottom of the group.

add-another-item-button.png

Changing the order of the callouts

The ordering of the callouts is changed by dragging them to new positions in the list. To drag a callout to a new position, left-click and hold the four-pointed arrow icon to the left of the callout’s content fields and then drag up or down. When the callout is in the desired position, release the mouse button and the callout will “pop” into the new position.

The top-to-bottom ordering in the list translates directly to the top-to-bottom ordering of the callouts on the page.

How to remove a callout from the content callout list

If you wish to remove a callout from the content callout list, clear the callout title completely from the text box so that it is empty.

Related Links

This set of fields holds the content for a set of related links placed at the bottom of the article page, immediately above the footer. Each Link has three fields.

related-links-field.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 Stories link (displayed in a “box” below the Masthead Stories) 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).

Add Another Item

This button adds another link to the group. The new link is placed at the bottom of the group.

add-another-item-button.png

How to remove a link

To remove a Related Link, clear all of the fields for the link completely. If all fields are empty, the link won’t be displayed on the public website page.

Changing the order of the Related Links

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

The top-to-bottom order of the text fields translates directly to the left-to-right order on the public website.

How the Related Links appear on the website

The Related Links appear as "buttons" on the website. Each link is displayed as white text against a blue background, creating the look of a button. The links will order from left-to-right and in as many rows as needed, depending upon the length of the link text of each link.

related-links-display-on-website-page.png

When the links fit into a single row, the order goes from left to right. The example below shows how the ordering of the Related Links translates to their display on the website when the links are displayed in multiple rows. Display in multiple rows is usually caused by links having lengthy link text.

related-links-content-fields-mapping.png