ESCO Training Guide Sessions 1[ESCO escocorp.com Products Area]

Table of ContentsWelcome to ESCO Site Session 1..................................................................................................3

SharePoint Basics........................................................................................................................................4

Navigation of SharePoint..........................................................................................................................4

Understanding SharePoint, Sites, Lists, Libraries, Documents, and Pages.............................................5

Site Structure............................................................................................................................................5

................................................................................................................................................................. 5

Pages.......................................................................................................................................................6

What are Web Parts?...............................................................................................................................7

Working with the Product Lists........................................................................................................9By Application, By Machine, By Product Line Pages and Lists..................................................................11

Product Family Pages and List...................................................................................................................12

Editing a List Item.......................................................................................................................................15

Editing a Product Detail Page.......................................................................................................16Editing the Title, SEO fields, and Rotator Images......................................................................................16

Adding Page Content..................................................................................................................................16

Adding Web Parts.......................................................................................................................................17

Save, Check In, Publish Page....................................................................................................................19

Seeing All Pages Checked Out to You.......................................................................................................19

2

Welcome to ESCO Site Session 1 This guide is used to provide a paper support guide/material to use as you perform tasks and management of the escocorp.com portal. This guide provides instructional steps for performing common tasks that you will be performing to maintain the site. In addition it provides definitions and explanations of SharePoint language and functions that were created for this escocorp.com portal.

Sample Screenshot of an Authenticated view of “escocorp.com Home Page”

1. Site Actions Menu – contains shortcuts to create and edit items. This menu will contain items you have permission to perform, so the contents may change as you navigate to different pages.

2. Site Logo – links to the Home page of escocorp.com.3. Main Navigation – provides direct links to key sub-sites and pages. Specific links display

drop-down menus.4. Breadcrumb –links that allow you to quickly navigate through site and page hierarchy

relative to your current location.5. Left Navigation – contains shortcuts to common content areas of the portal.6. Ribbon – contains tabs that display tools and commands relative to the page content.7. User Menu – contains shortcuts to profile and user setting options.8. Search – allows the user to search the site for information.9. Web Parts – contains content information. Web parts are the containers of information that

make up the site.

3

SharePoint Basics

It is critical to understand that the experience on the escocorp.com site for outside users and you will be different. So we will be focusing solely from this guides point of view on your view. You can currently access the English language site internally at http://webextraspfprd.web.escoextra.local/EN/ and the Anonymous version of the site at http://wwwtemp.escocorp.com (anonymous users will ONLY see pages and content that has been published).

Navigation of SharePointThere are several ways to navigate through sites and pages in escocorp.com. Main Navigation – Use these secondary top level links and drop-down menus to go directly to

a specific site or sub-sectionLeft Navigation – Use the left navigation (when available) to navigate to pages within a sub-

section.Breadcrumb – Click any part of the breadcrumb to go directly to that site or page. Navigate Up Icon – Click the Navigate Up icon on the ribbon to display breadcrumb

navigation for the site in a hierarchical view.Site Logo – Click on the site logo to return to the home page of the current site.Products link in Ribbon – To make navigating up to the root site where the products list and

main image libraries reside, there is a link in the top, right of the ribbon.

Let’s break down some key navigational features.

Using the Main Navigation

By using the top horizontal navigation on your site you can access the main areas of the escocorp.com portal, and some of these main areas have (or will have) drop-down mega menus. The screenshot below displays the main navigation with the Products mega menu visible.

Home

Products

Services

Global Operations

Our Company

Turbine Technologies

Using the Left Navigation

The left navigation is visible on most areas of the site, excluding the home page. On the public-facing content pages, the left menu will be an accordion-style menu that expands and collapses. On the administrative pages, it will show all sections open and may have different items than the public-facing pages.Site Specific NavigationShows structure only under the specific site you are on.

4

Using the Ribbon

The ribbon brings the productivity offered in Office to SharePoint. The ribbon is only visible to those who are authenticated and have the rights to manage or maintain the site. It contains command buttons grouped by task that allow you too quickly and efficiently work with the content on the current page. The ribbon is located at the top of the page and in some pop-up windows. The tabs and toolbars will change relative to the type of content on the page and selected.

NOTE:

Ribbon functionality will change based upon your location and your permission level.

Understanding SharePoint, Sites, Lists, Libraries, Documents, and PagesI like to use this analogy to explain how SharePoint is very similar to an environment you see almost every day.

