Skip Navigation
Training
Editor Playground
Partial Pageviews, Blocks and Containers

Partial Pageviews, Blocks and Containers

Jump to Blocks
Jump to Containers

What is a Partial Page View?

A card! A Partial Page View (PPV) is a clickable card-like navigation tool that takes users to a page.

PPV Examples

Editor Playground

Optimizely training area for PGCPS content editors.

Read More

Academics

Read More

Using PPV's

  1. Drag a page from the navigation gadget into a content drop zone property or a background containers content property.
  2. Adjust the display width to create a “card-like” view.

Notes

  • You must view the page in All Properties view
  • Select the Metadata tab to access page properties
    • Photo comes from the page’s Thumbnail Image property
    • Title comes from the page Name(3) or Title(2) properties unless...
      • The MetaTitle(1) property contains text
        Note: 3, 2, 1, represents the presedence of the property that displays on the PPV
    • Summary comes from the page’s MetaDescription property
    • Want to use your own metadata property information but still link to the page source? You can create your own PPV then update the shortcut property to link to another page. See Creating Supportive pages for more information.
How To: Create Pages

Blocks

What is a block?
How To: Create Blocks

Block Type

Where They Are Available

Suggested Naming

Accordion Item Block

Accordion Container Block

A - Name of content 

(i.e.  A - Student Handbook) 

Child Page List Block

Landing Page
School General Detail Page
Blocks
Background Container

CPL - Name of content

(i.e. CPL - Announcements)

Link Card Block

Pages
Landing Page
General Detail Page
District Office Detail
Person Detail Page
School Homepage
School General Detail Page
Blocks
Background Container
Accordion Item
Rich Text

LC - Simple - Name of Content

LC - Exp - Name of Content

LC - Img - Name of Content

LC - Icon - Name of Content

(i.e. LC - Simple - Immunizations)

Feature Image Block

Landing Page
District Office Detail
School General Detail 

FI - Name of Content

(i.e. FI - Student Services Intro)

Hero Banner Block

Landing Page
District Office Detail

H - Name of page

(i.e. H - General Counsel)

Rich Text Block

Landing Page
General Detail Page
District Office Detail
School General Detail 

RT - Name of page or section

(i.e. RT - Food and Nutrition)

Contact Block

Pages
Landing Page
General Detail
District Office Detail
Blocks
Background Container
Accordion Item

CB - Name of Contact Group

(i.e. CB - Contact Web Services)

Video Block

Pages
Landing Page
General Detail
District Office Detail
School General Detail
Blocks
Background Container
Accordion Item

VB - Name of Video

(i.e. VB - School Graduation)

Tab Child Block

Pages
Landing Page
General Detail
District Office Detail
Blocks
Tab Block

TCB - Name of Tab

(i.e. TCB - School Story Cover)

Standard Content Blocks Details

  • Accordion Item
  • Hero Banner
  • Rich Text
  • Contact
  • Video
  • Tab Child

Accordion item has two states, open or closed. Click title or +/x to toggle open or closed.

Closed:Accordion-Closed.png

Open:Accordion-Open.png

Property

Description

Category

Not used for this block. Selecting a category does not impact this block.

Accordion Title

Enter text.

Will be formatted as h3. Title will display if open or closed. 

Url Suffix

See How To: Create & Use Bookmarks in Optimizely

Description

Enter rich formatted text. See Rich Text for formatting options

Will display when the accordion is open. 

Display Accordion Open

Check to enable.

If checked, the accordion will display open when the page is loaded.

If unchecked, the accordion will display closed when the page is loaded.

The Link Card block has four different variants. The card is a link.

Simple:
Link-Card-Simple.png

Image:
Link-Card-Image.png

Expanded:
Link-Card-Expanded.png

Icon:
Link-Card-Icon.png

 

 

Property

Description

Card Type

Select Simple, Image, Expanded, or Icon

Text

Enter text.

Link

Click the ellipsis icon or drag in a page from the page tree structure in the left pane.

Link Target

Select a target for the link to open.

Options: Same Window, New Window

Image (used for Image Card Type only)

Drag-and-drop from the media assets pane or click inside the box to add an image.

Recommended size: 325 x 174

Icon (used for Icon Card Type only)

Select from Book Reader, Briefcase, School Bus, Graduation Cap, University or Users Alt.

The featured image block allows the content editor to feature an image on either the left or the right side along with a rich text area on the opposite side.
Featured-Image.png

