Training

Editor Playground

Detailed Page List

View a detailed list of all available page types separated by Office or School

Shared Page Properties

Every page has some basic fields which are always available. Some are located at the top of the pages while others are within the labeled tabs. These properties are accessed through the “All-Properties” view.

Understanding Page Defaults

Office Pages

District Office Directory Page

The District Office Directory is an index page for the District Office Detail pages. The Office Directory is structured using the District Office Detail pages information. The directory is managed in collaboration with the information office editors enter on their District Office Detail pages. This page is managed by Web Services. Email any questions to websupport@pgcps.org

Page-Training Office Directory.png

Office Directory

District Office Detail

The District Office Detail pages spotlight individual offices across the district. This page has a hero banner, a section to fill in the details about the office (location, hours, phone numbers, etc.) and a flexible content area to allow each office to present information to their viewers as needed.

Page-District Office Detail.png

Live Example

Properties

Properties	Description
Page Title	Enter Text. Will display as header (h1) on the page. If left blank, the page name will be used. Note: Understanding Page Defaults
Banner	Drag & Drop Hero Banner Block (1) Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Hide Hero Block	Hide Banner. Note: The District Office Directory page has the ability to show a banner image across all District Office Detail pages. Select this property to hide/show the banner
Blocks	Drag & Drop Blocks. Use the Display Options to adjust layout. Note: Contact Blocks 1st contact displays as the main contact on the District Office Directory page. Blocks allowed: Accordion, Background Container, Contact, Featured Image, Link Card, Rich Text, Tab, and Video blocks. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system.
Info Tab: Properties	Description
Location Name	Enter Text
Location Link	Drag & Drop Pages from the Office Building Directory. Navigation Pane Location: PGCPS Home>Shared Resources>Office Building Directory>Find page needed.
Address Line (1, 2, 3)	Enter Text
Description	Enter Text
Phone Number (1 & 2)	Enter Phone Number
Fax	Enter Fax Number
Hours	Enter Text
Division	Drag & Drop Pages from the Office Directory. Navigation Pane Location: PGCPS Home>Offices>Find page needed.
Reports To	Drag & Drop Pages from the Office Directory. Navigation Pane Location: PGCPS Home>Offices>Find page needed.

Landing Page

The Landing Page has a full width view with versatile layout options and is recommended if an increased visual presence is needed.

Training Example

Properties

Properties	Description
Page Title	Enter Text. Will display as header (h1) on the page. If left blank, the page name will be used. Note: Understanding Page Defaults
Content	Drag & Drop Blocks. Use the Display Options to adjust layout. Blocks allowed: Accordion, Background Container, Contact, Featured Image, Link Card, Link Card Collection, Rich Text, Tab, and Video blocks. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)

General Detail Page

The General Detail Page can be used as an informational page with related content elements in the left column.

Page-General Detail.png

Training Example

Properties

Properties	Description
Title	Enter Text. Will display as header (h1) on the page. If left blank, the page name will be used. Note: Understanding Page Defaults
Hide Gradient Overlay	Removes blue tint from banner image
Banner Image	Drag & Drop Hero Banner Image (1) Image Size 1300px by 400px Note: Image must Adhering to our Naming Convention. Shared Images are available. Assets Location: For All Sites>Shared>Images>Select Hero Folder> Find desired Image
Content	Drag & Drop Blocks. Use the Display Options to adjust layout. Blocks allowed: Accordion, Background Container, Contact, Featured Image, Link Card, Link Card Collection, Rich Text, Tab, and Video blocks. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Side Content Title	Enter Text. Will display as header (h2) on the page.
Side Content	Only accepts Link Card Blocks. See: Link Cards Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)

Person Detail Page

The Person Detail page is used to profile district board members and or district level staff. This is the only Page Type to display different properties when used as a Partial Page View (card.) There are two steps needed to create the full experience, (1) Create the Person Detail Page, (2) Create a RT block to display more details about the featured person.

Partial Page View:
Page-Person Detail-PPV.png

Page View w/ Side Content:

Page-Person Detail.png

Training Example

Properties

Properties	Description
Title	Enter Text. Will display as header (h1) on the page. If left blank, the page name will be used. Note: Understanding Page Defaults
Hide Gradient Overlay	Removes blue tint from banner image
Banner Image	Drag & Drop Hero Banner Image (1) Image Size 1300px by 400px Note: Image must Adhering to our Naming Convention. Shared Images are available. Assets Location: For All Sites>Shared>Images>Select Hero Folder> Find desired Image
Content	Drag & Drop Blocks. Use the Display Options to adjust layout. Blocks allowed: Accordion, Background Container, Contact, Link Card, Link Card Collection, Rich Text, Tab, and Video blocks. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.) For Person Detail Pages it is suggested to use a RT block and keep the display of information simple.
Side Content Title	Enter Text
Side Content	Only accepts Link Card Blocks. See: Link Cards Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Details: Properties	Description
Image	Drag & Drop Image. Note: Recommended Size 267px by 267px
Person Name	Enter First and Last name
Position/Role	Enter Text
Email	Enter Email address
Phone	Enter Phone Number
Subscribe Link	Enter URL link

