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
|
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.
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:
|
| 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, 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.
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:
|
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.
|
| 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'. |
Above: a page with a text 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:
|
| 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.
|
| 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 | Only appears if 'Heading > Type' is set to 'text'. 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').