Working with pages

The 2015 templates to not prescribe specific page layouts. Instead, the templates offer your the ability to build your own page layouts according to your taste and content needs. As such, there is only a single page type for new pages: Page.

Creating pages

New > Page

System datadef fields

Datadef elelment

Description

System Name

This is how the page will be referenced on the web and in Cascade. Please follow these guidelines:

Use only lowercase letters and numbers. Do not use uppercase letters or special characters.
Separate words with hyphens. Do not use spaces.
Names should be brief, but descriptive of their contents.

Parent Folder

This is the location where the page will be created.

Inline Metadata

Datadef element	Description
Title	The title of the page, displayed in the browser tab and (potentially) other places. Be descriptive, but brief. The 'Title' should be similar to the 'System Name', but crafted for human-readability rather than machine-readability.
Description	A brief description of the page contents. One or two sentences should suffice. This information is used by search engines to generate 'snippets' that are displayed along side search results.

Internationalizing page metadata

The Custom Metadata section of the Metadata pane is used to apply internationalization to the page title and description. Refer to 'Internationalization'.

Page settings

The page settings section allows you to make certain page-specific customizations. The options set in this section apply only to the page itself and to do apply to any other pages on the Site.

Custom CSS and Javascript

Datadef element	Description
Settings > Assets > Include custom CSS	Indicates whether custom styles should be applied to the page. Refer to 'Configuring customizations'.
Settings > Assets > Include custom JavaScript	Indicates whether custom scripting should be applied to the page. Refer to 'Configuring customizations '.

Customizing the page header

The default page header places the site masthead over UCI's brand blue. The following fields are available to place the masthead over a custom image or video instead.

Images and videos used for header backgrounds are intended for decorative purposes only to set the tone for the page or site. These elements are not intended to convey content explicitly. Videos are automatically muted and looped.

Datadef element	Description
Settings > Header > Type	Indicates the type of header to be used for the page: Default - the masthead is placed over UCI's brand blue. Jumbotron - the masthead is placed over an image. Videotron - the masthead is placed over a video.
Settings > Header > Jumbotron/Videotron > Aspect ratio	Used to set the aspect ratio of the jumbotron or videotron: auto - the aspect ratio is set according to the dimensions of the content laid over the image or video. maximize - the jumbotron or videotron will be sized to occupy all available screen space in the browser window. 3:2 - common native aspect ratio for photos. 16:9 - common native aspect ratio for videos. custom - select this option to set a custom aspect ratio.
Settings > Header > Jumbotron/Videotron > Custom aspect ratio (w:h)	Appears only if 'Aspect ratio' is set to 'custom'. Provide the aspect ratio in w:h format, with a colon separating the width value from the height value.
Settings > Header > Jumbotron > Background image	Applies only to jumbotron headers. Identifies the image to be used as the header background. Tips: Large images look best here (1600 to 2000 pixels wide), but be mindful of the balance between image quality and file size. Page load time can be affect by heavy images.
Settings > Header > Videotron > Video	Applies only to videotron headers. Identifies the video to be used as the header background. Tips: Videos in mp4 format offer the greatest browser compatibility. Large videos can significantly affect page load times. Be mindful of playback duration and resolution (720p is usually sufficient). Large videos can be optimized for the web with Handbrake.
Settings > Header > Videotron > Still frame image	Applies only to videotron headers. Identifies the image to be displayed when the background video cannot be loaded or played. Tips: Use the first frame of the background video as the still frame image. Ensure the image dimensions match the video dimensions.
Settings > Header > Jumbotron/Videotron > Additional content	Provide any additional content here to be displayed in the page header below the masthead. Accessibility note: do not insert headings here. You can achieve the look of headings using the provided wysiwyg styles. Refer to 'Styling wysiwyg content'.
Settings > Header > Jumbotron/Videotron > Content alignment	Aligns the additional header content to either left or center.

Layout

These settings allow you to include various layout-level element on the page.

Datadef element	Description
Settings > Layout > Include breadcrumbs	Set to 'yes' to have breadcrumbs links included above the main page content. Breadcrumbs indicate to a user where a page exists in the context of the site architecture.
Settings > Layout > Include secondary navigation	Set to 'yes' to have a secondary navigation element included on the left side of the main content. Refer to 'Secondary navigation'.
Settings > Layout > Secondary navigation	Appears only if 'Include secondary navigation' is set to 'yes'. Indicates the secondary navigation to be used.
Settings > Layout > Include sidebar	Set to 'yes' to include a sidebar to the right of the main content.

Page heading

The page heading is the top-most hierarchical content element on the page and used to identify the overall content of the page. It is similar to the page title, the difference being that it is display on-page instead of in the browser tab.

Datadef element	Description
Page heading > Type	Indicates how the page heading should be displayed. text - displays the heading a plain text. jumbotron - adds a background image to the heading. videotron - adds a background video to the heading. custom - allows you to enter custom heading content or code. Note: this option requires knowledge of coding for Bootstrap 3. Proceed with caution. hidden - the heading does not display.
Page heading > Auto-generate heading text	Only appears if 'Type' is set to 'text', 'jumbotron', or 'videotron'. When set to 'yes', the page title will be used as the page heading.
Page heading > Jumbotron/Videotron > Width	Only appears if 'Type' is set to 'jumbotron' or 'videotron'. Indicates the width of the heading background image or video. container - the background image or video with is constrained to the page container width, which varies depending on screen size: Large: 1170px Medium: 970px Small: 750px window - the background image or video width matches the width of the browser window. Note: this option is not compatible with page layouts containing secondary navigation or sidebar elements.
Page heading > Jumbotron/Videotron > Aspect ratio	Used to set the aspect ratio of the jumbotron or videotron: auto - the aspect ratio is set according to the dimensions of the content laid over the image or video. maximize - the jumbotron or videotron will be sized to occupy all available screen space in the browser window. 3:2 - common native aspect ratio for photos. 16:9 - common native aspect ratio for videos. custom - select this option to set a custom aspect ratio.
Page heading > Jumbotron/Videotron > Custom aspect ratio (w:h)	Appears only if 'Aspect ratio' is set to 'custom'. Provide the aspect ratio in w:h format, with a colon separating the width value from the height value.