1. Web Ambassador's Network
  2. Tutorials & Resources
  3. Web Tutorials & Resources
  4. New Ragin' CMS Site Tutorials
  5. Program Page Tutorial

Program Page Tutorial

To build a program page, the tasks must be completed in this order:

  1. Build the spotlight that will be pulled in for the featured quote at the top. Follow the tutorial to create news/stories.
  2. Build the spotlight that will be pulled in for the alumni quote in the careers section. Follow the tutorial to create news/stories.
  3. Build the differentiator you want to pull in. Follow the tutorial to create differentiators - You only need to build one differentiator card for the program page, but you can add a differentiator section that will pull in 3 more differentiator cards.
  4. Build the four program features. Tutorial included below.
  5. Build the program page. Tutorial included below.


Build the four program features

Go to Content > Add content > Program Feature.  

Fill out the fields:

  • Title: This is the internal title for the feature, which you will use to find the content on the back end. Users will not be able to see this name.
    • Following the naming convention: “Major name – Feature theme” (i.e. “Theatre – Internships” or “General Studies – Student orgs”)
  • Feature display title: The public-facing name of the feature. 
  • Description: The body content of the feature. 
  • Video or Image: Use either field, but not both. Follow the steps for uploading a new photo or linking to a video. You should only add a video or image for the main program feature, not the others.
    • For the photo, make sure it is sized to 760x500 pixels and has an SEO-friendly file name.
    • Once the photo is uploaded, make the photo name follow this naming convention: Feature type – page – subject matter, such as “Program feature – Theatre – Internship”)
    • Return to the tab where you are building the program feature. In the image field, type in the name of the image you just added and select it from the auto-complete.  
  • CTA Link URL and Link Text: the URL is the link, and the Link text is the visible text (i.e. “more about internships”) 

Change from “Draft” to “Published.” Save.

Repeat for the other three program features.

Build the program page

Go to content > Add content > Program (not Program Landing). 

Fill out the fields:

  • Title: How the page name should appear.
  • Featured news/story: type in the name of the student spotlight that will be featured at the top of the page. It should auto-fill with the full name after you select it. 

Program details section

  • Add the details including:
    • Degree name
    • Program tracks (major, minor, or both)
    • Total credit hours)
    • Colleges: type in the name of the college for it to pull in from the organization directory
    • Departments/Schools: type in the name of the department for it to pull from the organization directory
    • Online program details (if applicable)
    • Concentrations (if applicable)

After the program details section, fill out the fields:

  • Who is this program for?
  • Body
  • Links for other applicants
    • URL: The link where the button will lead
    • Link text: The text that will appear on the button

Program differentiators/quick info ratings section

Fill out the fields:

  • Title: The title for the section (i.e. “What to expect as a theatre major”)
  • Differentiator section: 
    • Start typing in the name of your differentiator card
    • Select the card you've built for your program page
  • Quick Info Ratings section:
    • Add the Info Rating Title (which is the verb/noun) and add the Info Emphasis Rating (0-3). 
    • Click the Add Program Quick Info Rating button to add 1-5 more ratings.

Program features section

Fill out the fields:

  • Title and Display Title: same content (i.e. Life as a theatre major)
  • Large program feature: Start typing the name of the program feature you built for the primary placement and it should auto-fill. Remember: The program features’ names should all start with the name of the major.
  • Small program features: Start typing the name of the three program features you built for the secondary placement and it should auto-fill. 

Checkerboard (optional)

If you are highlighting concentrations through the checkerboard feature, click the Add Checkerboard button and go through the steps for creating a checkerboard. For each checkerboard  piece, you will need:

  • Photo or video (photo at 760x500 px)
  • Title (and optional title link)
  • Description

Program courses feature

Fill out the fields:

  • Title (always “[major name] Courses According to Students”)
  • Link: link to the catalog page with this program’s curriculum
  • Link text: Explore the curriculum
  • For each year, fill out:
    • Course Feature Year Title: Freshman Year, Sophomore Year, Junior Year, or Senior Year 
    • Course Title: Format as “BIOL 220 Survey of Human Anatomy and Physiology)
    • Professor name (if given)
    • Quote about course: Copy and paste the course quote with the quotation marks.
    • Quote source: Student name and major. Format as: “Camille Guilbeau, Health Information Management Major”
    • Repeat for each year.

Program career feature

Fill out the fields:

  • Title (“Careers in [major]”
  • Program featured alumni section:
    • Photo – use existing media: Type in the name of the person whose spotlight it is (from when you built the spotlight). It should auto-fill. 
    • Name: The alum’s name
    • Quote: The pull quote from the alum’s story (with the quotation marks)
    • Program and year: Format as “Major Name ‘XX” (Health Information Management ’97 or Theatre ’09)
    • Outcome or job: The alum’s title
    • Link section:
    • URL: start typing in the name of the spotlight and it will auto-fill.
    • Link text: Learn more about [alum’s name] or Meet [alum’s name]
  • Outcomes:
    • For each career outcome, fill out:
      • Title: The job title
      • Link: The link to the spotlight about the alum with that job title. Start typing in the spotlight’s name and it will auto-fill. Leave blank if there is not a spotlight. 

Program requirements section

For major requirements, minor requirements, and other requirements, you will need to create a Program Requirement section.

In each section, fill out:

  • Title: The heading for that section of the accordion
  • Body: The details for each.

Click the Add Program Requirement button to add another section.

Resources primary CTA section

Unless specified otherwise, this should always link to the application.


 
Resources secondary CTAs section

For each secondary CTA, fill out:

  • URL
  • Link text: the visible text the visitor will see. 
  • Attributes: Change target to “new window” if linking outside of the University’s main website. 

Organizations contact feature section

Fill out:

  • Title: Like “We’re here to help” or “Get more info”
  • Under organizations: Start typing in the name of the department that oversees that program and it will auto-fill. 

Scroll down to the bottom and change from “Draft” to “Published.” Click save. 
 

Download this tutorial