TERMINAL FOUR SITE MANAGER WORKSHOP

Transcription

1 LAST UPDATED: SEPTEMBER 15, 2016 TERMINAL FOUR SITE MANAGER WORKSHOP Improve your homepage by using these tips. SEPTEMBER 2016

2 2

3 TABLE OF CONTENTS Headings Header Images Content + Images Info Panel Buttons Social Media Panel

4 HEADINGS 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. 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. 4

5 HOW TO CREATE HEADINGS When 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. 5

6 PAGE HERO IMAGES Hero 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. 6

7 HOW TO INSERT HERO IMAGES After 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. 7

8 IMAGES + CONTENT Create 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: 8

9 HOW TO UPLOAD PHOTOS IN THE MEDIA LIBRARY Access the Media Library by selecting the Content dropdown on the far left menu. You will see the Media Library in the menu. To upload an image to your page, select the Add Media button. 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. 9

10 HOW TO USE YOUR FLOAT YOUR IMAGES Using 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. 10

11 HOW TO USE AN IMAGE WITH CAPTION Images 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. 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. 11

12 INFO PANELS Info 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. 2 Ex. 3 Ex. 4 12

13 HOW TO CREATE A INFO PANEL When adding content, select Create Content on the right. Select the Info Panel from the list of the Content Types available. 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. 13

14 BUTTONS Buttons 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 14

15 HOW TO CREATE A BUTTON When 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. 15

16 SOCIAL MEDIA PANEL If your department has multiple social media channels, showcase them by adding them on your homepage. Ex. of social media panel on left column 16

17 HOW TO CREATE A SOCIAL MEDIA PANEL When adding content, select Create Content on the right. 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. 17

18 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: If you are in need of assistance with your website, please submit a Helpdesk ticket at: 18