Versions Compared

Old Version 18

changes.mady.by.user Todd McGill

Saved on

compared with

New Version 19

changes.mady.by.user Todd McGill

Saved on

Key

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

...

Aligns the additional header content to either left or center
Datadef elementDescription
Settings > Header > TypeSettings > Header > Jumbotron/Videotron > Content alignment

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

Layout

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

Datadef elementDescription
Settings > Layout > Include breadcrumbsSet 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 navigationSet to 'yes' to have a secondary navigation element included on the left side of the main content. Refer to 'Secondary navigation'.
Settings > Layout > Secondary navigationAppears only if 'Include secondary navigation' is set to 'yes'. Indicates the secondary navigation to be used.
Settings > Layout > Include sidebarSet 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 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 > 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

    .