Editing Pages

There is[AR1] a variety of page layouts utilized throughout the CHP website. These page layouts change the way each page displays its content. Consequently, content owners may have different fields and content areas to fill out depending on which page layout they are working with. The page layouts, which the majority of content owners will be working with include:

  • Supporting Page
  • Location Page

The following steps will walk the user through editing existing pages and working with the page fields and content found within. Additionally, the user learns how to check in and publish the pages so that visitors to the public site are able to see the modifications.

Edit Page

  1. Navigate to the home page:
  1. From the home page, use the top navigation and right navigation to navigate to the page you will edit.
  2. To edit the page, click the Settings icon in the top right and select Edit Page, as shown below inFigure 9.

Figure 9: Edit Page

The Edit page displays, as shown below inFigure 10.

Figure 10: Edit Page

Edit Page Fields and Content

Supporting Page

Once the page is in Edit Mode, you will see a number of editable fields. In order for the page to properly link and display, the content owner must fill out the appropriate sections of the page. To edit a page, complete the following sections, as shown above in Figure 10.

  • Modify the Title
  • Content Bands 1-15 [AR2](Vertical / Horizontal)

Field / Section Name / Description[AR3]
Title / This field represents the title of the current page.
Content Bands 1-15 / There are several web part zones available down the page. Content Owners add Content Editor w[AR4]eb p[AR5]arts to these sections to allow the Content Owner to add page content.

Table 1: Supporting Page Fields

Modify the Title

Note: To change the title of the page, navigation term associated with the page that appears in the URL and the right navigation, [AR6]contact the Site Owners.

Page Content

Content Owners can add Page Content to a Supporting Page through Content Editor web parts. These can be added into any of the Content Bands throughout the page. There are 15 bands available, and each band has a Vertical and Horizontal option.

  • Vertical: Web parts added into the vertical band will stack on top of each other, and consume the full width of the page, as shown below.

Figure 11: Vertical Content Band

  • Horizontal: Web parts added into the horizontal band display in one row beside each other, as shown below.

Figure 12: Horizontal Content Band

Each band is styled with alternating background[AR7]colors after saving and checking in the page. The first band has a gray background and each band thereafter alternates between blue and white.

[AR8]

Figure 13: Band Coloring

Add Content Editor Web Part to Page

  1. Determine whether to display this[AR9] content using the vertical band or horizontal band style based on the descriptions above. Additionally, determine the band (1 – 15) in which this content will appear.
  2. At the top of the band, click the Add a Web Part (Vertical) or Add a Web Part (Horizontal), depending on the choice in Step 1.
  3. A dialog will appear on the ribbon with options for adding a web part. Within the Categories section, click .CHP. With .CHP selected, select the Page Content web part from the Parts section.

Figure 14: Add Page Content Web Part

  1. When finished, click Add in the bottom right of the web part dialog on the ribbon.

Figure 15: Add Web Part

Add / Modify Page Content

  1. If content does not currently exist within the Content Editor web part, click the Click here to add new content link within the web part. If there is already content within the content area, click anywhere in the field to activate the ribbon at the top for adding / modifying page content.

Figure 16: Add New Content

  1. Create or paste content in the content area and format the content, as desired, using the Format Text toolset at the top of the page.

Note: When pasting content from another source, it is important to use the Paste Plain Text paste option, as shown below inFigure 17.

Figure 17: Paste Plain Text

For more information on styling and formatting content, refer to Section 4.

Documents

Content Owners can tag documents to appear on a page in a list. To do this, upload the document into the appropriate document library and tag it to display on the appropriate page. Additionally, Content Owners must add a web part to the page to display the documents rollup.

For more information on how to tag a document to appear on the page, please refer to Section 4.

Images / Photos

Content Owners can directly add images into the page content on a page or upload and tag photos to the appropriate page to display in a photo carousel. Additionally, Content Owners must add a web part to the page to display the photo carousel rollup.

For more information on uploading images and tagging appropriately, please refer to Section 7.

Events

Content Owners can display events from the current site [AR10]on a page as well. To do this, create the Calendar Event in the Calendar Event list [AR11]on the site containing the page on which it should display. Additionally, Content Owners must add a web part to the page to display the events rollup.

For more information on creating events and adding the Events web part, please refer to Section 9.