School Pages

School Container Page

The School Container Page organizes schools into types: High School, Special Centers, Public Charter, Academy, Elementary, etc. This page is used for broadcasting content to specific sections within the School Home Page: Spotlight, Carousel, and Announcements sections. Web Services manages this page.

Training Example (Opens to the Experience Editor in a new browser tab)

School Home Page

The Homepage contains the school specific settings for the page content, header, footer, and other key school-wide settings.

Training Example

Content Tab

Properties	Description
Category	This category is inherited from the parent container page.
Title	Enter text. Note: Not Rendered on pages but will display as title in Search results
Top Card Links	Add Link Card Block only. Drag & Drop Link Card Blocks. Use the Display Options to adjust layout. See: Link Cards. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Featured Spotlight If a spotlight broadcast was entered in the School Container page it would display here as the first item.
Properties	Description
Spotlight Carousel Title	Enter text.
Feature Spotlight	Click the plus icon to add a new feature.
Feature Image	Click inside the box to add an image. Recommended size: 524 x 397
Title	Enter text.
Subtitle	Enter text.
Body	Enter text.
Primary/Secondary Button Link	Click the ellipsis icon to select a page.
Primary/Secondary Button Target	Select a link target. Options: Same window, New Window
Primary/Secondary Button Text	Enter text.
Card Carousel
Properties	Description
Section Title	Enter text.
Cards	Content Card: Drag in a page from the page tree hierarchy. Renders as a Partial Page View from selected page’s Metadata properties: MetaTitle (if blank, will render page name), MetaDescription, and Thumbnail Image. If no image is provided, an image-less variant of this card is rendered. Pages allowed are: Landing Page District General Detail School General Detail
View All Link
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 link target. Options: Same window, New Window
Announcements The School’s Announcements block provides a space to feature announcements unique to the School. If an Announcement broadcast was entered in the School Container page it would take precedence and display here as the first item.
Properties	Description
Section Title	Enter text.
Announcements	Content Card: Drag in a page from the page tree hierarchy. Renders as a Partial Page View from selected page’s Metadata properties: MetaTitle (if blank, will render page name), MetaDescription, and Thumbnail Image. If no image is provided, an image-less variant of this card is rendered. Pages allowed are: Landing Page District General Detail School General Detail Maximum of 3 Content Cards.
View All Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
News & Events The School News & Events block displays embedded social media posts as news and events from the Google Calendar API.
Properties	Description
Social Media Section Title	Enter text.
Social Media Embed Code	Use this text area to add embed code from social media. Example: <a class="twitter-timeline" data-width="500" data-height="500" data-theme="light" href="https://twitter.com/TGESTIGERS?ref_src=twsrc%5Etfw">Tweets by TGESTIGERS</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> The social media information does not display on mobile.
View All Events Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Calendar Section Title	Enter text.
Calendar Link	Click the “+” icon to add a link to Google Calendar. Example: https://calendar.google.com/calendar/embed?src=2u43qko5dausa07b12mfl82lg2sgag4u%40import.calendar.google.com&ctz=America%2FNew_York
Helpful Links
Properties	Description
Helpful Links Section Title	Enter text.
Helpful Links	Add Link Card Blocks only. Drag & Drop Link Card Blocks. Use the Display Options to adjust layout. See: Link Cards. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Resources
Properties	Description
Resources	Only an Accordion Item Block can be added to this section. Items appear above School Information. Note: School Information is populated from the Info tab. Drag & Drop Accordion Item Blocks. See: Accordion Items. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)
Related Content
Properties	Description
Related Content	Only an Accordion Item Block can be added to this section. Drag & Drop Accordion Item Blocks. See: Accordion Items. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)

Hero Banner Tab

The Hero Banner is used to feature the school with a full width image, address, and search option.

Properties	Description
Hide Gradient Overlay	Checkbox to toggle gradient overlay on and off
Hero Image	Drag-and-drop from the media assets pan. Recommended size: 1440 x 582
Image Alt Text	Enter text. (For screen readers/508 Compliance)
Hero Video	Drag-and-drop video files from the media assets pan. Notes: .MP4, .MOV, .WMV are accepted Landscape aspect ratio works best Keep the file size to under 10MB Check out this free tool to compress your video files https://www.freeconvert.com/video-compressor
Hero Video Description	Enter text. (For screen readers)
Gradient Overlay Opacity	Change the opacity on the gradient color displaying over the hero image
Logo	Drag-and-drop from the media assets pane. Recommended size: 96 x 96
Note: School name and address displayed in the Hero is from the Info Tab: Name Line 1, Name Line 2, Address 1 and Address 2.