Property

Description

Category

Not used for this block. Selecting a category does not impact this block.

Image

Drag-and-drop from the media assets pane or click inside the box to add an image.

Select Left or Right.

Recommended size:  521 x 674

Image Alignment

Select an option from the dropdown

Options: Left, Right

Default = Left

Title

Enter text.

Date

Enter a date.

Subtitle

Enter a subtitle.

Description

Enter a description.

The Hero Banner block can display an image or text in a horizontal orientation on a page.
Hero-Banner.png

Property

Description

Hero Image

 

Drag-and-drop from the media assets pane or click inside the box to add an image.

Recommended size: 1300 x 400

Hide Gradient Overlay

Removes the blue tint from the image

Hero Img Alt

Text used for audience that use screen readers (508 compliance)

Mobile Image

Drag-and-drop from the media assets pane or click inside the box to add an image.

Recommended size: 499 x 335

Description

Enter text. This text displays below the image

A rich text field for displaying formatted content. This block can change background colors to use white, grey, or blue as well as changing text color to provide appropriate contrast.

Much of your content entry will be rich text (text accompanied by styles, formatting, tables, images, etc.). The text editor has tools like your favorite word processor (e.g., Microsoft Word).
Rich-Text-Properties.png

Property

Description

Background Color

Choose between None (Transparent) White, Grey and Blue
Note: Blue background changes text color to White

Heading styles

 

Rich-Text-Headings.png

  1. Select a line of text.
  2. Click Formats.
  3. Hover over Headings to view additional drop-down lists.
  4. Select a heading style (H2-H6).
  5. Headings should follow an outline structure. H1 is always the page title. Then H2 should follow. (i.e. H2, H3, H3, H4, H2, H3, H3, H3) Example Page

Best practices:

  • Use the headers to create a hierarchy within your content.
  • This helps visitors skim the page and find what they need, faster.

Image

 
  • Click in the text area where you want the image to appear.
  • In the right pane, click the Media tab and browse to the image you want to insert.
  • Drag the image to the content area and drop it.

Applying styles:

  • Click the image (it should turn blue).
  • Click Formats.
  • Hover over Image Alignment to view additional drop-down lists.
  • Select Center Align to center the image. Text will appear above or below.
  • Select Left or Right Align to “float” the image to the left or right and allow the text to flow around it.

Lists
  1. Create a list of items with regular line returns.
  2. Highlight the list of items.
  3. Click the bulleted list icon or the numbered list icon:
    Rich-Text-Lists-Icon.png
    Rich-Text-List-Bullet.png
    Rich-Text-List-Numbered.png

Quote
  1. Enter your quote text.
  2. Select text for the quote or click in the editor where you would like the quote.
  3. Click the quote icon:
  4. In the modal, enter Quote, Cite, and title
    Rich-Text-Quote.png

Buttons & Links
  1. Enter text.
  2. Create a link with the text.
  3. Click Formats.
  4. Hover over Button/Links to view additional drop-down lists.
  5. Select Default, Secondary, Danger, or Link with Arrow and Link with Arrow (on dark).
    Rich-Text-Button-Links.png

Small text
  1. Click Formats.
  2. Hover over Text to view additional drop-down lists.
  3. Select Small Text.
    Rich-Text-Small-Text.png

Table
  1. Create a table (any number of rows and columns).
  2. Enter values.
  3. Table headings can be bolded.
  4. Table Examples (scroll down page for examples)
    Rich-Text-Tables.png

The contact block highlights contact information. This is a property list with a section header. Populate as many rows on the property list to create multiple contacts in one block.

Contact.png

Property

Description

Section Title

Enter Text. Will be formatted as h2.

Name

Enter First and Last Name

Title

Enter Text

Email

Enter an email address

The Video block can use a YouTube link or a loaded video from the asset panel. The Title, thumbnail image and description can be overridden by the content editor.

How to Embed a YouTube Video

Video.png

Property

Description

YouTube Link

Enter a YouTube link

Video File

Enter a video file

Title Override

Enter Text. Will be formatted as h2.

Image Override

Click or drag an image into the box

Description Override

Enter Rich Text

The Tab Child Block has two states, closed or open. Click the title to toggle open or closed.

Open:
Tab-Child-Open.png

Closed:
Tab-Child-Closed.png

Property

Description

Title

Enter Text. Will be formatted as h2.

Url Suffix

See How To: Create & Use Bookmarks in Optimizely

