Terminal 4 Content Types. Need help? Call the ITD Lab, x7471

Transcription

1 Terminal 4 Content Types Need help? Call the ITD Lab, x7471

2 1 Terminal 4 Content Types Contents Introduction...2 Terminology...2 Content Types...3 Ad Banner...4 Ad Banner Full...5 Alert Text...6 Banner Image...7 Carousel...8 Expanding Content...9 Facebook Feed Featured Gallery Content Biography Gallery Content Media Gallery Content YouTube Heading and Intro Hover Bars Hover Buttons Main Content Office Details Section Access Box Sidebar Image Sidebar Hover Bar Sidebar Link List Sidebar PDF Left or Right Sidebar Text Sidebar YouTube Social Media Icons Three Column Content Two Columns Video Page 1 of 41

3 2 Terminal 4 Content Types Yellow Info Box YouTube Body YouTube Heading Zahnow Buttons Text Formatting Introduction The following template guide is designed to provide web editors of Saginaw Valley State University s websites a better understanding of how to appropriately use the templates designed for the website. Terminology Like most systems, Terminal 4 has its own naming schemes like pages and templates. Here are some terms that you should become familiar with when using the system. In Typo3 we called it Page Tree Page Layout of the Page Text, Images, Documents, and Videos on a Page Arrangement of the Content Filelist Folder Insert Record Page Shortcut Terminal 4 calls it Site Structure Section Page Layout Content Content Type Media Library Category Mirroring Linked Section Page 2 of 41

4 3 Terminal 4 Content Types Content Types Content types allow you to customize the look of your pages. Images and documents used in the content types are taken from the Media Library. Here are the examples of each content type found in Terminal 4 with an explanation of what is required for each. Wherever you see a blue lowercase i," hover your mouse pointer over it to learn more about what you can include in the field. Page 3 of 41

5 4 Terminal 4 Content Types Ad Banner Use this template if you want a revolving banner at the top of the page that doesn t span the entire width of the page. It will only span the width of the main content area. You can choose to revolve up to three images and link them to other web pages. If you specify only one image, the banner will not rotate. Ideal dimensions for each image are 720 pixels x 300 pixels. Here is how the content type should be set up for revolving three images with links: Page 4 of 41

6 5 Terminal 4 Content Types Ad Banner Full Use this template if you want a revolving banner at the top of the page that spans the entire width of the page. You can choose to revolve up to three images and link them to other web pages. If you specify only one image, the banner will not rotate. Ideal dimensions for each image are #### pixels x ### pixels. Here is how the content type should be set up for a single image that doesn t revolve: Page 5 of 41

7 6 Terminal 4 Content Types Alert Text Adds a text box to the main column of the page. Text boxes can be blue ( info ), red ( error ), green ( success ), or yellow ( warning ). These boxes are ideal for calling attention to an important detail. Here is how the content type for the blue info Alert Text should be set up: Page 6 of 41

8 7 Terminal 4 Content Types Banner Image Adds a banner image to the top of the page. The image should be the width of the right column with the ideal image dimensions being 687 pixels wide by 295 pixels high. Page 7 of 41

9 8 Terminal 4 Content Types Carousel Adds a revolving gallery of photos to the main text area of the page. Arrows appear within the carousel to advance photos one by one. Page 8 of 41

10 9 Terminal 4 Content Types Expanding Content Allows you to add text to a page that when clicked, expands down to reveal more information. The header specified is the link, and the expanded text is the content. Page 9 of 41

11 10 Terminal 4 Content Types Facebook Feed Facebook Feed adds a badge to your page. The badge will be placed in the right sidebar. It shows if the visitor currently likes the page and recent statuses. If you prefer to link an image and not place a feed on your page, check out the SVSU Common folder in the Media Library for commonly used social media and other icons. Page 10 of 41

12 11 Terminal 4 Content Types Featured Use for featured boxes in the main content area of the site. Image should be 115 pixels wide by 80 pixels high, and the corners will automatically be rounded by Terminal 4. You can link to internal pages or external pages. Please limit five featured bullets. Page 11 of 41

13 12 Terminal 4 Content Types Page 12 of 41

14 13 Terminal 4 Content Types Gallery Content Biography Create a gallery of people along with short bios and contact information. Add a content type for each person in the gallery. This is not the same as the SVSU directory faculty and staff listings. Bios can also be placed in the right sidebar. Page 13 of 41

15 14 Terminal 4 Content Types Page 14 of 41

16 15 Terminal 4 Content Types Gallery Content Media Create a gallery of media items, such as PDFs and documents. Add a content type for each piece of media. You must upload a thumbnail image to have this template work. Page 15 of 41

17 16 Terminal 4 Content Types Gallery Content YouTube Create a gallery of YouTube videos. Add a content type for each video. For the YouTube ID, take a look at the URL and the combination of letters and numbers after v= will be the ID. For example, the YouTube ID for is G1KGUP2iKbE. If you prefer to link an image to your YouTube channel or playlist and not place videos on your page, check out the SVSU Common folder in the Media Library for commonly used social media and other icons. Page 16 of 41

18 17 Terminal 4 Content Types Heading and Intro Adds a title and introduction spanning the full width of the page. Page 17 of 41

19 18 Terminal 4 Content Types Hover Bars Hover bars are large rectangle-shaped buttons that, when hovered over with a mouse pointer, exhibit motion. Hover bars can be linked to pages found in Terminal 4 or media, like PDF files. Page 18 of 41

