Unit 3: Layouts and Custom Elements

Transcription

1 Unit 3: Layouts and Custom Elements Unit Objectives Review the Design Layouts Change Page Layouts through Custom Properties Activate the Right Column on a Page Work with Right Column Elements Review the Custom Elements Using Page Layouts Using Right-Column Elements Unit Topics 2011 Fig Leaf Software 3-1

2 UW-Stout Content Management Using Page Layouts As discussed in Unit 2, every page on the UW-Stout site is built upon a single template. The template holds the layout of the site and allows for changes to the site design to be made quickly and globally across all pages. The implementation of CommonSpot on the new UW-Stout provides soft templates or layouts that can be swapped quickly and easily by content authors. Although the majority of pages will use the same one or two layouts, you may find that a certain type of content does not conform to the common layouts and need to use one of the specialized layouts. It is important to note that there are specific areas of the site where a specific layout must be used to ensure additional elements on the page function correctly. Depending on your rights within the CommonSpot, you may see more layout options that detailed below. Note: Changes to layout are visible immediately and do not require being submitted for approval. Changing Page Layouts To change the layout for a page, while logged in, navigate to the page and select Properties Custom... in the toolbar at the top of the page. Select your new layout choice from the Design Options tab (default) and click Save. Note that changing the design layout may require additional fields in the Content Options tab to be adjusted such as right-column elements to display and defining tab headers. Warning: Changing layouts after content is on a page may result in that content being lost. For these cases, you will need to copy and paste your content manually. 3-2

3 Unit 3: Layouts and Custom Elements Page Layout Examples and Usage Intranet (Three-column Public/Intranet) Description: Consisting of a three-column layout, the Three-column Public/Intranet layout extends the standard left-column navigation with an option to Logout as well as require users to login prior to viewing the page. Standard for options for right-column elements do not apply on this layout. Instead, you are given Container elements in which to add any desired custom elements in the right-column area. The content area consists of a Container element and a Formatted Text Block within the Container. Usage: For all pages in the Intranet subsite or where a user is required to login. 3-3

4 UW-Stout Content Management TwoColumn Description: This layout consists of one column with the left navigation and a second area that occupies about 80% of the remaining width of the page. The content area consists of a Container element and a Formatted Text Block within the Container. Usage: For any pages where a third column is not needed or where content will not fit with a standard three-column layout. 3-4

5 Unit 3: Layouts and Custom Elements TwoColumn-Tabbed Description: This layout consists of one column with the left navigation and a second area that occupies about 80% of the remaining width of the page. The content area consists of a Container element and a Formatted Text Block within the Container. The tabs at the top of the content area are populated via the Tab Headers section of the Content Options tab in the Custom Metadata Properties. For each tab after the first created, an empty Container is provided for the addition of any CommonSpot elements. Usage: To be used where content can be grouped and displayed with tabbed navigation. Note that all content within tabs still exists on the same CommonSpot page. TwoColumn Empty Layout Description: This is the same layout as the TwoColumn or TwoColumn-Tabbed except that the content area only contains an empty Container. 3-5

6 UW-Stout Content Management Usage: Preferred only if you needed an element on a page other than a Formatted Text Block. ThreeColumn Description: This layout consists of three columns--the first and third occupying 40% of the width of the page. The center column and remaining 60% of the page is the main content area consisting of a Container element with a Formatted Text Block within. The right-column area can display any number of elements such as an empty Container, Highlight area, Quick Links, Latest News, RSS Feeds, Testimonials, Videos, Facebook Like button, or Related Links. Usage: Recommended for all pages. 3-6

7 Unit 3: Layouts and Custom Elements ThreeColumn Description: This layout consists of three columns. The first column holds the left navigation. The next two columns occupy 80% of the width of the page. The center column of the page holds the main content with a Container element and a Formatted Text Block within. The right-column area can display any number of elements such as an empty Container, Highlight area, Quick Links, Latest News, RSS Feeds, Testimonials, Videos, Facebook Like button, or Related Links. Usage: Can be used as an alternate to the ThreeColumn where a wider third column is needed for larger video playback and images. 3-7

