TERMINAL FOURSITE MANAGER WORKSHOPImprove your homepage by using these tips.

SEPTEMBER 2016

LAST UPDATED: SEPTEMBER 15, 2016

m s u d e n v e r . e d u / w c m s

2msudenver.edu/wcms

3msudenver.edu/wcms

TABLE OF CONTENTS

Headings ..........................................................................

Header Images ...............................................................

Content + Images ..........................................................

Info Panel ........................................................................

Buttons .............................................................................

Social Media Panel .......................................................

4-5

6-7

8-11

12-13

14-15

16-17

4msudenver.edu/wcms

HEADINGS

Paragraph (P) - The paragraph is the body copy of a page, styled in plain text.

Heading 1 (H1) - By default, the Heading 1 is used as the main title on every page.

Heading 2 (H2) - A Heading 2 is used to title a block of content within a page.

Heading 3 (H3) - A Heading 3 is used as a subtitle of a page.

Heading 4 (H4) - A Heading 4 can be used to emphasize important blocks of content

and can also be used to break up large paragraph.

Heading 5 (H5) - A Heading 5 can be used as another way to emphasize important

blocks of content and can also be used to break up content within a block. An H5 could

be useful if your text is long and you want to add an extra layer of page structure or a

visual break.

Headings are a great way to give an introduction to the content you are displaying. Headings should be used to divide content into scannable blocks, which will be helpful for your user and for search engines. Heading styles are available to Web Authors via the “format” selection from the WYSIWYG editor in Terminal Four/Site Manager.

5msudenver.edu/wcms

HOW TO CREATE HEADINGSWhen building page content

in Terminal Four/Site

Manager, the “Title” is set

by default to be a Heading

2. The “Sub title” is set by

default to be a Heading 3.

In the WYSIWIG editor, highlight

the desired heading text.

Choose your heading size from

the “format” dropdown menu.

The text should change in size

depending on which heading

style is chosen. Click out of

the highlighted text and press

“return/enter” on your keyboard

to exit the heading style.

6msudenver.edu/wcms

PAGE HERO IMAGESHero images (also known as header images) are full-width images that are placed on top of a page. They can be successful in telling a story and setting the tone for your department page.

Hero Images should be cropped and sized to 1024 (width) x 418 (height) pixels.

7msudenver.edu/wcms

HOW TO INSERT HERO IMAGESAfter you have selected your photo, make sure the image is at the correct dimensions (1024

x 418). You can crop and resize large images in the Media Library in Terminal Four/Site

Manager. Resizeimage.net is also a free tool that allows you to crop and resize images.

When adding content, select

“Create Content” on the

right.

Select the “Page Hero

Image” from the list of the

Content Types available.

Upload your header image

by selecting the “Select

Media” field. Once you

have your photo uploaded,

you can also add a caption

(not required). Select

“Save Changes”, “Save

and Approve” or “Save as

Draft”.

8msudenver.edu/wcms

IMAGES + CONTENTCreate a successful experience for your audience by using content and images on your homepage. It is important to draw attention to both the content and image. The two elements should work together in creating a meaningful message to your audience.

Example of images used with content on a site:

9msudenver.edu/wcms

HOW TO UPLOAD PHOTOS IN THE MEDIA LIBRARY

To upload an image to

your page, select the “Add

Media” button.

Access the Media Library by selecting the

“Content” dropdown on the far left menu.

You will see the “Media Library” in the

menu.

In the “Media Details” window

to upload files, Enter a name,

and description for your image.

To upload the photo, under

“media file” select the “Click To

Choose” button. You can also

drag a photo into the space.

Once your image has been

selected, select the type of

image (image or image with

caption). When these fields are

all entered and ready, select

the “save changes” button to

upload your photo. Your photo

will then appear in the media

library.

Quick Tip: “Image with caption” is a new feature in Site Manager/Terminal Four. See page 11 on how to use this new feature.

10msudenver.edu/wcms

HOW TO USE YOUR FLOAT YOUR IMAGESUsing large images with content can cause problems on a mobile or tablet view. Use images

at a smaller dimension (375 x 350). Using images with your content is very simple and easy

to implement with our WYSIWYG editor.

Float your image to the left

or right by double clicking

on your image. A “Set Media

Attributes” window will pop

up. Float your image by simply

typing in “right” or “left”.

11msudenver.edu/wcms

In the “Media Details”

window of your selected

photo, select “Image with

caption”. In the “description”

field, provide your caption.

Select “save changes”. Your

photo will then appear (or

update) in the media library.

Click the title of the photo

to insert the photo into your

page.

HOW TO USE AN IMAGE WITH CAPTIONImages with captions can be

useful to provide additional

context to an image. This

can be useful in describing

a photo of an event, a class,

building, etc.

12msudenver.edu/wcms

INFO PANELSInfo panels are useful for highlighting key information on your page. Info panels can be used in various ways such as: featuring a student/alumni spotlight, displaying career options, featured articles and more.

Ex. 1

Ex. 3

Ex. 2

Ex. 4

13msudenver.edu/wcms

HOW TO CREATE A INFO PANEL

Insert a name, box title (the

title of the panel), and box

content. In the Info Panel,

you can style text and insert

images. There is a 330

character limit when using

Info Panels. When using

images, use smaller images

(150x150 pixels).

“Desktop Width” and “Tablet

Width” will let you set up the

width for these devices.

Ex: 12 columns will take the entire

width and 6 columns will take half

of the width.

When adding content, select

“Create Content” on the

right.

Select the “Info Panel” from

the list of the Content Types

available.

14msudenver.edu/wcms

BUTTONSButtons are useful for highlighting important links on a page. Our buttons come in a variety of colors with glyphicons to choose from. Use a button to link to internal or external links that are not in the main navigation.

Ex. of buttons on left column

15msudenver.edu/wcms

HOW TO CREATE A BUTTONWhen adding content, select

“Create Content” on the

right.

Select the “Custom Button”

from the list of the Content

Types available.

Enter the name of your button

and select either an internal

link, external link, or media

file (such as a PDF).

Select a color and widths of

your button for desktop and

tablet views.

Selecting a glyphicon is

optional.

16msudenver.edu/wcms

SOCIAL MEDIA PANELIf your department has multiple social media channels, showcase them by adding them on your homepage.

Ex. of social media panel on left column

17msudenver.edu/wcms

HOW TO CREATE A SOCIAL MEDIA PANEL

Select the “Departmental

Social Links” from the list of

the Content Types available.

Enter the name of your social

media panel. (For ex: “Connect

With Us, Follow Us, etc.)

Enter the social media links

into the fields that apply.

Quick Tip: For departments with only one social media channel, use a button to link to that page instead.

When adding content, select

“Create Content” on the

right.

18msudenver.edu/wcms

Thank you! We hope these quick tips and tools have been helpful in creating your homepage.

To find more information about the University site, please visit the Web Content Management System page at: www.msudenver.edu/WCMS

If you are in need of assistance with your website, please submit a Helpdesk ticket at: www.msudenver.edu/gethelp