WEBSITE USER GUIDE V - University of Indianapolis · UNIVERSITY OF INDIANAPOLIS INTRODUCTION 0 4 UNIVERSITY OF INDIANAPOLIS WEBSITE USER GUIDE To ensure proper procedures for updating

W E B S I T E U S E R G U I D E V . 8

CASCADE INTERFACE OVERVIEWLOGIN PAGE

USER DASHBOARD

SITE DIRECTORY

PAGE EDITORPAGE EDITOR OVERVIEW

STANDARD ROW COMPONENTSWYSIWYG COMPONENT

HOW TO STYLE SECTION HEADINGS AND PARAGRAPHS

HOW TO CREATE TEXT LINKS AND RED CALL-TO-ACTION BUTTON

HOW TO ADD/EDIT A VIDEO

HOW TO ADD A LIST AND SUBLIST

HOW TO ADD AN IMAGE

HOW TO ADD A TABLE AND FORMAT THE TABLE CELLS

HOW TO ADD AN ACCORDION

HOW TO ADD A PROFILE COMPONENT

SIDEBARSFIRST SECTION

ADDITIONAL SIDEBARS

S EC . 01

S EC . 0 2

S EC . 0 3

S EC . 0 4

TA B L E O F C O N T E N T S

S EC . 07

S EC . 0 8

S EC . 0 9

TA B L E O F C O N T E N T S( C O N T I N U E D )

CREATING NEW PAGES

APPROVAL WORKFLOWSWORKFLOWS OVERVIEW

SAVING/PREVIEWING PAGE AND SUBMITTNG CHANGES

STARTING A WORKFLOW

REVIEWING REJECTIONS AND MAKING MORE CHANGES

UPLOADING DOCUMENTS AND IMAGESADDING BRAND NEW DOCUMENTS

UPDATING EXISTING DOCUMENTS

ADDING BRAND NEW IMAGES

UPDATING EXISTING IMAGES

BACKGROUND IMAGE ROWSCONTENT FEATURE WITH IMAGE

SLIDER

3 CALLOUT

STORY BLOCKSCREATING STORY BLOCKS

ADDING STORY BLOCKS TO PAGES

EDITING STORY BLOCKS

S EC . 0 6

S EC . 0 5

0 4 U N I V E R S I T Y O F I N D I A N A P O L I S I N T R O D U C T I O N

UNIVERSITY OF INDIANAPOLISWEBSITE USER GUIDE

To ensure proper procedures for updating content on the website, we have developed a website user guide that consists

of several basic tutorials.

1. Navigating the Interface

2. Editing Pages

3. Editing the Sidebar

4. Approval Workflows

5. Uploading Files

For questions, please contact:

Kaye Manuel ([email protected])

T H I S I S A L I V I N G D O C U M E N TElements outlined within are subject to change.

CASCADE INTERFACE OVERVIEWUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 1

0 6 U N I V E R S I T Y O F I N D I A N A P O L I S U N I V E R S I T Y W E B S I T E

1. Go to: https://uindy.cascadecms.com/login.act

2. Login with your own credentials.

First-time users will be provided with a default password. For security

purposes, all users are encouraged to change their default password after

their first login.

LOGIN PAGE

USER DASHBOARD

M Y C O N T E N T

Provides quick links to files you’ve recently accessed, files you own, drafts

you haven’t saved, and workflows to review.

N O T I F I C A T I O N S

Notifies you of any recent activity on your account, such as files that have

recently been published, including files you have submitted for review and

have been approved.

NotificationsMy Content


SITE DIRECTORY

H O W T O A C C E S S T H E S I T E D I R E C T O R Y

1. Click on the SITE drop-down on the top-left corner of the user dashboard.

2. Select “UIndy”.

F I L E E X P L O R E R

The file explorer (narrow pane on the left) contains a list of all the assets on

the website (e.g. folders, subfolders, pages, files, custom sidebars, etc.)

C U R R E N T V I E W

The current view (wide pane on the right) shows your currently selected