8 UW-Stout Content Management Using Right-Column Elements The right-column area of a page provides an additional space to put related information and access to resources and other assets to keep the user's interest and enhance their experience on the website. The right-column keeps the main body of content clutter-free and easier to read by the user. The implementation of the new UW-Stout website provides an open (almost limitless) area in the right-column that can be used for items such as spotlighting an event, providing a more topic-based set of navigation, displaying latest internal news, displaying news from external sources through syndication channels, showcasing videos, and providing links to related pages. To facilitate ease and consistency, special custom elements have been created for use in the right-column area. These elements are detailed below: Right Column Highlight This element provides a space for a Title and an image and/or rich text area. This can be used to spotlight an event specific to a subsite or page. The image can be made to link to a different page. Links to other pages can also be placed in the text area. Images should be 212 pixels wide if using the ThreeColumn layout and 320 pixels wide for the ThreeColumn layout. Featured Quick Links The Quick Links area provides a customizable Title, an optional teaser, and a list of links. Limited to 10 links, you can enter up to 5 internal links and 5 external links. Latest News The Latest News custom element automatically pulls in and links to any recently posted news articles and press releases on the UW-Stout site. 3-8

9 Unit 3: Layouts and Custom Elements RSS Feed Display This element can be used to pull in related syndicated content from outside RSS feed sources. Page authors can customize the header and choose how many items to display from the feed. Users clicking on the links will be taken to the website source for the content in the feed. Testimonial Quote Quotations can be added for a page through the Testimonial Quote custom element. Fields allow a Title, the quotation, and the Author to be entered. UW-Stout Video This area embeds a YouTube video on the page. The video must already be uploaded to YouTube in order to link to it. Videos should be 212 pixels wide for the ThreeColumn layout and 320 pixels wide for the ThreeColumn layout. Due to the size of the player, it is recommended to use the ThreeColumn layout for right-column videos, where possible. Facebook Like Button Choosing this element will place the Facebook Like button in the right column area. Users clicking the button will be directed to Facebook to login and add the page to their list of Likes. Note that a Facebook Like button is also available at the bottom of any given page and can be turned on/off via Custom Metadata Properties. 3-9

10 UW-Stout Content Management Related Links This area is populated by the links selected in the Related Links tab in the Custom Metadata Properties screen. The list of related links is pulled in from other pages that have the same taxonomy terms assigned to them. Container In addition to the aforementioned custom elements, the right column consists of a Container element which can be used to put any number of elements within besides just the standard right-column custom elements. You can add elements to the Container to extend the use of the right column beyond what is covered in the materials here. 3-10

11 Unit 3: Layouts and Custom Elements Walkthrough 3-1: Changing Page Layouts In this walkthrough, you will perform the following tasks: Modify a page's layout Add right-column custom elements to the page Steps Changing the layout of a page 1. Using your test page created earlier, click on Properties in the blue toolbar and select Custom From the Custom Properties dialog, select the radio button for ThreeColumn in the Design Options tab. 3. Click the Content Options tab. 4. In the Right Column section, select all right column custom elements by placing a checkmark within each checkbox. 5. Click Save to view the new page layout. 6. Notice that the content on the page may have shifted due to the smaller width of the main content area and may require minor tweaks to align better. End of Walkthrough

12 UW-Stout Content Management Walkthrough 3-2: Configuring Right Column Elements In this walkthrough, you will perform the following tasks: Configure the various right-column custom elements Steps Configuring right-column custom elements Right Column Highlights 1. While in Author Mode (Work on this Page (My Content)), click on the widget for the UW-Stout Right Column Highlights element and select Data. The Enter Custom Element Data will display. 2. Type Highlights in the Title/Header field. 3. Choose an image to display by clicking the Select Image... button and choosing the placeholder-special-new-program-1.jpg image from within the /campuslife/dining/rendezvous/ subsite. 4. Enter some text in the Featured Content area. 3-12

