Page Comparison

Text paragraphs paragraph blocks allow you to manage your own content headings using the “Format” dropdown; in most other paragraphs paragraph blocks the heading structure is set by the paragraph block title.

A few things to remember about headings:

• Headings are applied to section titles so visitors using screen readers can "skim" a page to understand its structure and content.

• Maintain the appropriate heading structure. Apply Heading 2 to main section titles, Heading 3 is applied to heading 2 subsection titles, Heading 4 is applied to heading 3 subsection titles, etc.

• Headings should never be used for emphasis; use bold, italics, or block quotes for those options.

• Although Heading 1 is shown as an option, do not use Heading 1. That will create severe accessibility issues.

Relative links are links that don’t require the full URL because they link to a page on the same domain (eg. www.pdx.edu) as the source page. Fully external links require the full URL.

In your site, there are three kinds of relative links you can make. These instructions are not all-encompassing, but you can use them as a starting point:

Links internal to your site (for CTA and Link paragraphsparagraph blocks)

1. In the URL field, begin typing the page title.

2. Select the correct page title from the list of options that appears.

   • Only published pages will show up in the list of options.

Links external to your site but internal to www.pdx.edu (for CTA and Link paragraphsparagraph blocks)

1. Enter the URL into the URL field.

2. Replace http://www.pdx.edu/ with /../

   • Example: /../student-life/campus-life

Relative links in Text paragraphs

1. In the link popup, select "Other" as the protocol

2. In the URL, replace the https://www.pdx.edu/ with /../.

   • Example: /../admissions/how-to-apply

Anchor links direct visitors to a specific section of a page, rather than the top of a page. Terms you’ll want to be familiar with:

• Anchor: the destination; where the link directs the visitor. These can only be made in Text paragraphsparagraph blocks.

• Anchor link: the link that takes a visitor to the anchor. These can be made in any paragraph block type.

Make an anchor

1. Add or edit a Text paragraph block.

2. Place your cursor where you want the visitor to end up (the final destination)

   • Do not highlight any text, just place the cursor at the start of the text

3. Select the Anchor button (it looks like a flag) from the formatting menu

4. Type in the anchor name in the popup that appears

   • Anchor names must be all one word (no spaces) - example: anchorname

   • Pay attention to your capitalization, it must be replicated in the anchor link

Add an anchor link to a page

Once the anchor is made, link to it by adding #anchorname, replacing anchorname with the actual anchor name, after the URL.

Example: pdx.edu/current-student#classesregistration. In this example the anchor name is “classesregistration” and the anchor exists on the Current Student page.

You can set a Focal Point so one section of your image will always be visible, no matter which paragraph block it’s used in, or your visitor’s screen size. To set a focal point:

On a newly uploaded image

1. After uploading the image, a thumbnail of the image will appear.

2. Select and drag the crosshairs on top of the thumbnail to change the focal point.

3. Save your changes.

On a saved image

1. Use the admin menu to navigate to “Content ￫ Media”.

2. Select the image you want to edit, to open the editing screen.

3. Select and drag the crosshairs on top of the image thumbnail to change the focal point.

4. Save your changes.

A few things to note

• Each image has only one focal point, so the set focus will impact every location on your site where the image is used. 

• You can preview the new focal point by selecting “Preview” beneath the image thumbnail, before saving your changes.

You can embed videos in Text paragraphs paragraph blocks using the standard formatting options.

Alternatively, there are two other paragraphs paragraph blocks that allow you to embed a video instead of an image:

• Header: Large Hero

• Feature: Content with Media

To use embed a video in either of those blocks, select "Add Media" as if you are adding an image. In the pop-up, there is an option for "Video Embed" in the left sidebar.

You can embed a Google Calendar using an iframe. However, there are a few added steps you need to take, to ensure the calendar is accessible:

1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app.

2. In the top right, select the Settings menu (it looks like a gear) and then Settings.

3. On the left side of the screen, select the name of the calendar you want to embed.

4. Select "Integrate Calendar" in the menu that expands under the calendar name you selected.

5. Copy the "Public URL to this calendar" section URL. For example, the Public URL to my 1:1 help calendar is: 
   https://calendar.google.com/calendar/embed?src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%40group.calendar.google.com&ctz=America%2FLos_Angeles

6. Open some kind of text editor and paste the URL in it. This is just for temporary purposes so we can edit this URL.

7. Replace everything before src= in the URL with: 
   https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF&  

   1. Example: the new URL for my 1:1 calendar is:
      https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF& src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%http://40group.calendar.google.com &ctz=America%2FLos_Angeles

8. Copy the new URL, this will be used for the iframe.

A few notes:

• When creating the iframe, set the width to 100% and the height to 600px.

• Calendars with appointment slots cannot be embedded; they only display the scheduled appointments, not the available times to book. For appointment calendars, use a call to action to link to the appointment calendar.