asset. The screenshot on the left shows the root folder, UIndy, as the

currently selected view.

H O W T O A C C E S S A F O L D E R

1. Right-click on the folder on the file explorer (narrow pane on the left).

2. Select “View”.

(CONTINUED ON NEXT PAGE)

The site directory contains all of the files on the website.

SITE drop-down

File explorer Currently selected view Folder options


S E A R C H B A R

Search for keywords in filenames, file titles, or file path. When searching by

file path, DO NOT begin with a forward-slash.

A D D C O N T E N T

The Add Content button provides options for creating new pages, folders,

custom sidebars, and uploading files (e.g. photos and PDFs).

Select the “Default” option to view more assets (e.g. folders and files).


Search Bar

Add Content button

Incorrect format: /campus-life/lecture-programs

Correct format: campus-life/lecture-programs

E X A M P L E

Page

Click to view more assets

Folder


H O W T O A C C E S S A P A G E

1. Click on a folder in the file explorer to expand the list of files within that

folder.

2. Click on a page to see it as the current view.

The file path of a page after UIndy is the page URL. The page URL will be

active after an administrator publishes the page.

Current viewPageFolder

Page options

File path

(page URL)

File path: UIndy / training / about-uindy-training / index

Page URL: www.uindy.edu/training/about-uindy-training

Note: index at the end of a page URL can be excluded. By default, web browsers display the index file inside a folder when no other page name is specified in the URL.

E X A M P L E

PAGE EDITORUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 2

0 1 1 U N I V E R S I T Y O F I N D I A N A P O L I S U N I V E R S I T Y W E B S I T E

PAGE EDITOR OVERVIEW

Edit buttonSelected page

The page editor contains options for editing a page’s settings and body

content. Options are also available to hide/show the breadcrumb navigation

and sidebar on the page.

H O W T O A C C E S S T H E P A G E E D I T O R

1. Click on a page in the file explorer to select it. The current view will display

a preview of that selected page.

2. Click “Edit” on the page options, located on the top-right corner of the

current view.

D I S P L A Y N A M E V S . T I T L E

Use these fields to set up the general settings of a page (e.g. Page Title).

The Display Name is the text label for this page that’s used on the

breadcrumb navigation and sidebar. If this field is blank, it will default to the

Page Title.

The Page Title is the text label for this page that’s displayed on the fIle

explorer and browser tab. If this field is blank, it will default to the Display

Name.

If the Display Name and Page Title fields are both blank, it will default to the

Page Name, which is the same filename that’s used in the URL.


Page Title

Display Name


Banner panel

Content Row

panel

C O N T E N T P A N E L S

Content panels can be expanded to reveal options for editing section

content.

The first type of content panel on any page is the Banner panel. It provides

options for updating the top banner image, headline, and subheadline.

However, the banner is optional. Leave at least one field on a banner blank

to hide the entire banner.

All content panels after the Banner panel is a Content Row panel, which

contains options for editing the body conent. There are several types of

content rows. The difference between them are the available components for

displaying content (e.g. buttons, headings). New content rows can be added

by clicking on the plus-sign (+) on the right side of a Content Row panel.

Content panels Add new Content row

STANDARD ROW COMPONENTSUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 3


STANDARD ROW OVERVIEWThe most common type of content row is a “Standard Row”. This is used for

displaying components such as: standard headings, paragraphs, lists, links,

buttons, videos, images, tables, and accordions.

Select “Standard Row” from the Content Row Type drop-down to reveal the

Component Type drop-down.

ComponentType

Content RowType



Toolbar

W Y S I W Y G C O M P O N E N T

“WYSIWYG” the most common type of Standard Row component. This is

used for displaying standard headings, paragraphcs, lists, links, buttons, and

tables. It looks similar to the standard text editor with a toolbar for changing

the text formatting.

H O W T O S T Y L E A S E C T I O N H E A D I N G

1. Highlight the heading you want to format.

2. On the WYSIWYG toolbar, click Formats > Headings > Heading 2.

