Cascade Guide

Creating a New Page

1. Click on the Add Content button at the top left of the page.
2. In the dropdown, select Page.
3. Select a Placement Folder to designate the page’s location. Each page in a site is saved inside a folder to create a site hierarchy. When you have found the right placement folder for the new page, click Choose at the top right.
4. Input the page title into the Display Name
5. Click submit. This will create a new folder and a file of the same Display Name. The file inside the folder is your new blank page inside that folder.
6. Edit this file to begin editing the page.

Tip: Page names are derived from two different sources. In the picture below, 1 is assigned by the Display Name of the page folder, and 2 is set by the Display Name of the page file.

To change a page title, you should edit both the page folder and the file.

Using the WYSIWYG

The WYSIWYG lets you freely edit the formatting of any element you want on the page. With a bit of HTML knowledge, you can use the WYSIWYG to create anything you like on the page, from images to charts and videos. This will be the primary way you put content on your page.

Using the WYSIWYG is like editing text in a Word document. Further instructions can be found in this document. See instructions for:

• Creating links
• Uploading page assets
• Inserting an image
• Inserting a video
• Inserting forms

Using Headings

Headings are used to organize the content on a page. Headings are numbered one through six and ranked by importance from smallest to largest.

The most important heading, the H1, is automatically created by filling out the Display Name. The other headings, H2-H6, are used to start a new section and are nested by level.

Headings must be used in this way to meet accessibility requirements. They make the page a lot easier to read and increase visibility on search engines. Learn more about headings.

Using Content Areas

Every element on a page is composed of different content areas. Content areas are grouped into different types:

• Calls to action (CTAs) – Use CTAs for targeted actions you want your user to do. CTAs are a powerful way to get the user’s attention, but you should use them sparingly to prevent them from losing their effectiveness. As the name implies, a CTA should be actions such as Sign up, Apply or Submit.
• Content blocks – Content blocks are the most frequently used content areas. You can put almost anything you need in a content block. Use them to break up content into one, two or three columns of varying size. They can also be used for more complex designs such as collapsible accordions or tabs to hide or show content.
• Design elements – Design elements are more stylized content areas that can be used to highlight important facts or quotes. Custom formatting is limited in these content areas.
• Featured content – Featured content is used to break up content into categories and link to other pages. These can be useful for a page that leads a user to a set of subpages. By providing a small summary of all subpages, the user can understand what’s there without clicking on every page.
• Lists and feeds – Lists and feeds can pull from your site’s staff directory, a news feed from FIU News or a calendar feed from the FIU Calendar.

Creating Links to Assets, Other Pages or Other Sites

1. While editing a page, highlight the text you want to link. If you are editing an existing link, click anywhere on the linked text. Then click the Insert/Edit Link icon to open the dialog box.
2. For links to pages within the site, select the Internal check box. Find the page or assets you want to link to in the flyout by searching the whole site under Browse.
3. For links to other sites, select the External check box and enter the full URL of the link.
4. For external links, links to PDFs and links to other documents, select the Target dropdown and click New Window.
5. For anchor links, use the Anchor Add anchors as they appear after the # symbol.
6. Click OK to finish.

Tip: For text links, avoid using Click here or Learn more. Links text should be as descriptive as possible. Instead of writing “click here to download our brochure,” write “to find out more, download our brochure.”

Uploading Page Assets (Images, Documents, Etc.)

All assets are required to be accessible for impaired users by the FIU Digital Policy and by standards set by the Americans with Disabilities Act. Follow these accessibility guidelines to learn how to make your documents accessible and follow the instructions below to learn how to make images accessible.

1. Upload images in the dimensions they will be displayed on the site (use sites like Pixlr to edit photos). Compress images so that they load faster on your site (use apps like JPEGmini to compress photos).
2. Click the Add Content button and select Default > File.
3. Select a Placement Folder for the file. All files should be saved to the _assets Inside _assets, select the appropriate folder (save images to the images folder, PDFs to docs, etc.). If necessary, you can create a new folder inside _assets by clicking Add Content > Folder. Saving assets to the correct location is important when you need to edit them in the future.
4. Upload the file.
5. Click Preview Draft to review the image upload and then click the Submit button.

Note: Uploaded images should be in the closest size possible to the size you want them to appear on your page. Do not upload huge images to Cascade and then shrink them. This causes your site to load slower. Make sure you include the file extension when giving your file a System Name (ex: image .jpg or document .doc or brochure .pdf).

Inserting an Image

1. While editing a page in the WYSIWYG, place the cursor where you want to insert the image.
2. Click the Insert/edit image icon.
3. In the pop-up window, select Choose File. In the flyout, you can search all uploaded assets in Browse. If you have not uploaded the image, you must return to Upload Page Assets steps above.
4. If the photo contains text or requires a description (like a logo or an infographic), you must fill out the Image description. If the photo is purely decorative, select the checkbox just above this field. This is required for ADA compliance.
5. Click Preview Draft to review image positioning on the page. Submit and publish when you are finished.
6. See instructions for Editing/Replace Page Assets if you ever need to change this image.

Inserting a Video

1. Get the video embed code from YouTube or Vimeo.
2. Find the page you want to place the video in and edit it.
3. In the content editor, select the Source code icon.
4. Paste the following code in the desired line on the page:
   

   <div class="flex-video widescreen vimeo">
       Video embed code goes here
   < /div>

5. Replace the red text with the video embed code.
6. Click Preview Draft to review the video position on the page**. Submit and publish when you are finished.

Tip: Use content areas to your advantage. If you need to place two or three assets side by side, use a two or three-column content area.

Inserting Forms

1. Copy the form embed code (you can create a form online using FIU Webforms).
2. Find the page you want to place the form in and edit it.
3. In the content editor, select the Source code icon.
4. Paste the code in the desired line of the page.
5. Click Preview Draft to review form positioning on the page. Submit and publish when you are finished.

Editing/Replacing Page Assets (Images, Documents, Etc.)

1. Go to the location the asset was saved in. Most assets should be saved under the _assets.
   *If you can’t locate the asset, return to the page where the asset is used. Inside the editing window, locate the asset, click on the asset, and try to edit it. This should show you where the asset is saved on the site.
2. When you find the asset in its saved location, select it and click Edit.
3. Upload the revised file from your computer.
4. Click Preview Draft and then Submit.
5. The new asset will be updated on whichever pages it is used. Return to that page and click Publish to make your changes live.