KSOM Sitecore Training Content Editors

1. KSOM Sitecore TrainingContent Editors Prepared exclusively for Swanson Russell West Monroe Partners

2. Table of Contents • Accessing Sitecore • General Web Site Editing Overview & Best Practices • Creating a New Page & Adding Content • Home Page • Support Keck • Dean’s Corner • Featured News/More News • Featured Event/More Upcoming Events • Creating Pages from Templates • Basic Page • News & Events • Events & Custom Copy • News & Custom Copy • Adding Site Content • Events • Add an Event • Event Calendar • Event Detail Page • News • Add a News Item • News Landing Page • News Detail Page • Creating Metadata • Callouts • Add a Content Callout • Add a Visual Callout • Publish a Callout • Callout Inheritance and Hiding • Creating Sub-Folder • Appendices • Appendix A: Rich Text Editor • Appendix B: Search Within Sitecore • Appendix C: Workflow Process Details • Appendix D: Using the Workbox • Appendix E: Image Tools

3. Accessing Sitecore

4. Accessing Sitecore • The Sitecore system can be accessed by visiting the following URLs: • Development Site: http://med-sc-dev.usc.edu/sitecore • Production Site: http://med-sc-cms1.usc.edu/sitecore/login • At the login screen, there are various options that allow access to the two different methods of editing content. The two content editing modes are the Content Editor, and Edit Web Mode. We will be using the Content Editor for our training and encourage you do to the same. 4

5. General Web Site Editing Overview & Best Practices

6. Content Structure • Content within Sitecore is stored within a tree structure 1 2 3 4 1 2 3 4 6

7. Content Structure • Content within Sitecore is stored within a tree structure • Pages contain content which is split into data fields of various types • Single line of text • Image • Rich Text 7

8. Content Editor • In the Content Editormode, content is viewed as a hierarchical tree. Nearly all of the editable content will be found under the ‘KSOM’ item in the content tree. The Content Editor mode provides some functionality that is not available in Web Edit mode, such as copy/paste and item sorting. 8

9. Editing Items • Editing Items • Before you begin, please be sure that you disable your pop-up blockers. • Locking and Item • Before an item can be edited, it must be locked. Locking prevents changes from being overwritten by another user editing content at the same time. Content locking can be turned off if there are very few content editors. • If the item needs to be locked, then the warning will appear beneath the name of the item. To lock the item, click the Edit button OR the ‘Lock and Edit’ link on the page. After clicking the Edit button, the item can be edited. 9

10. Creating a New Version • It is recommended at this time to create a new version prior to making edits on a page. This way if you wish to discard your changes, you may just revert to a previous version. To add version go to the Versions Tab and select the Versions drop down. Click the ‘Add Version’. 10

11. Deleting Versions and Unlocking Items • To revert back to the previous version and remove your changes, you must delete the current version. First, select the page you would like to revert back to previous version. Click on the Version tab. From there, click Remove to remove the current version. 11

12. Deleting Versions and Unlocking Items • To unlock and item or discard your changes, you must go to the Review Tab and unlock the item. Once on the Review tab, select ‘My Items’. From the pop-up select the item you would like to unlock and select ‘Unlock’. When you are finished select ‘Close.’ 12

13. Creating a New Page & Adding Content

14. Creating a New Page • Updating Text • Any text that is able to be edited can be made directly to the page. • Adding Pages • To add a page in Sitecore select the area you would like to add a page to and right click. Select Insert  Insert from Template. A menu will appear where you will be able to select the type of page you would like to add. • Next, a pop-up will appear asking you to name the new page. Enter the name and click ‘OK’. • Adding Metadata • All pages will have metadata associated with them. See slides below for details. 14

15. Creating a New Page • For MAC users: • Rather than right-clicking to create a new page, you can add new page in the ribbon. Click on the section under which you want to create the page, and under the Home tab, you will see page options. • You will also see the other menu options in the ribbon that you would see in the right-click menu 15

16. Changing Page Titles • The page title that is displayed in the Menus and Navigation throughout the site comes from the name of the item. To change the name of an item, right click the item, and select the ‘Rename’ option. Some items cannot be renamed. 16

