1. Web Services University Communications
Sitecore Basic Training Drexel’s full-featured web content management system (CMS)
Web Services
University Communications

2. 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

3. 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.
Mac – use firefox/chrome

4. Logging In: webedit.drexel.edu/sitecore
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.
Choose Desktop Interface so you can tab between Content Editor & Media Library
Click “options” – choose Desktop
*Note: no “www” or “ required when typing in the login URL.

5. Main Areas in Sitecore Media Library Content Editor Image/file storage
Page creation, editing
Media Library
Image/file storage
Two main areas

6. Content Editor: How to Begin
Click on Content Editor
Click on Sitecore to Begin

7. Content Editor: Content Tree
Expand the Content Tree to Find Your Site
Site
Sections that
appear in
top navigation
of site

8. Content Tree = Site Menus
Section - Top Navigation and Side Navigation Header
Section Page – Drop Down Menus and
Side Navigation Categories
Basic Page – Section Side Navigation Sub Pages

9. Site Navigation: Live Example
Section Top Navigation and
Section Navigation Header
Section Page Drop Down Menu and Section Navigation Categories
Basic Page and Side Navigation Sub Pages

10. Content Editor: Editing Pages
Lock and Edit creates version to keep track of edits
Sections to Edit:
Identity
page title: web browser title
menu title: menu title
breadcrumb: appears under nav bar as navigation aid. Example:
Content – body text

11. Content Editor: Editing Pages
Show Editor - opens WYSIWYG editor
Heading 1 <h1> automatically added – no need to add styling
Opens WYSIWYG Editor

12. Content Editor: WYSIWYG (Show Editor)
Do not bold headings– use heading tags
HTML (Hypertext Markup Language) Heading tags are used for outlining body text, not just for labeling. For example,
<h1> Heading 1 (largest heading) - automatically inserted in Headline (title of page)
<h2> Heading 2 – used for next level headings in body text
<h2> Section falling under Heading 1
<h3> Heading 3 – used for headings below h2.
<h3> Sections falling under Heading 2
<h4> and so on.

13. Inserting an Image/File
Opens Insert Sitecore Media Window
Find Site where image or file is located
Click on Image
Add Alt Text
Note: Alt text describes images for viewing by screen readers – Essential for Web Accessibility
Note: Uploading Images is covered in Media Library Section

14. 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.

15. Adding Classes to Images
Add classes directly to img tag in the HTML view of the built-in editor.
HTML syntax for image:
<img src=“my-image.jpg”>
HTML syntax for image plus class:
<img class=“float-left percent-50” src=“my-image.jpg”>

16. Adding Classes to Images
Add classes directly to img tag via the Edit HTML option without launching the editor.
HTML syntax for image:
<img src=“my-image.jpg”>
HTML syntax for image plus class:
<img class=“float-left percent-50” src=“my-image.jpg”>

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

18. Inserting an External Link
Links to external websites/ links

19. 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.

20. Cleaning up Content
Format Stripper

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

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

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

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

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

26. 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.

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

28. 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. This can be done by inserting a single space with your spacebar in the alt text field.

29. Media Library Upload File – Approve
All images and files/folder must be approved for publication to display live
After you do this – you’ll be able to see the image on the web.
Note: Images will show in editor but not in live site if unpublished.
PUBLISH ALL THE THINGS

30. 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

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

32. Additional Resources Web Services Info: drexel.edu/web
Sitecore CMS Support: drexel.edu/galleryV2
Accessibility Info: webaim.org
Image Editing Tool: pixlr.com/editor

33. websupport@drexel.edu 215.895.0202
Contact Information
Web Services Team
University Communications