Web Editor Basics

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

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.

If you are an existing editor 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 what 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 know the URL of the page you want to edit, you can navigate directly to that page and click the brown Edit button in the lower right.

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 will 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.

Event

This is a page for an event that your group is hosting.

News

This is a page for any news article you want to publish.

Student

This is a student profile that can be used in the "Student Connection" page component on a General Page.

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.

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.