Think of the portal/site as the Mall it is the largest container in SharePoint. The sites (i.e. Products, Services, Global Operations, Our Company) represent the stores within the Mall. So think of them as the Barnes and Noble, Macys…etc. Within the stores are the shelves containing products and resources, these represent Libraries and Lists in SharePoint. Finally are the products themselves these are documents, images, and pages.

How can you see the inner working of SharePoint?1. Navigate to any site on the upper left of the page in the same area as the Ribbon Click Site

Actions2. On dropdown menu, Click on View All Site Content, 3. You will now see the All Site Content page; this will show you all containers within the site

you are on, including any sub-sites (listed at bottom).

Site StructureEsco’s portal is set up for localization, which means that there will be separate sites for each of the languages, and each of those language sites will have the same structure.

5

Root site (image libraries and product lists)

English

Products

Services

Global Ops

Our Company

French

Products

Services

Global Ops

Our Company

Turbine Tech

German

Products

Services

Global Ops

Our Company

Turbine Tech

Italian

Products

Services

Global Ops

Our Company

Turbine Tech

PagesSharePoint leverages publishing pages to represent content in a friendly way. For the portal we have created a series of additional unique pages for specific category or topic areas. Pages are handled just like documents and stored in Libraries, in SharePoint these libraries are commonly called with Site Pages, or Pages.

To create a Page:4. Navigate to site, on the upper left of the page in the same area as

the Ribbon Click Site Actions5. On the dropdown menu, Click More Options… 6. You will get the Create popup window. You will select Page, then

Publishing Page.7.

Click CreateThe page is created in the Pages library if your site had Publishing enabled.

8. Now give it a Title, Description, and URL Name. It is critical you follow the SEO Standards.

9. Next pick the Page Layout, this will be defined by the location and purpose of the page. You may need to reference the Approved Information Architecture, or Data Matrix to verify your choice if you do not know. Please be aware the layout can be changed at a later time.

10.Click Create11.You are navigated to the page to continue

to edit and add content. The ribbon is also opened to give you functionality to perform the content creation process.

12.When you are finished adding content, click Save & Close on the ribbon to save your content and close the page. It is also a good habit to Check In the page, so others can see the changes and edit the page if needed. When you want readers to be able to view the changes, Publish the page.

6

Turbine Tech

What are Web Parts?So when we think of web parts consider two points. First a web part is a widget on a page that performs a pre-configured function. Second is that web parts can be used to expand the publishing capabilities of a page. There are dozens of web parts that can be placed on a page, each serving different functions.

Adding a Web Part to a Page:1. Navigate to site, and to the page you want to add the web part, on the upper left of the page

in the same area as the Ribbon Click Site Actions2. On the dropdown menu, Click Edit Page 3. You will see the ribbon open, and the page is now in

Edit Mode.4. On the ribbon Click Insert to open that tool area. Now

in the Web Parts section, Click Web Part5. This will open the Web Parts window. This is broken down into

three areas. Categories (each web part is categorized based on its

function) Web Parts (within a Category) About the Web Part (this is description area of each web

part and where on the page it will be applied).6. Go ahead and pick the web part you want, then the area, Click Add7. The web part is now on the page. You can Click Save & Close on the ribbon, or add more

web parts, or edit and configure the web part you just added.

Edit and Configure a Web Part1. Navigate to site, and to the page you want to add the web part, on the

upper left of the page in the same area as the Ribbon Click Site Actions2. On the dropdown menu, Click Edit Page 3. You will see the ribbon open, and the page is now in Edit Mode.4. On the page your web part, go to the web part and hover over it,

you will see become available, Click the Dropdown Arrow, then Click Edit Web Part.

5. You will see the web part editor open on the upper right side of the page you may need to scroll either to the right or up to see it on your screen.

6. You can now choose to edit many of the functions of the web part.

7. Click OK to save your changes and exit, Click Apply to see the changes but leave the edit options open.

8. Once you are done making changes Click Save & Close on the ribbon.

NOTE:

Certain settings will be different for each and every web part, so ensure you review each

7

expandable area to complete your configuration adjustments.

Deleting a Web Part from a Page1. Navigate to site, and to the page you want to add the web part, on the

upper left of the page in the same area as the Ribbon Click Site Actions2. On the dropdown menu, Click Edit Page 3. You will see the ribbon open, and the page is now in Edit Mode.4. On the page your web part, go to the web part and hover over it, you will

see become available, Click the Dropdown Arrow, then Click Delete.5. Once you are done making changes Click Save & Close on the ribbon.

8

Working with the Product ListsOn the site there are 4 main product-based pages:

Product Landing page

This is a one-off page that is the landing page for the products area.

You navigate to this page by clicking on the Products link in the main navigation.

