Introduction

The purpose of this quick reference guide is to outline the intended uses of the One Column Page template on the UChicago Intranet for Sitecore content authors. The document also includes best practices for components most commonly used on this page template. 

If you are unfamiliar with the terms in this guide, you may find this Glossary helpful. If you are unfamiliar with navigating the Sitecore Ribbon, you may find this guide helpful.

Where to use the One Column Page template

The One Column Page template should be used primarily as a level one page on the Intranet. Most content authors will rarely use a One Column Page template since level one pages will most often be created by Intranet Administrators. While there are exceptions to the rule, like the Get Involved page, these should be rare exceptions.

Examples in use

• https://intranet.uchicago.edu/news-and-events
• https://intranet.uchicago.edu/our-people
• https://intranet.uchicago.edu/benefits-and-career
• https://intranet.uchicago.edu/policies
• https://intranet.uchicago.edu/tools-and-resources
• https://intranet.uchicago.edu/organization
• https://intranet.uchicago.edu/benefits-and-career/guide-for-new-hires-home
• https://intranet.uchicago.edu/news-and-events/podcasts
• https://intranet.uchicago.edu/news-and-events/announcements

Commonly used components

If you are unfamiliar with adding components to a page, you may find Introduction to Data and Components and Navigating the Experience Editor helpful. You can explore a list of all Sitecore components in the Sitecore Components List.

Default components

The One Column Page template does not come pre-populated with any components.

Recommended components

Breadcrumbs

The Breadcrumbs component allows content authors to set up automatic breadcrumb links to parent pages at the top of the page. The component uses the Organization Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit Breadcrumbs, navigate to your page in the Content Editor and find the Breadcrumb section. 

Basic Page Banner

Every page requires a page title to meet accessibility standards. For a One Column Page, we recommend using the Basic Page Banner component. This component uses the One Column Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit the Basic Page Banner, navigate to your page in the Content Editor, find the Content section and the Page Title field. Changing the Page Title text in the Content Editor will change the text used in the Basic Page Banner. 

If you would like intranet users to be able to favorite your page, you can add a Favorite Button to the Basic Page Banner. In the Content Editor, on your page, under the Favorite section, you will find a checkbox labeled Show Favorite Button.

Callout Tiles

Allows content authors to create grid-based parent containers, with the ability to add sub-items that can display an image, title, description, call-to-action button or link, and optional icon. Users can place up to three callout tiles per row. When adding this component to the One Column Page, create the data source in your page's data folder. 

Container fields

*Fields with an asterisk are required

• Tiles Per Row*: Editors can select to display one, two, or three tiles per row. 
• Card Background Color: Cards will be displayed with a default gray background, with the option to select a white background as an alternative.
• Has Background: Selecting this checkbox will make a gray background appear on your Callout Tile component, changing the background color of each individual tile to white in contrast.
• Has More Link: Selecting this checkbox will make a link appear in the upper right-hand corner of this component. This is intended to be used to link to "more" of whatever type of content you're displaying. For example, if you're displaying a list of events, the "more" button should take you to a page with more events. 
  • More Link Text
  • More URL
• Randomize Tile Order On Each Load: Selecting this checkbox will allow the order of your tiles to randomize each time a user loads or reloads the page.

Adding tiles

To add an individual Callout Tile, navigate to the Callout Tile you've created in the data folder of your page in the Content Editor. Right-click on the component. Click "Insert" and select "Callout Tile". You will be prompted to name your tile. We recommend using the title you intend to use on the card as the name.

Tile fields

*Fields with an asterisk are required

• Title*
• Description*
• Image: Recommended size is 830 by 500 pixels and should have alternative text; If you have multiple tiles, make sure to make all images the same height to ensure the boxes line up correctly. 
• Call to Action Text*
• Call to Action Link*: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
• Call to Action ARIA Label Text: If your call to action text is something generic like "learn more" or "register here" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your call-to-action text. For example: "Learn more about Safer Spaces" or "Register here to attend Safer Spaces."
• Call to Action Button Text
• Call to Action Button Link: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
• Call to Action Button ARIA Label Text: If your call to action button text is something generic like "learn more" or "register here" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your call-to-action button text. For example: "Learn more about Safer Spaces" or "Register here to attend Safer Spaces."
• FontAwesome Icon: Sitecore will display icons from FontAwesome if the correct icon text is put in this field. The list of available icons is on FontAwesome.com/v4
• Gif: We do not recommend using this field.
• Show Add to Calendar Link: Selecting this checkbox will enable a button labeled "Add to Calendar" to appear on your callout tile. This should only be used if you're using Callout Tiles to display events.
  • • Event Start Date: If you are using the "Add to Calendar Link" you need to set a start date and end date for your event. This is the date and time range that will be downloaded as a calendar event.
    • Event End Date

  

Embed Single Column