The Headings drop-down reveals the different heading classes. Use the

“Heading 2” class for the main section headings within a page.

Use the “Heading 3” class for sub-section headings.

Use the “Heading 1” class in a WYSIWYG component only if you are styling

the name of the page. This typically happens when you are not displaying

the name of the page in the top banner. Each page can only have one

“Heading 1”, class for search engine optimization (SEO) purposes.

Formats drop-down


Paragraph

H O W T O S T Y L E P A R A G R A P H S

By default, paragraphs will already be styled as soon as you begin typing in

a WYSIWYG Content box. However, if you are copying and pasting text from

a Word document, the paragraph may not be recognized in the editor as a

paragraph.

Highlight the paragraph text. If the element indicator at the bottom of

the WYSIWYG Content box displays “p”, then the editor recognizes the

highlighted text as a paragraph. No further styling is needed. However, if the

element status bar is blank or displays something other than “p”, then the

paragraph will need to be styled properly.

1. Highlight the paragraph text you want to format.

2. On the WYSIWYG toolbar, click Formats > Blocks > Paragraph.

H O W T O C R E A T E T E X T L I N K S

1. In the WYSIWYG Content box, highlight the text you would like to use as

the link.

2. Click the Insert/Edit Link button on the toolbar. This is pop-up a dialog box.

3. If you want to link to a page inside Cascade, checkmark “Internal” for the

Link Source. Otherwise, choose “External” if you’re linking to an external

URL.

4. In this example, we’ll choose “Internal” link. Click on the Choose File Page,

or Link button. This will open the file chooser panel on the right side.

Element indicator

Highlightedtext

Insert/Edit Linkbutton

Insert/EditLInk button



Browse tab

Keyword search box

Selected page

5. Click the Browse tab. You may use the keyword search box to narrow

down the results.

6. After you select the page you page, click Choose at top-right corner.

This will bring you back to the Insert/Edit Link dialog box. If you inserted an

external link, select “New Window” from the Target drop-down option. This

ensures the external link will open in a new tab so the user doesn’t leave the

current website. Otherwise, select “None” from the Target drop-down option.

7. Click OK button.

H O W T O A D D A R E D C A L L - T O - A C T I O N B U T T O N

1. At the bottom of a WYSIWYG Content box, select “Yes” for the Include

Button Link? option. A Button Link panel will appear. Click it to expand the

options.

2. Fill in the Link Text (button label).

3. Select the LInk Type. “Internal” is a page within Cascade. “External” is an

external URL.

4. If you choose “Internal Link”, click the Choose File, Page, or Link button

and browse for the page.

5. If you want to add another button, click on the plus sign (+) to the right of

the Button Link panel.

Include ButtonLink option

Add another button


H O W T O A D D / E D I T A V I D E O

1. Click on the plus sign (+) to the right of a Component panel to add a new

component after it.

2. In the Component Type drop-down, select “Video”. A Video panel will

appear. Click it to expand.

3. For the video Type field, select “Full Size” or “Excerpt”. “Full Size” will

appear larger on the page but without a caption. “Excerpt” will appear as a

smaller thumbnail with a short caption on the right side of the thumbnail.

4. Provide the YouTube ID.

5. Provide a video Image for the thumbnail.

6. If using “Excerpt”, provide a 3-5 word video Description.

H O W T O A D D A L I S T

1. In a WYSIWYG Content box, add some text including the list heading and

list items.

2. To style the list heading, highlight the heading text and click Formats >

Headings > Heading 2 on the toolbar.

3. Highlight the list items and click Bullet List button on the toolbar. For a

numbered list, click Numbered List button on the toolbar.

Bullet List button

Numbered List

button

YouTube URL: https://www.youtube.com/watch?v=0APmoW-LrmQ

E X A M P L E Y O U T U B E I D

Selected list items

Component Type


H O W T O A D D A S U B L I S T W I T H I N A L I S T I T E M

In a WYSIWYG Content box, highlight the sublist text and press “Tab” on your

