Test Page Instructions

Tips

• Save as “Draft” as you work.
• Save as “Needs review” when you’ve finished building the page.
  • The UComm Web Team will notify you in 1-2 business days either with confirmation your access has been granted or with feedback to get your page up to specifications. 

Step 1 – Create Your Test Page

1. Open a new browser window where you will create your test page.
   1. Keep this “Test Page Instructions” window separate so you can follow the steps.
2. Go to the User Access department’s homepage (in the breadcrumbs or from your Member page) > Content > Add new content > Group node (Page)
3. In the Title field enter “[Yourfirstname Lastname] Test Page”.

Step 2 – Add a Hero: Deluxe

1. Leave the Heading field blank to inherit the Page Title value.
2. Add some text to the Subheading field.
3. Add a Primary Button > Button: Internal Link.
   1. In the URL field, link to a page within the current site.
   2. In the Link text field, add clear, actionable link text instead of letting the button inherit the linked page title.
4. Add a Secondary Button > Button: External Link to URL.
   1. In the URL field, add a link to a page currently in Sitefinity.
      1. The URL will start with “https://ucdenver.edu” or “https://www.ucdenver.edu”.
   2. In the Link text field, add clear, actionable link text instead of letting the button inherit the external URL.
      1. For a button label, displaying the page URL is not recommended.
      2. Because this external link URL is still a CU Denver webpage, do not click Attributes.
5. Click Background > Add media.
   1. Click Image (instead of Hero: Deluxe Video) in the left column.
   2. Instead of uploading an image, use the Name field to filter images that include the word “denver”.
   3. Click Apply filters to see the image results.
   4. Select one of the resulting images and insert it.
      1. Important: You can change the focal point on the image by clicking the edit (pencil) icon, but remember that this will change the focal point on all occurrences of the image in the website. So, in general, do not change the focal point on an image unless you own it.
6. In the Color field, select “Sandstone” or “Spring Snow”.
7. Save the Hero component.

Step 3 – Add Components

1. Add a Text component. Within the WYSIWYG (“what you see is what you get”) editor add:
   1. Some text styled as Heading 2.
   2. Some text styled as Paragraph.
      1. Bold a word.
      2. Italicize a word.
      3. Link a word to another page within the site.
         1. Remember: All internal links should open in current window, not a new window.
   3. Some text styled as a Bulleted List.
   4. A Table with three rows and three columns.
      1. Include a Header row.
      2. Include a Header column.
      3. Add text to each cell.
      4. Caption the table.
   5. Select Display Style: Border.
      1. Tip: Often you will use “- None -” for Display Style, but the options of Border and Background are nice if you want to emphasize a block of text. These styles also match the styles for Two- and Three Columns, so you can combine these components for more layout options.
   6. Save the Text component.
   7. Save page as Draft.
2. Add a 50/50 component below the Text component by hovering on the Text component and clicking the bottom plus sign icon.
   1. Add Component Header.
      1. Add text in the Heading and Subheading fields so users have context for what this 50/50 section is about.
      2. Skip the Primary and Secondary Buttons.
   2. Select an Alignment.
   3. Click Image > Add media.
      1. Instead of uploading an image, use the Name field to filter images that include the word “denver”.
      2. Select one of the resulting images and insert it.
   4. Add text to the Eyebrow field.
   5. Add text to the Heading field.
   6. Add text to the Text field.
   7. Add Button: Internal Link.
      1. Link to a page within the current site.  
      2. Add clear, actionable link text instead of letting the button inherit the linked page title.
   8. Select a Background Color and a Content Color.
      1. Take note of the help text below each field as you make your color selections.
      2. Tip: Choosing the same color for both will create a design that is more open, leaving some space around the content. Choosing different colors will box the content, making the design more contained. Either design will work depending on what you think the page needs.
   9. Save the 50/50 component.
   10. Save page as Draft.
