Flex page template

Description

A sample of a flex page configuration

Just one example of a flex page configuration.

The landing page or flex page is a modular, highly configurable template offering a multitude of layouts. This layout PDF offers just a few suggestions of various layouts possible. 

Like the repeating content blocks used in the Internal Page - Standard template, the flex page template works with repeating content blocks that can be divided into fractions of 25%, 33%, 50%, 66%, 75% and 100%, which translates to a minimum of one block up to a maximum of four blocks per repeating content block.

Select and create a Flex page using the following steps:

  1. Click New from the main menu.
  2. From the submenu, select the Pages section.
  3. Choose the Flex page type from the available options:

    Select a new page type from the New > Pages menu

How to configure the flex page template

Flex page schema layout

This is the condensed layout of the flex page template.

Main Content - Page Title

The CMS gives you a variety of ways to use titles on your pages:

  • Display Name - Used for the primary or secondary navigation and breadcrumbs.
  • Title - Used for the TITLE tag in the web page's HEAD tag region, in the browser tab, and, if the Page Title area is left blank, this information is used for the Page Title.
  • Page Title - Appears above the content on the page. If a Title and a Page Title are entered, they can both be unique.

Metadata and Site Map

  • Description - the information included in this location will be used by search engines for search results and also as part of your site's Site Map which is created dynamically based on the information you provide. Learn more about Site Maps.

Page Region

  • Page settings: The location where supplemental files such as styles sheets and javascript files can be attached
  • Left column (optional): The configurable left column of the page where images and blocks can be attached
  • Main content area: The configurable main content area where images and blocks can be attached
  • Right column (optional): The configurable right column of the page where images and blocks can be attached

Configuring the page settings

Page settings affecting breadcrumb settings and page customization

Navigation » Breadcrumbs

Page type Default behavior Alternate Effect
Home page (Base folder/index) Breadcrumbs are off No alternate setting available
Flex page Breadcrumbs are off Can be enabled
Internal page Breadcrumbs are on No alternate setting available

CSS/JS/code for page » Supplemental blocks/files

The page settings are gives you the option of adding multiple page-specific blocks, stylesheets and/or javascript files. If setting the files up in a specific order in the <HEAD> is necessary, you can also select the plus sign [+] in the upper left corner to create file rows for the sake of precedence.

Configuring the Main Content area

How to configure the main column of the flex page

  1. The Main content area can be configured to contain multiple rows with multiple columns. By default, the Main content column contains one row and one column.
  2. To add multiple rows, click the plus sign [+] under the heading Main content row.
  3. To configure more than one column, first click the Activate column? checkbox.
  4. Between adding more columns and the column activation checkbox, the Column width (%) dropdown gives you the ability to create the following column configurations:
    • 1 column - 1 column of 100% width ('Auto' option)
    • 2 columns - 2 columns of 50% width each
    • 3 columns - 3 columns of 33% width each
    • 4 columns - 4 columns of 25% width each
    • Combo columns - mixed widths of 25%/50%/25%, or 50%/25%/25%, or 25%/25%/50%
  5. Each column can contain multiple blocks and/or WYSIWYG text area content (including fixed width images). To add more sections in a column select the plus sign [+] under the heading Block content, and then expand the Block settings section to check the Activate block? checkbox.

Configuring the Left Column

Configuring the left column

  1. To activate the left column, first expand the Left column (optional) section.
  2. You have the ability to add multiple blocks and sections of content via the WYSIWYG text area.
  3. For anything to show up, the Activate left column? box needs to be checked.
  4. Blocks in the left column are stacked vertically. Attach the block in the Content block chooser and, under the Block settings, check the Activate block? blox. The Block not bordered? section by default creates a border around the block. If you don't want this border to appear, check the 'yes' checkbox.
  5. If you don't want to attach a block, you can enter text and fixed width images in the WYSIWYG text area.
  6. To add multiple blocks, click the plus sign [+] in the upper left corner and a second Block content area will become available.

Configuring the Right Column

Configuring the right column

  1. To activate the right column, first expand the Right column (optional) section.
  2. You have the ability to add multiple blocks and sections of content via the WYSIWYG text area.
  3. For anything to show up, the Activate right column? box needs to be checked.
  4. Blocks in the right column are stacked vertically. Attach the block in the Content block chooser and, under the Block settings, check the Activate block? blox. The Block not bordered? section by default creates a border around the block. If you don't want this border to appear, check the 'yes' checkbox.
  5. If you don't want to attach a block, you can enter text and fixed width images in the WYSIWYG text area.
  6. To add multiple blocks, click the plus sign [+] in the upper left corner and a second Block content area will become available.

Flex page demo - Sample #1

Flex page demo 1

Sample 1: This example layout has the following configuration:

Left Column optional activated, which takes up the full height of the page.

  • News Title RSS block
  • Nursing Students feature block

Right Column optional activated, which takes up the full height of the page.

  • Sustainable 2nd Century feature block

Main Content area

  • First row is set to auto width (100%) and one column. Feature block about Tracy Dyson used.
  • Second row is divided into two columns, each 50% of the available width. Column 1 "Advancing UC Davis" feature block. Column 2 "Parents" feature block.

Flex page demo - Sample #2

Another example of a flex page configuration.

Sample 2: This example layout has the following configuration:

Right Column optional activated, which takes up the full height of the page.

  • Nursing students feature block
  • News Title RSS block

Main Content area

  • First row is set to auto width (100%) and one column. Feature block about Tracy Dyson used.
  • Second row is divided into two columns, each 50% of the available width. Column 1 "Advancing UC Davis" feature block. Column 2 "Parents" feature block.