Content Tree > Everything has its place.
> Within Sitecore, all content and data is stored in it’s content tree. Keeping a highly structured organization
is key to an optimized solution. Here is how the content tree is set-up.
Starting point for all Sitecore Content
Site Folder – Each site within Sitecore will have its own folder
Home page for the Endicott site. All site pages will be
children of this node.
News area where all news articles will be stored.
Site error pages.
System node for the ECM. Do not use.
Legacy content migrated in from the old Endicott Web Site.
Settings – For admin use only, but will be visible to editors.
Place to store all components used within pages. For
example, items to be shown in the right-rail. The directory
Structure in this folder will be created automatically.
Legacy content migrated in from the old Endicott Web Site.
Site Data > Keeping all the pieces in order.
> Each web site within the Sitecore environment will have a site-data folder. Here is where all page level
components will be stored. The folder structure of the site-data area will mimic the structure of the site.
> Components for a given page should be stored within its respective folder under site-data.
> The folders are generated automatically when the item is created under the home node in the content tree.
> The goal is to organize the various pieces of content into a manageable structure so that when editing a page
it is immediately known where all of the content for the page exists.
Page Types > 31 Flavors.
> There are a variety of page types that can be created within each site. Below is the current list of page
types. During this initial entry these are expected to be modified.
Components and Page Editor
> To add a component via Page Editor, go to the View tab and check the Designing checkbox to enter
Designing mode.
> Next, simply click the Component button under the Home tab.
> You will notice that grey Add to here icons now show up throughout the page. These are the locations in
which you are able to add various components.
Components and Page Editor (continued)
> Upon clicking one of the Add to here icons, a list of
insertable components will be shown in a pop-up window
titled Select a Rendering. Pick the desired component and
click Select.
> For further instructions on adding components, search this
document for the proper component and follow the
directions listed there.
NOTE: In Page Editor, use Designing mode
when adding components, setting associated
content, and moving components around on
a page. Use Editing mode when editing the
content of an existing component.
Data-Sources > Existing and New
> After adding a component, you are able to choose
between Select Existing Content or Create New
Content.
> If Select Existing Content was chosen, select the
appropriate content in the tree and hit ok.
> When choosing Create New Content, name the new
content, select a location where the content will be
saved, and then click ok.
Creating Data-Sources > Branches
> To create content / data-sources from a branch using content
editor you must follow these steps.
> *In this example we will be using the InterestingInfoBranch.*
> In Content Editor, navigate to the appropriate folder within
site-data.
> Right click on that same folder, click on Insert and select
Insert from Template.
NOTE: Be sure to save
your work often by
clicking the floppy disk
button in the top left
corner of the page
editor toolbar.
Creating Data-Sources > Branches (continued)
> Click the browse tab, locate and click on the
BranchInterestingInfo template within the Branches node, give
your item a name, and click Insert.
> You will now see your new content / data-source neatly
organized within your tree.
> The parent item holds your categories called
InterestingInfoCategory, and your categories hold your
text items called InterestingInfoItems.
> You must now edit the items that were created by clicking on
the children items and changing the data in the fields. You can
also edit the name that appears in the tree by clicking on the
item and hitting F2 on your keyboard or right clicking the item
and clicking Rename.
InterestingInfoCategory
InterestingInfoItems
NOTE: See the Interesting Info
slide for more information on
adding this component.
Creating Data-Sources > Branches (continued)
> If a second category needs to be created, select the parent
item, right click the item, click Insert, click
InterestingInfoCategory, give the item a name, and click
ok.
> Your new item will show up in the tree and you may now
add children items to it.
> The process of adding children to categories is the same as
the steps above. Select a category, right click it, click on
Insert, choose InterestingInfoItems,
give it a name, and click ok.
NOTE: Be sure to change
the default data. This can
be done within “Content
Editor” or “Page Editor.”
Feature Box > Picture, Title, and Text
> The Feature Box is a small component that uses a Picture,
Title, and Rich Text of your choice.
> After adding this component to your page click inside the edit
box so the Feature Box edit buttons become visible.
> Clicking the blue box with the checkmark brings up a new
window where you will add content within the editable fields.
NOTE: You will not see an image edit frame
until an image is added to the component.
This is the intended practice for this
component
Feature Box > Picture, Title, and Text
> Be sure to edit all fields appropriately.
> To change or insert a Link, click on one of the Link buttons and
follow the instructions on the insert link slides.
> Be sure to edit the Text field by clicking one of the Text buttons
above the field and entering your text or html.
> To change or insert an Image, click the browse button and follow
the instructions on the insert image slides
> After all of your content is entered hit ok.
> Save your work by clicking the floppy disk icon in the top right
corner of page editor.
Resources
> The Resources component is simply a styled list of links with a customizable
heading. It can be placed in the right column of a three-column layout.
> Once you add the component to a page, go into Editing mode. You can easily
change the heading by clicking on it and typing directly onto the page.
> You can add links to the list by clicking on an “empty” area of the component.
Upon clicking, a new toolbar will pop up.
> Next, click the blue box with the checkmark to add links to the list.
Resources (continued)
> In the next window, click the Edit button to open the Select
Items window
> You can add items to the list (in the right pane) by double
clicking them in the left pane, or selecting them and
clicking the right-facing arrow.
> When you are finished, click OK, then click OK again and
save the page.
Social Media Buttons > Follow Us
> Once the component is added to the page you will need to
click the whitespace next to the title to bring up the edit
buttons.
> Click the blue box with the checkmark to open the content
editor window.
> To add or edit a link, click on the Insert External Link above
the Social Media title and fill the URL field with your Social
Media Profile link.
> You can also edit the Title of the component by changing the
text in the Title field.
NOTE: If a field is left blank the
button will not appear on the
page.
Social Sider Bar > Twitter Feed
> Once the component is added to the page you will need to
click the whitespace to bring up the edit buttons.
> Click the blue box with the checkmark to open the content
editor window.
> Fill-in all the fields in order to allow the component to pull in
the Twitter posts.
NOTE: If a field is left blank the component will
not appear on the page.
Featured Events
> The Featured Events component allows you to take a calendar
feed from Active Data Exchange and have it display as a sidebar
widget in the right column of a three-column layout.
> To get this component working properly, first make sure you have
an up-to-date Events script from Web Development.
> Next, enter Designing mode in Page Editor and click the blue
Component button. Click an appropriate Add to here icon.
> Next, select FeaturedEvents and create new content for it.
Featured Events (continued)
> After entering Editing mode, the newly added component should
now look like this.
> To add a title to this component click the white text on the grey
background and type your desired title directly onto the page.
> Next, click on the whitespace below the text fields.
> You should see a toolbar titled Events. Click the blue box with the
checkmark to content editor window for this component.
> In the window that pops up, we can now add the Active Data
Exchange script to the component.
Featured Events (continued)
> The field you need to edit is called EventsJavaScript.
> To add your script, first click the Edit HTML button.
> The new window that pops up contains a text box where you will
paste your events script.
> After pasting the script, click Accept, then click OK, and save your
work.
> The page should refresh and, and assuming your script is valid,
the list of events will now appear in the new component.
> You can also edit the title (at the top of the component) and the
link (at the bottom of the component).
Events (Home)
> This slide covers the Events component on the home page. For the details of
adding an events script to this component, please see the Featured Events slide.
> To take advantage of the RSS feed option in Page Editor, go into Editing mode
and click on an empty area in the Events component.
> Once again, the Events toolbar will appear. Click the blue box with the
checkmark to open the same window that you used when you added an events
script.
NOTE: The event script on the
home page will not run in page
editor. Switch to preview mode
to validate the feed.
> This time, edit the RSS Feed field. Click Insert External Link and then paste the
URL of the desired RSS feed (from Active Data Exchange) into the URL text box.
> Click OK, then click OK again. Save the page, and now the RSS icon will link to
your chosen RSS feed.
Featured News
> The Featured News component allows you to manually
select a list of news articles for display in the right column of
a three-column layout.
> Enter Designing mode in Page Editor and click the blue
Component button. Click an appropriate Add to here icon.
> Next, select FeaturedNews and create new content for it.
Once the component appears on the page, click Save.
Featured News (continued)
> Next, you will be able to select the articles you want to appear in the
news listing. Enter Editing mode and click an empty area on the newly
added component.
> A toolbar will appear, with a title of News. Click the blue box with the
checkmark to bring up a new window.
> This window has one field, called FeaturedArticles. Click the Edit button
to view the TreeList that will allow you to select your articles.
Featured News (continued)
> In the left pane of this window you can select an article, then
either double-click it or use the blue right-facing arrow to move
articles to the right pane.
> Articles that appear in the right pane of this window will appear
in your listing, unless they have an expiration date that has
already passed.
> When finished, click OK, then OK again. Now save your page and
your selected articles should appear in the component.
> You can also edit the title (at the top of the component) and the
link (at the bottom of the component).
News (Home)
> This slide covers the News component on the home page. For the
details of selecting articles to display within this component, please
see the Featured News slide.
> An additional feature of the home News component is that the first
article in the list gets featured, with larger text and a thumbnail
image.
> The home News component also has an RSS icon in the upper-right
corner. This icon allows you to link to a News RSS feed that can be
created within Sitecore.
NOTE: See the Content Author’s Cookbook for
information on creating a Sitecore RSS feed.
> If you want to change the RSS feed for this component within Page
Editor, go into Editing mode and click on the RSS icon. This will open a
Link toolbar. Click the link icon on the left to choose an RSS feed
from the Sitecore content tree.
Tabbed Component
> The Tabbed Component allows you to add two tabs with
either Featured Events, Featured News, or Recent News.
> Enter Designing mode in Page Editor and click the blue
Component button. Click an appropriate Add to here icon.
> Next, select Tabbed Component and create new content for
it. Once the component appears on the page, click Save.
NOTE: Only this component or the Featured
Events component can be used at a time.
Tabbed Component (continued)
> Enter Editing mode to add text to the title of each tab. Be
sure to save your work after making the changes.
> Enter Designing mode in Page Editor and click the blue
Component button. Click an appropriate Add to here icon
that is within one of the associated tabs.
> Next, select one of the proper Event/News Components and
follow the steps above for creating them. Once the
component appears on the page, click Save.
> HINT: When adding the proper component to the second
tab, first select the tab to make it active before entering into
design mode.
Announcement Bar > Title and Text
> The Announcement Bar is a component that is used to
display special announcements. It can be added to any
page type.
> When you add an Announcement Bar to a page and create
new content, it will appear like this in Editing mode.
> Notice that both fields contain the message No text in
field. You can click on either field and begin to add text
directly onto the page.
NOTE: When both text fields are empty, the Announcement Bar will be
invisible outside of Page Editor. If the page is published in this state, site
visitors will not see the bar at all. This allows you to leave it on the page
for future use, and to add or remove content as needed.
Galleries > Add Videos and Images.
> There are five gallery styles to choose from. #1 through #4 are
good choices for displaying both Images and YouTube videos,
while #5 is best for Images.
> Galleries can go in the center column of a three-column page, or
the right column of a two-column page.
> To add a gallery in Page Editor, click the Component button and
choose an appropriate Add to here icon.
> In the Select a Rendering dialog, choose which gallery style you
would like to use, then click “Select”.
Galleries (continued)
> In the Select the Associated Content window, you can
select existing gallery content or create new gallery content.
> After selecting the content for the new gallery and clicking
OK, click the Save icon in Page Editor.
> If you created new content, the gallery will now appear on
the page with a couple of sample slides that you can edit,
add to, and further customize.
> If you enter Editing mode and click a blank area on a
gallery, a toolbar will appear. Clicking the green plus sign
edit button will allow you to add more slides to the gallery.
Interesting Info > (continued)
> Each category and text item can be ordered, added, deleted and
edited to your liking by clicking on the appropriate buttons.
> In page editor, make sure the Editing button on the View tab is
checked.
> Clicking the outer most edit box shows the Category edit buttons.
> Clicking the inner edit box allows you to edit the text items.
> The green plus button brings up a new window that allows you to
add a new text item. Name your item and press ok.
> The blue arrows allow you to sort your categories or text items.
> The red X will delete the item in the edit frame you
have selected.
NOTE: Hovering
your mouse over
each button
gives a brief
description of
what that button
will do.
Recent News
> The Recent News component lists a collection of news articles in reverse
chronological order. The articles that display will vary, depending on several
settings which you can edit.
> Upon adding a Recent News component to the right column of a page and
setting the content for it, you can edit those settings within Page Editor by going
into Editing mode and clicking on an empty area within the Recent News
component.
> At this point, a toolbar titled Recent News will pop up.
> Click the blue box with the checkmark to open a window that allows you to edit
the Recent News settings.
Recent News (continued)
> The Tags field allows you to set the tags that you want to use to
filter news articles.
> The ShowArticlesWithOneTag field will tell Recent News to
display all articles that contain at least one of the tags in the
above Tags field. If this box is left unchecked, Recent News will
only display articles that contain all of the tags in the Tags field.
> The NumberOfArticles field determines how many articles the
component will display. If the field is left blank or has a value of
less than 1, the number will default to 5.
NOTE: If an article’s expiration date
has passed, it will not display.
> The MoreLink field lets you create a link which will appears at
the bottom of the component. It can be used, for example, to link
to further news listings for your section or department.
Rich Text
> The Rich Text component can be placed in the right column of a threecolumn layout, and allows you to add custom content.
> As you can see in the example screenshot, this component can contain
multiple lines of text and images. Beyond that you can style and format
your text in various ways.
> In addition, if you want to use custom HTML for display on a page, this
component will allow you to do so.
> Once you have added a new Rich Text component to a page through
Page Editor, you will see an empty bordered component with text inside
of it that reads [No text in field].
Rich Text (continued)
> To edit the content of this component, go into Editing mode. Now you can click
on the text and immediately begin editing it.
> If you would like to have more options in terms of styling the text, adding
images, or manipulating markup, click on the far left icon in the toolbar that
appears.
> You can now edit the text in this window, using the various buttons to add
features and styles to your text.
> Note that the Design tab is selected by default when you open this window. If
you select the HTML tab, you can add markup directly to the text area, which
can then be rendered on the page (within this component).
> When you are finished, click Accept and make sure to save the page.
Rich Text with Title
> The Rich Text with Title component is a specialized, left-column
version of the standard Rich Text component. It allows you to
enter a pre-styled Title and multiple lines of text with whatever
formatting you choose.
> If you have added the component to a page without using existing
content, you will be presented with two fields that read No text in
field.
> Just go into Editing mode and you can immediately enter text in
each of the these areas. Just make sure to click Save when you are
finished!
> This component is perfect for displaying things like office hours or
contact information.