Sitecore Basic Training

Drexel’s full-featured web content management

system (CMS)

Web Services
University Communications
 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.
 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

*Note: no “www” or “http://” required when typing in the login URL.

 Main Areas in Sitecore
 Content Editor  Media Library
 Page creation, editing  Image/file storage
 Content Editor: How to Begin
Click on Content Editor

Click on Sitecore to Begin

Content Editor: Content Tree
Expand the Content Tree to Find Your Site

Site

Sections that
appear in
top navigation
of site
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
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
Content Editor: Editing Pages
1. Lock and Edit
creates version to keep track of edits

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

 Content Editor: Editing Pages
• Show Editor - opens WYSIWYG editor

Heading 1 <h1> automatically added – no need to add styling

Opens
WYSIWYG
Editor
 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.
 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

Note: Uploading Images is covered in Media Library Section readers – Essential for Web Accessibility
 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:
<img src=“my-image.jpg”> <img class=“float-left percent-50” src=“my-image.jpg”>
 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:
<img src=“my-image.jpg”> <img class=“float-left percent-50” src=“my-image.jpg”>
Adding a Sitecore Link
Linking to Internal
Sitecore Pages.

Insert Sitecore Link

Links to Internal non-
HTML documents
(PDFs, docs, PPT) in
Medial Library
Inserting an External Link

Links to external
websites/e-mail 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 <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.
 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

Order of Operations 3. Accept/Reject Changes

1. Lock & Edit 4. Save Changes > Preview with Display
2. Launch WYSIWYG Editor to make changes 5. Approve for Publication / Submit for Review

Sitecore Contributor Sitecore Manager

• Submit for Review • Approve for Publication
• Needs Approval by Sitecore Manager • Publishes pages live
Media Library: Adding files & Images
2. Click Media Library
Opens Media Library
Find Site

1. Click on Sitecore to Open Menu Window

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

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.
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
• Web Services Info: drexel.edu/web
• Sitecore CMS Support: drexel.edu/galleryV2
• Accessibility Info: webaim.org
• Image Editing Tool: pixlr.com/editor
 Contact Information
Web Services Team
University Communications

websupport@drexel.edu
215.895.0202
www.drexel.edu/web