Page Editing

/https://siu.edu/search-results.php

Last Updated: Oct 04, 2024, 10:15 AM

Methods for Adding Content

There are different methods of adding content to each region.

Text Only

Some regions only allow text entry with no added options, for example:

Text Input Main Content

WYSIWYG Editor

WYSIWYG stands for “what you see is what you get”. Some regions allow text entry with the options to add links, images and styling within text content.

wysiwyg input

File Selector

Some regions allow you to select files within the site to use in those regions. These are for adding images or blocks:

File Input

To use an image or block in these areas click the image or block icon and navigate to the correct file within your site.

File Selector or WYSIWYG Editor

For these areas, if a block is not chosen for content, the content of the WYSIWYG editor will be used. If there is no block chosen and no content in the WYSIWYG, the region will not appear on the page:

File and wysiwyg input

Regions where multiple items are allowed

If a region will allow for adding additional areas of content, a plus symbol will appear in the upper left of the region’s editing area. To add another area click the plus symbol. When there are multiple items in that region, a symbol in the upper right will appear that indicates which order the items are in, allowing the user to change the item order and allowing the user to delete the items. The symbol looks like this:

Move up and down

Use the plus and "x", and up and down arrows to add, move or delete items.


Anchors

Anchors allow you to link to content further down the page. Clicking the link will take you to that section of the web page. This is particularly useful for frequently asked questions pages, with anchors for each question, and a table of contents linking to them at the top.

To place an anchor on your page:

  1. Place the cursor where you want your anchor to link to.
  2. Click the anchor icon in the WYSIWYG (located to the left of the picture icon)
  3. Type in an id for your anchor and click insert. Note: Make sure to remember this id, you will need it later on.
  4. Highlight the text you wish to function as your link and click the hyperlink icon (located two icons to the left of the anchor)
  5. Enter the id of the anchor you just created in the ANCHOR text box and click INSERT. Note: Make sure to enter the id EXACTLY as you did originally, including capital/lowercase letters, dashes, spaces, etc.
  6. Submit your changes and publish the page. Click the link to test the anchor on the live webpage.

Anchor


Adding a Link to Page Content

Add links to existing pages within your site, external websites, or to PDF documents.

Insert Link

  1. Within the WYSIWYG editor, highlight the word or words you wish to turn into a hyperlink.
  2. External LinkClick the insert web link icon on the toolbar. The insert link window will now open with two options - one for internal links, and one for external. [image]
  3. To insert a link to a page or document within your site, click “Choose File, Page or Link” to open a new window that will allow you to select the page to which you will link.
  4. To insert an external link, paste the URL of the external link into the LINK field. Change TARGET to New Window if you want the new page to open in a new window.
  5. Click OK

 


Cut/Copy/Paste

You may not right click the mouse to cut, copy, or paste within the WYSIWYG. Instead you must highlight the text and press the cut/copy/paste icons on the WYSIWYG panel or use the keyboard shortcuts.

Cut/Copy/Paste

Windows Users:

  • Cut: Ctrl + x
  • Copy: Ctrl + c
  • Paste: Ctrl + v

Mac Users:

  • Cut: Cmd (⌘) + x
  • Copy: Cmd (⌘) + c
  • Paste: Cmd (⌘) + v 

Table

Tables should only be used to display data. There are many accessibility requirements with tables so most of the time, it's easiest to create the table you want, and then to fill out a web ticket to let us know you added a table that we need to code for accessibility. You can add a table by copying and pasting it from Microsoft Word, or you can use Cascade's table tool.

table

On all tables do the following for accessibility:

  1. Add a table summary (example: summary="summary of table")
  2. Always wrap the interior of the table tag in <tbody> tags
  3. If adding table headings (th) make sure to match the id of the th with the "headers" on the corresponding td (example: headers="course").
  4. Add aria-labeled tag and refer to a caption, heading, or any other piece of content with an id (example: aria-labeled="caption"). 
  5. Use a caption tag to add a title for the table: <caption id="caption">Accountancy, required 6 hours</caption>, for example.

HTML Editor

This is a helpful feature for those who wish to view and edit a page’s HTML directly. If you are unfamiliar with HTML, do not fear. The WYSIWYG will allow you to fully edit your page without it.

HTML Editor


Lists

numbered list option

Bullet and numbering alternatives are available for any information you wish to put in a list format.

  1. Highlight the desired text
  2. Press bullet/number list in the WYSIWYG.

If you have multiple list in one pressing tab once indents your information starting the next list and pressing enter twice returns you back to the previous list. For example:

bulleted list option
  • Apply and be admitted as a first time freshman at SIU
    • be a U.S. citizen, or other eligible non-citizen
    • be enrolled in a two- or four-year degree program
    • be enrolled at least half-time
    • live in Southern Illinois

Embedding Video

Embedding a video or presentation of some sort is done by clicking on the film strip on the WYSIWYG. When embedding video, be sure that the video has closed captioning added to it for accessibility purposes. YouTube does this automatically, and we recommend using it for video hosting.

To embed a YouTube video:

  1. Go to the video, and copy the URL
  2. Go back to your page in Cascade and click the film strip on the WYSIWYG.
  3. Paste URL you copied from YouTube into the box marked “Source” and submit your changes.

insert media option on toolbar

video link dialog

To add a video to YouTube itself, follow these steps:

  1. Sign into YouTube.
  2. Click the Upload button at the top of the page.
  3. Select the video you'd like to upload from your computer. You can also create a video sideshow or import a video from Google Photos.
  4. As the video is uploading you can edit both the basic information and the advanced settings of the video, and decide if you want to notify subscribers (if you uncheck this option no communication will be shared with your subscribers).
  5. Click Publishto finish uploading a public video to YouTube. If you set the video privacy setting to Private or Unlisted, just click Done to finish the upload or click Share to privately share your video.
  6. If you haven’t clicked Publish, your video won’t be viewable by other people. You can always publish your video at a later time in your Video Manager.

Adding closed captioning to your YouTube video:

  1. Go to your Video Managerby clicking your account in the top right > Creator Studio > Video Manager > Videos.
  2. Next to the video you want to add captions or subtitles to, click the drop-down menu next to the Edit
  3. Select Subtitlesand CC.
  4. Click the Addnew subtitles or CC
  5. Choose automatic captioning