FAQs

Content Owners can display FAQs from the current site on a page as well. To do this, create the FAQ in the Frequently Asked Questions list on the site containing [AR12]the page on which it should display. Additionally, Content Owners must add a web part to the page to display the FAQ rollup.

For more information on creating FAQs and adding the FAQs web part, please refer to Section 8.

[AR13]Location Page

Once the page is in Edit Mode, you will see a number of editable fields. In order for the page to properly link and display, the Content Owner must fill out the appropriate sections of the page. To edit a page, complete the following sections.

  • Modify the Title
  • Location Type
  • Location Image
  • Location Overview
  • Location Phone
  • Location Address
  • Location City
  • Location State
  • Location Zip Code
  • Location Lat
  • Location Long
  • Location Hours Monday
  • Location Hours Tuesday
  • Location Hours Wednesday
  • Location Hours Thursday
  • Location Hours Friday
  • Location Hours Saturday
  • Location Hours Sunday
  • Content Bands 1-15 (Vertical / Horizontal)

Field / Section Name / Description[AR14]
Title / This field represents the title of the current page.
Location Type / This field indicates whether the office is a Division Office, Area Office, Commercial Inspection Facility or Communications & Dispatch Center. Use this tag to roll up area offices properly to their appropriate division.
Location Image / This field adds the image of the office.
Location Overview / This field provides an[AR15] overview text for the office.
Location Phone / This field displays the phone number for the office.
Location Address / This field displays the address of the office.
Location City / This field displays the city of the office.
Location State / This field displays the state of the office.
Location Zip Code / This field displays the zip code of the office.
Location Hours Monday / These fields indicate the hours of operations for the office for each day of the week.
Location Hours Tuesday
Location Hours Wednesday
Location Hours Thursday
Location Hours Friday
Location Hours Saturday
Location Hours Sunday
Content Bands 1-15 / There are several web part zones available down the page. Content Owners add Content Editor web parts to these sections to allow the Content Owner to add page content.

Table 2: Supporting Page Fields

Modify the Title

Note: To change the title of the page and navigation term associated with the page that appears in the URL and the right navigation, contact the Site Owners.

Location Type

  1. For the Location Type field, click the adjacent Tag icon to browse to a valid choice. A new dialog provides a selection of property types, as shown below inFigure 18.

Figure 18: Location Type Select Menu

  1. From the list of available location types, select the appropriate location type and click the Select button in the bottom left of the dialog. The selected location type will appear in the text box below[AR16]. When finished, click OK to confirm the selection of the location type and resume editing the page.

Location Image

Note: This section requires the Content Owner to upload the image prior to using the following steps. To upload the location image, please refer to Section 7.1.

  1. Within[AR17] the Location Image area, if no image already exists, click here to insert a picture from SharePoint.
  2. The Edit Image Properties dialog appears. For Selected Image, click Browse.

Figure 19: Edit Image Properties

  1. Within the Browse dialog, find the Site -> Images Library where you uploaded the location image. Within this Images Library, select the location image and click Insert.

Figure 20: Select Location Image

  1. Now, back in the Edit Image Properties dialog, enter Alternate Text for the image to ensure ADA [AR18]compliance.
  2. When finished, click OK to insert the location image onto the page.

Location Overview

  1. If no content currently exists within the Location Overview text area, click the Click here to add new content link within the field. If there is already content within the content area, click anywhere in the field to activate the ribbon at the top for adding / modifying page content.

Figure 21: Add New Content

  1. Create or paste content in the content area and format the content, as desired, using the Format Text toolset at the top of the page.

Note: When pasting content from another source, it is important to use the Paste Plain Text paste option, as shown below in Figure 22.

Figure 22: Paste Plain Text

For more information on styling and formatting content, refer to Section 4.

Location Phone

  1. Type in the phone number for the office location in the following format:
    (XXX) XXX-XXXX

Location Address, Location City, Location State, Location Zip Code

  1. For these fields, enter the address, city, state and zip code for the office location by typing it into the text fields.

Location Hours Monday – Sunday

  1. Enter the opening hour to closing hour in these fields, in the following format:

8:00 – 5:00. Alternatively, if closed, enter Closed.

Page Content

