CAS-IT Home

Custom-developed Websites Tutorial

Last modified 1/3/2023

This article will guide you through the process of updating and adding content on your departmental website.

Logging In

  1. Open the browser of your choice.
  2. Navigate to the page you want to edit.
  3. Scroll to the bottom of the page, click “Edit Page” button in the footer of the page.
  4. Use your ULID (without @ilstu.edu) and password if prompted to log in.
  5. Click the “Lock” button in the top left corner to begin editing the content.

Once unlocked, you’ll see presently displayed information on the page and the window in an editable document.

Editing Content

From this screen, you have access to edit text, apply some text style, add images and documents, and create hyperlinks.

Add/change Text

  1. Click within the text editor box.
  2. Type any information you would like to enter.
  3. Highlight text and click the appropriate formatting button for desired style.
    1. For example, click the “B” button to bold highlighted text (note that the affected text will reformat appropriately).
    2. When clicking a formatting button, simplified markdown code will appear before or around highlighted text. For example, **Highlighted Text** would indicate bold content.
    3. Alternatively, you can set stylizing by clicking the appropriate formatting button, and then insert text within the markdown code provided (note that the affected text will reformat appropriately).

Inserting Images and Documents

  1. Click where you wish to insert the image within the text box.
  2. Click the small up arrow Icon, labeled as the “Media Upload” button.
  3. Browse to the image or document on your computer.
    1. For images, the file type extension must by .png, .jpg, or .jpeg; for documents, any file extension is acceptable.
    2. Upload the highest quality image you have available, our system will create multiple versions of that image to properly fit the device (e.g. mobile phone, tablet, laptop, desktop display, etc.) in which the site is being viewed. 
  4. Click the “Upload” button.
  5. Click the photo icon, labeled as the “Media Gallery” button.
  6. Choose the image or document you want to insert.
  7. Click the “Insert” button.
  8. Add “Alt Text” that conveys the message of the image or a brief explanation of the document.
    1. For example, a headshot of Mike Regilio can have alt text like “Photo of Mike Regilio.” A photo of faculty teaching a class can have alt text like “Dr. Smith giving a lecture.” The Alt text is located at the end of the image URL.
  1. Type your link’s textual representation.
  2. Highlight the text that will be the link.
  3. Click the chains icon, labeled as the “Create Link” button.
  4. Enter the desired URL in the popup window.
    1. We recommend using a browser to visit page and copy the URL from the browser to ensure accuracy.

A finished working link should look like: [Illinois State University](http://ilstu.edu). To make a link open in a new tab/window, add the following code immediately after the closing parenthesis: {:target="_blank"}. A working link that opens in a new tab/window should look like: [Illinois State University](http://ilstu.edu){:target="_blank"}.

Save, Publish and Unlock

The “Save” button saves your work but does not yet make it visible to visitors of the site. Publishing the sites makes saved content visible to site visitors.

Click the desired “Save” or “Publish” buttons to perform those respective actions. The live site should reflect the changes shortly, usually within thirty seconds. If you don’t see your changes live on the site, try clearing your browser's cache. Here is a good guide to clear your browser's cache.

After you are done editing a site and have published or saved your work, unlock the website by hitting the “Unlock” button. If you do not edit a document in 2 hours after locking it or since your last edit, the site will automatically unlock.

To exit the webpage editor, click the “Return to Site” button on the upper left-hand corner of the screen.

Video Tutorial

Here is a video tutorial of many of these processes being performed.