keyboard.

To remove the sublist, highlight the sublist text and press “Shift” + “Tab” on

your keyboard.

H O W T O A D D A N I M A G E

All new images must be emailed to [email protected] for

approval. An administrator will resize and upload images to the specified

department folder.

1. In a WYSIWYG Content box, click and place your cursor where you want

the image to appear.

2. On the toolbar, click the Insert/Edit Image button. This is pop up a dialog

box.

3. On the Image field, click Choose File.

4. Use the Browse tab in the file chooser to search for the image name.

5. Select the image file and click Choose on the top-right corner.

6. In the Image Description field of the Insert/Edit Image dialog, provide an

image description for screen readers and accessibility purposes.

7. Click OK. The image should display in the WYSIWYG Content box.

Image

Image description

Sublist textInsert/Edit Image

button


Fullscreen button

H O W T O A D D A T A B L E

1. Before inserting a table, click on the Fullscreen button on the toolbar for a

larger view.

2. Click and place the cursor where you want to insert a table.

3. On the toolbar, click the Table drop-down, hover over the “Table” option,

and select the table layout (e.g. 4x4). After you select a table layout, a

standard table will display in the WYSIWYG component.

4. Click anywhere inside the table. On the toolbar, click the Table drop-down

again, and select “Table Properties.” Checkmark the option labeled “Caption”

and click OK. This adds an additional cell above the table that allows you to

type in a table title. You must provide a table title.

5. Click inside the other cells and start adding text content.

It add more rows or columns, click inside a cell, and table options will display

under the table that looks like this:

Select the option that you need.

H O W T O F O R M A T T H E T A B L E C E L L S

Column headings should be formatted as cell headers (in red text and all

caps).

1. Highlight across all the column headings and right-click on the highlighted

area. A context menu will appear.

2. Click Cell > Cell properties. The Cell properties dialog will appear.

3. For the Cell type field, select “Header cell”.

4. For the Scope field, select “Column”, then click OK.

Optional: You may also change the alignment of cell content. For example, if

you want the entire first column to be right-aligned, follow these steps:

1. Highlight all the text in a column.

2. Click Cell > Cell properties. The Cell properties dialog will appear.

3. For the H Align field, select “Right” and click OK.

Column headings

Cell properties option


ComponentType

H O W T O A D D A N A C C O R D I O N


component after it.

2. In the Component Type drop-down, select “Accordion”. An Accordion

panel will appear. Click it to expand.

3. Add text for the accordion Heading field.

4. Add text the Content box. This box works similarly to the WYSIWYG

content box.

5. Click on the plus sign (+) to the right of a Accordion panel to add more

accordions.

Accordion Heading Accordion Content


H O W T O A D D A P R O F I L E C O M P O N E N T

A “Profile” component is a type of Standard Row component that’s typically

used to display faculty/staff information. The elements contain a photo on

the left and text content on the right side of the photo.


component after it.

2. In the Component Type drop-down, select “Profile”. A Profile panel will

appear. Click it to expand.

3. Add the Photo. Most faculty/staff professional photos are available on the

system. You can find them by browsing for their last name. If a faculty/staff

photo is not available, search for the file called “no_photo.png” and use it as

a placeholder.

If a brand new faculty/staff photo needs to be uploaded, please send a

request to [email protected]. An administrator will resize

and upload images to the appropriate “images” folder so they are available

in the file chooser panel.

4. Provide the ALT Text, which is the image description used by screen

readers. You can set this to the person’s name.

5. Provide the Content, which is the person’s information, including name,

title, and contact information.

6. Format the name as a “Heading 3”. First, highlight the name. On the

toolbar, select Formats > Headings > Heading 3.

7. When you are finished making all edits on the page, submit the change

and go through the approval workflow.

Profile component

Component Type

Photo(129x194)

Image description

Toolbar

Paragraph text

Heading 3

SIDEBARSUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 4


H O W T O C H A N G E T H E L I N K O R D E R

