Page Comparison

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 paragraph blocks.

• Anchor link: the link that takes a visitor to the anchor. These can be made in any paragraph block type; they do not have to be in the same block or page as the anchor.

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 pageOnce

After creating the anchor is made, link to it by adding #anchorname, replacing anchorname with the actual anchor name, after the URL. Example, you can create and test the link. There are three ways to create the link, depending on where the link is in relation to the anchor:

• Link and anchor are in the same text block:

  • Create a link by selecting the Link button from the formatting options for the text block. In the pop-up window, select “Link to anchor in the text” as the link type, then select the correct anchor from the list of options.

• Link and anchor are in different blocks on the same page:

  • In the URL field for the link, enter #anchor-name; for example: #classesregistration. Note: if entering the link in a text block, you’ll want to select “<other>” as the protocol (rather than “https://”).

• Link and anchor are on different pages:

  • In the URL field for the link, enter the URL of the page with #anchor-name at the end of the URL. For example: pdx.edu/current-student#classesregistration

• • .

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.