Web Editor Basics

This video outlines all of the available features you can access and how editing on the website works.

New Editors

If you are a new editor, you will need to watch the 20 minute training video linked above then fill out the Web Editor Permission Form to request access to the website.

Existing Editors

If you are an existing editor and need access to a new Group, please fill out the Web Editor Permission Form with the request.

If you are looking for a refresh on a specific topic, you may find the individual topics listed below helpful or rewatch the training video at any time. For specific issues not covered here, check out our Frequently Asked Questions page.

If the FAQ did not answer your questions, please reach out to us at website@stlawu.edu.

Getting Started

To get started with editing webpages on the St. Lawrence University website, log into your account using the Login link at the very bottom of any of the webpages. Once logged in you will see two new menu bars at the top of your screen. 

Finding Your Content

As an editor, you have access to edit any webpage that falls under your department group. To see everything you have access to navigate to Groups in the top bar. This will list all the Groups to which you belong. Find the group whose content you want to edit and click the Nodes button on the right. 

This will open a page that lists all the content belonging to that Group. From this page you can Add New Content, Edit Existing Content or Edit the Side Menu.

Alternatively, if you navigate to a page that you have permission to manage, you will see an Edit button in the bottom right. This is where you can go to immediately make changes to the page you are on.

Guidelines for Creating New Content

1. All content has to have a title. The title also becomes the end of the URL or address of the page. Therefore, don't make the titles too long. In addition, there is seldom a reason to include St. Lawrence University or the name of the group/department in the title, since that information will automatically be present on the page and in the URL.

2. At the very bottom of the screen, there will be a pulldown menu that is defaulted to Draft, so that when you save the content, it is still in draft mode. Once you are ready to publish your new content, select Published from that menu and click save.

3. To add a piece of content to your group's left-hand navigation, the best way is to create the content and then manually add it to the Group Menu.  

Types of Content

You have access to a few different types of content on the website. Each one is created for a specific case as outlined below. 

General Page

The majority of your web pages will fall under this category. It is one of our most flexible page types. The available Page Components allow you a lot of freedom in how you lay out the content you want to post. This content type should be your default choice unless the content you are looking to post falls under one of the other specialized page types below.

Article

This page type is intended to be used for knowledge base and informational articles. How-Tos, FAQs and Resources would all fall under this type of webpage. This training page is an Article type.

Document

This is the content type to use if you need to upload a PDF to the website. Any document uploaded to the website will need to pass our accessibility standards before being published. For more information on the Document workflow and how to ensure your document can be published, please read the Documents on the Website article.

News and Event

These are pages for time sensitive content that belongs to your group. You can feature recent news or upcoming events on your pages using the "Featured News/Events" page components. 

Both News and Events have a Topic field, which is how the site knows which department/group landing page(s) to place the content on.

For News: Click Select Topic and you can either navigate through the alpha list of all departments and check the ones you want, or use the Contains field to search for the Topic or Topics you want to have the item appear on and click the check box, then click Select Topic.

For Events: Start typing the name of the Group and then select the correct one from the list that will populate below the field. Click Add another item to have the Event appear on another Group landing page. NOTE: If you want to put an event on another department's page that you don't directly manage, please communicate with them first.

Student

This is a student profile that can be used in the "Student Connection" page component on a General Page. Student Profiles can be used to feature notable current students within a program or department. If you choose to use this content type, make sure you have an editor who is keeping the information up to date so you do not end up with a blank section on your page when the profiles expire or featuring students who have graduated years ago.

As an additional note, in most cases you do not want to include the student email field. This field will generate a "Connect with <name>" button on the profile and allow any visitor to the website to email the student directly. It should only be used for profiles of student ambassadors who are trained to interact with the public.

Accessibility

Not all website users interact with the content in the same way so it is important to make sure that any content we post is as accessible as we can make it. Making content accessible means keeping in mind how different users will be interacting with our content. As an editor, it's important that you are using proper heading structures, alt text on any media and ensuring that the relevant information is fully available to all users.

The standard for our website is based on the ADA mandate to meet the Web Content Accessibility Guidelines (WCAG), specifically Level A and AA.

Heading Structures

In any WYSIWYG (whiz-E-wig or "What You See Is What You Get") editor on the website, you will have access to Headings which can be added to your content. Heading 1 is always the title of the webpage but you can add Headings 2-6 to the content as needed. 