1. On the file explorer (left side), right-click on the parent folder of the page

(e.g. About UIndy Training).

2. Click View to select the folder. The current view will display a list of all the

folder contents.

3. On top of the list, click on the Order colum heading. This will automatically

reorder the list items in ascending order (startng with “1” at the top).

4. On the list, click and drag a page title to the order you want it to display.

5. When you are finished, send an email to marketing-webrequests@uindy.

edu and state which folder needs to be re-published. An administrator must

publish the entire parent folder in order for the changes to be live.

H O W T O U P D A T E T H E C A L L - T O - A C T I O N C O N T E N T

1. In the file explorer, right-click on the “call-to-action” file in the folder and

select Edit.

2. In the call-to-action’s content box, modify the section heading and links

just like you would in a regular WYSIWYG component.

3. When you are finished, click Preview Draft on the top-right corner.

4. Click Submit and go through the workflow approval process. (See section

Approval Workflows in this document)

Link

Section heading

FIRST SECTION

ADDITIONAL SIDEBARS

The links on the first section of a sidebar are auto-generated based on the

pages inside the current folder.

Each folder should have an file entitled “call-to-action”. These blocks of code

are used to update other sidebar sections/links on the right side of the page.

File explorer Current view Order column heading



Additional section

H O W T O A D D A D D I T I O N A L S I D E B A R S E C T I O N S

1. In the content box, highlight an existing section starting from the beginning

of the section heading to the end of the last link in its list.

2. On your keyboard, press Ctrl+C to copy (Command+C on Mac).

3. Click and place your cursor at the end of the last link on the list.

4. On your keyboard, press Enter TWICE to place the cursor where the next

sidebar section should begin.

5. On your keyboard, press Ctrl+V to paste (Command+C on Mac) the new

sidebar section. You might see that the section heading appears right under

the last link of the previous section.

6. Click and place your cursor at the beginning of the new section heading

and press Enter TWICE on your keyboard to add some space between the

last link of the previous section and the heading of the next section.

7. Modify the new section heading and links just like you would in a regular

WYSIWYG component.


9. Click Submit and go through the approval workflow process. (See section

Approval Workflows in this document)

CREATING NEW PAGESUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 5


DisplayName

Page Title

Page Name

Configure

“Include when indexing” “Include when publising”

H O W T O C R E A T E N E W P A G E S

1. In the file explorer, right-click on the folder where you would like to add a

new page, and click VIew to select the folder.

2. On the top menu, click Add Content and select Page. This will display a

basic page editor.

3. At the top of the page editor, fill in the Page Name. This is the filename

that’s used as part of the page URL. Please use LOWERCASE letters and NO

SPACES. You may use dashes instead of spaces.

P A G E N A M E V S . D I S P L A Y N A M E V S . P A G E T I T L E

The Page Title is the text label for this page that’s displayed on the fIle

explorer and browser tab when users bookmark this page. If this field is

blank, it will default to the Display Name.

The Display Name is the text label for this page that’s displayed on the

breadcrumb navigation and sidebar. If this field is blank, it will default to the

Page Title.

If the Display Name and Page Title fields are both blank, it will default to the

Page Name, which is the same filename that’s displayed in the URL.

H O W T O P R E V E N T A P A G E F R O M B E I N G P U B L I S H E D

Full site publishes may be scheduled in order to update the links on the

mega menu and footer. This means all pages must be re-published. To

prevent an incomplete page from being published accidentally, follow these

steps:

1. In the page editor, click on the Configure tab.

2. Uncheck “Include when publishing” and “Include when indexing”. When

you’re ready to submit the page for review and publish, checkmark those two

items again and go through the Approval Workflow.

Website URL: https://www.uindy.edu/about-us/fast-facts

Page Name: fast-facts

E X A M P L E

APPROVAL WORKFLOWSUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 6


Preview Draft button

Submit button

Comments used for the system’s version history

1. When you are finished editing a page, click the Preview Draft button at the

top-right corner of the page editor to preview the changes. If further changes

