Intranet Template: Two Column Page

Introduction

The purpose of this quick reference guide is to outline the intended uses of the Two 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 Two Column Page template

The Two Column Page template should be used to build pages below level one on the Intranet. Most new pages will be built using this template unless you are building a new subsite on the Intranet in which case you should use the Sub Site Home Page and Sub Site Interior Page Templates.

Examples in use

• https://intranet.uchicago.edu/benefits-and-career/benefits/be-well-uchicago
• https://intranet.uchicago.edu/benefits-and-career/guide-for-new-hires-home/before-you-arrive
• https://intranet.uchicago.edu/tools-and-resources/campus-resources

Commonly used components

If you are unfamiliar with how to add components, 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 Two Column Page template comes prepopulated with the following components. If you decide not to use any of these components, they must be removed from the page in the Experience Editor before publishing to avoid accessibility issues.

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 Two Column 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. 

Fields:

• Hide in Breadcrumbs: Selecting this checkbox will hide the current page from Breadcrumbs on any subpages where Breadcrumbs are used.
• Breadcrumb name: If you wish to change the name of your Breadcrumb to something other than the page title, you can do so here. This is not recommended unless you have a very long page title.
• Start Breadcrumb: Selecting this checkbox will start Breadcrumbs on this page rather than on the parent pages. 

Basic Page Banner

Every page requires a page title to meet accessibility standards. For a Two Column Page, we recommend using the Basic Page Banner component. This component uses the Two 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.

Left Nav

The Left Nav component allows content authors to create multi-item navigation menus on two-column layouts, with the menu in the smaller column. This component is intended to be used to create a navigation that mimics the structure of the set of pages. This component should NOT be used as a list of related links. 

When creating associated content for a Left Nav component, we recommend creating the content in the global data folder rather than in your page's data folder. This will allow you to reuse the same Left Nav component on all the pages within your content tree.

 

In order to add links to your Left Nav, right-click on the data source and insert Left Navigation Link With Icon. 

You will be prompted to enter a name for your new item. The name should match the text you intend to use for the link. This Left Navigation Link With Icon you've created will be your homepage for this collection of pages. All other links should be created as sub-items of this first link. 

Fields for Left Navigation Link with Icon: 

*Fields with an asterisk are required

• Icon: You have the option to select an icon from a list of available icons that will appear to the left of your link text.
• Link*: Insert your link as an internal link (ideally, anything linked to from the left nav is a page that lives on the Intranet). Internal links should open in the same window.
• Link Text*: This should be the title of the page you're linking to.

Fields for Left Navigation Link:

*Fields with an asterisk are required

• Use Highlight Style: Leave unchecked
• Link*: Insert your link as an internal link (ideally, anything linked to from the left nav is a page that lives on the Intranet). Internal links should open in the same window.
• Link Text*: This should be the title of the page you're linking to.
• ARIA Label Text: If your Link Text isn't very clear, you can use ARIA Label Text to provide additional information to screen readers. Please note that your ARIA Label Text must begin with the same text used in Link Text.

Rich Text 1 and 2

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 Two 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.

Quick Links

Allows content authors to create a two-column layout section, where multiple button links with optional icons can be created. The data source for your Quick Links component can be found in the data folder of your page. 

Fields for Container: 

*Fields with an asterisk are required

• Use Highlight Style: Leave unchecked
• Link: If populated along with the Link Text field, a link will appear in the upper right corner of this component.
• Link Text: If populated along with the link field, this text will appear in the upper right corner of this component.
• Heading*
• Use Text Links with no Icons: If you select this box, your links will display like the view below rather than the primary example above.

Fields for Links: 

*Fields with an asterisk are required

• Link Text*: This is the text that will appear on the 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.
• ARIA Label Text: You will most likely leave this field blank, but 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 link text and then add additional information. 
• Icon: You have the option to select an icon from a list of available icons that will appear to the left of your link text.

Link Listing

Allows content authors to create a three-column list with a title at the top, and the ability to create multiple links with titles and descriptions. The data source for your Link Listing component can be found in the data folder of your page.

 

Fields for Link Listing:

*Fields with an asterisk are required

• Heading*: this is the heading text for this component. "UChicago Creative Resources" in the example above

Fields for Links:

*Fields with an asterisk are required

• Description: This rich text field allows you to write a description for your link and you can include more links through linked text here, if needed.
• Use Highlight Style: Leave unchecked
• 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.
• Link Text*: This is the linked text that will appear on the page.

Recommended components

Accordion Simple

Allows content authors to create an accordion that allows users to navigate multiple pieces of related content by expanding and collapsing sections. Each section has a flexible rich text editor and is displayed in a single column. When adding this component to the Two Column Page, create the data source in your page's data folder. To add items to your accordion, right-click on the data source and select Insert and then Accordion Item.

Fields for Accordion:

*Fields with an asterisk are required

• Accordion Main Title*: Title of the component. "General" in the example above. 
• Enable Toggle Functionality: Leave unchecked
• First Accordion Item Open: Check this box if you would like the first item to be open by default. Otherwise, all accordion items will start closed. 

Fields for Accordion Item:

*Fields with an asterisk are required

• Simple Accordion Title*: This is all that will appear when your accordion item is collapsed.
• Simple Accordion Description*: A rich text field that allows you to include text, formatting, links, and more. 

Callout Box

Allows Intranet content authors to place a colorful, outlined box with a header, description, and button in the small column of a two-column page, or in the Main Header of the Intranet navigation. Users also have the option of adding a background image if desired. Several color themes are available. 

We recommend using a callout box to call special attention to a linked resource. When adding this component to the Two Column Page, create the data source in your page's data folder. If you intend to use the same callout banner on multiple pages, you can create the data source in the global Callout Box data folder. This will allow you to use this same data source for multiple pages. 

Fields:

*Fields with an asterisk are required

• Heading: Text placed here appears in a colorful box at the top of the component. In the example above, this is "Campus Messages."
• Description*: The description appears in the main body of the component. In the example above, this is "See more recent messages from the University."
• Call to Action*: 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.
• CTA Text*: This text appears in a button on the component. In the example above, this is "Announcements Home."
• Background Image: If you would like your callout box to have an image in the background, you can insert one here. If you choose to include a background image, your Heading will not appear. See examples above. Recommended image size is 400 by 400px. It should have a clear file name and should be uploaded into an appropriate folder in the Media Library. All images uploaded must include alternate text. Learn more about uploading to the media library with alt text here.
• Theme: You can choose from three color treatments for callout boxes without an image, and three for a callout box with an image. DO NOT USE LIGHT GOLDENROD (it does not meet accessibility standards.)

Embed Two Column

This component allows content authors to embed a video or widget on a two-column layout page. This is the component content authors should use if embedding a LiveWhale event widget onto a two-column page. When adding this component to the Two 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 Two 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 Two 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 Two 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.

Image with Caption

Allows content authors to display a full-width image with an optional caption. When adding this component to the Two Column Page, create the data source in your page's data folder.

Fields: 

*Fields with an asterisk are required

• Image*: Images for this component should be at least 1000px wide. Height can change depending on your preference, but if you're unsure, 600px height is standard. It should have a clear file name and should be uploaded into an appropriate folder in the Media Library. All images uploaded must include alternate text. Learn more about uploading to the media library with alt text here.
• Caption*: Use this space to add a caption for your photo. A brief description and photography credit is recommended, but if you would like to leave the caption blank, just insert a space. 

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. 

 

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 Two 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.