Content Owners add Page Content to a Location[AR19] Page through the Content Editor web parts. These are added into any of the Content Bands throughout the page. There are 15 bands available and each band has a Vertical and Horizontal option.

  • Vertical: Web parts added into the vertical band, stack on top of each other and consume the full width of the page, as shown below.

Figure 23: Vertical Content Band

  • Horizontal: Web parts added into the horizontal band display in one row beside each other, as shown below.

Figure 24: Horizontal Content Band

Each band is styled with alternating colors after saving and checking in the page. The first band has a gray background and each band thereafter alternates between blue and white.

Figure 25: Band Coloring

Add Content Editor Web Part to Page

  1. Determine whether to display this content using the vertical band or horizontal band style based on the descriptions above. Additionally, determine the band (1 – 15) in which this content will appear.
  1. At the top of the band, click the Add a Web Part (Vertical) or Add a Web Part (Horizontal), depending on the choice in Step 1.
  2. A dialog will appear on the ribbon with options for adding a web part. Within the Categories section, click .CHP. With .CHP selected, select the Page Content web part from the Parts section.

Figure 26: Add Page Content Web Part

  1. When finished, click Add in the bottom right of the web part dialog on the ribbon.

Figure 27: Add Web Part

Add / Modify Page Content

  1. If content does not currently exist within the Content Editor web part, click the Click here to add new content link within the web part. If there is already content within the content area, click anywhere in the field to activate the ribbon at the top for adding / modifying page content.

Figure 28: Add New Content

  1. Create or paste content in the content area and format the content, as desired, using the Format Text toolset at the top of the page.

Note: When pasting content from another source, it is important to use the Paste Plain Text paste option, as shown below inFigure 17.

Figure 29: Paste Plain Text

For more information on styling and formatting content, refer to Section 4.

Documents

Content Owners can tag documents to appear on a page in a list. To do this, upload the document into the appropriate document library and tag it to display on the appropriate page. Additionally, Content Owners must add a web part to the page to display the documents rollup.

For more information on how to tag a document to appear on the page, please refer to Section 4.

Images / Photos

Content Owners can directly add images into the page content on a page or upload and tag photos to the appropriate page to display in a photo carousel. Additionally, Content Owners must add a web part to the page to display the photo carousel rollup.

For more information on uploading images and tagging appropriately, please refer to Section 7.

Events

Content Owners can display events from the current site [AR20]on a page[AR21] as well. To do this, create the Calendar Event in the Calendar Event list on the site containing the page on which it should display. Additionally, Content Owners must add a web part to the page to display the events rollup.

For more information on creating events and adding the Events web part, please refer to Section 9.

FAQs

Content Owners can display FAQs from the current site on a page as well. To do this, create the FAQ in the Frequently Asked Questions list on the site containing the page on which it should display. Additionally, Content Owners must add a web part to the page to display the FAQ rollup.

For more information on creating FAQs and adding the FAQs web part, please refer to Section 8.

Check-In Page

When the page changes are complete, check the page in to SharePoint.

Note:It is extremely important to always Check In pages when finished editing them. Do NOT use the Save[AR22] button or other users will not be able to see the changes or make their own changes to the page.

Refer to Section 10.1and10.2for more information about Check In / Out and for detailed steps.

Note:Check In / Out status of a page does not indicate its visibility to the public. It is simply a versioning system for content contributors. To make content available to the public, refer to the Publishing section detailed below.

Publish the Page

In order for changes to a page to become visible to the public, Content Owners must publish the page after checking it in.

Refer to Section 10.3for more information about Publishing and for detailed steps.

Unpublish the Page

To unpublish a page, click the Publish tab in the upper left hand corner of the page and click Unpublish, as shown below in Figure 30. The unpublished page displays.

Note: After unpublishing a page, it will no longer appear for the public.

Figure 30: Publishing Tab

[AR1]are

[AR2]We understand what this means, but to those not familiar, I would clarify and change this to read that a maximum of up to 15 bands can be added.

[AR3]Changed this to white to increase the color contrast—black text was hard to see.

[AR4]Capitalize or uncapitalize throughout the entire document for consistency

[AR5]Capitalize or uncapitalize throughout the entire document for consistency

[AR6]Should this be in parenthesis, or separated with em dashes, and add “the” in front of “navigation”? As it reads, it is confusing.