Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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:

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

Page

Section

Row

WidgetWidgetWidget

Row

WidgetWidgetWidget

Section

Row

WidgetWidgetWidget

Row

WidgetWidgetWidget

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.Image Added A collapsed datadef group.Image Added

Creating pages

New > Page

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

Example videotron header.Image Added

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

Example breadcrumbs.Image Added

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

Example secondary navigation.Image Added

Settings > Layout > Secondary navigationAppears 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.

Example sidebar.Image Added

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 elementDescription
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 internationalizationUsed to apply internationalization to the page heading Refer to 'Internationalization'.

Example text heading.Image Added

Above: a page with a text heading.

Example jumbotron heading.Image Added

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 elementDescription
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 > RowRepresents 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 > WidgetWidgets 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

...