The content on this page is managed on the page itself.

By Application, By Machine, and By Product Line landing pages

These pages display the product families assigned to each of these types, with an image and a link to the corresponding family page.

You navigate to these pages either by clicking the “See All” link in the mega menu or left navigation, or by clicking the left navigation link heading

The content is stored in the corresponding Applications, Machines, or Product Lines lists and dynamically placed on the page. You do not edit these pages directly.

9

Product Family Page

These pages display the product families associated to a specific type (Application, Machine or Product Line). An image, product family name, and list of products (when accordion is opened) are displayed.

You navigate to these pages from the “By…” pages, or from the families listed in the mega menu or left navigation.

The content is stored in the Product Families list (image, type assignment) and the Products list (assignment of specific products) and you do not edit these pages directly.

Product Detail Page

These pages display the details about the product using images, text, web parts, links and video.

You navigate to these pages from the product links on a product family page, or from the Featured Products in the mega menu.

The content is stored on this page, excluding the images (or video) which will be stored in image libraries and linked on this page. You will edit each page directly to update the

10

content.

By Application, By Machine, By Product Line Pages and Lists

Corresponding Lists: Applications, Machines, Product Lines (will be Brands)

Title – Title of item

Localized Title – is the title displayed on “By….” page, on top of the image

Product Language – select the language you wish this product family to appear in

Display Order – you can use this alter the order of the items displayed on the “By…” pages

Page URL – is dynamically set and cannot be edited

Image URL – this is the image that is displayed on the “By…” page and should be 218px by 99pxRegions – select the regions you wish this product family to appear in

11

On the corresponding list item, make sure you are editing the correct language

Product Family Pages and ListCorresponding Lists: Product Families and Products

Image – set on the Product Family list

Product Family name (Dredge Products in the example above) – the relationship between type (Application/Machines/Product Lines) and product family is set on the Product Family list

Individual Products Listed (shown in the open accordion) – this relationship between a specific product and Product Families and type (Application/Machines/Product Lines) is set on the Product List on each individual product.

12

Title – Title of item

Localized Title – is the title displayed on product family page

Product Language – select the language you wish this product family to appear in

Display Order – you can use this alter the order of the items displayed on the product family page

Page URL – is dynamically set and cannot be edited

Image URL – this is the image that is displayed on the product family page and should be 138px by 99pxRegions – select the regions you wish this product family to appear in

Applications, Machines, Product Lines – For a product family to appear on a specific product family page type, the appropriate application/machine/product line type must be selected.

13

Title – Title of item

Localized Title – is the title displayed on product family page

Product Language – select the language you wish this product family to appear in

14

Featured – If checkbox is checked, item will appear in the Featured Products section of the mega menu.

Display Order – you can use this alter the order of the items displayed on the product family page in the open accordion section

Page URL – is dynamically set and cannot be edited

Image URL – not sure where this is used

Regions – select the regions you wish this product family to appear in

Applications, Machines, Product Lines – For a product family to appear on a specific product family page type, the appropriate application/machine/product line type must be selected.

Editing a List Item

The various Product lists are at the root of the site collection, and there is link to easily navigate to them in the top, right of the Ribbon.

That link will open the root site on the View All Site Content page, and if you scroll down to the Lists section, you will see the various product lists.

1. After you have navigated into a list, find the item you wish to edit. If the list has a large number of items, you can use the column filtering/sorting or custom views to assist. **Remember that you will need to edit the correct language version of the item.

2. To edit an item, hover over the Title field until you see the drop-down menu arrow and then click on the arrow, and select Edit Item. This will open a dialog box.

3. In the dialog box, make the necessary edits and click Save when finished. (For an explanation of the various fields in the product lists, please see the previous section.)

15

Editing a Product Detail PageThere are various things that need to be edited on the product detail pages, which are broken out into sections below.

1. Navigate to the page you wish to edit.

2. Put the page in edit mode (Site Actions > Edit Page)

Editing the Title, SEO fields, and Rotator Images

3. Scroll down to the bottom of the page and fill out the Title, SEO fields (if information is available) and set any rotator images.

o Title – After you check in the page for the first time, the Title field will be displayed in the breadcrumb and at the top of the page, above the image rotator.

o SEO fields – The SEO Title is used for the browser title, and the SEO Description and SEO Keywords are put in <meta> tags of the page for search engine indexing.

o Rotator Images – these images should be 618px by 278px and you can set up to 5 images, which will be rotated in order. If you set only one, the pagination and rotation will not appear. When the page is in edit mode, the images appear at the bottom of the page, but once the page is saved the image(s) will appear at the top.