17. Saving and Checking In Items • While you are working, you may Save the work you are doing. You can click the ‘Save’ button or click CTRL+S. • When you have completed your changes, you must check the page back in. This will allow other editors to see your changes, but these changes will not appear on the site. To check in the item, from the Home tab select the Edit drop down. From there you can check in the item. 17

18. Previewing Changes • Changes to content items can be previewed by clicking the Publish tab at the top of the content editor, then clicking the Preview button. A new browser window will be displayed, and changes can be previewed before they are published. • Please be sure to close your preview window once you are done viewing your changes as that window will display all items checked in and may appear that items are being published without actually being published. 18

19. Publishing Items • The workflow process is in place to ensure that content is appropriately reviewed before being published onto the live website • There are two workflows in place: • KSOM Content Workflow (used for standard site content and pages) • KSOM News and Events Workflow (used solely for news and event items, and to publish specifically to the Home Page and Master Calendar) • Each workflow process follows a few basic steps (shown below) and begins when a user wants to publish content to be displayed on the site • In order to publish an item, it must go through a workflow process. • News and Events Workflow Steps Content Workflow Steps 1 1 2 2 3 3 4 5 19

20. Publishing Items • As a Content Author, you can only submit an item for approval. To do this, select ‘Submit’ from the Edit drop-down menu • After a Content Approver approves the item, then it will be published • After a Content Approver approves the item, then it will be published • As a Content Approver, you can submit AND approve your own items, if desired • An item is published after it goes through the workflow process and is approved *For more details on the workflow process, please see Workflow Process Details 20

21. Upload an Image • There are two methods of uploading images to Sitecore: • The following slides will provide a step-by-step guide to uploading images using both methods • 1. Upload the image to the Media Library • This method is best for adding multiple images to Sitecore at once • 2. Upload the image as you are creating or editing a page • This method is best for adding images “on the fly” while you are creating/editing a page 21

22. Upload an Image – Media Library • 1. Upload the image to the Media Library • This method is best for adding multiple images to Sitecore at once • At the very bottom of the tree structure, you will see Media Library section • Clicking on this will take you to the Media Library, where all images and files are stored 22

23. Upload an Image – Media Library • 1. Upload the image to the Media Library • This method is best for adding multiple images to Sitecore at once • By clicking into the Images folder, you will see all of the images stored on the site • Within the Images folder, you can create new sub-folders to organize your images • There are three ways to upload new images: • Upload Files • Upload Files (Advanced) • Drag & Drop • Images must be published for them to appear on the site, just like all content. • The correct sizes (in pixels) for each image type are as follows: • Banner Image – 644 x 218 • Feature Image – 274 x 72 • More News & Research Image – 65 x 48 23

24. Upload an Image – while editing page • You can also upload images while creating a new page or editing an existing page • You can do this in two ways: • When adding a banner image to a page • Through the rich text editor • Banner Image • Select the ‘browse’ button • Rich Text Editor • Select the ‘insert Sitecore media’ button • Whichever way you choose, you can upload a new image from the current screen without having to navigate to the Media Library • 2. Upload the image as you are creating or editing a page • This method is best for adding images “on the fly” while you are creating/editing a page 24

25. Upload an Image – while editing page • By selecting either ‘browse’ or ‘insert Sitecore media’, you will see the Media Browser screen display • 2. Upload the image as you are creating or editing a page • This method is best for adding images “on the fly” while you are creating/editing a page First, navigate to the ‘Images’ folder You will see images organized just as they are in the Media Library. From here, you can select an existing image to add to the page. If you need to upload a new image for the page, you can use either the Upload or Drag & Drop feature 25

26. Upload an Image – while editing page • Upload File (make sure to Publish after you upload) • Drag & Drop (make sure to publish after you upload) • 2. Upload the image as you are creating or editing a page • This method is best for adding images “on the fly” while you are creating/editing a page Simply upload the file from your computer as you normally would Drag the file from your computer into the folder view that displays 26

27. Upload an Image – while editing page • After you Upload or Drag & Drop, the image will appear within the tree view as a new image. Select the image and click ‘OK’ to add it to the page. • 2. Upload the image as you are creating or editing a page • This method is best for adding images “on the fly” while you are creating/editing a page 27

28. Home Page

29. Home Page Overview 29