This component allows content authors to embed a video or widget on a single-column layout page. This is the component content authors should use if embedding a LiveWhale events widget onto a single-column page. When adding this component to the One Column Page template, create the data source in your page's data folder. 

Fields

*Fields with an asterisk are required

• • • Markup*: paste the embed code of the asset you would like to embed on the page into this box. In LiveWhale, you can find your calendar widget's embed code by clicking on the "Widgets" tab. The embed code will appear in red. Make sure to copy and paste the entire embed code.

Headline Bar

Allows content authors to display a full-width headline with a description and optional call to action link. When adding this component to the One Column Page template, create the data source in your page's data folder. 

Fields

*Fields with an asterisk are required

• • • Heading*: Type or paste the desired header text here with a maximum of 70 characters.
    • Description*: Type or paste the desired description text here with a maximum of 350 characters.
    • Call to Action Text: If you would like to include a link, type or paste the direct link text here.
    • Call to Action Link: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
    • ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information. 

Headline Text Bold

This component allows content authors to create a large bold headline with the ability to add an optional description and button link. When adding this component to the One Column Page template, create the data source in your page's data folder. 

Fields

*Fields with an asterisk are required

• • • Link Text: If you would like to include a link, type or paste the direct link text here.
    • Link: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
    • ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information. 
    • Heading*: Type or paste the desired header text here with a maximum of 70 characters.
    • Teaser: Type or paste your desired description text here.
    • Alignment*: Select Center or Left alignment from the drop-down menu. Center is usually recommended.
    • Additional CSS classes: leave blank

Headline Text Small

This component allows content authors to create a small headline with an optional link to the right. This component usually serves as a sub-header. When adding this component to the One Column Page template, create the data source in your page's data folder. 

Fields

*Fields with an asterisk are required

• • • Link Text: If you would like to include a link, type or paste the direct link text here.
    • Link: External links (leading away from the Intranet) should open in a new window. Internal links (links within the Intranet) should open in the same window.
    • ARIA Label Text: If your link text is something generic like "learn more" you need to include ARIA label text to describe the link to a screen reader. ARIA label text should always start with your Call to Action Text and then add additional information. 
    • Headline*: Type or paste the desired header text here with a maximum of 70 characters.

News Featured

Allows content authors to display selected news stories. Each news item is added manually. One, two, three, four, or five items may be displayed. When adding this component to the One Column Page, create the data source in your page's data folder. 

Fields

*Fields with an asterisk are required

• • • News*: Select the news stories you would like to feature from the content tree in the left column
    • Layout*: Choose the number and layout of stories you would like to appear
    • See all news URL: If a link is placed here, "see all news" will appear in the upper right corner of the component as linked text. 

Resources Listing

Allows content authors to create button lists for resources that have been uploaded to the Media Library and allow direct downloads. This component is a good alternative for units that house their files in external services like Box. This component is a better alternative to creating a list of linked documents in a Rich Text field. 

Fields

• • • Title: Type a title for this group of resources
    • Resources: Select resources from your media library by finding them in the Content Tree and moving them into (or out of) the "Selected" box with the arrow buttons. 

Rich Text

If you would like to include some introductory text on your page, we recommend using the Rich Text components. There are five Rich Text components available. You should always start with Rich Text 1, and if you need additional components, use Rich Text 2, Rich Text 3, Rich Text 4, and Rich Text 5 in order. This component uses the One Column Page template as its data source, so you do not need to create a new data source in the data folder. 

To edit Rich Text 1-5, navigate to your page in the Content Editor, find the Rich Text section and the corresponding Rich Text field. If you are unfamiliar with how to edit Rich Text please refer to the Rich Text section in Navigating the Content Editor. 

Please note that it's extremely important to make sure you are not copying over formatting from another source into Sitecore. This can easily lead to accessibility issues and create inconsistent formatting across our site. We highly recommend using the "Paste Plain Text" feature to avoid this issue.

Video Inline

Allows content authors to embed a full-width video that is hosted externally, such as YouTube. Content authors can also add a heading, still image, and set the width of the video. When adding this component to the One Column Page, create the data source in your page's data folder.

Fields 

• • • Embed Script: paste the embed code from YouTube here. You can find your YouTube embed code by selecting "Share" and "Embed" on the YouTube video. Copy the entire script that appears and paste it into this field in Sitecore.

• • • Heading: If you would like a heading to appear above the video on your page, you can insert the heading here. 
    • Still Image: If you would like the video to show a different image than the default before a visitor presses play, you can insert that image here. Make sure it has the same dimensions and pixel size as the video you're displaying.
    • Maximum Video Width (in pixels): The height and width of your video will be set in the embed code (in the example above it is 560 by 315 pixels, but if you would like the image width to be smaller, you can insert the maximum pixel width here. To make the image larger the width and height must be changed in the embed code.