13 Unit 3: Layouts and Custom Elements 5. When finished, click Save. Featured Quick Links 1. Click on the widget for the UW-Stout Featured Quick Links element and select Data. The Enter Custom Element Data will display. 3-13

14 UW-Stout Content Management 2. Type Quick Links in the Header field. 3. Type Check out these helpful pages in the Teaser Text field. Links 1-5 are reserved for internal (CommonSpot) pages and links 6-10 are reserved for external links. Perform the following steps for internal links: 4. For Link 1 Label, type A Rich History. 5. Click Select Page... next to Link 1 URL. 6. In the Choose Page dialog, select the Subsite of /about/ and check the checkbox for Include Child Subsites and click Search. 3-14

15 Unit 3: Layouts and Custom Elements 7. Select the page A Rich History from the Search Results and click Use Highlighted Page. 8. Uncheck the box Open Link 1 in new window. 9. Repeat steps 4 through 8 for additional internal links. Perform the following steps for external links: 10. Scroll down on the page until you find Link 6 Label. 11. For Link 6 Label, type Google. 12. For Link 6 URL, enter the fully qualified URL for the external page. In this case, type in the field. 13. Check the box Open Link 6 in new window. 14. Repeats steps 10 through 13 for additional external links. 15. Click Save. RSS Feed Display 1. Click on the widget for the RSS Feed Display element and select Data. The Enter Custom Element Data will display. 3-15

16 UW-Stout Content Management 2. Type Yahoo RSS in the Custom Header field. 3. Type a fully-qualified URL like in the RSS Feed Source/URL field. 4. Optionally, you can direct users to the feed source by typing in the source's website like 5. Click Save. Testimonial Quote 1. Click on the widget for the Testimonial Quote element and select Data. The Enter Custom Element Data will display. 2. Fill in the fields for Title, Textual Quote, and Author. 3. Click Save. YouTube Video 1. Click on the widget for the UW-Stout YouTube Video element and select Data. The Enter Custom Element Data will display. 2. Enter a Video Title and optional Video Caption in the supplied fields. 3-16

17 Unit 3: Layouts and Custom Elements The video's embed code is required for proper playback. The size of the player should also be adjusted to fit the dimensions of the right column area. Get the video's embed code by doing the following: 3. On a YouTube video page (like click on the Share icon underneath the video then click on the Embed button underneath the link to the video. 4. Before copying the embed code, using the Custom size adjuster to type the width for the video based on the template layout you are using. Enter 212 for the Width if using the ThreeColumn layout and 320 for the ThreeColumn The Height will be adjusted automatically to maintain the proper ratio and the embed code Figure 1: Embedding Tools from YouTube page will be updated automatically to reflect the new dimensions. 5. Select the entire embed code starting with <iframe and copy it to the clipboard by pressing CTRL+C on the keyboard. 6. Return to your CommonSpot window and paste the video's embed code in the Video Embed Code field by pressing CTRL+V. 7. Click Save. A placeholder will be reserved for the video but it will not be visible until the page is published. You can preview the video in the Custom Element Data screen. 8. Submit your page through the approval workflow so you can view the finished page. Your page should look similar to Figure 2 below. 3-17

18 UW-Stout Content Management Figure 2: Completed page using ThreeColumn layout with right-column elements displayed End of Walkthrough

19 Unit 3: Layouts and Custom Elements Unit Summary The UW-Stout CommonSpot implementation uses a single template but various soft templates or layouts to choose a page's look-andfeel. Layouts can be swapped quickly and easily using Custom Properties and, in most cases, existing content is retained. Activating the right-column offers several different elements to help users navigate the site, find related topics, and enhance the user experience. 3-19