Sitecore Basic Training Content Management System (CMS) University Communications Web Services

Topics What is Sitecore? Login/Change Password Content Editor (editing text) Media Library (uploading images/PDFs) Save and Approve for Publication Additional Resources/Training Live Demo Q&A Contact Info/Support

What is Sitecore? Content Management System (CMS) Reuse of information Can be used in most commonly used browsers: Internet Explorer (IE), Firefox, Chrome, Safari, and Opera.

Your temporary password is “passlastname” (i.e., passsmith or passjones). The first time you log in with your temporary password, click “Change Password” instead of the “Login” button. Sign In Page webedit.drexel.edu/sitecore Note: “www” or “ is not required when entering the URL for the Sign In page. Choose Desktop Interface so you can tab between Content Editor & Media Library.

Main Areas in Sitecore  Media Library  Image & file storage  Content Editor  Page creation, editing

Open the Content Editor 1.First, click the Sitecore start menu button. 2.Then, select the Content Editor icon. 1 2

Content Editor: Content Tree Expand the Content Tree to locate your site. Site Sections that appear in top navigation of site

Section: appears in the main menu bar and as the side navigation’s header. These items do not display as “pages.” Section Page: appears in the main menu bar’s dropdown menus and side navigation. Basic Page: appears in the side navigation Content Tree: Main Item Types

Site Navigation Sections appear in the main menu bar and as the side navigation header. Section Pages appear in the main menu bar’s dropdown menus and in the side navigation. Basic Pages appear in the side navigation.

Content Editor: Editing Pages 1.Lock and Edit Selecting “Lock and Edit” allows you to edit a page while preventing other users from editing at the same time. It also automatically generates a new version of the item. 2.Identity Fields Page Title: how the page is labeled in the web browser tab Menu Title: how the page is labeled in the main menu bar and side navigation. Breadcrumb Title: how the page is labeled in the breadcrumb navigation. Example: 3.Content Fields Contains the page’s Headline and Body content.

Content Editor: Content Fields “Show Editor” opens the WYSIWYG editor (What You See Is What You Get). Headline: H1 tags are automatically added; do not add them manually. Opens WYSIWY G Editor

Content Editor: WYSIWYG HTML (Hypertext Markup Language) Heading tags are used for outlining body text, not just for labeling. For example: Heading 1 (headline for the page) - automatically inserted on page via Headline field. Heading 2 – used for second-level groupings of content in the page’s body text. Should always be under H1s. Heading 3 – used for third-level groupings of content in the page’s body. Should always be under H2s. …and so on. Do not bold headings– use heading tags

Inserting an Image or File Opens Insert Sitecore Media window Find site where image or file is located Add Alt Text Click on image Note: Uploading images is covered in Media Library Section. Note: Alt text describes images when viewed by screen readers. It is essential for Web accessibility compliance.

Adding Classes to Images By default images scale to fit 100% of their container (for example: center column of a basic page). Changing this behavior requires a class be added to the image tag in the HTML. Basic classes applied to images float-left: pushes image to the left allowing other elements (usually text) to wrap around it. percent-50: reduces the size of the image to 50% of the width of its parent container. The "percent" classes can be applied in multiples of 5 from "percent-5" to "percent-95". no-scale: For small images or icons that you do not want to scale based on window size.

Adding Classes to Images Add classes directly to img tag in the HTML view of the built-in editor. HTML syntax for image: HTML syntax for image plus class:

Adding Classes to Images Add classes directly to img tag via the Edit HTML option without launching the editor. HTML syntax for image: HTML syntax for image plus class:

Adding a Sitecore Link Insert Sitecore Link Linking to Internal Sitecore Pages. Links to Internal non- HTML documents (PDFs, docs, PPT) in Medial Library

Inserting an External Link Links to external websites/ links

Pasting from Word into Sitecore  Copy from Word  Click the “Paste from Word” Icon  Strips Out Unnecessary Word Styling  Do NOT paste directly from word into Sitecore.

Cleaning up Content Format Stripper

Example: Content with Unnecessary Styling Should be simply text. Unnecessary styling and spacing tags were inserted when copied and pasted from Word without using the Paste from Word or Format Stripper Tools.

Example: Content Stripped of Word Styling Example of clean HTML code stripped of unnecessary styling by using Paste from Word or Format Stripper tools.

Finished Editing When finished editing, make sure you accept or reject the changes.

Preview and Publish Sitecore Contributor Submit for Review Needs Approval by Sitecore Manager Sitecore Manager Approve for Publication Publishes pages live Order of Operations 1.Lock & Edit 2.Launch WYSIWYG Editor to make changes 3.Accept/Reject Changes 4.Save Changes > Preview with Display 5.Approve for Publication / Submit for Review

Media Library: Adding files & Images 2. Click Media Library 1. Click on Sitecore to Open Menu Window Opens Media Library Find Site

Media Library: Additional Ways to Access With Content Editor open, click on arrow at the top right of page to access the Media Library Access Media Library by selecting tab at the bottom of the screen.

Alt Text Text added to describe an image. Viewed by screen readers to assist blind in accessing web pages. Essential for Good Web Accessibility Media Library: Upload File Alt Text Warning

Media Library – Adding ALT Text Best Practices – Alt Text The alt text should describe the image (for example, "Statue of the Drexel Dragon"). If text in an image is used instead of true text, the alt text should say exactly what the image does. (for example, if an image is used instead of the words "Student Open House" the alt text should also say "Student Open House“). In the rare instance in which an image is purely decorative, use empty quotation marks ("") for the alt text to indicate that there is no meaning.

Media Library Upload File – Approve All images and files/folder must be approved for publication to display live Note: Images will show in editor but not in live site if unpublished. PUBLISH ALL THE THINGS

Adding Images in Dedicated fields When you click on the “Browse” option on fields dedicated to images you will get the new Media Library browser

Adding Images in Dedicated fields Click the Tree icon on the upper right of the window to get the Media Library Tree

Additional Resources Workshops/Training: Sitecore Basics/Refresher Web Content (HTML) SharePoint University Calendar Graphics (Basic Image Editing) Additional Resources webedit.drexel.edu/galleryV2

Contact Information Web Support Team Information Resources & Technology (IRT)