divisional website portfolio aem content author training partcipant guide dec 1 final

Participant Guide

Divisional Website Portfolio AEM Content Author Training Abbott © 2016 2

Introduction

Welcome to Divisional Portfolio Websites AEM Content

Author Training. Today’s training session is designed to teach you skills to update content on your site and configure components built for, and used on, your divisional website. Using the skills practiced in the lessons included here, you will be able to update current pages and add new pages to your site. Techniques used in the lessons are the simplest methods for achieving results. This training guide is supplemental to Abbott training on the AEM platform provided in “Adobe AEM CMS User Guide v4.ppt,” and Adobe’s online learning modules, found at adobe-elearning.abbott. Both these resources should be taken in advance of content in this document.

Additional Help For ongoing support: 1. Call Global Service Desk to create ITSM ticket. 2. Ask service desk analyst to assign ticket to “ADM-

GLBL-COG Commercial Digital Non-Critical App Support” for any AEM/Digital Tools requests/issues.

../../../../../../606310/AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.Outlook/2ZHGPZJ7/adobe-elearning.abbott

Participant Guide


Table of Contents

Introduction ....................................................................................................... 2 Module 1: Manage Images and Text ................................................................. 4

Lesson 1: Manage Images and Text in Section Panel With Navigation ........ 5 Lesson 2: Validate changes in the publish instance .................................... 10

Module 2: Edit the Hero Panel ........................................................................ 11

Lesson 1: Edit the Hero Panel Component ................................................. 12 Module 3: Manage Events ............................................................................. 16

Lesson 1: Create Events ............................................................................. 17 Module 4: Manage FAQs ................................................................................ 19

Lesson 1: Administer FAQs ......................................................................... 20

Lesson 2: Add Items in FAQ Component ................................................... 21 Lesson 3: Delete FAQs ............................................................................... 23

Lesson 4: Add FAQ Tags ............................................................................ 24

Module 5: Manage Articles.............................................................................. 26 Lesson 1: Create Articles ............................................................................ 27

Module 6: Manage Pages ............................................................................... 29

Lesson 1: Add Product and Edit of an Existing Product Detail Page ........... 30 Lesson 2: Add or Delete Products From the Product Loop Page ................ 36

Lesson 3: Delete a Product from Product Listing ........................................ 39

Participant Guide


Module 1: Manage Images and Text

Introduction This module provides information on changing image and

headline within a component on a current page. You will work with a division-specific component used on the sample site, the DAM, and foundational AEM skills to navigate and maneuver within the AEM platform.

Module Objectives

At the completion of this module, you will be able to:

Navigate to a page

Identify the component desired within the page

Change the existing image to a new one

Edit text in the heading and subheading

Change color theme used on the component

Add another button and its destination

Verify the changes within publish instance

Participant Guide


Lesson 1: Manage Images and Text in Section Panel With Navigation

Introduction In this lesson, we will demonstrate how to update images

and text in the Section Panel

Step Action

1. Open your Internet browser using Chrome / Firefox Note: You should be using the latest Chrome version for best performance

2. Type https://author-abbott-stage3.adobecqms.net/projects.html#

3. Click AEM WCM page displays

4. From the “left pane” click ; this will open the navigation tree Note: Click the “+” sign next to the name to open the contents under that name

5. Click ; now click the “+” sign to open Division Sites Note: Click the “+” sign next to the name to open the contents under that name

6. Click “+”, , then click the “+” sign on

7. Click “+” , then look for “Divisional Site Training Student #” where # is replaced by student number”

8. From , click the “+” sign to open Divisional Site Training Student Note: Click the “+” sign next to the name to open the contents under that name

https://author-abbott-stage3.adobecqms.net/projects.html


Participant Guide


9. Click on Pages; from right pane area Home | Vascular Disease Treatment select the page by double-clicking the number Note: You may have to refresh right pane by

clicking

10. Select Edit from the Section Panel With Navigation; the dialog box displays

11. Click on background image tab

12. Click to remove image Note: New images can be selected from the left pane

13. From left pane, select the browse button from Section Panel With Navigation

14. Scroll to Division Site Training, then click Student

15. Click banners, then scroll and select the Mount Everest image

16. Click-drag image from left pane into Background Image tab of the Section Panel With Navigation

Participant Guide


17. Click OK

18. Click Magnifying icon to preview page with new image

19. From Section Panel With Navigation, click Edit Note: Section Panel With Navigation dialog displays

20. Click Panel Details

21. Edit Heading Note: Use all UPPERCASE

22. Click OK

23. Click magnifying icon to preview page with new image