Header Tab

School Homepage Header.png

Properties	Description
Logo	Click in the box or drag an image from the media asset panel into the box. Logo should not include text. Recommended size: 252 x 139 Note: If no logo is added, District Logo will be used
Menu Links	Drag in a page from the page tree structure in the left pane. Note: Menu dropdown links are pulled in from the top-level page's children. Top-level pages without child pages act as a regular link with no arrow.
Border Color	Enter RGB. Example: rgb(72, 187, 120) Default: Orange Defines color of the bottom border in the header and above the Announcements section further down the homepage.

Note: If no information is entered, the County (PGCPS Home) footer is inherited.

School Homepage Footer.png

Properties	Description
Footer Logo	Click to select an image or drag image from Media. Recommended File type: SVG graphic. Recommended size: 117 x 96
Contact Column Label	Enter text to display above the contact column. If left blank, default text = Contact Note: The contact address, phone number, and email address come from the School Info Tab on this page.
Social Media	Click the “+” to add Social Media links.
Social Media Type	Select a social media platform from the dropdown. Select the social media site and the corresponding icon will be pulled in: Facebook, Twitter, LinkedIn, Photo Gallery, or YouTube.
Social Media Link	Click the ellipsis to add a URL.
Target	Select a target for the link to open. Options: Same Window, New Window
Column 1 – 3 Label	Enter text for the column header. Limited to 20 characters. If left blank, the space is preserved to keep alignment in the links under the header.
Column 1 – 3 Links	Click “create a new link” or drag in a page.

Search Configuration Tab

The School’s search functionality only surfaces the School’s homepage and the School’s child pages. Content editors can use this area to drag in asset folders to include or exclude in the search.

Properties	Description
Search Pane	Click the ellipsis icon or drag in the school search page.
Asset Roots	Use this to define searchable School assets (images, files…). Drag in the folders that should be included in the School’s search. To limit the assets, place them into specific folders and drag those into the content area.
Asset Exclusion Roots	Use this to exclude School assets from search.
Page Exclusion Roots	Use this to exclude specific School pages from search. Leaving this content area blank allows for all pages across the schools to be surfaced.

Info Tab

Some information entered here is used in other areas of the School site including header and footer. Also, much of this information appears on the School Homepage under in the Resource accordion:

School Homepage Info.png

Properties	Description
Name Line 1	Enter text. Example: Tulip Grove
Name Line 2	Enter text. Example: Elementary School
Address 1 Line 1	Enter text. Example: 2909 Trainor Lane
Address 1 Line 2	Enter text. Example: Bowie, MD 20715
Address 2 Line 1	Enter text. Example: 2909 Trainor Lane
Address 2 Line 2	Enter text. Example: Bowie, MD 20715
Phone Number 1	Enter phone number.
Phone Number 2	Enter phone number.
Fax Number	Enter number.
Contact Email	Enter email.
Principal 1 Title	Enter text.
Principal 1 Name	Enter text.
Principal Email 1	Enter email.
Principal 2 Title	Enter text.
Principal 2 Name	Enter text.
Principal Email 2	Enter email.
Hours	Enter text.
Grades	Enter text.
Uniform	Enter text.
Colors	Enter text.
Mascot	Enter text.
School Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane. (For administration purposes only)
Image	Drag-and-drop from the media assets pane or click the ellipsis icon to add an image. Recommended size: 336 x 217 Note: Used on School Directory page.

Support Tab

Properties	Description
Questions and Concerns Text	Enter text.
Questions and Concerns Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Area Number Text	Enter text.
Area Number Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Area Resolution Services Text	Enter text.
Area Resolution Services Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Parent Engagement Assistant Name	Enter text.
Instructional Director Name	Enter text.
Instructional Director Phone Number	Enter number.
Pupil Personnel Worker Name 1	Enter text.
Pupil Personnel Worker Email 1	Enter email.
Pupil Personnel Worker Name 2	Enter text.
Pupil Personnel Worker Email 2	Enter email.
Board District Text	Enter text.
Board District Website Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.

Services Tab

Properties	Description
How to Enroll text 1	Enter text.
How to Enroll Link 1	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
How to Enroll text 2	Enter text.
How to Enroll Link 2	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Bus Routes Text	Enter text.
Bus Routes Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Transportation Text	Enter text.
Before & After Care Text	Enter text.
Before & After Care Link	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.

School General Detail Page

The School General Detail Page is a good utility or informational pages that can be utilized within the site structure.

Page-School General Detail.png

Training Example

Properties