Headings are used to visually and structurally break up long content on the page. You can think of them like chapters, sections and subsections in a text book. If you were to pull just the headings from a page, you should end up with an outline of the page's content.

Screen readers use heading structures to help users navigate the page. Just like sighted users scan bold titles, screen reader users can jump from heading to heading to find what they need quickly.

Back to our text book analogy, the page title is the chapter title so it is always a Heading 1. Any Heading 2s would be the sections in that chapter and Headings 3-6 are all subsequent subsections beneath those Heading 2s.

This training page is a good example of how heading structures can be used. 

Heading Structure Tips

  • Start with Heading 2s: These are your big main sections of content.
  • Use headings in order: Heading 3s belong under a Heading 2, Heading 4s belong under Heading 3s, etc.
  • Don't skip levels: Don't jump from a Heading 2 to a Heading 4 for example. It may confuse screen readers and those that rely on them to navigate a page.
  • Headings are for structure, not style: Don't use headings just to make text look big, bold or change the color. 

Images on the Website

If your webpage has images, figures, or diagrams you will need to ensure that they are readable through the use of alternate text and captions.

When you upload an image to the website, you will be required to input Alternative Text for that image. Alt Text for an image should convey what the image is depicting in a manner that is both short and descriptive. Remember, this text will be read out loud to screen reader users who cannot visually see the image themselves. It needs to give them a clear idea of what the image is showing and how it relates to the content on the page. 

You may use ChatGPT or other AI tools to help you write your alt text but you must ensure that the generated text is accurate to the image and context.

Captions can be used in a similar manner to Alt text to convey relevant information and context about an image. You can use the same text in both places, or you can use the Alt Text to describe the image and the caption to give context.

Images Containing Text: 2 Cases

Case 1: An image containing informational text.

Example: An event poster or presentation slide.

If you upload an image that contains informational text, the Alt Text for that image must include all of that text verbatim to be accessible. 

Case 2: An image containing text that is decorative or irrelevant to the context which the image is being used. 

Example: A screenshot of a computer program to show specific settings options and choices.

If you upload an image with text that is decorative or irrelevant to the content of the page, the Alt Text must reflect the situation and provide any text that is relevant. For our example above, the Alt Text would indicate that the image is a screen shot of a program then include what is being shown and how it is relevant to the content on the page. For something like showing settings, the Alt Text would state the possible options and which one is being selected in the image.

Alt Text and Captions Tips

  • Alternate Text is required on all images in a webpage.
  • If your image has words on it (such as a poster, logo, or promotional image), the Alt Text must have all of the same information. Don't summarize. Copy word for word what is on the image into the Alt Text to ensure that your screen reader users have the same information available to them as any visual user.
    • The exception to this rule are images where all of the words are not relevant to the context of the images. (See Case 2 above)
  • Alt Text needs to convey all relevant information to the user: This includes the subject(s), setting and interaction happening in the image.
  • AI generated alt text is almost never sufficient. Make sure you check the text on all images and add detail as needed even when using AI to generate text for you.

Editing Department Pages

Department Homepage

To edit the homepage of your department or group, navigate to the page and use the brown Edit button in the lower right. Many of the fields on the homepage are the same as on the General Page content type but there are a few sections that are specific to this type of page.

  • Contact Info: This information shows up above the side menu on all of your webpages. You can change any of the fields as needed. You can also add any department-specific social media accounts, as well as office hours if you have them.

Staff Listing Page

This is a special page used to list the members of your department. As an editor, you have access to manage the list of profiles displayed. Navigate to the listing page and use the brown Edit button in the lower right. 

  • Don't change the Department field
  • You can change the listing label or override the label with the "Override Title" field
  • Down in the Sections area, you can manage how your staff list is displayed. You have the option to add multiple profile sections, each with a unique title, or to keep all the profiles in a single section. 
  • To add a new profile to the list, scroll down to the next empty field and start typing in the new person's name. When they appear in the dropdown list, click on them to add the profile. NOTE: Their individual profile must be created and published in order to add it to the list. If you do not see them in the dropdown, email website@stlawu.edu and we'll help you get the profile created.
  • To remove someone from your list, just delete their name from the field or use the "Remove" button next to their entry. NOTE: If you are removing someone because they have left the university, you will also need to unpublish their individual profile page to remove them from the main directory. See the section below on editing individual profiles.

Editing Faculty/Staff Profiles