are needed, click Edit to open the page editor again.

2. On the top-right of the current view, click the Submit button. This will pop

up a box that allows you to make notes of changes you’ve made. These

comments are for the system to keep in its version history.

3. Click Check Content & Submit. This will go through the system checks

(e.g. spell check, broken links check, and accesibility check).

WORKFLOWS OVERVIEW

SAVING/PREVIEWING PAGE AND SUBMITTING CHANGES

Approval workflows are set up by the administrator to ensure any changes

are reviewed before publishing to the live site.

In a nutshell, the process is:

1. Save changes and preview page.

2. Submit changes.

3. Go through system checks (e.g. spell check).

4. Provide comments of changes for the reviewer and start workflow.

5. Approver reviews changes.

6. Changes are approved and published live.

Check Content & Submit button


Comments for the approver to read

Current Step Owner

W O R K F L O W I N P R O G R E S S

If the Content Step Owner line on this screen says “Approvers”, that means

the changes have been sent. At this point, you’ll have to wait for the approver

to review the changes.

G E T T I N G A P P R O V E D

When the changes have been approved, you will receive an email stating

that the workflow is complete. No other action is needed.

1. On the Start Workflow screen, please use the Comments for reviewer box

to describe the changes you have made on a page. These comments will be

emailed to the approver so he/she knows what was updated and what page

elements to review.

Note: Changes may be rejected if Comments for reviewer box is left blank.

2. Click the Start Workflow button on the top-right of the screen. This will

take you to the Workflow in Progress screen.

STARTING A WORKFLOW


Comments from the approver.

Workflows tabWorkflow

H O W T O M A K E F U R T H E R C H A N G E S

1. Click on Go to the dashboard link from the email. This will take you to your

user dashboard.

2. In the blue My Content box, you’ll see a red indicator on the Workflows

tab. Click on the Workflows tab and click on the workflow. This will take you

to workflow screen.

3. In the workflow screen, click on the Edit link under the Available Actions

section. This will open the page editor so you can make your changes based

on the approver’s comments.

4. When you are finished making changes, click the Preview Draft button.

5. Click the Advance button. This is similar to the Submit button. Fill in the

Enter Workflow Comments for the approver to read.

6. Go through the system checks and click the checkmark button.

7. Afterward, you’ll see the workflow screen again. If the Content Step Owner

line the screen says “Approvers”, that means the changes have been sent. At

this point, you’ll have to wait for the approver to review the changes again.

In some cases, your changes may be rejected and sent back to you by the

approver. If this happens, you will receive an email that looks similar to the

email on the left screenshot. Read the comments from the approver.

REVIEWING REJECTIONS ANDMAKING MORE CHANGES

UPLOADING DOCUMENTS AND IMAGESUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 7


“Files” folder File option Current view

“choose” link“Use the suggested name” link

File upload box

Acceptable documents file formats: .PDF | .DOC | .DOCX

H O W T O A D D B R A N D N E W D O C U M E N T F I L E S

1. On the left file explorer, right-click on the “files” folder within your

department and click View to select the folder. The current view should

display any files within that folder.

2. At the top, click the Add Content button.

3. Click Default to see more options.

4. Click the File option. The file uploader will appear.

5. In the file uploader window, click the choose link inside the file upload box

(box with dotted lines)

6. Browse for the file on your computer.

7. The filename must be lowercase and have no spaces. Use underscores

to replace spaces. If the filename includes uppercase letters and/or

spaces, you’ll see some red text at the top of the file uploader window that

suggests a different name. Click the link use the suggested name. This will

automatically convert any uppercase letters to lowercase and any spaces to

underscores.


9. Click Submit.

10. Send an email to [email protected] and state which

document needs to be published. When uploading a brand new document,

an administrator must manually publish the document to be viewable on the

live site.

UPLOADING DOCUMENTS


Select document to update

Edit buttonCurrent view

“Add Content” button“Images” folder

H O W T O U P D A T E E X I S T I N G D O C U M E N T F I L E S

