The 2015 templates to 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
...
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.
...
The default page header places the site masthead over UCI's brand blue. The following fields are available , 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 > 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 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 | Set to ' |
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').