Working with pages

The 2015 templates do 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. The process of working with pages is as follows:

Add one or more sections to the page.
Add one or more rows to each section.
Add one or more widgets to each row.

Page

Section

Row

Widget

Row

Widget

Section

Row

Widget

Row

Widget

Quick Tip: the datadef can become difficult to navigate if you put a lot of content on the page. To help reduce the content clutter when working with a page datadef, you can collapse and expand groups of content by clicking on the group label.

An expanded datadef group. A collapsed datadef group.

Creating pages

New > Page

Creating a 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 Classes

You can provide a space-separated list of classes in the 'Page classes' datadef field. These classes are applied to the <body> element and may be useful for styling purposes.

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, but you are able to place the masthead over a custom image or video instead. Note that this setting is page-by-page and not sitewide.

Example videotron header.

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. Refer to 'Jumbotrons and videotrons '.
Videotron - the masthead is placed over a video. Refer to 'Jumbotrons and videotrons '.

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 displayed 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. Refer to 'Jumbotrons and videotrons'. videotron - adds a background video to the heading. Refer to 'Jumbotrons and videotrons '. 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 > Alignment	Only appears if 'Type' is set to 'text', 'jumbotron', or 'videotron'. Indicated whether the heading text is left- or center-aligned.
Page heading > Text	Only appears if 'Type' is set to 'text', 'jumbotron', or 'videotron' and 'Auto-generate heading text' is set to 'no'. The text used as the page heading.
Page heading > Set internationalization	Used to apply internationalization to the page heading Refer to 'Internationalization'.

Example text heading.

Above: a page with a text heading.

Example jumbotron heading.

Above: a page with a jumbotron heading.

Sections

Sections are used to contain and organize your page content. You can add and remove sections with the + and - toggles.

Datadef element	Description
Section > Type	Indicates the type of section: default - creates a section with no special styling. jumbotron - includes section background image. Refer to 'Jumbotrons and videotrons'. custom - allows you to enter custom heading content or code. Note: this option requires knowledge of coding for Bootstrap 3. Proceed with caution.
Section > Heading > Type	Indicates how the section heading is handled. Note that section headings are included in the page structure regardless of the type selected. This option only affects visual presentation. text - displays the section heading as plain text. hidden - does not display the section heading.
Section > Heading > Text	The text used as the section heading. Accessibility note: providing a descriptive and meaningful section heading is helpful for accessibility and SEO purposes. If the heading text is omitted, the templates will supply generic (and inferior) heading text, so please don't skip this field.
Section > Heading > Alignment	Only appears if 'Heading > Type' is set to 'text'. Indicates whether the heading text is left- or center-aligned.
Section > Heading > Set internationalization	Used to apply internationalization to the section heading Refer to 'Internationalization'.
Section > Row	Represents a content grouping within the section. Rows are used for layout purposes only and have no semantic meaning. You can add and remove rows with the + and - toggles.
Section > Row > Widget	Widgets are used to display your page content. You can add and remove widgets with the + and - toggles. Refer to 'Working with widgets'.

Advanced datadef elements

You will find collapsed datadef groups labeled 'Advanced' at the bottom of sections, rows, and widgets. These areas are used to assign html id and class attributes to the respective page elements and are useful for applying custom styling and scripting (refer to 'Configuring customizations').