Open By Default

Choose to display as open. Note: the top item in the Tab Block with the open property set gets precedence.

Content

Enter Rich Text

Containers

Containers are block types created to group together specific block or pages types.

Container type

Where they are available

Suggested Naming Convention

Accordion Block

Pages
Landing Page
General Detail
District Office Detail
School General Detail
Blocks
Background Container
Rich Text
Accordion Item

A - Name of section

(i.e. A - Important Information)

Background Container Block

Landing Page
General Detail
District Office Detail
School General Detail 

BC - Name of section

(i.e. A - Useful Resources)

Tab Block

Landing Page
General Detail
District Office Detail
School General Detail 

TB - Name of section

(i.e. TB - Weekly Newsletters)

Child Page List Block

Pages
Landing Page
General Detail
District Office Detail
School General Detail
Blocks
Background Container
Rich Text

CPL - Name of section

(i.e. CPL - Announcements)

Form/Document Block

Pages
Landing Page
General Detail
District Office Detail
School General Detail
Blocks
Background Container
Rich Text

FDB - Name of section

(i.e. FDB - Parent Forms)

Container Block Details

  • Accordion
  • Background Container
  • Tab
  • Child Page List
  • Form/Document

The Accordion block holds an unlimited number of Accordion Item blocks.
Accordion.png

Property

Description

Category

Not used for this block. Selecting a category does not impact this block.

Accordions

To create a new block: In your Blocks folder create a new Accordion Item Block.

To add an existing block, drag-and-drop a block from the blocks assets pane.

Allowable blocks:

Note: Background Containers should only be used to display as full width.

Background-Container.png

Property

Description

Headline

Enter text. Will be formatted as h2.

Headline Alignment

Check this box to center align the title.
Leave it unchecked to left align the title.

Background Color

Check this box to apply a gray background.
Leave it unchecked to use a white background.

Url Suffix

See How To: Create & Use Bookmarks in Optimizely

Background Image
  1. Click in the text area where you want the image to appear.
  2. In the right pane, click the Media tab and browse to the image you want to insert.
  3. Drag the image to the content area and drop it.
  4. Recommended size: 1440 x 488

Content

Blocks
To add an existing block, drag-and-drop a block from the blocks assets pane.
Allowable blocks:

  • Accordion Block
  • Contact Block
  • Link Card Block
  • Rich Text Block
  • Video Block

Content Cards
To add a Content Card, drag-and-drop in a page for a partial page view.
Allowable pages:

  • School General Detail Page
  • District Office Detail Page
  • Landing Page
  • General Detail Page
  • Person Detail Page
  • Faculty Detail Page

The Tab block holds an unlimited number of Tab Child blocks. You can choose to orient the tabs vertically or horizontally.

Horizontal:
Tabs-Horizontal.png

Vertical:
Tabs-Vertical.png

Property

Description

Title

Enter Text. Will be formatted as h2.

Orientation

Select between vertical or horizontal

Tabs

To create a new block: In your Blocks folder create a new Tab Child Block.

To add an existing block, drag-and-drop a block from the blocks assets pane.

Allowable blocks:

Note: Child Page List Blocks should only be used to display as full width.

Child Page List Block Image.png

Property

Description

Parent Pages

Drag and drop the parent page(s) that contain the child pages you want previewed.

Block Title

Enter text. Will be formatted as h2.

Anchor Name

See How To: Create & Use Bookmarks in Optimizely

Block Intro

Enter text for a description of the block/pages being previewed.

Number of Items to Display on Load

Enter the number of page previews to be displayed. (Recommended: 100)

Order By

Sorting options for the order of the page previews

  • Page Hierarchy - Sorted by the order of pages in Optimizely (Top to bottom)
  • Alphabetical - Sorted alphabetically by the page name in Optimizely
  • Publish Date - Sorted by the date the page was published for public view
  • Creation Date - Sorted by the date the page was created in Optimizely (Published or Not Published)
  • Modification Date - Sorted by the date the pages were last modified (Published or Not Published)

List Style

Size options for the page previews (Recommended 1/4 or 1/3)

  • 1/4
  • 1/3
  • 1/2
  • Full

 

Note: Child Page List Blocks should only be used to display as full width.

Form Document Block Image.png

Property

Description

Heading

Enter text. Will be formatted as h2.

Description

Enter text for a description of the files being shown.

Folders

Drag and drop the media folder(s) that contain the files you want shown.