3. Add an Accordion component below the 50/50 component.
   1. Add text to the Heading and Text fields.
   2. Add an Accordion item.
      1. Add text to the Heading field.
      2. In Content, add Text and Button: Internal Link.
         1. Take note of the help text for assistance on how to add Text, Image, or Button Group.
         2. For the Button, add a clear, actionable label to the button.
      3. Save the Accordion item.
   3. In the same Accordion component, add a second Accordion item.
      1. Add text to the Heading field.
      2. In Content, add Text and Image.
         1. Instead of uploading an image, use the Name field to filter images that include the word “denver”.
         2. Click Apply filters to see the image results.
      3. Save the Accordion item.
   4. Leave First Item Open? toggled off.
      1. Tip: toggle this on to have the first item open when the page loads. A good case for using this toggle is if you are converting a design with Tabs into Accordions. The user interface is very similar, but the headings are stacked instead of side-by-side.
   5. Save the Accordion component.
   6. Save page as Draft.
4. Add an Info Block component below the Accordion component.
   1. Add text to the Heading and Text fields.
      1. Remember: the purpose of Heading and Text within or before a component is to tell your website visitor why this content might matter to them.
   2. Add a Button: Download File.
      1. Click Add media.
      2. Browse and select a file.
      3. For Button Text, add clear, actionable text.
         1. For example, if the file is “travel-award-application–cu-denver.pdf” add something like “View Travel Award Application”.
   3. Add a Button: Email.
      1. Add an email address to the first field.
         1. Click the item that appears below the field.
         2. The first field value should now begin with “mailto:”
      2. Add clear, actionable text, such as “Contact Us”, to the Link text field.
   4. Add a Button: Popover.
      1. In the Popover Content field, start typing “Popover” and select an item.
      2. Add clear, actionable text to the Button Text field.
   5. Select a Background.
      1. Note: Image Variations 1-10 are photos tinted with brand colors for a splash of texture and color on your page.  
   6. Save the Info Block.
   7. Save page as Draft.
5. Add an Anchor Point component above the Accordion component by hovering on the Accordion and clicking the top plus sign icon.
   1. Enter “Accordion” into the Name field.
   2. Leave the optional Id field blank and Hide From Anchor List Component toggled off.
   3. Save the Anchor Point.
6. Add an Anchor Point component above the Info Block component by hovering on the Info Block and clicking the top plus sign icon.
   1. Enter “Info Block” into the Name field.
   2. Leave the optional Id field blank and Hide From Anchor List Component toggled off.
   3. Save the Anchor Point.
7. Add an Anchor Links component above the Text component at the top of the Components section of the page.
   1. Enter “On This Page” in the Heading field.
   2. Save the Anchor Links.
8. Save page as Draft. 

Step 4 – Menu Settings

1. Open Menu settings in the Sidebar.
   1. Toggle on Provide a menu link.
      1. This is recommended for all pages to ensure that the URL alias pattern works well.
   2. Under Parent link, select “<Department menu (User Access)>”.
      1. This ensures that the URL alias follows the “/user-access/[your page title]” pattern
   3. Toggle off Menu item enabled.
      1. (If you don’t see the Menu item enabled toggle, skip this step.)
      2. Note: 5-7 is the maximum number of items a menu should have. After 5-7 items, visitors will see too many options and tend to skip them. Remember this rule of thumb for all your menus and any time you create lists or groups of content on your website: sometimes less is more.
   4. Save page as Draft. 

Step 5 – Prepare to Submit

1. Review your test page.
   1. Check that the steps above are reflected in your finished page.
   2. Fix any problems and add anything that’s missing, if applicable.
2. Add a Revision log message.
   1. For example, “Submitting test page to get site access.”
3. Change Current state from “Draft” to “Needs review”.
4. Save as Needs review. 

What Happens Next?

Saving your test page with “Needs review” status notifies the UComm Web team via email that there is a page in the approval queue. (This process is how the Author/Approver workflow works if you add users with the Author role to your Department.)

The UComm Web Team will review your test page.

• If your test page meets the requirements from the Test Page Instructions, the UComm Web Team will update your Department and User Role, then confirm via email that you have the website access you requested.
• If your test page does not meet the requirements from the Test Page Instructions, the UComm Web Team will work with you – via email, Teams, or Zoom – to get your page to the point where it meets requirements. Once your test page passes, the UComm Web Team will update your Department and User Role, then confirm via email that you have the website access you requested.