As an editor, you have access to editing any profile belonging to an employee within your department. You can find individual profiles from your staff listing page or by going through Groups > Nodes and filtering the list by the "Faculty / Staff" type. Navigate to the profile you want to edit and use the brown Edit button in the lower right.

Profile Information and Display Overrides

When a profile is created, it pulls in "official" information based on how an employee is listed with Human Resources. These fields are disabled from editing. If you need them changed you will need to reach out to HR and IT to get the official information updated. 

If the information needs to be changed immediately, you can use the "override" fields to temporarily change the information displayed on the profile page. Each piece of information that can be overridden will have the override field directly below it. There may also be a checkbox to "Hide Official" or "Exclude Official" which should be used unless you need the official and the override to both show up. 

Overriding or Adding Additional Titles/Departments

The biggest use case we see for the Override fields is when an employee belongs to multiple departments and needs to list additional titles or departments on their profile. To add a new line, follow these steps:

  1. Determine if the Official Title and Department need to be hidden. In some cases, the employee has moved departments but the official system hasn't updated yet, in which case the old Title line needs to be hidden using the "Hide Official Department" and "Exclude Primary Title" checkboxes. If they need to keep the official title line and you are simply adding an additional title or department, skip this step. 
  2. Under "Additional Departments," add in any new departments the employee belongs to. Start typing the department name in the field and then select it from the dropdown that appears. You can add multiple new departments to this field using the "Add Another Item" button if needed.
  3. Once the new departments are added, scroll to "Additional Title Lines" and use the "Add New Title" button to create a new one. Input the proper title then associate it with one of the new departments from Step 2 using the "Department or Program" field. Each new department needs it's own additional title or it won't show up in the profile. 
  4. Once you save the profile, the title lines should update with your new changes. If you don't see the right titles, make sure you correctly added both the Additional Department as well as the Additional Title Lines for each one. 

Removing a Profile from the Main Directory

If you had someone leave the university and need to remove their profile from the Main Directory, simply navigate to the profile in question and use the brown Edit button in the lower right. Scroll all the way down and change the "Published" status to "Archived, no published version" then save the profile. This will completely remove the page from public view and it will no longer show up in the directory.

Menus

Each group on the website has their own side navigation when one of their pages is being viewed. You can control which links are displayed, how they relate to each other, and the order in which they appear in the menu all from your Group page. 

Navigate to Groups in the top bar, then Nodes next to the group you want to edit. Under the main heading "<Group Name> Nodes" at the top of the page you'll see some tabs. Click on the Group menus tab then click on the menu in the list. There should only be one. 

This new page will list every link in your group's side menu in a table, with the options to edit, remove, or enable/disable the link also listed. There is also a button at the top to add a new link.

Adding or Editing a Link

When editing or adding a new link, you need to know the text that you want the link to say ("Menu link title") as well as the page you want to link to ("Link"). Similar to adding a link to a webpage, you just need to start typing the page title into the Link field to get a dropdown to appear. Click on the page in the dropdown to populate the field. You should see the page title plus some numbers in parenthesis appear. That's how you know you did it correctly.

Once both fields are filled in you can save the link and it will bring you back to the group menu page. 

Reordering Links

When you add a new link to the menu, it will automatically be added to the bottom of the table. Reordering links is very easy though. To the left of every link in the menu table, you'll find a 4-way arrow icon. Click and hold that icon to drag your links up and down the table to reorder them however you want. When you're satisfied with the new order, go to the very bottom of the page and click the Save button below the table to lock it in. 

Nested Links

When creating the side menu, you want to make sure it doesn't get too long. Long menus lead to awkward white spaces on some webpages and are more difficult for users to navigate to find what they need. One way to keep the length shorter is to nest similar links together under a single "parent". 

Choose the parent link or a <nolink> heading. Then decide which other links you want nested under that parent. These links will be the "children" of that parent link. Using that same 4-way arrow icon from the reordering section, drag your child link until it is directly below the parent, then drag it to the right until it indents in the table. You can nest any number of children under the parent link and reorder them the same as reordering normal links. 

When you are done, don't forget to go to the bottom of the page to hit that Save button.

Adding a <nolink> Heading

Sometimes you need a parent heading for the menu but don't have a full webpage to link to as the parent. You can easily add this to the menu by going through the same "add link" button as normal. The only difference is that in the "Link" field you would type <nolink> (don't forget those brackets!) instead of a page title. Saving the new link like this will give you a heading that you can nest other links under without needing to create a full parent webpage.