24. From Section Panel With Navigation, click Edit Note: Section Panel With Navigation dialog displays

Participant Guide


25. From the Sub Heading Color dropdown, change White color to another color

26. Click OK Note: Confirm via edit mode the Sub Heading color changed based on new selection

27. From Section Panel With Navigation, click Edit

28. Click to add another navigation button Note: Button dialog displays

29. From the Button Link dropdown navigate to desired page for linking

Note: For this exercise select the product page from Divisional Site Training Student

30. Enter Button Text information

Participant Guide


Note: Text should be ALL CAPS, type “OUR PRODUCT”

31. Click OK Note: Confirm via edit mode the new button appears to the right of the original 3 buttons

32. From Section Panel With Navigation, click Edit

33. Click Color Theme and Alt texts

34. From Theme Color dropdown select a color

35. Click OK Note: Confirm via edit mode that the Heading text and background colors of the buttons match the color selected

Participant Guide


Lesson 2: Validate changes in the publish instance

Introduction In this lesson, we will demonstrate how to verify that

changes are implemented in the published instance. Note: It may take 10-15 minutes for the changes to appear on the published instance. This is not unusual for AEM implementations.

Step Action

1. Select AEM WCM tab

2. Click

3. Select page to be published

4. Click

5. Copy URL starting at: /content/bss/divisionalsites/<global/reusable/divsitetrainingmaster/en-us>/pages Note: Substitute above <divsite Student#>

6. Open a new browser; type in the following: Stage3.divisionsite.abbott.com//content/bss/divisionalsites/global/reusable/divsitetrainingmaster/en-us/pages/index.html

7. Press Enter to validate changes

Participant Guide


Module 2: Edit the Hero Panel

Introduction This module demonstrates how to work with one of the

most frequently used components: the Hero Panel. Work in this module builds on skills from the previous exercise.

Module Objectives


Locate Hero Panel within the menu

Replace a headline

Replace a subhead

Change an image

Participant Guide


Lesson 1: Edit the Hero Panel Component

Introduction In this lesson we will demonstrate how to edit the Hero

Panel Component.

Step Action

1. Open your Internet browser using Chrome / Firefox Note: You should be using the latest Chrome version for best performance

2. Type https://author-abbott-stage3.adobecqms.net/projects.html#

3. Click , AEM WCM page displays

4. From the “left pane” click ; this will open the navigation tree Note: Click the “+” sign next to the name to open the contents under that name

5. Click ; now click the “+” sign to open Division Sites Note: Click the “+” sign next to the name to open the contents under that name

6. Click “+”, , then click the “+” sign on

7. Click “+” , then look for “Divisional Site Training Student #” where # is replaced by student number”

8. From , click the “+” sign to open Divisional Site Training Student Note: Click the “+” sign next to the name to open the contents under that name



Participant Guide


9. Click on Pages; from right pane area Home | Vascular Disease Treatment select the page by double-clicking the number Note: You may have to refresh right pane by

clicking

10. Select Edit from the Hero Panel component; the dialog box displays

11. From the Individual Panel, copy URL Note: The Hero Panel component on the page actually references an individual panel that is placed elsewhere in the site. Usually this is utils/Panels/HeroPanel/<panel>

12. Select AEM WCM tab

13. Navigate to Hero Panel and highlight from the left pane:

Note: Reference URL in Step11

14. From the right pane, select and double-click on Home-Panel-1

15. Right-click in the area of text or picture

Participant Guide


Note: The following context menu displays

16. Click Edit Note: Dialog box displays

17. Select Hero Image tab

18. Click to remove image Note: New images can be selected from the left pane

19. From left pane, select the browse button

20. Scroll to Division Site Training, then click Student

21. Click banners, then scroll and select the Mount Everest image

22. Click-drag image from left pane into background image tab of the Hero Image

Participant Guide


23. Click Carousel tab

24. Edit Heading Text

25. Edit Sub Heading Text

26. Click OK

27. Click for Home-Panel-1 Note: Activate dialog box may appear if image is not published

28. Return to Home | Vascular Disease Treatment page

29. Refresh Chrome browser Note: Review new image and text

30. Click magnifying icon to preview page with new image

Participant Guide


Module 3: Manage Events

Introduction This section provides information on adding new events to the events section on the sample site. We will use a copy/edit technique to simplify the process of adding a new event.

Module Objectives


Add a new event list events that already exist on the site

Copy and rename an existing page

Modify details on copied page to create the new event

Participant Guide


Lesson 1: Create Events

Introduction In this lesson, we will learn how to create Events and the Event Calendar.

Step Action

