!
!!
Editing Pages in Sitecore
Once you click on the page you would like to edit you are now ready to begin making
changes. The first thing you will need to do to edit is to check out the page. To lock and
edit a page click on the “Lock and Edit” link at the top of the “Content Editor” You
will not be able to make changes until you click on “Lock and Edit”
!
!
You will now see this message at the top. This is warning you that whatever changes you
make will not be seen on the website until you Publish.
!
It is also making sure you are aware that you will be working on a copy of (version) the
last edits to the website. This way if you make a mistake you can go back to the original
version of the website. (More information about Versions on Page ____ )
!!
!!
!!
!!
websupport@drexel.edu
215-895-0202
! of !15
1
Idenity
!!
The identity section of Sitecore helps users understand what page they are on. See below
where each field in identity refers to on the actual website. In most instances all three
are the same
!
!
!
!
!
Page Title - The page that a user would see at the top of their Internet Browser. If a
user has tabs open you would see the Page Title in the tab of the page.
!
Menu Title - The title a user would see on the left navigation of the website. This is for
a user to quickly navigate page to page
!
Breadcrumb Title - A breadcrumb on a website is meant to display where you are in
relation to where you’ve been. Just image Hansel and Gretel dropping breadcrumbs in
the forrest to know where they’ve been.
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !15
2
!
Editing Core Website Content
Scrolling down on the Content Editor you will see many different sections. The third
section down is called “Content.” This is where you will input the main body of your
website.
If you only see the Section title (as in the pictures above) click on the “+” to the right
to expand the section.
!
The section we are going to focus on is the “Body” This is where your core content is
going to reside.
!!
!!
!!
!!
!!
!!
!!
!!
!
websupport@drexel.edu
215-895-0202
! of !15
3
!
2 Ways to Edit
Once Expanded you will have three different ways in which to edit the content in the
body of your website.
!
!
Show Editor (Pre Formatted (WYSIWYG) Editor) - The most common way to
edit content is through the Show Editor Menu. This allows a user to edit their content
similarly to using Microsoft Word. With this method you do not need to know much
about coding to create and modify your website.
!
Edit HTML - Allows users who have a more advanced knowledge of HTML to look at
the code that creates the body of the website. This may be very confusing for someone
who does not know how to code.
!
!
!
!
!
!
!
!
!!
!!
websupport@drexel.edu
215-895-0202
! of !15
4
!!
Using the “Show Editor”
Click on the “Show Editor” above the “Body” section of Sitecore you will see that a
window pops up on top of Sitecore. This is commonly referred to as a WYSIWYG Editor.
!(WYSIWYG is an acronym for "What You See Is What You Get". In computing, a WYSIWYG
editor is a system in which content (text and graphics) onscreen during editing appears in a
form closely corresponding to its appearance when printed or displayed as a finished product)
!
!!
!!
!!
!!
!!
!!
!!
!!
!!
!
websupport@drexel.edu
215-895-0202
! of !15
5
!
Inserting Text from Other Documents
(Word, Email)
Websites aren’t like normal word documents. When you look up facebook.com on your
laptop it isn’t just a lot of talented people making really fancy Word documents.
Websites write code that is translated by your Internet Browser (Internet Explorer,
Gooogle Chrome, Firefox, etc) so that you can see pictures and text in the best possible
way.
!
When importing text into Sitecore, if you simply paste in your content there will be a lot
of issues with formatting. To fix this use the special paste options at the top of your
editor.
!
These are available to help reduce problems with formatting.
!
Paste from Word
!
Paste from Word,
Strip Font
Paste Plain Text
Paste as HTML
In this process Sitecore will open a window to allow you to paste your text. Sitecore
recognizes this text as being from another Word processor and inputs it without losing
much formatting. (Note: This will not work with images in word documents)
!
!
!
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !15
6
!
Example: Paste From Word
1. Click on the “Paste from Word” option at the top of the editor. Another pop up
will appear.
!
2. Open up the Microsoft Word Document you have with your content
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
.
!
!
!
websupport@drexel.edu
215-895-0202
! of !15
7
3. At the far upper left of Microsoft work click on the “Edit” Menu Tab and choose
the option “Select All.” This will select everything in your Word document.
!
4. Once selected Go back to the “Edit” Menu tab and choose “Copy”
!
!
websupport@drexel.edu
215-895-0202
! of !15
8
5. Head back over to Sitecore where you have your blank paragraph field. Click in the
empty field to select it. A blinking cursor will now appear at the top left of the field.
!
6. Press and hold the “CTRL” button down on your keyboard. Then, without letting
go of CTRL, press the “V” key. This will paste the content from word into the box. (On
a Mac Instead of CTRL use the “Command” button)
!
7. Once done click “Paste” at the bottom right.
websupport@drexel.edu
215-895-0202
! of !15
9
Now your text from Microsoft Word is in Sitecore with minimal formatting issues.
!
!
!
!
!
!
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of 15
10
!
!
Formatting in Sitecore Editor
Formatting for the web is different than in Microsoft Word. Instead of using the normal
tools like “size” and “bold” and “underline” the web relies on things called
“Heading Tags”. Using heading tags is also visually appealing, keeping a standard
look across all of drexel.edu. Use these tags for headings and and sections. For more info
visit the typography site at http://drexel.edu/identity/web/typography/
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
Every Drexel Webpage comes standard with an H1 tag at the top. This is usually the title
of the page. For each section of your content you can use H2 through H6 tags to better
organize your content. Think of them as bullet points of your page. H tags are also for
accessibility, helping users who cannot see the page better understand the content
through a screen reader.
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of 15
11
!
!
Insert <H> Tags into Your Website
1. To use an H tag first highlight the text that you would like to use as a heading
!
2. Click on the second drop down (Normal) to choose what type of H tag you
would like to use.
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !15
12
Inserting a Link Into a Website
!
In the same way you can add Headings to your website you can easily highlight text and
insert a link to another web page. This lets the user quickly refer to information on
another site without having to go type in the URL.
!
In Sitecore there are two options on how to insert links to other websites.
!
1. Link to a site in Sitecore - Link to other pages in your web Section as well as
Word files, PDF’s, and other documents.
2. Link to a website not in Sitecore - Link to pages outside of your web section.
!
We recommend linking to all other drexel.edu websites by using option #2. That way if
someone deletes or renames their site it doesn’t effect your link.
!
!
!
Insert a Link to a Page in Your Web Section
1. To insert a link first highlight the text that you are looking to create into the link.
2. Once highlighted click on the chain at the top of the Sitecore Editor
websupport@drexel.edu
215-895-0202
! of !15
13
!
3. A mini copy of the Content Tree will appear. Look through the Content tree by
expanding each section to locate the site you would like to link to.
!
4. Once found click once on the site name to select it.
!
5. Click “Link” at the bottom right to create the link.
!
!
!
!
!
!
!
!
websupport@drexel.edu
215-895-0202
! of !15
14
!
Insert a Link to a Page Outside of Your Web Section
1. To insert a link first highlight the text that you are looking to create into the link.
!
2. Click on the icon of the Globe with a chain link
below it.
!
3. A hyperlink Manager window will now appear. Fill in the URL with the address you
would like the text to go to when clicked.( It is important to keep the http:// when
typing in the URL)
4. Press “OK” when you are done to insert the link
websupport@drexel.edu
215-895-0202
! of !15
15