Adding Page Content

4. Among all the web part zones, there is a field called Page Content and this is where you can type (or paste) the text about the product. To start using that section, click on the text “Click here to add new content” and the Ribbon will display the editing tools.

5. You can type content directly into the box, or paste it from another source. If pasting content it is CRITICAL that you paste as plain text. To do this, copy text from your source and then in the Ribbon, on the Format Text tab, select Paste > Paste plaintext

16

6. You can format the text using the available formatting tools however it’s very important to keep all the styling applied consistent across all pages. So internally it would probably be a good idea to document that styling that should be applied. For example, if you highlight some text and then click on the Markup Styles or Styles buttons, a drop-down menu of pre-formatted styles will appear. Some of these styles have been customized so consistent formatting can easily be applied.

We DO NOT recommend that users set font style, size, or color using the toolbar, but allow us to create custom styles available in the drop-down for everyone’s use. Bullets and bolding are also acceptable formatting options.

If you accidentally paste formatting or need to clear any applied formatting, highlight the text

and then click on the button

Adding Web Parts

The product detail pages have a custom page layout which contains various web part zones. Where you place a web part zone can directly affect the styling that is applied.

For example, in the right rail there are web part zones which have a GreyBackground label, and there are special web parts that when placed in that zone will get a gray background.

17

7. To add a web part on a page (while in edit mode) click on the “Add a Web Part” text in the zone you wish to add a web part to, and the in the ribbon the web part adder panel will appear.

8. Most of the web parts used on the product detail pages are going to be in the category called ESCO Summary Links. Click on that category, select a web part, and click Add. The web part will be added to the zone.

9. Once the web part has been added to the page you can edit various fields – text, images, and links. In the screenshot below (on left) each of the pre-configured items in the web part has its own edit menu. To edit and item, click on the pen and paper icon and select Edit. This will open up a dialog box for that item.

10. In the example above (on right), the item being edited contains the title text of “Related Products” and the green image. For some of the other items, the description text and link URL might also be used.

11. Another key element of the Summary Links web parts is the Style drop-down. There are various pre-configured styles which take the content, images, and links set for the item and style it a certain way. The web part zones will also play a part in the styling, like the zones which set the gray background.

12. In the example above (on left) to add a new bullet link, you would click on “New Link: in the blue panel at the top of the web part. This would open a dialog box where you would type the Title and browse a Link URL, and then select the RedBullentLink Style.

13. The blue panel at the top also gives you the ability to re-order the links.

18

Formatting Issue - Bullets

The issue below is something I saw when I was working with Jonathan yesterday and is caused by extra spaces and bullet-type characters being pasted from Word. And unfortunately the things that are being pasted aren’t really considered formatting, so the “Clear Formatting” in the ribbon won’t fix this, and neither will copying into Notepad first.

The only way to fix this is to actually delete the extra spaces AND those bullet-looking things, which are actually characters.

Once that is done, use the bullet button in the ribbon (shown below) to format the items as actual bullets.

IF, when you apply the bullet formatting it makes the WHOLE block of text one bullet, then you need to add actual line breaks after each item. This might also entail deleting another sort of break that makes the content go onto the next line.

In the example shown above, you should put the cursor right before the word “Greater” and back space to delete the gray bullet character and until the line jumps up to the end of the previous line. Then hit “Return” to add a true line break. Now that second line should have a properly formatted red bullet.

19

Save, Check In, Publish Page14. Once you are done editing a page, it’s a good habit to at least check it in in so others can

edit it, if needed.

o To save the page, click on Save & Close button in ribbon (Only you will see the changes, and other users with edit rights will only see the last checked in version. The page is basically locked for other users until you check it in.)

o To check in the page, click on Check In button in the ribbon. (Internal authors will see the checked in version, Anonymous users will see the last published version.)

o To Publish the page, click on the Publish tab in the ribbon and then the Publish button. (Anonymous users will see this page version)

o If you want to back out any edits you made to the page since you checked it out, click on the arrow underneath Check-in and select Discard Check Out

Seeing All Pages Checked Out to You

1. Click on the Products link in the top, right of ribbon

2. Select Site Actions > Manage Content and Structure

20

3. In the toolbar, under the View drop-down select Checked Out to Me. This will display all items checked out to you in the entire site collection.

4. From each item’s drop-down menu you can open the page in a new window to view it, or use the other options.

The Manage Content and Structure is available on every site in the collection, but when viewed from sub-sites you will only see items checked out to you in that area. To see all items, you need to do this from the root site in the collection.

21