1. From left pane, choose Pages; scroll to Training Feature Events

2. From left pane select Training Feature Events

3. From right pane, select any Event to copy

4. Click

5. Click Note: Copy dialog box displays, where you can rename your “Page”

6. Type Page Name Note: * Indicates required field. When naming page, use small characters Note: Spaces and characters not allowed

7. Click on dialog box to save

8. Double-click number on the new “Page” you just created

9. Click Edit for “Featured Events”; article text dialog box displays

Participant Guide


Note: Insert or change Featured Events as required * Indicates required field

10. Click OK; page will display to show changes to Featured Events

Participant Guide


Module 4: Manage FAQs

Introduction This module provides information on adding and deleting an FAQ to the existing FAQ page of the sample site. It uses the divisional FAQ component. This exercise includes tagging. Tagging allows FAQs to be organized by category so site users get FAQs appropriate to their question. Skills for tagging are also used within product pages.

Module Objectives


Add a new FAQ

Delete an existing FAQ

Navigate to tag menu

Tag FAQs by category

Delete a tag

Create a new tag category

Reorder FAQs

Participant Guide


Lesson 1: Administer FAQs

Introduction In this lesson, we will demonstrate how you maintain and add the

following items in the FAQ component based on your Division:

Edit FAQ questions and answers

Delete a category

Assign category

Step Action

1. From left pane, select Pages

2. From right pane, double-click on Training-FAQ Note: Training-FAQ page displays in new tab

3. From “Accordion,” click Edit Note: Dialog box will display

4. From Select the categories for Accordion, you can do the following:

Delete category

Edit question and answer

Note: Ensure Need Accordion box is checked

5. Click OK

Participant Guide


Lesson 2: Add Items in FAQ Component

Introduction In this lesson, we will demonstrate how you maintain and add

the following items in the FAQ Component based on your Division:

Add FAQ question and answer

Step Action



3. From Sidekick, drag and drop the Accordion component to an empty area below the Accordion container Note: The empty area is designated by dash-line border and the text “drag components or assets here”

4. From “Accordion” just added, click Edit

Note: Dialog box will display

Participant Guide


5. From “Select the categories for Accordion,” you can do the following:

Add category

Add question and answer

Note: Make sure “Need Accordion?” box is checked

6. Click OK

Participant Guide


Lesson 3: Delete FAQs

Introduction In this lesson, we will demonstrate how you maintain the

following items in the FAQ component based on your Division:

Delete FAQ question and answer

Step Action



3. Click just above the question-and-answer pair desired for deletion

Participant Guide


Lesson 4: Add FAQ Tags

Introduction In this lesson, we will learn how to add and remove the

tags used to create the categories for FAQs

Step Action

1. From AEM menu bar, click

2. From left pane, expand BSS Note: In production, content authors will modify based on division

3. Expand Divisional Site

4. Select FAQ Category in left pane

5. Click from right pane Note: Create Tag dialog box displays

6. Insert Title Note: * Indicates required field

7. Insert Name Note: * Indicates required field. Name must be lowercase and no spaces or special characters

8. Type in Description

9. Click Create

10. Refresh Training – FAQ by Note: Verify the tag just added in Step 9 please confirm

11. Return to AEM WCM

Participant Guide


12. Navigate to FAQ page

13. Scroll down to Accordion component

14. Click Edit Note: Verify in the dialog box that the new tag added in Step 9 appears

Participant Guide


Module 5: Manage Articles

Introduction This module provides information on how to add a new article to the sample site. It uses the technique of copy/rename/edit to quickly create a new page using the same layout as other article pages.

Module Objectives


Copy an existing article page and modify it to create a new article detail page

Add a new article to appear on the Article Listing Page

Participant Guide


Lesson 1: Create Articles

Introduction In this lesson, we will learn how to create a new article page by

copying an existing article page.

Step Action

1. From Pages, scroll down left pane to Training Articles

2. Select Training Articles

3. From the right pane, select an Article

4. Click Copy from control panel

5. Click Paste Note: Dialog box displays

6. Edit Article Name

Note: Name must be lowercase and only contains dash or underscore and no spaces

7. Click Copy

8. From right pane, Open Page created in Step #6

9. Click Page Properties tab on Sidekick

10. Double-click Page Properties

11. Page Properties dialog box displays

Participant Guide


12. Edit Title, under Basic Tab

13. Click OK; page will refresh to show the new Title entered in Step 12

14. Edit the Banner component refer to Headline lesson for specific steps

15. From Article Page Component, click Edit

16. Edit the following dialog box:

17. Click OK

Participant Guide