20 19 Terminal 4 Content Types Hover Buttons Hover buttons are large square or circle-shaped buttons that, when hovered over with a mouse pointer, exhibit motion further describing what a visitor will find after clicking the button. Hover buttons can be linked to pages. The image on the hover button should ideally be 180 pixels by 180 pixels. Page 19 of 41

21 20 Terminal 4 Content Types Main Content Adds main body content with a title to a page. If you want to add an image at the top, the dimensions of the image should be 260 pixels wide by 180 pixels high. Page 20 of 41

22 21 Terminal 4 Content Types Office Details Office details are found under the navigation on the left side. When placed in the root of your site structure, the details of your office will appear on all pages. The title of the section should be Office_details and hidden in the navigation. Page 21 of 41

23 22 Terminal 4 Content Types Page 22 of 41

24 23 Terminal 4 Content Types Section Access Box Adds an Access box to the sidebar. Please limit five links. If you are linking to media, such as a PDF, when choosing the media to link you will need to change the format (dropdown menu in the lower left) to /path. Page 23 of 41

25 24 Terminal 4 Content Types Sidebar Image Adds an image with a title and text to the sidebar. The maximum width of the image should not exceed 200 pixels. Page 24 of 41

26 25 Terminal 4 Content Types Sidebar Hover Bar Sidebar hover bars are large rectangle-shaped buttons that, when hovered over with a mouse pointer, exhibit motion. Sidebar hover bars can be linked to pages found in Terminal 4 or media, like PDF files. The small icons on the left are found in the Font Awesome document. Page 25 of 41

27 26 Terminal 4 Content Types Sidebar Link List Creates a list of links styled with arrows and icons for supplying links to commonly accessed information. If you wish to link to Facebook and Twitter sites, among others, this is the recommended content type that you ll want to use. Please limit five links. Page 26 of 41

28 27 Terminal 4 Content Types Page 27 of 41

29 28 Terminal 4 Content Types Sidebar PDF Left or Right Adds a PDF download box to left or right sidebar, depending on which content type you choose. Here is how the content type should be set up for Sidebar PDF Left (options for Sidebar PDF Right are the same, but the content appears on the opposite side of the page): Page 28 of 41

30 29 Terminal 4 Content Types Sidebar Text Adds a heading and text to the sidebar of a page. Page 29 of 41

31 30 Terminal 4 Content Types Sidebar YouTube Adds YouTube videos to the sidebar area (videos will be resized smaller). Page 30 of 41

32 31 Terminal 4 Content Types Social Media Icons Since social media is so common, a folder of social media icons has been placed in Terminal 4 to represent your office s social presences on the web. You can find these icons in the Media Library in the 007 SVSU Common folder, and then further in Images. Icons exist for Facebook, Twitter, and Flickr, just to name a few. The example below shows only a fraction of these icons in the Preview Mode. Page 31 of 41

33 32 Terminal 4 Content Types Three Column Content Main body content is made into two equal columns. Page 32 of 41

34 33 Terminal 4 Content Types Page 33 of 41

35 34 Terminal 4 Content Types Two Columns Main body content is made into two equal columns. Page 34 of 41

36 35 Terminal 4 Content Types Page 35 of 41

37 36 Terminal 4 Content Types Video Add a video from the Media Library. This template is available, however it is recommended all videos placed on a webpage be uploaded to SVSU s YouTube Channel and instead of placing the video into the Media Library. If your office wants to share a video on YouTube, please contact Jason Swackhamer at x4123 or , jjswack1@svsu.edu and use the YouTube Body content type instead. Page 36 of 41

38 37 Terminal 4 Content Types Yellow Info Box Add a yellow box containing text to your page. Page 37 of 41

39 38 Terminal 4 Content Types YouTube Body Adds a YouTube video to your page. SVSU has a YouTube channel so if your office wants to share a video on the web, please contact Jason Swackhamer at x4123 or , jjswack1@svsu.edu. If you prefer to link an image to your YouTube channel or playlist and not place videos on your page, check out the SVSU Common folder in the Media Library for commonly used social media and other icons. Page 38 of 41

40 39 Terminal 4 Content Types YouTube Heading Adds a YouTube video to your page. This content type is more suitable for a page where the YouTube video is the main focal point of the page. The Page Heading appears as a large title at the top of the content type. SVSU has a YouTube channel so if your office wants to share a video on the web, please contact Jason Swackhamer at x4123 or , jjswack1@svsu.edu. If you prefer to link an image to your YouTube channel or playlist and not place videos on your page, check out the SVSU Common folder in the Media Library for commonly used social media and other icons. Page 39 of 41

41 40 Terminal 4 Content Types Zahnow Buttons The Zahnow buttons are simply big buttons with an opaque image of the Zahnow library in the background that you can use in your pages. Use of these buttons is not specific to the library. When hovered over with a mouse pointer, the buttons will exhibit motion. Zahnow buttons can be linked to pages found in Terminal 4 or sites outside of SVSU. The small icons on the right are found in the Font Awesome document. Page 40 of 41

42 41 Terminal 4 Content Types Text Formatting SVSU limits the appearance of text on the website so that all pages are more cohesive and maintain the same look. The Format menu in the Content Editor presents a number of options for adjusting the look of the text on your pages. Below we have described a few of the more useful formats. A sample of each is found in the menu. Name When to Use Basic font; used for most supporting text. Title of the page, positioned at the top and used only one per page. Title of a section; used to highlight sections within a page. Title of a sub-section; used to further breakdown sections within a page. Page 41 of 41