Properties	Description
Category	This category is inherited from the parent container page. (administrative property)
Title	Enter text. Will display as header (h1) on the page. If left blank, the page name will be used.
Banner Image	Drag-and-drop from the media assets pane or click inside the box to add an image. Recommended size: 1300 x 400
Content	Blocks To add an existing block, drag-and-drop a block from the blocks assets pane. Allowable blocks: Accordion Block Background Container Block Link Card Block Rich Text 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 General Detail Page Landing Page Faculty Detail Page Note: Use the Display Options to adjust layout. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)

School Factory Directory

The School Faculty Page is an index of School Faculty Detail pages. It is used to feature faculty members and showcase their profile in a Content Card. The page is searchable by first and last name and is sortable by last name.

Page-School Faculty Directory.png

Training Example

Properties

Properties	Description
Page Title	Enter text here.
Search Bar text	Enter text here. Example: Enter Name
Default Image	Click inside the box or drag an image from the asset panel. Note: This image is used on the Directory page as a placeholder.
Title	Enter text here. Note: This property displays in the page breadcrumb trail

School Faculty Detail Page

The School Faculty Page sets up faculty members profile information for use as a Content Card or a child page of a School Faculty Directory page. Some, but not all properties listed, will be rendered on the Content Card and others are used on the Detail page. The Detail page features information about the faculty and an About section to spotlight specific details.

Page-School Faculty Detailpng.png

Training Example

Properties

Properties	Description
Image	Drag-and-drop from the media assets pane or click inside the box to add an image. Recommended size: 411 x 411
First Name	Enter text. Example: Jamie
Last Name	Enter text. Example: Oliver
Additional Name	Enter text. Example: EdD
Position	Enter text. Example: Principal
Room	Enter text.
Building	Enter text.
Department 1-2 Name	Enter text. Example: Administration Note: If text and a link are added, the page name for the link takes priority.
Department 1-2 Link	Add a link to the department if wanted.
Courses	Enter text.
Grade	Enter text.
Team	Enter text.
Class Website	Click the ellipsis icon or drag in a page from the page tree structure in the left pane.
Bio	Enter text.
Quote	Enter text.
Email	Enter email.
Phone Number	Enter phone number.
About	Drag & Drop Blocks. Use the Display Options to adjust layout. Blocks allowed: Accordion, Background Container, Link Card and Rich Text. Adhering to our Naming Convention when creating new Blocks is critical to maintaining a healthy system. Note: You should only create new Blocks in your “Blocks” folder. DO NOT create blocks in properties that allow the ability to create them (see image.)

How To Video

Description:

You should be in All Properties View to follow along with this video. The view buttons are in the upper right corner of the central editing area. The All Properties View button looks like a bulleted list.

School Search Page

School Search Page is used to display search results based on the site visitor's search keyword. The School Search page limits the site visitor to content relevant to the school.

Training Example

Properties

Content Tab
Properties	Description
Title	Enter text. Will display as header (h1) on the page. If left blank, the page name will be used.

Search Configuration
Properties	Description
Initial Page Size	Enter number. The number of search result items loaded by default, before “Load More Results.”
“Load More” Page Size	Enter number. The number of additional search result items that will be loaded when a user clicks “Load More Results.”

School Site Alert

Each school includes an Alert page. School Site Alerts can be scheduled to display on its parent School Homepage.

Page-School Site Alert.png

Properties

Content Tab
Properties	Description
Alert Type	Select Info, Warning or Danger. See above image for style.
Heading	Enter text. Will be formatted as h3 in alert.
Summary	Enter text. Used to display before the “Read More” link. Text will be limited to 2 lines. When the user clicks “Read More” the body will show.
Body	Enter Rich Text. Displayed after the user clicks “Read More.”
To schedule or render site alerts, use the Display Settings tab.

Display Settings Tab
Properties	Description
Enable	Check to enable. Box must be checked for an alert to render on site.
Start	Enter or select a date. To schedule, select a date in the future. Leave blank for immediate display.
End	Enter or select a date. Alert will not render after date and time. Leave blank for an open-ended alert.

Need Assistance?

Everything for Editors

Contact Web Support

Make a Web Services Appointment

Can't find what you're looking for? View a listing of all our Optimizely training pages.

Detailed Page List

Shared Page Properties

Office Pages

District Office Directory Page

District Office Detail

Properties

Landing Page

Properties

General Detail Page

Properties

Person Detail Page

Properties

School Pages

School Container Page

School Home Page

Content Tab

Hero Banner Tab

Header Tab

Footer Tab

Search Configuration Tab

Info Tab

Support Tab

Services Tab

School General Detail Page

Properties

School Factory Directory

Properties

School Faculty Detail Page

Properties

How To Video

School Search Page

Properties

School Site Alert

Properties

Need Assistance?