Module 6: Manage Pages

Introduction This module provides information on how to load a page to the sample site. It uses the technique of copy/rename/edit. In this exercise, we will work with a product page. The same technique can be used with non-product pages. On product pages, the Product Loop is also used to organize the product pages by category. Tagging is also used on product pages, which allows products to show correctly when the product filter is used.

Module Objectives


Create a new product page by copy/rename/edit of an existing product page

Tag a page

Use product loop to organize where the product page appears on the site

Participant Guide


Lesson 1: Add Product and Edit of an Existing Product Detail Page

Introduction In this lesson, we will learn how to add and edit a Product Detail Page.

Step Action

1. From left pane, select the parent page for your new page

2. From right pane, select product page Note: Select a page similar to the one you want to create

3. Click on control bar

4. Click on control bar Note: Dialog box displays

5. From dialog box, enter Copy Name

6. Click Copy Note: New “named” Detail Page appears in right pane

7. Double-click on New Detail Page

8. From sidekick, click second tab:

Note: Page Properties dialog box displays

9. From Page Properties, change Title

10. Click OK

11. From banner, click Edit

Participant Guide


Note: Edit Component dialog box displays

12. Insert or change Banner Text

13. From dropdown, change Banner Color

14. Click OK

15. From Product Details, click Edit

Note: Content Author may need developer help for “Selection of Type” or “Selection of Product Variation”

16. Edit component displays, then click Text Tab

17. Insert or change Product Detail Description

18. Click Images tab Note: Images are located in the left pane

19. Click and drag image from left pane into the right pane

20. Click OK

21. From Multi Product Image, click Edit Note: Images dialog box displays

22. Click and drag images into Image areas Note: Expand Images dialog box to see all images for

Participant Guide


replacement or adding

23. Click OK Note: Next, let’s edit Divisional Tabs

24. Scroll to Divisional Tabs Note: In performing this next technique, maintain Abbott Standards

25. Click Edit; Configure Tabs dialog box displays

26. Change Tab Text

Note: * Indicates required field; can change order if required

27. Click OK Note: Next, let’s edit the Rich Text Editor

28. Select appropriate tab to edit

29. Scroll to Rich Text Editor Note: In performing this next technique maintain Abbott Standards

Participant Guide


30. Click Edit, Rich Text dialog box displays

31. Edit description as required

32. Click OK Note: Next, let’s edit Static Product

33. Scroll to Static Product Note: In performing this next technique maintain Abbott Standards

34. Click Edit; State Product dialog box displays

35. Choose General tab, edit Title and Product Information

Participant Guide


36. Click OK Note: Next, let’s edit Related Products

37. Scroll to Related Products

38. Click Edit; Related Products dialog box displays

39. Insert Product Title Note: Use ALL CAPS for Product Title

40. Click OK

41. From sidekick, Click tab Note: Page Properties dialog box displays

42. From Basic tab, edit the following:

Insert Title

Record Tags/Keywords path

Participant Guide


Participant Guide


Lesson 2: Add or Delete Products From the Product Loop Page

Introduction In this lesson, we will demonstrate how to add or delete Products from the Product Loop page

Step Action

1. From left pane, select appropriate Category page below pages Note: Category page would be of type Product Category Page Template

2. From right pane, click

3. Create New Page via Product Individual Page Template (for Product Listing)

Note: Create a page for each product you want to list in the product loop component. These pages are not the Product Detail pages. The pages you are constructing are not seen by the end user but are a means of populating the Product Loop component.

Participant Guide


The new page contains by default a Product Information component. Do not add any additional components to this page.

4. From right pane, double-click new page just created

5. Click Edit from the Product Information component

Note: Dialog box displays

6. Supply the following information:

From the Type Select tab, insert the below information:

o Product Title o Tag-click dropdown, navigate to BSS tab, then

select tag to categorize the product

Note: More than one tag can be selected


From the Type Select tab, insert the below information:

Participant Guide


o Product Description – short description

o Click Product path ; navigate to Product Detail page

Click OK


From Product Image tab, drop and drag image from left pane

Click OK Note: Repeat Steps 1 to 9 for each product to be displayed

9. From AEM WCM, click to publish Product Individual Page

Participant Guide


Lesson 3: Delete a Product from Product Listing

Introduction In this lesson, we will demonstrate how to remove a product from the product listing.

Step Action

1. Navigate to folder where products are listed

2. Deactivate the page for the product you want to remove

3. Repeat for additional products

4. Publish the product loop page upon completion

Participant Guide


divisional website portfolio aem content author training partcipant guide dec 1 final

Documents