1. On the left file explorer, click on the document you want to update. The

current view should display a preview of that document.

2. At the top right, click the Edit. The file uploader window will display.


(box with dotted lines).

4. Browse for the updated document on your computer.

5. Click Preview Draft on the top-right corner.

6. Click Submit and go through the Approval Workflow.

Acceptable image file formats: .JPG | .PNG | .SVG

H O W T O A D D B R A N D N E W I M A G E F I L E S

1. On the left file explorer, right-click on the “Images” folder within your

department and click View to select the folder. The current view should

display any images within that folder.

2. At the top, click the Add Content button.

3. Click Default to see more options.

4. Click the File option. The file uploader will appear.



6. Browse for the image on your computer.


UPLOADING IMAGES


Note: If you are unsure whether an image is sized correctly or do not

have the tools to resize a photo, please email the image(s) to marketing-

[email protected]. Descibe where on the page you will use the image

(e.g. banner, slider, regular body content, etc.). An administrator will resize

the image accordingly.

7. The filename must be lowercase and have no spaces. Use underscores

to replace spaces. If the filename includes uppercase letters and/or

spaces, you’ll see some red text at the top of the file uploader window that

suggests a different name. Click the link use the suggested name. This will

automatically convert any uppercase letters to lowercase and any spaces to

underscores.


9. Click Submit.

10. Send an email to [email protected] and state which

image needs to be published. When uploading brand new a image file, an

administrator must manually publish the image file to be viewable on the live

site.

H O W T O U P D A T E E X I S T I N G I M A G E F I L E S

1. On the left file explorer, click on the image you want to update. The current

view should display a preview of that image.

2. At the top right, click the Edit. The file uploader window will display.



4. Browse for the updated image on your computer.

5. Click Preview Draft on the top-right corner.

6. Click Submit and go through the Approval Workflow.

Select image to update

Edit buttonCurrent view

“choose” link“Use the suggested name” link

File upload box

BACKGROUND IMAGE ROWSUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 8


A content feature with an image is a type of Background Image Row that

include text on the left side and a photo on the right now. See preview on the

left.

CONTENT FEATURE WITH IMAGE ROW

H O W T O A D D A C O N T E N T F E A T U R E W I T H I M A G E R O W

1. In the page editor, click on the plus sign next to the last content row to add

a new row.

2. For the new row, select “Background Image Row” from the Content Row

Type dropdown. This will display a Background Image Row Type dropdown.

3. In the Background Image Row Type dropdown, select “Content Feature w/

Image + Greyhounds”. This will display other fields to fill in.

4. Provide a Heading for the section.

5. In the Content box, you can include paragraphs or lists.

6. Choose an image for the Right Image field. This image will be displayed

on the right side of the text content. Contact the administrator if new photos

are needed. Note: This photo area is designed to disappear on smaller

screens.

7. Provide an Image Alt Text. This is a short image description for users who

use screen readers.

Content RowType

Background Image Row Type

Content Feature with Image

Add new row

Heading

Content


Each slide within a Slider row contains one image and a short description.

One slider may have unlimited slides. All sliders must have one relevant title.

See preview on the left.

SLIDER ROW

H O W T O A D D A S L I D E R R O W


a new row.



3. In the Background Image Row Type dropdown, select “Slider”. This will

display other fields to fill in.

4. Provide a Title for the slider.

5. For each slide, select an Image and provide a short description for the

Image Alt Text. Contact the administrator if new photos are needed.

6. Fill in the Content field with a short description for the slide.

7. Under the Content field, you add one optional link. Otherwise, leave it

blank.

8. OPTIONAL: After the last slide, you also have the option to add a section

called WSYIWYG + Right Iimage. This is very similar to the Content Feature

with Image section. This section will include text content on the left side and

a photo on the right side. Note: The photo area is designed to disappear on

smaller screens. If you choose to use the WSYIWYG + Right Iimage section,

provide a Heading, Content, Image, and Image Alt Text. Otherwise, leave all