30. Hero Marquee • The Hero Marquee will display at the top of the home page, with five main tabs: • Keck • Students • Faculty & Staff • Alumni • Patients 30

31. Hero Marquee • Within the tree structure, you will find the Marquee within the ‘Home’ section within Site Content 31

32. Hero Marquee • The first three fields you will see are Display Title, Story Title, and Image 32

33. Hero Marquee • The other two fields you will see are Description and Link • NOTE: the ‘Link’ field will always display the same text: “Read The Full Story”. The URL that you enter into the Link field will determine where a user is directed when they click on that item on the page. 33

34. Hero Marquee • When you click on ‘insert link’ for the Link field within the Hero item, you can specify what text shows up in the yellow box by editing the ‘Link Description’ field 34

35. Hero Marquee • You will notice that main items within the marquee have sub-links, such as ‘Maps & Directions’ • To add a link, right-click on the main item and select Insert > General Link • When creating a new item, you will need to enter only Title and Link 35

36. Support Keck • The ‘Support Keck’ feature is found within the ‘Islands’ folder of the tree structure, within the Site Content section • There are three fields to add content to for this feature: Title, Description, and Image 36

37. Support Keck • After you Save and Publish the item, it will display on the home page 37

38. Dean’s Corner • The ‘Dean’s Corner’ feature is found within the ‘Islands’ folder of the tree structure, within the Site Content section • There is only one field to add to for Dean’s Corner, which is Body. Text and/or links can be added to this section. The image within the Dean’s Corner section will not change. 38

39. Dean’s Corner • After you Save and Publish the item, it will display on the home page 39

40. Callouts • Also from the KSOM item within the tree structure (beneath the Support Keck and Dean’s Corner sections), you will see the Callouts section. • From here, you can add any callouts to the home page, just as you would add callouts to any other page 40

41. Featured News • To determine which News item is featured on the home page, click on the ‘KSOM’ item within the tree structure. • On this page, you will see a dropdown list for Featured News Research. This is where you select which item displays on the home page. You can select from any existing new item. 41

42. Featured News • After you Save and Publish the item, it will display on the home page 42

43. More News • To determine which News items are displayed on the home page, you can tag them with metadata labeled ‘Home’ • Within the News item itself, you will see the ‘Metadata Tagging’ area • From here, you will see the option for ‘Home’. When you select ‘Home’ the News item will be set to display on the home page • *NOTE: You can only tag metadata items to which you have access. For example, if you are only a member of the Department of Medicine, you will only be able to tag events with ‘Department of Medicine’ 43

44. Featured Event • To determine which Event is featured on the home page, click on the ‘KSOM’ item within the tree structure. • On this page, you will see a dropdown list for Featured Event. This is where you select which event displays on the home page. You can select from any existing new item. 44

45. Featured Event • After you Save and Publish the item through the workflow, it will display on the home page 45

46. More Upcoming Events • To determine which Event items are displayed on the home page, you can tag them with metadata labeled ‘Home’ • Within the Event item itself, you will see the ‘Metadata Tagging’ area • From here, you will see the option for ‘Home’. When you select ‘Home’ the Event item will be set to display on the home page • *NOTE: You can only tag metadata items to which you have access. For example, if you are only a member of the Department of Medicine, you will only be able to tag events with ‘Department of Medicine’ 46

47. Creating Pages

48. Page ‘Color Key’ • Each page template has a color associated with it, which is what you will see when you attempt to create a new page • Basic Page = WHITE • Events and Custom Copy = YELLOW • News and Custom Copy = GREEN • News and Events = RED • If the ‘insert’ menu appears smaller than what you see above, you need to add http://med-sc-dev.usc.edu to your “trusted sites” in your Internet Explorer browser. If you don’t know how to do this, the following article provides instructions: http://www.microsoft.com/windows/ie/ie6/using/howto/security/settings.mspx 48

49. Changing Page Templates • Content editors have the ability to change an existing page’s template if needed • NOTE: all content editors do not yet have this ability. This will be added at a later date. • Within the top ribbon, you will see ‘change’ within the Template section of the Configure tab • NOTE: do not use the ‘Edit’ template option • When you click ‘Change’ you will see the ‘Change Template Wizard’ pop up on your screen 49

50. Changing Page Templates • Next, you can select the type of page (from an existing page) that you can change to 50