of it blank.

Content RowType


Slide text content

Slider

Slider title

Add new row

Title

Add new slide

Image Alt Text

Slide image


A 3 Callout row features three linkable images. Each featured image

includes a short description and link underneath it. This component requires

three and only three images.

3 CALLOUT ROW

H O W T O A D D A 3 C A L L O U T R O W


a new row.



3. In the Background Image Row Type dropdown, select “3 Callout”. This will

display other fields to fill in.

4. Provide short content for the Intro field. This will be displayed at the top of

the section.

5. For the Emblem field, click on “Choose Image” and the File Chooser will

open on the right side. Click the Browse tab and type in “emblem” to display

all files that begin with that name. Select an image and click the “Choose”

button. Note: If you need a new emblem created, please submit a request to

[email protected].

Each callout requires the following: Image, title, description, and link.

6. For each callout, select a photo for the Image field. For more images,

please send a request to [email protected]. An

administrator will resize and upload images to the appropriate “images”

folder so they are available in the file chooser panel.

7. Provide a Title for each callout. This is the heading that displays under the

featured image.

8. Provide a short Description for each callout.

9. Lastly, provide a Link where a user will be directed to when they click on

the image.

Content RowType


3 Callout

Add new row

Intro content

Image

Title

Emblem

STORY BLOCKSUNIVERSIT Y OF INDIANAPOLIS

S E C . 0 9


A Story Block row is a student or faculty testimonial/quote. You can create a

block one time and re-use it on multiple pages.

CREATING STORY BLOCKS

1. On the left file explorer, right-click on the “stories” folder and click View to

select the folder.

2. On the top menu, click Add Content and select Story Block. The story

block editor will pop-up.

3. In the story block editor, provide the Data Definition Block Name, which

is typically the name of the person (e.g. jane-smith). Note: Please use

lowercase letters and dashes to separate words.

4. The Placement Folder should already be set to “stories” if you followed

Step 1 correctly. Otherwise, click it and browse for the “stories” folder.

5. Provide the Section Heading. This is either “Student Story” or “Faculty

Story”, depending on whose testimonial you’re creating.

6. The Featured Image is a square photo of the person whose testimonial

you’re creating. Send a photo to [email protected] for

approval. An administrator will resize and upload images to the “images”

folder.

7. The default Background Image will be the same for all stories, so you

can leave this blank. Otherwise, you can submit a new photo to marketing-

[email protected] for approval. An administrator will resize and

upload images to the “images” folder.

8. Provide a Heading, which is the name of the person whose testimonial

you’re creating.

9. The Subheading is typically the faculty member’s title or student’s major

and graduation year.

10. Lastly, provide the Content, which is the student or faculty quote. You do

not need to include the opening and closing quotation marks.

11. When you are finished, submit the story and go through the approval

workflow.

Story Block

Section Heading

Block name

Folder

Background Image

Subheading

Heading

Featured Image


1. Select the page you want to add the story block to, and click Edit to open

the page editor.


a new row.

3. For the new row, select “Story” from the Content Row Type dropdown.

4. For the Data Source field, select “Block”.

5. For the Story Block field, browse for the name of the story block you want

to add (e.g. jane-smith).

6. When you’re finished, click Preview Draft to see a preview of the story

block content on the page.

1. On the left file explorer, go to the “stories” folder.

2. Click on the story block you want to modify and click Edit to open the

story block editor.

3. Make the necessary changes.

4. When you’re finished editing, click Preview Draft.

5. Click Submit and start the approval workflow process.

Add new row

ADDING STORY BLOCKS TO PAGES

EDITING STORY BLOCKSSection Heading

Background Image

Subheading

Content

Heading

Featured Image

Documents

WEBSITE USER GUIDE V - University of Indianapolis · UNIVERSITY OF INDIANAPOLIS INTRODUCTION 0 4 UNIVERSITY OF INDIANAPOLIS WEBSITE USER GUIDE To ensure proper procedures for updating